admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

app now responsive for mobile and small devices.

Browse Source
This commit is contained in:
rameen
2026-07-11 17:10:02 +03:30
parent 893cd5b128
commit 2f7df312c1
49 changed files with 1710 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/src/app/[locale]/(public)/forgot-password/page.tsx
View File

@@ -9,9 +9,9 @@ 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 { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
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;
@@ -124,83 +124,81 @@ export default function ForgotPasswordPage() {
};
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 />
<AuthPageShell
header={
<>
<Link href="/" className="flex justify-center">
<span className="text-2xl sm:text-3xl font-semibold text-text-primary">
{tCommon('appName')}
</span>
</Link>
<h2 className="mt-4 sm:mt-6 text-center text-2xl sm: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 className="surface-card py-6 sm:py-8 px-4 sm:px-10">
<form
className="space-y-5 sm: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-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
<p className="text-sm text-red-400">{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 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>
</AuthPageShell>
);
}