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

feat: refresh forgot password page UI, integrate new icons, and update styling.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-07 23:51:13 +05:30
parent 68fc535b44
commit 0782da8abd
2 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/(auth)/forgot-password/page.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { authService, AuthService } from '@/services';
export default function ForgotPasswordPage() {
@@ -27,34 +28,36 @@ export default function ForgotPasswordPage() {
if (submitted) {
return (
<div className="bg-white rounded-[20px] p-8 shadow-sm">
<div className="text-center">
<div className="mb-6">
<svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</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">
We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
</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"
>
Back to Login
</Link>
<button
type="button"
onClick={() => {
setSubmitted(false);
setEmail('');
}}
className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
>
Try a different email
</button>
<div className="text-center">
<div className="mb-6">
<Image
src="/assets/icons/email-orange-icon.svg"
alt="Email sent"
width={64}
height={64}
className="mx-auto"
/>
</div>
<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 password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
</p>
<Link
href="/login"
className="inline-block w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors text-center"
>
Back to Login
</Link>
<button
type="button"
onClick={() => {
setSubmitted(false);
setEmail('');
}}
className="block w-full mt-4 text-[14px] text-[#00293d]/70 font-serif hover:text-[#00293d] transition-colors"
>
Try a different email
</button>
</div>
);
}
@@ -63,16 +66,16 @@ export default function ForgotPasswordPage() {
<>
{/* Forgot Password Heading */}
<div className="text-center mb-6">
<h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
<p className="text-sm text-[#00293d] px-4 leading-relaxed">
Enter your email address and we'll send you a link to reset your password
<h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Forget Your Password</h2>
<p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
Enter your registered email to reset your password.
</p>
</div>
{/* Forgot Password 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>
)}
@@ -85,7 +88,7 @@ export default function ForgotPasswordPage() {
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>
@@ -93,15 +96,26 @@ export default function ForgotPasswordPage() {
<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 ? 'Sending...' : 'Send Reset Link'}
{loading ? 'Sending...' : 'Submit'}
</button>
</form>
{/* Divider */}
<div className="my-6">
<div className="h-px bg-[#00293d]/20"></div>
</div>
{/* Back to Login */}
<div className="text-center mt-8">
<Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
<div className="flex justify-center items-center">
<Link href="/login" className="flex items-center gap-2 text-[#00293d] text-[14px] font-fractul hover:underline">
<Image
src="/assets/icons/arrow-back-icon.svg"
alt="Back"
width={20}
height={20}
/>
Back to Login
</Link>
</div>