390 lines
20 KiB
TypeScript
390 lines
20 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useSeller } from '../../context/SellerContext';
|
|
|
|
export default function LoginPage() {
|
|
const {
|
|
email, setEmail,
|
|
password, setPassword,
|
|
phone, setPhone,
|
|
handleLoginSubmit,
|
|
showLoginPass, setShowLoginPass,
|
|
setCurrentPage,
|
|
} = useSeller();
|
|
|
|
const [activeTab, setActiveTab] = useState<'email' | 'otp'>('email');
|
|
const [otpSent, setOtpSent] = useState(false);
|
|
const [enteredOtp, setEnteredOtp] = useState('');
|
|
const [rememberMe, setRememberMe] = useState(true);
|
|
|
|
const handleSendOtp = () => {
|
|
if (!phone || phone.length < 10) {
|
|
alert('Please enter a valid 10-digit mobile number');
|
|
return;
|
|
}
|
|
setOtpSent(true);
|
|
alert(`OTP 123456 sent to +91 ${phone}`);
|
|
};
|
|
|
|
const handleOtpLogin = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!enteredOtp) {
|
|
alert('Please enter the OTP');
|
|
return;
|
|
}
|
|
handleLoginSubmit(e);
|
|
};
|
|
|
|
return (
|
|
<div className="seller-login-page py-6 px-4" style={{ minHeight: 'calc(100vh - 120px)', backgroundColor: 'var(--trad-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<div className="container" style={{ maxWidth: '1080px', width: '100%' }}>
|
|
{/* Split Card Shell matching Stitch Screen 11 */}
|
|
<div
|
|
className="login-card-shell"
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 7fr)',
|
|
backgroundColor: '#ffffff',
|
|
borderRadius: '24px',
|
|
border: '1px solid #E5E0DC',
|
|
boxShadow: '0 12px 40px -10px rgba(0, 0, 0, 0.08)',
|
|
overflow: 'hidden',
|
|
minHeight: '620px'
|
|
}}
|
|
>
|
|
{/* Left Column: Inspiring Artisan Showcase & Value Prop */}
|
|
<div
|
|
className="artisan-showcase-panel is-hidden-mobile"
|
|
style={{
|
|
backgroundColor: '#FAF8F6',
|
|
borderRight: '1px solid #E5E0DC',
|
|
padding: '2.5rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
minWidth: 0
|
|
}}
|
|
>
|
|
<div>
|
|
{/* Seller Hub Badge */}
|
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem', backgroundColor: '#FBECEE', color: '#791B2C', borderRadius: '9999px', padding: '4px 12px', fontSize: '0.75rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: '1rem' }}>
|
|
<i className="fa-solid fa-star" style={{ fontSize: '0.7rem' }}></i>
|
|
<span>Seller Hub</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h2 style={{ fontSize: '1.45rem', fontWeight: 800, color: '#1A1A1A', lineHeight: 1.35, letterSpacing: '-0.02em', marginBottom: '1.25rem' }}>
|
|
Beginning our journey to connect authentic Indian artisans with the world.
|
|
</h2>
|
|
|
|
{/* Authentic Artisan Photography Showcase */}
|
|
<div style={{ borderRadius: '16px', overflow: 'hidden', border: '1px solid #E5E0DC', marginBottom: '1.5rem', boxShadow: '0 2px 8px rgba(0,0,0,0.04)', position: 'relative' }}>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?auto=format&fit=crop&q=80&w=800"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src = "https://lh3.googleusercontent.com/aida-public/AB6AXuAAFsGHQxH4paIeyYZq8omfEOk4T6ZEJqZYRodaOcQHD0LtVHFHgCIbibIROjn374aCnXLV8lMu_a4PAiB2hSlSCweYGsHwS5Yo_qSy1nNAZPLlYCBJAm4rGsYoeyu_UDpTNR8eQjl_nUnYEjlNe_bS3LYk8VhaJnlE2uy_LsQmUuW-JWNYEqV9vbFeeG1VBgLjqUD7HixjvwxkWx9prT2WTwoTN0fOnHqxndcVNs1jPMAkFLc2y9082g";
|
|
}}
|
|
alt="Indian artisan potter shaping handcrafted pottery"
|
|
style={{ width: '100%', height: '180px', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Value Props Checklist */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<div style={{ width: '22px', height: '22px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.7rem', flexShrink: 0, fontWeight: 700 }}>
|
|
<i className="fa-solid fa-check"></i>
|
|
</div>
|
|
<span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>Zero registration & zero listing fees</span>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<div style={{ width: '22px', height: '22px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.7rem', flexShrink: 0, fontWeight: 700 }}>
|
|
<i className="fa-solid fa-check"></i>
|
|
</div>
|
|
<span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>100% direct bank payouts on schedule</span>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<div style={{ width: '22px', height: '22px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.7rem', flexShrink: 0, fontWeight: 700 }}>
|
|
<i className="fa-solid fa-check"></i>
|
|
</div>
|
|
<span style={{ fontSize: '0.88rem', fontWeight: 500, color: '#403B37' }}>Pan-India delivery covering 15,000+ pin codes</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Note */}
|
|
<div style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid #E5E0DC' }}>
|
|
<p style={{ fontSize: '0.75rem', color: '#8A8A82', margin: 0 }}>
|
|
Protected by 256-bit SSL encryption & AEO certification standards.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Interactive Login Portal */}
|
|
<div
|
|
className="seller-login-panel"
|
|
style={{
|
|
backgroundColor: '#ffffff',
|
|
padding: '2.5rem 2.75rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
minWidth: 0
|
|
}}
|
|
>
|
|
<div>
|
|
{/* Header Block */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
|
|
<h1 style={{ fontSize: '1.65rem', fontWeight: 800, color: '#4A0E18', letterSpacing: '-0.02em', margin: 0 }}>
|
|
Welcome back, Maker
|
|
</h1>
|
|
<span style={{ fontSize: '0.72rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', backgroundColor: '#F6F3F2', border: '1px solid #E5E0DC', color: '#5F5E5A', padding: '3px 8px', borderRadius: '6px' }}>
|
|
Seller ID Portal
|
|
</span>
|
|
</div>
|
|
<p style={{ fontSize: '0.88rem', color: '#5F5E5A', marginBottom: '1.75rem' }}>
|
|
Access your dashboard, manage orders, and grow your authentic craft brand.
|
|
</p>
|
|
|
|
{/* Login Method Tabs */}
|
|
<div style={{ display: 'flex', backgroundColor: '#F6F3F2', borderRadius: '10px', padding: '4px', border: '1px solid #E5E0DC', marginBottom: '1.5rem' }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('email')}
|
|
style={{
|
|
flex: 1,
|
|
padding: '8px 12px',
|
|
borderRadius: '8px',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
fontSize: '0.84rem',
|
|
fontWeight: activeTab === 'email' ? 700 : 500,
|
|
backgroundColor: activeTab === 'email' ? '#ffffff' : 'transparent',
|
|
color: activeTab === 'email' ? '#1A1A1A' : '#5F5E5A',
|
|
boxShadow: activeTab === 'email' ? '0 1px 3px rgba(0,0,0,0.06)' : 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '0.5rem',
|
|
transition: 'all 0.15s ease'
|
|
}}
|
|
>
|
|
<i className="fa-solid fa-envelope" style={{ color: activeTab === 'email' ? '#791B2C' : '#8A8A82' }}></i>
|
|
<span>Email & Password</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('otp')}
|
|
style={{
|
|
flex: 1,
|
|
padding: '8px 12px',
|
|
borderRadius: '8px',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
fontSize: '0.84rem',
|
|
fontWeight: activeTab === 'otp' ? 700 : 500,
|
|
backgroundColor: activeTab === 'otp' ? '#ffffff' : 'transparent',
|
|
color: activeTab === 'otp' ? '#1A1A1A' : '#5F5E5A',
|
|
boxShadow: activeTab === 'otp' ? '0 1px 3px rgba(0,0,0,0.06)' : 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '0.5rem',
|
|
transition: 'all 0.15s ease'
|
|
}}
|
|
>
|
|
<i className="fa-solid fa-mobile-screen" style={{ color: activeTab === 'otp' ? '#791B2C' : '#8A8A82' }}></i>
|
|
<span>Mobile OTP Login</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form Tab 1: Email & Password */}
|
|
{activeTab === 'email' ? (
|
|
<form onSubmit={handleLoginSubmit}>
|
|
<div className="field mb-4">
|
|
<label className="label" htmlFor="seller-email" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', marginBottom: '0.35rem' }}>
|
|
Registered Email Address
|
|
</label>
|
|
<div className="control has-icons-left">
|
|
<input
|
|
id="seller-email"
|
|
type="text"
|
|
className="input"
|
|
placeholder="you@example.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
style={{ borderColor: '#D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
|
/>
|
|
<span className="icon is-left has-text-grey">
|
|
<i className="fa-solid fa-envelope"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field mb-4">
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
|
|
<label className="label" htmlFor="seller-pass" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', margin: 0 }}>
|
|
Password
|
|
</label>
|
|
<a href="#forgot" style={{ fontSize: '0.8rem', fontWeight: 600, color: '#791B2C', textDecoration: 'none' }}>
|
|
Forgot password?
|
|
</a>
|
|
</div>
|
|
<div className="control has-icons-left has-icons-right">
|
|
<input
|
|
id="seller-pass"
|
|
type={showLoginPass ? 'text' : 'password'}
|
|
className="input"
|
|
placeholder="••••••••"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
style={{ borderColor: '#D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
|
/>
|
|
<span className="icon is-left has-text-grey">
|
|
<i className="fa-solid fa-lock"></i>
|
|
</span>
|
|
<span
|
|
className="icon is-right is-clickable"
|
|
onClick={() => setShowLoginPass(!showLoginPass)}
|
|
style={{ pointerEvents: 'all', cursor: 'pointer' }}
|
|
>
|
|
<i className={`fa-solid ${showLoginPass ? 'fa-eye-slash' : 'fa-eye'}`}></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field mb-5">
|
|
<label className="checkbox" htmlFor="remember-me" style={{ fontSize: '0.82rem', color: '#59524D', display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
|
|
<input
|
|
id="remember-me"
|
|
type="checkbox"
|
|
checked={rememberMe}
|
|
onChange={(e) => setRememberMe(e.target.checked)}
|
|
style={{ accentColor: '#791B2C', width: '16px', height: '16px' }}
|
|
/>
|
|
<span>Remember this device for 30 days</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="button is-fullwidth has-text-weight-bold"
|
|
style={{ backgroundColor: '#791B2C', color: '#ffffff', borderRadius: '8px', height: '44px', border: 'none', fontSize: '0.92rem', boxShadow: '0 2px 8px rgba(121, 27, 44, 0.25)' }}
|
|
>
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
) : (
|
|
/* Form Tab 2: Mobile OTP */
|
|
<form onSubmit={handleOtpLogin}>
|
|
<div className="field mb-4">
|
|
<label className="label" htmlFor="seller-phone" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', marginBottom: '0.35rem' }}>
|
|
Registered Mobile Number
|
|
</label>
|
|
<div className="field has-addons">
|
|
<p className="control">
|
|
<span className="button is-static" style={{ backgroundColor: '#F6F3F2', border: '1px solid #D1CAC7', borderRight: 'none', borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px', height: '42px', fontSize: '0.85rem', fontWeight: 600 }}>
|
|
IN +91
|
|
</span>
|
|
</p>
|
|
<p className="control is-expanded">
|
|
<input
|
|
id="seller-phone"
|
|
type="tel"
|
|
className="input"
|
|
placeholder="Enter 10-digit mobile number"
|
|
maxLength={10}
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
style={{ border: '1px solid #D1CAC7', borderRadius: 0, height: '42px', fontSize: '0.9rem' }}
|
|
/>
|
|
</p>
|
|
<p className="control">
|
|
<button
|
|
type="button"
|
|
className="button has-text-weight-semibold"
|
|
onClick={handleSendOtp}
|
|
style={{ backgroundColor: '#FBECEE', color: '#791B2C', border: '1px solid #D1CAC7', borderLeft: 'none', borderTopRightRadius: '8px', borderBottomRightRadius: '8px', height: '42px', fontSize: '0.85rem' }}
|
|
>
|
|
{otpSent ? 'Resend OTP' : 'Get OTP'}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<p className="help has-text-grey" style={{ fontSize: '0.75rem', marginTop: '0.25rem' }}>A 6-digit verification code will be sent via SMS.</p>
|
|
</div>
|
|
|
|
{otpSent && (
|
|
<div className="field mb-5">
|
|
<label className="label" htmlFor="seller-otp" style={{ fontSize: '0.82rem', fontWeight: 600, color: '#333333', marginBottom: '0.35rem' }}>
|
|
Enter 6-digit OTP
|
|
</label>
|
|
<div className="control has-icons-left">
|
|
<input
|
|
id="seller-otp"
|
|
type="text"
|
|
className="input"
|
|
placeholder="123456"
|
|
maxLength={6}
|
|
value={enteredOtp}
|
|
onChange={(e) => setEnteredOtp(e.target.value)}
|
|
style={{ border: '1px solid #D1CAC7', borderRadius: '8px', height: '42px', fontSize: '0.9rem' }}
|
|
/>
|
|
<span className="icon is-left has-text-grey">
|
|
<i className="fa-solid fa-key"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="button is-fullwidth has-text-weight-bold"
|
|
aria-label="Sign In"
|
|
style={{ backgroundColor: '#791B2C', color: '#ffffff', borderRadius: '8px', height: '44px', border: 'none', fontSize: '0.92rem', boxShadow: '0 2px 8px rgba(121, 27, 44, 0.25)' }}
|
|
>
|
|
Log In to Seller Hub
|
|
</button>
|
|
</form>
|
|
)}
|
|
|
|
{/* Registration Link */}
|
|
<div style={{ textAlign: 'center', marginTop: '1.5rem', paddingTop: '1.25rem', borderTop: '1px solid #E5E0DC' }}>
|
|
<p style={{ fontSize: '0.86rem', color: '#5F5E5A', margin: 0 }}>
|
|
Don't have a seller account yet?{' '}
|
|
<a
|
|
onClick={() => { setCurrentPage('profile-completion'); window.scrollTo(0, 0); }}
|
|
style={{ color: '#791B2C', fontWeight: 700, cursor: 'pointer' }}
|
|
>
|
|
Register as a seller →
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Trust Badges & Compliance Row */}
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '1.25rem', marginTop: '1.75rem', paddingTop: '1rem', borderTop: '1px solid #F0ECE9', flexWrap: 'wrap' }}>
|
|
<span style={{ fontSize: '0.75rem', color: '#666666', display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}>
|
|
<i className="fa-solid fa-shield-halved" style={{ color: '#1B7D36' }}></i> 100% Secure SSL Bank-Grade Encryption
|
|
</span>
|
|
<span style={{ fontSize: '0.75rem', color: '#999999' }}>•</span>
|
|
<span style={{ fontSize: '0.75rem', color: '#666666', display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}>
|
|
<i className="fa-solid fa-certificate" style={{ color: '#B87333' }}></i> ODOP & GI Verified Artisans
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>{`
|
|
@media (max-width: 768px) {
|
|
.login-card-shell {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|