admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions 1 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

128
frontend/src/app/[locale]/(public)/login/page.tsx
View File

@@ -10,10 +10,10 @@ import { Link } from '@/i18n/navigation';
import { Mail, Lock } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { getRememberedEmail } from '@/lib/auth/rememberMe';
import { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
import { Button } from '@/components/ui/shared/Button';
import { Checkbox } from '@/components/ui/shared/Checkbox';
import { Input } from '@/components/ui/shared/Input';
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
type LoginForm = {
email: string;
@@ -74,82 +74,80 @@ export default function LoginPage() {
if (!isAuthReady) {
return (
<div className="min-h-screen app-web-bg flex items-center justify-center">
<div className="min-h-[100dvh] app-web-bg flex items-center justify-center px-4">
<p className="text-text-secondary">{tCommon('loading')}</p>
</div>
);
}
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('signInTitle')}
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
{tCommon('or')}{' '}
<Link href="/register" className="font-medium text-primary hover:opacity-90">
{t('startTrialLink')}
<AuthPageShell
header={
<>
<Link href="/" className="flex justify-center">
<span className="text-2xl sm:text-3xl font-semibold text-text-primary">
{tCommon('appName')}
</span>
</Link>
</p>
</div>
<h2 className="mt-4 sm:mt-6 text-center text-2xl sm:text-3xl font-semibold text-text-primary">
{t('signInTitle')}
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
{tCommon('or')}{' '}
<Link href="/register" className="font-medium text-primary hover:opacity-90">
{t('startTrialLink')}
</Link>
</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(onSubmit)}>
<Input
label={t('email')}
{...register('email')}
type="email"
placeholder={t('emailPlaceholder')}
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label={t('password')}
{...register('password')}
type="password"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
passwordToggleLabels={{
show: t('showPassword'),
hide: t('hidePassword'),
}}
/>
<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(onSubmit)}>
<Input
label={t('email')}
{...register('email')}
type="email"
placeholder={t('emailPlaceholder')}
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<Checkbox
checked={rememberMe}
onChange={(checked) => setValue('rememberMe', checked)}
label={t('rememberMe')}
/>
<Input
label={t('password')}
{...register('password')}
type="password"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
passwordToggleLabels={{
show: t('showPassword'),
hide: t('hidePassword'),
}}
/>
<div className="flex items-center justify-between">
<Checkbox
checked={rememberMe}
onChange={(checked) => setValue('rememberMe', checked)}
label={t('rememberMe')}
/>
<div className="text-sm">
<Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
{t('forgotPassword')}
</Link>
</div>
<div className="text-sm">
<Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
{t('forgotPassword')}
</Link>
</div>
</div>
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
{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>
)}
<Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
{t('signIn')}
</Button>
</form>
</div>
<Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
{t('signIn')}
</Button>
</form>
</div>
</div>
</AuthPageShell>
);
}