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 */}
<div className="text-center mb-6">
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Login</h2>
<p className="text-sm text-[#00293d] px-4 leading-relaxed">
Sign in to your account to access your real estate dashboard and manage your properties
<h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Login</h2>
<p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
Login or create an account to enjoy FREE consultation on all property inquiries.
</p>
</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 */}
<form onSubmit={handleSubmit} className="space-y-5">
{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}
</div>
)}
@@ -97,7 +115,7 @@ export default function LoginPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
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>
@@ -109,7 +127,7 @@ export default function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
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
type="button"
@@ -131,8 +149,8 @@ export default function LoginPage() {
{/* Forgot Password Link */}
<div className="text-right">
<Link href="/forgot-password" className="text-[#00293d] text-sm font-light hover:underline">
Forgot Password?
<Link href="/forgot-password" className="text-[#00293d] text-[14px] font-light font-serif leading-[24px] hover:underline">
Forget Your Password ?
</Link>
</div>
@@ -140,29 +158,29 @@ export default function LoginPage() {
<button
type="submit"
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'}
</button>
</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 */}
<div className="flex items-center my-6">
<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>
{/* Social Login Icons */}
<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 */}
<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" />
</svg>
</div>
<h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
<p className="text-sm text-[#00293d]/70 mb-6">
<h2 className="text-[24px] font-normal text-[#00293d] font-fractul mb-3">Check Your Email</h2>
<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.
</p>
<Link
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
</Link>
@@ -125,21 +125,21 @@ export default function SignUpPage() {
<>
{/* Sign Up Heading */}
<div className="text-center mb-6">
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Sign Up</h2>
<p className="text-sm text-[#00293d] px-4 leading-relaxed">
<h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Sign Up</h2>
<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"
</p>
</div>
{/* User Type Toggle */}
<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
type="button"
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'
? 'bg-[#00293d] text-[#f0f5fc]'
? 'bg-[#00293d] text-[#f0f5fc] border border-[#00293d]'
: 'text-[#00293d]'
}`}
>
@@ -148,9 +148,9 @@ export default function SignUpPage() {
<button
type="button"
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'
? 'bg-[#00293d] text-[#f0f5fc]'
? 'bg-[#00293d] text-[#f0f5fc] border border-[#00293d]'
: 'text-[#00293d]'
}`}
>
@@ -162,7 +162,7 @@ export default function SignUpPage() {
{/* Sign Up Form */}
<form onSubmit={handleSubmit} className="space-y-5">
{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}
</div>
)}
@@ -176,7 +176,7 @@ export default function SignUpPage() {
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
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' : ''
}`}
/>
@@ -190,7 +190,7 @@ export default function SignUpPage() {
placeholder="Last Name"
value={lastName}
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' : ''
}`}
/>
@@ -208,7 +208,7 @@ export default function SignUpPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
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' : ''
}`}
/>
@@ -226,7 +226,7 @@ export default function SignUpPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
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' : ''
}`}
/>
@@ -250,7 +250,7 @@ export default function SignUpPage() {
{getFieldError('password') && (
<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
</p>
</div>
@@ -263,7 +263,7 @@ export default function SignUpPage() {
onChange={(e) => setSelectedAgentTypeId(e.target.value)}
required
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' : ''
} ${getFieldError('agentTypeId') ? 'ring-2 ring-red-400' : ''}`}
style={{
@@ -290,7 +290,7 @@ export default function SignUpPage() {
<button
type="submit"
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'}
</button>
@@ -298,8 +298,8 @@ export default function SignUpPage() {
{/* Already Have Account */}
<div className="text-center mt-8">
<span className="text-[#00293d] text-sm">Already Have An Account ? </span>
<Link href="/login" className="text-[#00293d] font-light text-sm hover:underline">
<span className="text-[#00293d] text-[14px] font-serif">Already Have An Account ? </span>
<Link href="/login" className="text-[#00293d] font-bold text-[14px] font-fractul hover:underline">
Login
</Link>
</div>
@@ -307,12 +307,20 @@ export default function SignUpPage() {
{/* Divider */}
<div className="flex items-center my-6">
<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>
{/* Social Login Icons */}
<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 */}
<button
type="button"