register , login model complated. plagiraism component complated(essential part of main page is complated )
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,19 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { formatPhone, normalizeDigits } from '../lib/formatPhone';
|
||||
import { Input } from '@/shared/ui/input';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import PhonePrefix from './phonePrefix';
|
||||
import { useLoginForm } from '../lib/useLoginForm';
|
||||
import { Label } from '@/shared/ui/label';
|
||||
import { X } from 'lucide-react';
|
||||
import { useLoginModal } from '../lib/togle';
|
||||
import { MotionWrapper } from './motion';
|
||||
import {
|
||||
formatPhone,
|
||||
normalizeDigits,
|
||||
} from '../../../../shared/lib/formatPhone';
|
||||
import PhonePrefix from '../../../../shared/ui/phonePrefix';
|
||||
import { MotionWrapper } from '../../../../shared/ui/motion';
|
||||
import { useLoginForm } from '../lib/useLoginForm';
|
||||
import { useLoginModal } from '@/shared/zustand/auth';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function LoginForm() {
|
||||
const t = useTranslations();
|
||||
export function LoginForm() {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
const { phone, setPhone, submit, error, loading } = useLoginForm();
|
||||
@@ -35,34 +34,45 @@ export default function LoginForm() {
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="fixed inset-0 z-20 flex items-center justify-center pointer-events-none">
|
||||
<div className="fixed inset-0 z-20 flex items-center justify-center pointer-events-none px-6">
|
||||
<MotionWrapper>
|
||||
<div className="pointer-events-auto bg-background rounded-2xl shadow-2xl p-8 w-full max-w-sm mx-4">
|
||||
{/* Close button */}
|
||||
<div className="flex justify-end mb-4">
|
||||
<div className="pointer-events-auto w-full max-w-sm rounded border border-stone-200 bg-white px-8 pb-8 pt-10 shadow-sm">
|
||||
{/* Close */}
|
||||
<div className="flex justify-end -mt-2 mb-4">
|
||||
<button
|
||||
onClick={toggleLoginModal}
|
||||
className="p-1 rounded-full hover:bg-muted transition-colors"
|
||||
className="flex h-7 w-7 items-center justify-center rounded-sm text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-700"
|
||||
>
|
||||
<X className="h-5 w-5 text-muted-foreground" />
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={submit} className="space-y-6 text-center">
|
||||
{/* PHONE FIELD */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone" className="text-sm font-medium">
|
||||
{/* Header */}
|
||||
<p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
|
||||
Xush kelibsiz
|
||||
</p>
|
||||
<h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
|
||||
Kirish
|
||||
</h1>
|
||||
<p className="mb-8 text-sm text-stone-400">
|
||||
Telefon raqamingizni kiriting.
|
||||
</p>
|
||||
|
||||
<form onSubmit={submit} noValidate className="flex flex-col gap-5">
|
||||
{/* Phone field */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
|
||||
>
|
||||
Telefon raqam
|
||||
</Label>
|
||||
</label>
|
||||
|
||||
<div
|
||||
className={`relative transition-all duration-300 ${
|
||||
isFocused ? 'scale-[1.02]' : ''
|
||||
}`}
|
||||
className={`relative transition-transform duration-200 ${isFocused ? 'scale-[1.01]' : ''}`}
|
||||
>
|
||||
<PhonePrefix isFocused={isFocused} />
|
||||
|
||||
<Input
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="90 123 45 67"
|
||||
@@ -70,59 +80,82 @@ export default function LoginForm() {
|
||||
onChange={handlePhoneChange}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
className={`pl-30 h-12 text-base font-medium border-2 transition-all ${
|
||||
isFocused
|
||||
? 'border-kok shadow-md shadow-kok/20 bg-kok/5'
|
||||
: 'border-border hover:border-kok/50'
|
||||
} ${error && 'border-destructive'}`}
|
||||
className={`
|
||||
w-full rounded-sm border bg-stone-50 py-2.5 pl-[7.5rem] pr-3.5
|
||||
text-[0.95rem] font-medium text-stone-900 outline-none
|
||||
placeholder:text-stone-300 transition-all duration-150
|
||||
${
|
||||
error
|
||||
? 'border-red-400 ring-2 ring-red-200/40'
|
||||
: isFocused
|
||||
? 'border-stone-400 ring-2 ring-stone-300/30'
|
||||
: 'border-stone-200 hover:border-stone-300'
|
||||
}
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center px-1">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{phone.length > 0 &&
|
||||
t('auth.entered_digits', { count: phone.length })}
|
||||
</p>
|
||||
{/* Digit counter / complete hint */}
|
||||
<div className="flex items-center justify-between px-0.5">
|
||||
<span className="text-[0.7rem] text-stone-400">
|
||||
{phone.length > 0 && `${phone.length} ta raqam kiritildi`}
|
||||
</span>
|
||||
{phone.length === 9 && (
|
||||
<span className="text-xs text-green-600 font-medium">
|
||||
✓ {t('auth.full')}
|
||||
<span className="text-[0.7rem] font-medium text-emerald-600">
|
||||
✓ To‘liq
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
|
||||
<div className="rounded-sm border border-red-200 bg-red-50 px-3.5 py-2.5 text-[0.8rem] text-red-500">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || phone.length !== 9}
|
||||
className="w-full h-12 mt-5 bg-linear-to-r from-blue-600 to-indigo-600 hover:scale-[1.02] text-base font-semibold transition-all shadow-lg hover:shadow-xl active:scale-95"
|
||||
className="
|
||||
mt-1 w-full rounded-sm bg-stone-900 py-3
|
||||
text-[0.82rem] font-semibold uppercase tracking-widest text-stone-100
|
||||
transition-all duration-150
|
||||
hover:bg-stone-800 active:scale-[0.99]
|
||||
disabled:cursor-not-allowed disabled:opacity-40
|
||||
"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
{t('auth.otp_sending')}
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
|
||||
Yuborilmoqda…
|
||||
</span>
|
||||
) : (
|
||||
<p>Kirish</p>
|
||||
'Kodni yuborish'
|
||||
)}
|
||||
</Button>
|
||||
</button>
|
||||
|
||||
{/* DIVIDER */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t border-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
Ro‘yhatdan o‘tish
|
||||
</span>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="relative flex items-center gap-3 py-1">
|
||||
<span className="h-px flex-1 bg-stone-200" />
|
||||
<span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
|
||||
yoki
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-stone-200" />
|
||||
</div>
|
||||
|
||||
{/* Register hint */}
|
||||
<p className="text-center text-[0.78rem] text-stone-400">
|
||||
Hisobingiz yo‘qmi?
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
|
||||
>
|
||||
Ro‘yxatdan o‘tish
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</MotionWrapper>
|
||||
|
||||
Reference in New Issue
Block a user