feat: Thêm component AuthControls chứa bộ chuyển đổi theme và ngôn ngữ vào các trang xác thực.
This commit is contained in:
Ho Ngoc Hai
@@ -10,6 +10,7 @@ import { Button } from '@/features/shared/components/ui/button';
|
||||
import { Input } from '@/features/shared/components/ui/input';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/features/shared/components/ui/card';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { AuthControls } from '@/features/shared/components/layout/auth-controls';
|
||||
|
||||
/**
|
||||
* EN: Create forgot password schema with translated messages
|
||||
@@ -108,159 +109,162 @@ export default function ForgotPasswordPage() {
|
||||
return (
|
||||
// EN: Centered forgot password form layout with dark mode background
|
||||
// VI: Layout form quên mật khẩu được căn giữa với nền dark mode
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
|
||||
<Card className="w-full max-w-md" hover={false} bordered>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-semibold">
|
||||
{t('auth.forgotPassword.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
{isSuccess
|
||||
? t('auth.forgotPassword.checkEmail')
|
||||
: t('auth.forgotPassword.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<>
|
||||
<AuthControls />
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
|
||||
<Card className="w-full max-w-md" hover={false} bordered>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-semibold">
|
||||
{t('auth.forgotPassword.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
{isSuccess
|
||||
? t('auth.forgotPassword.checkEmail')
|
||||
: t('auth.forgotPassword.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
{isSuccess ? (
|
||||
// EN: Success state - show confirmation message
|
||||
// VI: Trạng thái thành công - hiển thị thông báo xác nhận
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: Success icon and message / VI: Icon và thông báo thành công */}
|
||||
<div
|
||||
className="p-4 rounded-lg bg-bg-tertiary border border-accent-success text-accent-success flex items-center gap-3"
|
||||
role="alert"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium">
|
||||
{t('auth.forgotPassword.resetLinkSent')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* EN: Detailed success message / VI: Thông báo thành công chi tiết */}
|
||||
<div className="space-y-3 text-sm text-text-secondary">
|
||||
<p>
|
||||
{t('auth.forgotPassword.resetLinkSentDetail', { email: submittedEmail })}
|
||||
</p>
|
||||
<div className="pt-2 border-t border-border-primary">
|
||||
<p className="text-text-tertiary">
|
||||
{t('auth.forgotPassword.checkInbox')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* EN: Additional action buttons / VI: Các nút hành động bổ sung */}
|
||||
<div className="pt-2 space-y-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
setIsSuccess(false);
|
||||
setSubmittedEmail('');
|
||||
}}
|
||||
>
|
||||
{t('auth.forgotPassword.sendToAnotherEmail')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
) : (
|
||||
// EN: Form state - email input and submit
|
||||
// VI: Trạng thái form - input email và submit
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{isSuccess ? (
|
||||
// EN: Success state - show confirmation message
|
||||
// VI: Trạng thái thành công - hiển thị thông báo xác nhận
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
|
||||
{apiError && (
|
||||
<div
|
||||
className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
|
||||
role="alert"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{apiError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EN: Email input field / VI: Trường nhập email */}
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth.forgotPassword.email')}
|
||||
placeholder="you@example.com"
|
||||
isInvalid={!!errors.email}
|
||||
errorMessage={errors.email?.message}
|
||||
name="email"
|
||||
value={watch('email')}
|
||||
onChange={(value) => setValue('email', value)}
|
||||
onBlur={register('email').onBlur}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
aria-required="true"
|
||||
/>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
{/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting}
|
||||
{/* EN: Success icon and message / VI: Icon và thông báo thành công */}
|
||||
<div
|
||||
className="p-4 rounded-lg bg-bg-tertiary border border-accent-success text-accent-success flex items-center gap-3"
|
||||
role="alert"
|
||||
>
|
||||
{isSubmitting
|
||||
? t('auth.forgotPassword.sending')
|
||||
: t('auth.forgotPassword.sendResetLink')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
)}
|
||||
<svg
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium">
|
||||
{t('auth.forgotPassword.resetLinkSent')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<CardFooter className="flex flex-col gap-2 pt-4">
|
||||
{/* EN: Back to login link / VI: Link quay lại đăng nhập */}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
← {t('auth.forgotPassword.backToLogin')}
|
||||
</Link>
|
||||
{/* EN: Detailed success message / VI: Thông báo thành công chi tiết */}
|
||||
<div className="space-y-3 text-sm text-text-secondary">
|
||||
<p>
|
||||
{t('auth.forgotPassword.resetLinkSentDetail', { email: submittedEmail })}
|
||||
</p>
|
||||
<div className="pt-2 border-t border-border-primary">
|
||||
<p className="text-text-tertiary">
|
||||
{t('auth.forgotPassword.checkInbox')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* EN: Sign up link / VI: Link đăng ký */}
|
||||
<p className="text-sm text-center text-text-tertiary">
|
||||
{t('auth.forgotPassword.noAccount')}{' '}
|
||||
{/* EN: Additional action buttons / VI: Các nút hành động bổ sung */}
|
||||
<div className="pt-2 space-y-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
setIsSuccess(false);
|
||||
setSubmittedEmail('');
|
||||
}}
|
||||
>
|
||||
{t('auth.forgotPassword.sendToAnotherEmail')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
) : (
|
||||
// EN: Form state - email input and submit
|
||||
// VI: Trạng thái form - input email và submit
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
|
||||
{apiError && (
|
||||
<div
|
||||
className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
|
||||
role="alert"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{apiError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EN: Email input field / VI: Trường nhập email */}
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth.forgotPassword.email')}
|
||||
placeholder="you@example.com"
|
||||
isInvalid={!!errors.email}
|
||||
errorMessage={errors.email?.message}
|
||||
name="email"
|
||||
value={watch('email')}
|
||||
onChange={(value) => setValue('email', value)}
|
||||
onBlur={register('email').onBlur}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
aria-required="true"
|
||||
/>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
{/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting
|
||||
? t('auth.forgotPassword.sending')
|
||||
: t('auth.forgotPassword.sendResetLink')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<CardFooter className="flex flex-col gap-2 pt-4">
|
||||
{/* EN: Back to login link / VI: Link quay lại đăng nhập */}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
href="/login"
|
||||
className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
{t('auth.forgotPassword.signUp')}
|
||||
← {t('auth.forgotPassword.backToLogin')}
|
||||
</Link>
|
||||
</p>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* EN: Sign up link / VI: Link đăng ký */}
|
||||
<p className="text-sm text-center text-text-tertiary">
|
||||
{t('auth.forgotPassword.noAccount')}{' '}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
{t('auth.forgotPassword.signUp')}
|
||||
</Link>
|
||||
</p>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { Button } from '@/features/shared/components/ui/button';
|
||||
import { Input } from '@/features/shared/components/ui/input';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/features/shared/components/ui/card';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { AuthControls } from '@/features/shared/components/layout/auth-controls';
|
||||
|
||||
/**
|
||||
* EN: Create login schema with translated messages
|
||||
@@ -110,124 +111,125 @@ export default function LoginPage() {
|
||||
// EN: Centered login form layout with dark mode background
|
||||
// VI: Layout form đăng nhập được căn giữa với nền dark mode
|
||||
<main role="main" aria-label={t('auth.login.pageLabel')}>
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
|
||||
<Card className="w-full max-w-md" hover={false} bordered>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-semibold">
|
||||
{t('auth.login.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
{t('auth.login.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<AuthControls />
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
|
||||
<Card className="w-full max-w-md" hover={false} bordered>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-semibold">
|
||||
{t('auth.login.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
{t('auth.login.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
|
||||
{apiError && (
|
||||
<div
|
||||
className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
|
||||
role="alert"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
|
||||
{apiError && (
|
||||
<div
|
||||
className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
|
||||
role="alert"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
<svg
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{apiError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EN: Email input field / VI: Trường nhập email */}
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth.login.email')}
|
||||
placeholder="you@example.com"
|
||||
isInvalid={!!errors.email}
|
||||
errorMessage={errors.email?.message}
|
||||
name="email"
|
||||
value={watch('email')}
|
||||
onChange={(value) => setValue('email', value)}
|
||||
onBlur={register('email').onBlur}
|
||||
autoComplete="email"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Password input field / VI: Trường nhập mật khẩu */}
|
||||
<Input
|
||||
type="password"
|
||||
label={t('auth.login.password')}
|
||||
placeholder={t('auth.login.password')}
|
||||
isInvalid={!!errors.password}
|
||||
errorMessage={errors.password?.message}
|
||||
name="password"
|
||||
value={watch('password')}
|
||||
onChange={(value) => setValue('password', value)}
|
||||
onBlur={register('password').onBlur}
|
||||
autoComplete="current-password"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Remember me and forgot password row / VI: Hàng nhớ đăng nhập và quên mật khẩu */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center gap-2 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register('rememberMe')}
|
||||
className="w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer"
|
||||
/>
|
||||
</svg>
|
||||
<span>{apiError}</span>
|
||||
<span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
|
||||
{t('auth.login.rememberMe')}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
{t('auth.login.forgotPassword')}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
{/* EN: Email input field / VI: Trường nhập email */}
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth.login.email')}
|
||||
placeholder="you@example.com"
|
||||
isInvalid={!!errors.email}
|
||||
errorMessage={errors.email?.message}
|
||||
name="email"
|
||||
value={watch('email')}
|
||||
onChange={(value) => setValue('email', value)}
|
||||
onBlur={register('email').onBlur}
|
||||
autoComplete="email"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Password input field / VI: Trường nhập mật khẩu */}
|
||||
<Input
|
||||
type="password"
|
||||
label={t('auth.login.password')}
|
||||
placeholder={t('auth.login.password')}
|
||||
isInvalid={!!errors.password}
|
||||
errorMessage={errors.password?.message}
|
||||
name="password"
|
||||
value={watch('password')}
|
||||
onChange={(value) => setValue('password', value)}
|
||||
onBlur={register('password').onBlur}
|
||||
autoComplete="current-password"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Remember me and forgot password row / VI: Hàng nhớ đăng nhập và quên mật khẩu */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center gap-2 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register('rememberMe')}
|
||||
className="w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
|
||||
{t('auth.login.rememberMe')}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
{/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
isLoading={isLoading || isSubmitting}
|
||||
isDisabled={isLoading || isSubmitting}
|
||||
>
|
||||
{t('auth.login.forgotPassword')}
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
{isLoading || isSubmitting
|
||||
? t('auth.login.signingIn')
|
||||
: t('auth.login.title')}
|
||||
</Button>
|
||||
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
{/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
isLoading={isLoading || isSubmitting}
|
||||
isDisabled={isLoading || isSubmitting}
|
||||
>
|
||||
{isLoading || isSubmitting
|
||||
? t('auth.login.signingIn')
|
||||
: t('auth.login.title')}
|
||||
</Button>
|
||||
|
||||
{/* EN: Sign up link / VI: Link đăng ký */}
|
||||
<p className="text-sm text-center text-text-tertiary">
|
||||
{t('auth.login.noAccount')}{' '}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
{t('auth.login.signUp')}
|
||||
</Link>
|
||||
</p>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
{/* EN: Sign up link / VI: Link đăng ký */}
|
||||
<p className="text-sm text-center text-text-tertiary">
|
||||
{t('auth.login.noAccount')}{' '}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
{t('auth.login.signUp')}
|
||||
</Link>
|
||||
</p>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { Button } from '@/features/shared/components/ui/button';
|
||||
import { Input } from '@/features/shared/components/ui/input';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/features/shared/components/ui/card';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { AuthControls } from '@/features/shared/components/layout/auth-controls';
|
||||
|
||||
/**
|
||||
* EN: Create register schema with translated messages
|
||||
@@ -223,166 +224,29 @@ export default function RegisterPage() {
|
||||
return (
|
||||
// EN: Centered register form layout with dark mode background
|
||||
// VI: Layout form đăng ký được căn giữa với nền dark mode
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
|
||||
<Card className="w-full max-w-md" hover={false} bordered>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-semibold">
|
||||
{t('auth.register.createAccount')}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
{t('auth.register.signUpToStart')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<>
|
||||
<AuthControls />
|
||||
<div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
|
||||
<Card className="w-full max-w-md" hover={false} bordered>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl font-semibold">
|
||||
{t('auth.register.createAccount')}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
{t('auth.register.signUpToStart')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
|
||||
{apiError && (
|
||||
<div
|
||||
className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
|
||||
role="alert"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
|
||||
{apiError && (
|
||||
<div
|
||||
className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
|
||||
role="alert"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{apiError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EN: Full name input field / VI: Trường nhập họ tên */}
|
||||
<Input
|
||||
type="text"
|
||||
label={t('auth.register.fullName')}
|
||||
placeholder="John Doe"
|
||||
isInvalid={!!errors.fullName}
|
||||
errorMessage={errors.fullName?.message}
|
||||
name="fullName"
|
||||
value={watch('fullName')}
|
||||
onChange={(value) => setValue('fullName', value)}
|
||||
onBlur={register('fullName').onBlur}
|
||||
autoComplete="name"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Email input field / VI: Trường nhập email */}
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth.register.email')}
|
||||
placeholder="you@example.com"
|
||||
isInvalid={!!errors.email}
|
||||
errorMessage={errors.email?.message}
|
||||
name="email"
|
||||
value={watch('email')}
|
||||
onChange={(value) => setValue('email', value)}
|
||||
onBlur={register('email').onBlur}
|
||||
autoComplete="email"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Password input field / VI: Trường nhập mật khẩu */}
|
||||
<div>
|
||||
<Input
|
||||
type="password"
|
||||
label={t('auth.register.password')}
|
||||
placeholder={t('auth.register.createStrongPassword')}
|
||||
isInvalid={!!errors.password}
|
||||
errorMessage={errors.password?.message}
|
||||
name="password"
|
||||
value={watch('password')}
|
||||
onChange={(value) => setValue('password', value)}
|
||||
onBlur={register('password').onBlur}
|
||||
autoComplete="new-password"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Password strength indicator / VI: Chỉ báo độ mạnh mật khẩu */}
|
||||
{password && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{/* EN: Strength bar / VI: Thanh độ mạnh */}
|
||||
<div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${getStrengthColor(
|
||||
passwordStrength.strength
|
||||
)}`}
|
||||
style={{ width: `${passwordStrength.percentage}%` }}
|
||||
role="progressbar"
|
||||
aria-valuenow={passwordStrength.percentage}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={t('auth.register.passwordStrength', { strength: t(`auth.register.${passwordStrength.feedback}`) })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* EN: Strength feedback text / VI: Text phản hồi độ mạnh */}
|
||||
<p
|
||||
className={`text-xs font-medium ${
|
||||
passwordStrength.strength === 'weak'
|
||||
? 'text-accent-error'
|
||||
: passwordStrength.strength === 'fair'
|
||||
? 'text-accent-warning'
|
||||
: passwordStrength.strength === 'good'
|
||||
? 'text-accent-warning'
|
||||
: 'text-accent-success'
|
||||
}`}
|
||||
>
|
||||
{t(`auth.register.${passwordStrength.feedback}`)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* EN: Confirm password input field / VI: Trường xác nhận mật khẩu */}
|
||||
<Input
|
||||
type="password"
|
||||
label={t('auth.register.confirmPassword')}
|
||||
placeholder={t('auth.register.reEnterPassword')}
|
||||
isInvalid={!!errors.confirmPassword}
|
||||
errorMessage={errors.confirmPassword?.message}
|
||||
name="confirmPassword"
|
||||
value={watch('confirmPassword')}
|
||||
onChange={(value) => setValue('confirmPassword', value)}
|
||||
onBlur={register('confirmPassword').onBlur}
|
||||
autoComplete="new-password"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Terms and conditions checkbox / VI: Checkbox điều khoản và điều kiện */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-start gap-2 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register('terms')}
|
||||
className="mt-1 w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer flex-shrink-0"
|
||||
aria-required="true"
|
||||
aria-invalid={errors.terms ? 'true' : 'false'}
|
||||
/>
|
||||
<span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
|
||||
{t('auth.register.agreeToTerms')}{' '}
|
||||
<Link
|
||||
href="/terms"
|
||||
className="text-accent-primary hover:brightness-110 underline focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t('auth.register.termsAndConditions')}
|
||||
</Link>
|
||||
</span>
|
||||
</label>
|
||||
{errors.terms && (
|
||||
<p className="text-sm text-accent-error flex items-center gap-1 ml-6" role="alert">
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -395,40 +259,179 @@ export default function RegisterPage() {
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
{errors.terms.message}
|
||||
</p>
|
||||
<span>{apiError}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
{/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
isLoading={isLoading || isSubmitting}
|
||||
isDisabled={isLoading || isSubmitting}
|
||||
>
|
||||
{isLoading || isSubmitting
|
||||
? t('auth.register.creatingAccount')
|
||||
: t('auth.register.createAccount')}
|
||||
</Button>
|
||||
{/* EN: Full name input field / VI: Trường nhập họ tên */}
|
||||
<Input
|
||||
type="text"
|
||||
label={t('auth.register.fullName')}
|
||||
placeholder="John Doe"
|
||||
isInvalid={!!errors.fullName}
|
||||
errorMessage={errors.fullName?.message}
|
||||
name="fullName"
|
||||
value={watch('fullName')}
|
||||
onChange={(value) => setValue('fullName', value)}
|
||||
onBlur={register('fullName').onBlur}
|
||||
autoComplete="name"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Sign in link / VI: Link đăng nhập */}
|
||||
<p className="text-sm text-center text-text-tertiary">
|
||||
{t('auth.register.alreadyHaveAccount')}{' '}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
{/* EN: Email input field / VI: Trường nhập email */}
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth.register.email')}
|
||||
placeholder="you@example.com"
|
||||
isInvalid={!!errors.email}
|
||||
errorMessage={errors.email?.message}
|
||||
name="email"
|
||||
value={watch('email')}
|
||||
onChange={(value) => setValue('email', value)}
|
||||
onBlur={register('email').onBlur}
|
||||
autoComplete="email"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Password input field / VI: Trường nhập mật khẩu */}
|
||||
<div>
|
||||
<Input
|
||||
type="password"
|
||||
label={t('auth.register.password')}
|
||||
placeholder={t('auth.register.createStrongPassword')}
|
||||
isInvalid={!!errors.password}
|
||||
errorMessage={errors.password?.message}
|
||||
name="password"
|
||||
value={watch('password')}
|
||||
onChange={(value) => setValue('password', value)}
|
||||
onBlur={register('password').onBlur}
|
||||
autoComplete="new-password"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Password strength indicator / VI: Chỉ báo độ mạnh mật khẩu */}
|
||||
{password && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{/* EN: Strength bar / VI: Thanh độ mạnh */}
|
||||
<div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${getStrengthColor(
|
||||
passwordStrength.strength
|
||||
)}`}
|
||||
style={{ width: `${passwordStrength.percentage}%` }}
|
||||
role="progressbar"
|
||||
aria-valuenow={passwordStrength.percentage}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={t('auth.register.passwordStrength', { strength: t(`auth.register.${passwordStrength.feedback}`) })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* EN: Strength feedback text / VI: Text phản hồi độ mạnh */}
|
||||
<p
|
||||
className={`text-xs font-medium ${passwordStrength.strength === 'weak'
|
||||
? 'text-accent-error'
|
||||
: passwordStrength.strength === 'fair'
|
||||
? 'text-accent-warning'
|
||||
: passwordStrength.strength === 'good'
|
||||
? 'text-accent-warning'
|
||||
: 'text-accent-success'
|
||||
}`}
|
||||
>
|
||||
{t(`auth.register.${passwordStrength.feedback}`)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* EN: Confirm password input field / VI: Trường xác nhận mật khẩu */}
|
||||
<Input
|
||||
type="password"
|
||||
label={t('auth.register.confirmPassword')}
|
||||
placeholder={t('auth.register.reEnterPassword')}
|
||||
isInvalid={!!errors.confirmPassword}
|
||||
errorMessage={errors.confirmPassword?.message}
|
||||
name="confirmPassword"
|
||||
value={watch('confirmPassword')}
|
||||
onChange={(value) => setValue('confirmPassword', value)}
|
||||
onBlur={register('confirmPassword').onBlur}
|
||||
autoComplete="new-password"
|
||||
aria-required="true"
|
||||
/>
|
||||
|
||||
{/* EN: Terms and conditions checkbox / VI: Checkbox điều khoản và điều kiện */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-start gap-2 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register('terms')}
|
||||
className="mt-1 w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer flex-shrink-0"
|
||||
aria-required="true"
|
||||
aria-invalid={errors.terms ? 'true' : 'false'}
|
||||
/>
|
||||
<span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
|
||||
{t('auth.register.agreeToTerms')}{' '}
|
||||
<Link
|
||||
href="/terms"
|
||||
className="text-accent-primary hover:brightness-110 underline focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t('auth.register.termsAndConditions')}
|
||||
</Link>
|
||||
</span>
|
||||
</label>
|
||||
{errors.terms && (
|
||||
<p className="text-sm text-accent-error flex items-center gap-1 ml-6" role="alert">
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
{errors.terms.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex flex-col gap-4">
|
||||
{/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
isLoading={isLoading || isSubmitting}
|
||||
isDisabled={isLoading || isSubmitting}
|
||||
>
|
||||
{t('auth.register.signIn')}
|
||||
</Link>
|
||||
</p>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
{isLoading || isSubmitting
|
||||
? t('auth.register.creatingAccount')
|
||||
: t('auth.register.createAccount')}
|
||||
</Button>
|
||||
|
||||
{/* EN: Sign in link / VI: Link đăng nhập */}
|
||||
<p className="text-sm text-center text-text-tertiary">
|
||||
{t('auth.register.alreadyHaveAccount')}{' '}
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
|
||||
>
|
||||
{t('auth.register.signIn')}
|
||||
</Link>
|
||||
</p>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { ThemeToggle } from '@/features/theme/components/theme-toggle-enhanced';
|
||||
import { LanguageSwitcher } from '@/features/theme/components/language-switcher';
|
||||
|
||||
/**
|
||||
* EN: Auth Controls - Theme and Language switchers for auth pages
|
||||
* VI: Auth Controls - Bộ chuyển theme và ngôn ngữ cho trang auth
|
||||
*
|
||||
* Features:
|
||||
* - Fixed position in top-right corner
|
||||
* - Styled to match "Try Grok" button
|
||||
* - Works on all auth pages (login, register, forgot-password)
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <AuthControls />
|
||||
* ```
|
||||
*/
|
||||
export function AuthControls() {
|
||||
return (
|
||||
<div className="fixed top-6 right-6 z-50 flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -53,9 +53,9 @@ export function LanguageSwitcher() {
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="md"
|
||||
className="gap-2 min-w-[80px]"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-white border border-white/20 hover:bg-white/10 transition-all gap-2"
|
||||
aria-label="Change language"
|
||||
>
|
||||
<span className="font-medium">{currentLanguage.code.toUpperCase()}</span>
|
||||
|
||||
@@ -44,9 +44,9 @@ export function ThemeToggle() {
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="glass"
|
||||
size="md"
|
||||
className="w-10 h-10 p-0"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-white border border-white/20 hover:bg-white/10 transition-all"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<CurrentIcon className="h-5 w-5" />
|
||||
|
||||
Reference in New Issue
Block a user