74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { App, Button, Card, Form, Input, Typography, type InputRef } from 'antd';
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useAppDispatch } from '@/utils/hooks';
|
||
import { loginSuccess } from '@/features/auth/authSlice';
|
||
import { authService } from '@/features/auth/authService';
|
||
import { colors } from '@/design/tokens/colors';
|
||
import { spacing } from '@/design/tokens/spacing';
|
||
|
||
const { Title, Paragraph } = Typography;
|
||
|
||
interface VerifyOtpFormValues {
|
||
otp: string;
|
||
}
|
||
|
||
const VerifyOtp = () => {
|
||
const navigate = useNavigate();
|
||
const dispatch = useAppDispatch();
|
||
const [phoneNumber] = useState(() => localStorage.getItem('pending_phone_number') ?? '');
|
||
const [form] = Form.useForm<VerifyOtpFormValues>();
|
||
const otpInputRef = useRef<InputRef>(null);
|
||
const { message } = App.useApp();
|
||
|
||
useEffect(() => {
|
||
const timeoutId = window.setTimeout(() => {
|
||
otpInputRef.current?.focus();
|
||
}, 100);
|
||
|
||
return () => window.clearTimeout(timeoutId);
|
||
}, []);
|
||
|
||
const onFinish = async (values: VerifyOtpFormValues) => {
|
||
try {
|
||
const response = await authService.verifyOtp(phoneNumber, values.otp);
|
||
dispatch(loginSuccess(response));
|
||
localStorage.removeItem('pending_phone_number');
|
||
message.success('ورود با موفقیت انجام شد');
|
||
navigate('/');
|
||
} catch {
|
||
message.error('کد تایید نادرست است');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: colors.primaryLight, direction: 'rtl' }}>
|
||
<Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: `1px solid ${colors.primaryLight}` }}>
|
||
<Title level={3} style={{ marginBottom: spacing.sm, color: colors.primary }}>
|
||
تایید کد یکبار مصرف
|
||
</Title>
|
||
<Paragraph style={{ color: colors.textSecondary }}>
|
||
کد تایید: 77501
|
||
</Paragraph>
|
||
|
||
<Form form={form} layout="vertical" onFinish={onFinish}>
|
||
<Form.Item
|
||
label="کد تایید"
|
||
name="otp"
|
||
rules={[{ required: true, message: 'کد تایید الزامی است' }]}
|
||
>
|
||
<Input ref={otpInputRef} placeholder="77501" size="large" maxLength={5} />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Button type="primary" htmlType="submit" size="large" block>
|
||
تایید
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default VerifyOtp;
|