Spaces:
Running
Running
File size: 3,656 Bytes
0b5e85f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import { useState } from 'react';
import { Smartphone, ArrowLeft, ShieldCheck } from 'lucide-react';
export default function Auth({ onLogin }) {
const [step, setStep] = useState(1);
const [phone, setPhone] = useState('');
const [otp, setOtp] = useState('');
const [loading, setLoading] = useState(false);
const handleSendOtp = (e) => {
e.preventDefault();
if (phone.length < 10) return alert('شماره موبایل معتبر نیست');
setLoading(true);
setTimeout(() => {
setLoading(false);
setStep(2);
}, 1000);
};
const handleVerifyOtp = (e) => {
e.preventDefault();
setLoading(true);
setTimeout(() => {
setLoading(false);
onLogin(phone);
}, 1000);
};
return (
<div className="flex flex-col items-center justify-center min-h-screen p-4">
<div className="glass-panel p-8 rounded-2xl w-full max-w-md animate-slide-in">
<div className="flex flex-col items-center mb-8">
<div className="bg-white/10 p-4 rounded-full mb-4">
<Smartphone className="w-8 h-8 text-primary" />
</div>
<h2 className="text-2xl font-bold text-white mb-2">
{step === 1 ? 'ورود به حساب' : 'تایید شماره'}
</h2>
<p className="text-white/60 text-center text-sm">
{step === 1
? 'برای ادامه شماره موبایل خود را وارد کنید'
: `کد تایید برای ${phone} ارسال شد (کد تست: 1234)`}
</p>
</div>
<form onSubmit={step === 1 ? handleSendOtp : handleVerifyOtp} className="space-y-4">
{step === 1 ? (
<div className="relative">
<input
type="tel"
placeholder="09123456789"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="glass-input w-full p-4 rounded-xl text-center text-lg tracking-widest placeholder:text-white/30"
dir="ltr"
/>
</div>
) : (
<div className="relative">
<input
type="text"
placeholder="کد تایید ۴ رقمی"
value={otp}
onChange={(e) => setOtp(e.target.value)}
className="glass-input w-full p-4 rounded-xl text-center text-2xl tracking-[0.5em] placeholder:text-white/30"
maxLength={4}
dir="ltr"
/>
</div>
)}
<button
type="submit"
disabled={loading}
className="w-full bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
{loading ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : step === 1 ? (
<>دریافت کد تایید <ShieldCheck className="w-4 h-4" /></>
) : (
<>ورود به چت روم <ArrowLeft className="w-4 h-4 rotate-180" /></>
)}
</button>
{step === 2 && (
<button
type="button"
onClick={() => setStep(1)}
className="w-full text-white/50 text-sm py-2 hover:text-white transition-colors"
>
اصلاح شماره موبایل
</button>
)}
</form>
</div>
</div>
);
} |