forgot password in login page and account info implemented, sms.ir service works fine with sandbox key.
This commit is contained in:
@@ -1,28 +1,180 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { Lock } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { authApi } from '@/lib/api/auth';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { Toast } from '@/components/ui/shared/Toast';
|
||||
|
||||
type PasswordForm = {
|
||||
currentPassword: string;
|
||||
newPassword: string;
|
||||
confirmPassword: string;
|
||||
};
|
||||
|
||||
export default function AccountSettingsPage() {
|
||||
const t = useTranslations('settings');
|
||||
const tAuth = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
const tValidation = useTranslations('validation');
|
||||
const { user, isAuthReady } = useAuth();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const isResetFlow = searchParams.get('reset') === '1';
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const passwordSchema = useMemo(
|
||||
() =>
|
||||
z
|
||||
.object({
|
||||
currentPassword: z.string(),
|
||||
newPassword: z
|
||||
.string()
|
||||
.min(8, tValidation('passwordMinLength'))
|
||||
.regex(/[A-Z]/, tValidation('passwordUppercase'))
|
||||
.regex(/[0-9]/, tValidation('passwordNumber')),
|
||||
confirmPassword: z.string(),
|
||||
})
|
||||
.refine((data) => data.newPassword === data.confirmPassword, {
|
||||
message: tValidation('passwordsDoNotMatch'),
|
||||
path: ['confirmPassword'],
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (!isResetFlow && !data.currentPassword.trim()) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: tValidation('passwordRequired'),
|
||||
path: ['currentPassword'],
|
||||
});
|
||||
}
|
||||
}),
|
||||
[isResetFlow, tValidation],
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<PasswordForm>({
|
||||
resolver: zodResolver(passwordSchema),
|
||||
defaultValues: {
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthReady && !user) {
|
||||
router.replace('/login');
|
||||
}
|
||||
}, [isAuthReady, user, router]);
|
||||
|
||||
const onSubmit = async (data: PasswordForm) => {
|
||||
try {
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
setIsSubmitting(true);
|
||||
|
||||
await authApi.changePassword({
|
||||
...(isResetFlow ? {} : { currentPassword: data.currentPassword }),
|
||||
newPassword: data.newPassword,
|
||||
});
|
||||
|
||||
reset();
|
||||
setSuccessMessage(t('passwordChanged'));
|
||||
router.replace('/login');
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : t('passwordChangeFailed');
|
||||
setError(message || t('passwordChangeFailed'));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthReady || !user) {
|
||||
return (
|
||||
<p className="text-text-secondary text-sm">{tCommon('loadingEllipsis')}</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/today"
|
||||
className="text-sm text-primary hover:opacity-90"
|
||||
>
|
||||
<Link href="/today" className="text-sm text-primary hover:opacity-90">
|
||||
{tCommon('backToApp')}
|
||||
</Link>
|
||||
<h1 className="text-2xl font-semibold text-text-primary mt-4">{t('accountTitle')}</h1>
|
||||
<p className="text-text-secondary text-sm mt-2">{t('accountSubtitle')}</p>
|
||||
<p className="text-text-secondary text-sm mt-2">
|
||||
{isResetFlow ? t('resetPasswordSubtitle') : t('accountSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="surface-card p-6 space-y-3">
|
||||
<p className="text-sm text-text-secondary">{t('accountPlaceholder')}</p>
|
||||
<div className="surface-card p-6 sm:p-8 max-w-lg">
|
||||
<h2 className="text-lg font-medium text-text-primary mb-1">
|
||||
{isResetFlow ? t('resetPasswordTitle') : t('changePasswordTitle')}
|
||||
</h2>
|
||||
<p className="text-sm text-text-secondary mb-6">
|
||||
{user.email}
|
||||
{user.mobile ? ` · ${user.mobile}` : ''}
|
||||
</p>
|
||||
|
||||
<form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
|
||||
{!isResetFlow && (
|
||||
<Input
|
||||
label={t('currentPassword')}
|
||||
{...register('currentPassword')}
|
||||
type="password"
|
||||
placeholder={tAuth('passwordPlaceholder')}
|
||||
error={errors.currentPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Input
|
||||
label={t('newPassword')}
|
||||
{...register('newPassword')}
|
||||
type="password"
|
||||
placeholder={tAuth('passwordPlaceholder')}
|
||||
error={errors.newPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('confirmNewPassword')}
|
||||
{...register('confirmPassword')}
|
||||
type="password"
|
||||
placeholder={tAuth('passwordPlaceholder')}
|
||||
error={errors.confirmPassword?.message}
|
||||
icon={<Lock className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" variant="primary" isLoading={isSubmitting}>
|
||||
{isResetFlow ? t('setNewPassword') : t('updatePassword')}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{successMessage && (
|
||||
<Toast variant="success">{successMessage}</Toast>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
206
frontend/src/app/[locale]/(public)/forgot-password/page.tsx
Normal file
206
frontend/src/app/[locale]/(public)/forgot-password/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { Phone, ShieldCheck } from 'lucide-react';
|
||||
import { authApi } from '@/lib/api/auth';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Input } from '@/components/ui/shared/Input';
|
||||
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
|
||||
|
||||
type ForgotPasswordForm = {
|
||||
mobile: string;
|
||||
code: string;
|
||||
};
|
||||
|
||||
function normalizeIranMobile(input: string): string {
|
||||
let digits = input.replace(/\D/g, '');
|
||||
if (digits.startsWith('98') && digits.length === 12) digits = digits.slice(2);
|
||||
if (digits.startsWith('0') && digits.length === 11) digits = digits.slice(1);
|
||||
return digits;
|
||||
}
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const t = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
const tValidation = useTranslations('validation');
|
||||
const router = useRouter();
|
||||
const { refreshSession } = useAuth();
|
||||
const [step, setStep] = useState<'mobile' | 'code'>('mobile');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [isVerifying, setIsVerifying] = useState(false);
|
||||
const [sentMobile, setSentMobile] = useState('');
|
||||
|
||||
const schema = useMemo(
|
||||
() =>
|
||||
z.object({
|
||||
mobile: z
|
||||
.string()
|
||||
.min(1, tValidation('mobileRequired'))
|
||||
.refine((value) => /^9\d{9}$/.test(normalizeIranMobile(value)), {
|
||||
message: tValidation('mobileInvalid'),
|
||||
}),
|
||||
code: z.string(),
|
||||
}),
|
||||
[tValidation],
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
getValues,
|
||||
formState: { errors },
|
||||
} = useForm<ForgotPasswordForm>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { mobile: '', code: '' },
|
||||
});
|
||||
|
||||
const onSendCode = async () => {
|
||||
const mobile = getValues('mobile');
|
||||
const parsed = schema.safeParse({ mobile, code: '' });
|
||||
if (!parsed.success) {
|
||||
setError(parsed.error.issues[0]?.message ?? tValidation('mobileInvalid'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setError(null);
|
||||
setIsSending(true);
|
||||
await authApi.sendForgotPasswordCode(mobile);
|
||||
setSentMobile(mobile);
|
||||
setStep('code');
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : t('codeSendFailed');
|
||||
setError(message || t('codeSendFailed'));
|
||||
} finally {
|
||||
setIsSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onVerify = async (data: ForgotPasswordForm) => {
|
||||
if (!data.code.trim()) {
|
||||
setError(tValidation('codeRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setError(null);
|
||||
setIsVerifying(true);
|
||||
const response = await authApi.verifyForgotPasswordCode(
|
||||
sentMobile || data.mobile,
|
||||
data.code.trim(),
|
||||
);
|
||||
|
||||
const orgs = response.data.organizations;
|
||||
if (orgs.length === 1) {
|
||||
await authApi.selectOrganization(orgs[0].id);
|
||||
localStorage.setItem('currentOrganizationId', orgs[0].id);
|
||||
await refreshSession();
|
||||
router.push('/settings/account?reset=1');
|
||||
return;
|
||||
}
|
||||
|
||||
if (orgs.length > 1) {
|
||||
sessionStorage.setItem('authRedirect', '/settings/account?reset=1');
|
||||
await refreshSession();
|
||||
router.push('/select-organization');
|
||||
return;
|
||||
}
|
||||
|
||||
await refreshSession();
|
||||
router.push('/settings/account?reset=1');
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : t('verifyFailed');
|
||||
setError(message || t('verifyFailed'));
|
||||
} finally {
|
||||
setIsVerifying(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="absolute top-4 right-4">
|
||||
<TopBarControls />
|
||||
</div>
|
||||
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<Link href="/" className="flex justify-center">
|
||||
<span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
|
||||
</Link>
|
||||
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
|
||||
{t('forgotPasswordTitle')}
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-text-secondary">
|
||||
{step === 'mobile' ? t('forgotPasswordSubtitle') : t('codeSentHint')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="surface-card py-8 px-4 sm:px-10">
|
||||
<form
|
||||
className="space-y-6"
|
||||
onSubmit={handleSubmit(step === 'code' ? onVerify : () => undefined)}
|
||||
>
|
||||
{step === 'mobile' ? (
|
||||
<Input
|
||||
label={t('mobile')}
|
||||
{...register('mobile')}
|
||||
type="tel"
|
||||
inputMode="tel"
|
||||
autoComplete="tel"
|
||||
placeholder={t('mobilePlaceholder')}
|
||||
error={errors.mobile?.message}
|
||||
icon={<Phone className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
label={t('verificationCode')}
|
||||
{...register('code')}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
placeholder={t('verificationCodePlaceholder')}
|
||||
error={errors.code?.message}
|
||||
icon={<ShieldCheck className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'mobile' ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
isLoading={isSending}
|
||||
fullWidth
|
||||
onClick={() => void onSendCode()}
|
||||
>
|
||||
{t('sendCode')}
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" variant="primary" isLoading={isVerifying} fullWidth>
|
||||
{t('verifyAndContinue')}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<p className="text-center text-sm text-text-secondary">
|
||||
<Link href="/login" className="font-medium text-primary hover:opacity-90">
|
||||
{t('backToSignIn')}
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { Mail, Lock, User } from 'lucide-react';
|
||||
import { Mail, Lock, User, Phone } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
|
||||
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
|
||||
@@ -17,6 +17,7 @@ import { TopBarControls } from '@/components/ui/shared/TopBarControls';
|
||||
type RegisterForm = {
|
||||
name: string;
|
||||
email: string;
|
||||
mobile: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
organizationName: string;
|
||||
@@ -24,6 +25,13 @@ type RegisterForm = {
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
};
|
||||
|
||||
function normalizeIranMobile(input: string): string {
|
||||
let digits = input.replace(/\D/g, '');
|
||||
if (digits.startsWith('98') && digits.length === 12) digits = digits.slice(2);
|
||||
if (digits.startsWith('0') && digits.length === 11) digits = digits.slice(1);
|
||||
return digits;
|
||||
}
|
||||
|
||||
export default function RegisterPage() {
|
||||
const t = useTranslations('auth');
|
||||
const tCommon = useTranslations('common');
|
||||
@@ -38,6 +46,12 @@ export default function RegisterPage() {
|
||||
.object({
|
||||
name: z.string().min(2, tValidation('nameMinLength')),
|
||||
email: z.string().email(tValidation('emailInvalid')),
|
||||
mobile: z
|
||||
.string()
|
||||
.min(1, tValidation('mobileRequired'))
|
||||
.refine((value) => /^9\d{9}$/.test(normalizeIranMobile(value)), {
|
||||
message: tValidation('mobileInvalid'),
|
||||
}),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, tValidation('passwordMinLength'))
|
||||
@@ -74,7 +88,7 @@ export default function RegisterPage() {
|
||||
const handleNext = async () => {
|
||||
const fieldsToValidate =
|
||||
step === 1
|
||||
? (['name', 'email', 'password', 'confirmPassword'] as const)
|
||||
? (['name', 'email', 'mobile', 'password', 'confirmPassword'] as const)
|
||||
: (['organizationName', 'organizationEmail', 'organizationType'] as const);
|
||||
|
||||
const isValid = await trigger([...fieldsToValidate]);
|
||||
@@ -90,6 +104,7 @@ export default function RegisterPage() {
|
||||
data.email,
|
||||
data.password,
|
||||
data.name,
|
||||
data.mobile,
|
||||
data.organizationName,
|
||||
data.organizationEmail,
|
||||
data.organizationType,
|
||||
@@ -157,6 +172,16 @@ export default function RegisterPage() {
|
||||
error={errors.email?.message}
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('mobile')}
|
||||
{...register('mobile')}
|
||||
type="tel"
|
||||
inputMode="tel"
|
||||
autoComplete="tel"
|
||||
placeholder={t('mobilePlaceholder')}
|
||||
error={errors.mobile?.message}
|
||||
icon={<Phone className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label={t('password')}
|
||||
{...register('password')}
|
||||
|
||||
Reference in New Issue
Block a user