Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Apple social login and user type toggles to authentication pages, alongside various UI and text refinements.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-07 23:48:49 +05:30
parent 1baad05e79
commit 68fc535b44
3 changed files with 66 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/icons/apple.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

54
src/app/(auth)/login/page.tsx
View File

@@ -75,16 +75,34 @@ export default function LoginPage() {
<> <>
{/* Login Heading */} {/* Login Heading */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Login</h2> <h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Login</h2>
<p className="text-sm text-[#00293d] px-4 leading-relaxed"> <p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
Sign in to your account to access your real estate dashboard and manage your properties Login or create an account to enjoy FREE consultation on all property inquiries.
</p> </p>
</div> </div>
{/* User Type Toggle */}
<div className="flex justify-center mb-8">
<div className="inline-flex bg-[#f0f5fc] rounded-[15px] p-0.5">
<button
type="button"
className="px-10 py-2 text-[14px] font-semibold rounded-[15px] transition-all duration-200 font-serif bg-[#00293d] text-[#f0f5fc] border border-[#00293d]"
>
User
</button>
<button
type="button"
className="px-10 py-2 text-[14px] font-semibold rounded-[15px] transition-all duration-200 font-serif text-[#00293d]"
>
Admin
</button>
</div>
</div>
{/* Login Form */} {/* Login Form */}
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
{error && ( {error && (
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[20px] text-sm"> <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif">
{error} {error}
</div> </div>
)} )}
@@ -97,7 +115,7 @@ export default function LoginPage() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all" className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
/> />
</div> </div>
@@ -109,7 +127,7 @@ export default function LoginPage() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all pr-14" className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all pr-14"
/> />
<button <button
type="button" type="button"
@@ -131,8 +149,8 @@ export default function LoginPage() {
{/* Forgot Password Link */} {/* Forgot Password Link */}
<div className="text-right"> <div className="text-right">
<Link href="/forgot-password" className="text-[#00293d] text-sm font-light hover:underline"> <Link href="/forgot-password" className="text-[#00293d] text-[14px] font-light font-serif leading-[24px] hover:underline">
Forgot Password? Forget Your Password ?
</Link> </Link>
</div> </div>
@@ -140,29 +158,29 @@ export default function LoginPage() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
{loading ? 'Signing in...' : 'Login'} {loading ? 'Signing in...' : 'Login'}
</button> </button>
</form> </form>
{/* Don't Have Account */}
<div className="text-center mt-8">
<span className="text-[#00293d] text-sm">Don&apos;t Have An Account ? </span>
<Link href="/signup" className="text-[#00293d] font-light text-sm hover:underline">
Sign Up
</Link>
</div>
{/* Divider */} {/* Divider */}
<div className="flex items-center my-6"> <div className="flex items-center my-6">
<div className="flex-1 h-px bg-[#00293d]/20"></div> <div className="flex-1 h-px bg-[#00293d]/20"></div>
<span className="px-4 text-sm text-[#00293d] font-light">Or</span> <span className="px-4 text-[14px] text-[#00293d] font-serif">Or</span>
<div className="flex-1 h-px bg-[#00293d]/20"></div> <div className="flex-1 h-px bg-[#00293d]/20"></div>
</div> </div>
{/* Social Login Icons */} {/* Social Login Icons */}
<div className="flex justify-center items-center gap-8"> <div className="flex justify-center items-center gap-8">
{/* Apple */}
<button
type="button"
className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
>
<img src="/assets/icons/apple.svg" alt="Apple" className="w-6 h-6" />
</button>
{/* Google */} {/* Google */}
<button <button
type="button" type="button"

50
src/app/(auth)/signup/page.tsx
View File

@@ -103,13 +103,13 @@ export default function SignUpPage() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
</div> </div>
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2> <h2 className="text-[24px] font-normal text-[#00293d] font-fractul mb-3">Check Your Email</h2>
<p className="text-sm text-[#00293d]/70 mb-6"> <p className="text-[14px] text-[#00293d]/70 font-serif mb-6">
We've sent a verification link to <strong>{email}</strong>. Please check your inbox and click the link to verify your account before logging in. We've sent a verification link to <strong>{email}</strong>. Please check your inbox and click the link to verify your account before logging in.
</p> </p>
<Link <Link
href="/login" href="/login"
className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center" className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[14px] font-fractul rounded-[7px] transition-colors text-center"
> >
Go to Login Go to Login
</Link> </Link>
@@ -125,21 +125,21 @@ export default function SignUpPage() {
<> <>
{/* Sign Up Heading */} {/* Sign Up Heading */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Sign Up</h2> <h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Sign Up</h2>
<p className="text-sm text-[#00293d] px-4 leading-relaxed"> <p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
Sign in or create an account to showcase your skills & expertise to millions of people starting their real estate journey today" Sign in or create an account to showcase your skills & expertise to millions of people starting their real estate journey today"
</p> </p>
</div> </div>
{/* User Type Toggle */} {/* User Type Toggle */}
<div className="flex justify-center mb-8"> <div className="flex justify-center mb-8">
<div className="inline-flex bg-[#f0f5fc] rounded-[20px] p-0.5"> <div className="inline-flex bg-[#f0f5fc] rounded-[15px] p-0.5">
<button <button
type="button" type="button"
onClick={() => setUserType('USER')} onClick={() => setUserType('USER')}
className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${ className={`px-10 py-2 text-[14px] font-medium rounded-[15px] transition-all duration-200 font-serif ${
userType === 'USER' userType === 'USER'
? 'bg-[#00293d] text-[#f0f5fc]' ? 'bg-[#00293d] text-[#f0f5fc] border border-[#00293d]'
: 'text-[#00293d]' : 'text-[#00293d]'
}`} }`}
> >
@@ -148,9 +148,9 @@ export default function SignUpPage() {
<button <button
type="button" type="button"
onClick={() => setUserType('AGENT')} onClick={() => setUserType('AGENT')}
className={`px-7 py-2 text-sm font-light rounded-[20px] transition-all duration-200 ${ className={`px-10 py-2 text-[14px] font-medium rounded-[15px] transition-all duration-200 font-serif ${
userType === 'AGENT' userType === 'AGENT'
? 'bg-[#00293d] text-[#f0f5fc]' ? 'bg-[#00293d] text-[#f0f5fc] border border-[#00293d]'
: 'text-[#00293d]' : 'text-[#00293d]'
}`} }`}
> >
@@ -162,7 +162,7 @@ export default function SignUpPage() {
{/* Sign Up Form */} {/* Sign Up Form */}
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
{error && ( {error && (
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[20px] text-sm"> <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif">
{error} {error}
</div> </div>
)} )}
@@ -176,7 +176,7 @@ export default function SignUpPage() {
value={firstName} value={firstName}
onChange={(e) => setFirstName(e.target.value)} onChange={(e) => setFirstName(e.target.value)}
required required
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all ${ className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all ${
getFieldError('firstName') ? 'ring-2 ring-red-400' : '' getFieldError('firstName') ? 'ring-2 ring-red-400' : ''
}`} }`}
/> />
@@ -190,7 +190,7 @@ export default function SignUpPage() {
placeholder="Last Name" placeholder="Last Name"
value={lastName} value={lastName}
onChange={(e) => setLastName(e.target.value)} onChange={(e) => setLastName(e.target.value)}
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all ${ className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all ${
getFieldError('lastName') ? 'ring-2 ring-red-400' : '' getFieldError('lastName') ? 'ring-2 ring-red-400' : ''
}`} }`}
/> />
@@ -208,7 +208,7 @@ export default function SignUpPage() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all ${ className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all ${
getFieldError('email') ? 'ring-2 ring-red-400' : '' getFieldError('email') ? 'ring-2 ring-red-400' : ''
}`} }`}
/> />
@@ -226,7 +226,7 @@ export default function SignUpPage() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all pr-14 ${ className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all pr-14 ${
getFieldError('password') ? 'ring-2 ring-red-400' : '' getFieldError('password') ? 'ring-2 ring-red-400' : ''
}`} }`}
/> />
@@ -250,7 +250,7 @@ export default function SignUpPage() {
{getFieldError('password') && ( {getFieldError('password') && (
<p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('password')}</p> <p className="text-red-500 text-xs mt-1 ml-2">{getFieldError('password')}</p>
)} )}
<p className="text-[#00293d]/60 text-xs mt-2 ml-2"> <p className="text-[#00293d]/60 text-xs mt-2 ml-2 font-serif">
Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character
</p> </p>
</div> </div>
@@ -263,7 +263,7 @@ export default function SignUpPage() {
onChange={(e) => setSelectedAgentTypeId(e.target.value)} onChange={(e) => setSelectedAgentTypeId(e.target.value)}
required required
disabled={loadingAgentTypes} disabled={loadingAgentTypes}
className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all appearance-none cursor-pointer ${ className={`w-full px-6 py-6 bg-[#f0f5fc] rounded-[7px] text-[#00293d] text-[14px] font-light font-serif focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all appearance-none cursor-pointer ${
!selectedAgentTypeId ? 'text-[#00293d]/60' : '' !selectedAgentTypeId ? 'text-[#00293d]/60' : ''
} ${getFieldError('agentTypeId') ? 'ring-2 ring-red-400' : ''}`} } ${getFieldError('agentTypeId') ? 'ring-2 ring-red-400' : ''}`}
style={{ style={{
@@ -290,7 +290,7 @@ export default function SignUpPage() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
{loading ? 'Creating Account...' : 'Sign Up'} {loading ? 'Creating Account...' : 'Sign Up'}
</button> </button>
@@ -298,8 +298,8 @@ export default function SignUpPage() {
{/* Already Have Account */} {/* Already Have Account */}
<div className="text-center mt-8"> <div className="text-center mt-8">
<span className="text-[#00293d] text-sm">Already Have An Account ? </span> <span className="text-[#00293d] text-[14px] font-serif">Already Have An Account ? </span>
<Link href="/login" className="text-[#00293d] font-light text-sm hover:underline"> <Link href="/login" className="text-[#00293d] font-bold text-[14px] font-fractul hover:underline">
Login Login
</Link> </Link>
</div> </div>
@@ -307,12 +307,20 @@ export default function SignUpPage() {
{/* Divider */} {/* Divider */}
<div className="flex items-center my-6"> <div className="flex items-center my-6">
<div className="flex-1 h-px bg-[#00293d]/20"></div> <div className="flex-1 h-px bg-[#00293d]/20"></div>
<span className="px-4 text-sm text-[#00293d] font-light">Or</span> <span className="px-4 text-[14px] text-[#00293d] font-serif">Or</span>
<div className="flex-1 h-px bg-[#00293d]/20"></div> <div className="flex-1 h-px bg-[#00293d]/20"></div>
</div> </div>
{/* Social Login Icons */} {/* Social Login Icons */}
<div className="flex justify-center items-center gap-8"> <div className="flex justify-center items-center gap-8">
{/* Apple */}
<button
type="button"
className="w-10 h-10 flex items-center justify-center hover:opacity-70 transition-opacity"
>
<img src="/assets/icons/apple.svg" alt="Apple" className="w-6 h-6" />
</button>
{/* Google */} {/* Google */}
<button <button
type="button" type="button"