diff --git a/src/features/authentication/components/UserCompletionForm.tsx b/src/features/authentication/components/UserCompletionForm.tsx new file mode 100644 index 0000000..7f71c92 --- /dev/null +++ b/src/features/authentication/components/UserCompletionForm.tsx @@ -0,0 +1,353 @@ +import { + TextField, + FormControl, + InputLabel, + MenuItem, + Select, + Box, + type SelectChangeEvent, + Switch, + FormGroup, + Button, + Typography, + Link, +} from '@mui/material'; +import React, { useEffect, useState } from 'react'; + +export function UserCompletionForm() { + const [sex, setSex] = useState(''); + const [showPassword, setShowPassword] = useState(false); + const [showEmail, setShowEmail] = useState(false); + const [password, setPassword] = useState(''); + const [email, setEmail] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [codeSent, setCodeSent] = useState(false); + const [verificationCode, setVerificationCode] = useState(''); + const [buttonState, setButtonState] = useState('default'); // default | counting | sent + const [countdown, setCountdown] = useState(60); + const matchPassword = password === confirmPassword; + const hasNumber = /\d/.test(password); + const hasMinLength = password.length >= 8; + const hasUpperAndLower = /[A-Z]/.test(password) && /[a-z]/.test(password); + const hasSpecialChar = /[!@#$%^&*]/.test(password); + const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + + const handleTogglePassword = (e: React.ChangeEvent) => { + setShowPassword(e.target.checked); + }; + const handleToggleEmail = (e: React.ChangeEvent) => { + setShowEmail(e.target.checked); + }; + + const handleChange = (e: SelectChangeEvent) => { + setSex(e.target.value); + }; + + const onClickCodeSent = () => { + setCodeSent(true); + setButtonState('sent'); + setTimeout(() => { + setButtonState('counting'); + setCountdown(60); + }, 1000); + }; + + useEffect(() => { + let timer: ReturnType; + if (buttonState === 'counting' && countdown > 0) { + timer = setInterval(() => { + setCountdown((prev) => prev - 1); + }, 1000); + } + if (countdown === 0) { + setButtonState('default'); + } + return () => clearInterval(timer); + }, [buttonState, countdown]); + + const toPersianDigits = (str: string) => + str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]); + + const getButtonLabel = () => { + if (buttonState === 'sent') return 'ارسال شد!'; + if (buttonState === 'counting') { + const minutes = String(Math.floor(countdown / 60)).padStart(2, '0'); + const seconds = String(countdown % 60).padStart(2, '0'); + const time = `${minutes}:${seconds}`; + return toPersianDigits(time); + } + return 'ارسال کد تایید'; + }; + + return ( +
+ + + + تکمیل اطلاعات حساب کاربری + + + اطلاعات کسب و کار خود را وارد کنید + + + + + + + + + جنسیت + + + + + + + + + تعیین رمز عبور + + + {showPassword && ( + + + setPassword(e.target.value)} + variant="outlined" + sx={{ + '& .MuiOutlinedInput-root': { + height: 45, + }, + }} + /> + {password && ( + + + شامل عدد + +
+ + حداقل 8 کاراکتر + +
+ + شامل یک حرف بزرگ و کوچک + +
+ + شامل علامت(!@#$%^&*) + + + )} + + {showPassword && ( + setConfirmPassword(e.target.value)} + error={confirmPassword.length > 0 && !matchPassword} + helperText={ + confirmPassword.length > 0 && !matchPassword + ? 'مطابقت ندارد' + : ' ' + } + sx={{ + width: '330px', + '& .MuiOutlinedInput-root': { + height: 45, + }, + }} + /> + )} + + )} + + + + + اتصال ایمیل خود + + + {showEmail && ( + + + + setEmail(e.target.value)} + sx={{ + width: '330px', + '& .MuiOutlinedInput-root': { + height: 45, + }, + }} + /> + {email && ( + + فرم درست ایمیل وارد کنید + + )} + + + + {codeSent && ( + + setVerificationCode(e.target.value)} + sx={{ + width: '330px', + '& .MuiOutlinedInput-root': { + height: 45, + }, + }} + /> + + + )} + + )} + + + ادامه فرایند ثبت نام به منزله تایید و قبول{' '} + + قوانین و مقررات هارمونی + {' '} + می باشد. + + + + +
+ ); +}