diff --git a/public/locales/fa/completionForm.json b/public/locales/fa/completionForm.json index f4f4f4f..8bdd074 100644 --- a/public/locales/fa/completionForm.json +++ b/public/locales/fa/completionForm.json @@ -30,6 +30,7 @@ "country": "کشور", "dateOfBirth": "تاریخ تولد(اختیاری)", "invalidCountry": "کشور انتخاب شده صحیح نیست", - "rules": "قوانین و مقررات" + "rules": "قوانین و مقررات", + "alertSuccess": "ایمیل با موفقیت تایید شد" } } diff --git a/src/App.tsx b/src/App.tsx index f1bd30e..7275da5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { import './App.css'; import { useTranslation } from 'react-i18next'; import { LanguageManager } from './components/LanguageManager'; +import { UserCompletionForm } from './features/authentication/components/UserCompletionForm'; function App() { const { t } = useTranslation(); @@ -18,12 +19,13 @@ function App() { <> -
+ + + {/*
{t('helloWorld')} - @@ -41,10 +43,7 @@ function App() { error -
- +
*/} ); } diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..6f53ef6 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/CustomAlert.tsx b/src/components/CustomAlert.tsx deleted file mode 100644 index 32c413a..0000000 --- a/src/components/CustomAlert.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { Box, Alert, IconButton, type AlertColor } from '@mui/material'; -import { - TickCircle, - CloseSquare, - Warning2, - InfoCircle, - CloseCircle, -} from 'iconsax-react'; - -type AlertType = AlertColor; - -interface CustomAlertProps { - message: string; - onClose: () => void; - severity?: AlertType; - open: boolean; - duration?: number; - delayOnClose?: number; - rtl?: boolean; - icon?: React.ReactNode; -} - -const defaultIcons: Record = { - success: , - error: , - warning: , - info: , -}; - -export const CustomAlert: React.FC = ({ - message, - severity, - open, - onClose, - duration = 4000, - delayOnClose = 2000, - rtl = false, - icon, -}) => { - const [visible, setVisible] = useState(open); - - useEffect(() => { - setVisible(open); - }, [open]); - - useEffect(() => { - if (visible && duration > 0) { - const timer = setTimeout(() => { - setVisible(false); - onClose(); - }, duration); - return () => clearTimeout(timer); - } - }, [visible, duration, onClose]); - - const handleClose = () => { - setTimeout(() => { - setVisible(false); - onClose(); - }, delayOnClose); - }; - - if (!visible) return null; - - return ( - - - - - } - sx={{ - width: '396px', - flexDirection: 'row-reverse', - justifyContent: 'space-between', - alignItems: 'center', - textAlign: rtl ? 'right' : 'left', - direction: rtl ? 'rtl' : 'ltr', - }} - > - {message} - - - ); -}; diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 0000000..dbba376 --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,7 @@ +import LogoSvg from '@/assets/logo.svg'; + +function Logo() { + return ; +} + +export default Logo; diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx new file mode 100644 index 0000000..947194f --- /dev/null +++ b/src/components/Toast.tsx @@ -0,0 +1,23 @@ +import { Alert, Snackbar, type AlertColor } from '@mui/material'; +import React, { type PropsWithChildren } from 'react'; + +export interface ToastProps extends PropsWithChildren { + color: AlertColor | undefined; + open: boolean; + onClose: () => void; +} + +export const Toast = ({ color, open, onClose, children }: ToastProps) => { + return ( + + + {children} + + + ); +}; diff --git a/src/features/authentication/components/EmailSection.tsx b/src/features/authentication/components/EmailSection.tsx index 2e29cad..f043d06 100644 --- a/src/features/authentication/components/EmailSection.tsx +++ b/src/features/authentication/components/EmailSection.tsx @@ -11,7 +11,7 @@ import { } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { TickCircle, Edit, Refresh } from 'iconsax-react'; -import { CustomAlert } from '@/components/CustomAlert'; +import { Toast } from '@/components/Toast'; interface EmailSectionProps { showEmail: boolean; @@ -49,14 +49,15 @@ export function EmailSection({ handleEditEmail, }: EmailSectionProps) { const { t } = useTranslation('completionForm'); - const [showSuccessAlert, setShowSuccessAlert] = useState(false); - const [showEmailErrorAlert, setShowEmailErrorAlert] = useState(false); + const [showSuccessToast, setShowSuccessToast] = useState(false); + const [showErrorToast, setShowErrorToast] = useState(false); + const onSendCodeClick = () => { if (!correctEmail) { - setShowEmailErrorAlert(true); + setShowErrorToast(true); return; } - setShowEmailErrorAlert(false); + setShowErrorToast(false); handleSendCode(); }; @@ -66,7 +67,7 @@ export function EmailSection({ useEffect(() => { if (emailVerified) { - setShowSuccessAlert(true); + setShowSuccessToast(true); } }, [emailVerified]); @@ -173,17 +174,6 @@ export function EmailSection({ {getButtonLabel()} )} - {showEmailErrorAlert && ( - setShowEmailErrorAlert(false)} - message={t('completion.emailCorrectForm')} - severity="error" - duration={4000} - delayOnClose={2000} - rtl - /> - )} {email && ( @@ -247,15 +237,21 @@ export function EmailSection({ )} - setShowSuccessAlert(false)} - message="ایمیل با موفقیت تایید شد" - severity="success" - duration={4000} - delayOnClose={2000} - rtl - /> + setShowSuccessToast(false)} + > + {t('completion.alertSuccess')} + + + setShowErrorToast(false)} + > + {t('completion.emailCorrectForm')} + ); } diff --git a/src/features/authentication/components/UserCompletionForm.tsx b/src/features/authentication/components/UserCompletionForm.tsx index a979f36..ce7ec85 100644 --- a/src/features/authentication/components/UserCompletionForm.tsx +++ b/src/features/authentication/components/UserCompletionForm.tsx @@ -5,6 +5,7 @@ import { PersonalInfoFields } from './PersonalInfoFields'; import { PasswordSection } from './PasswordSection'; import { EmailSection } from './EmailSection'; import { SubmitSection } from './SubmitSection'; +import Logo from '@/components/Logo'; export function UserCompletionForm() { const { t } = useTranslation('completionForm'); @@ -100,12 +101,17 @@ export function UserCompletionForm() { + + +