feat: add navigation to forger password page, show password icon, toasts for different situations and changes of some styles

src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactElement, type ElementType } from 'react';
+import React, { type ReactElement, type ElementType, useState } from 'react';
 import {
   Box,
   Button,
@@ -15,6 +15,7 @@ import type { TransitionProps } from '@mui/material/transitions';
 import { CloseCircle } from 'iconsax-react';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type SocialMediaDialogProps } from '@/features/profile/types/settingsType';
+import { isEmail } from '@/utils/regexes/isEmail';
 
 const MobileSlide = React.forwardRef(function MobileSlide(
   props: TransitionProps & { children: ReactElement<unknown, ElementType> },
@@ -30,57 +31,58 @@ export default function SocialMediaDialog({
   emailInput,
   setEmailInput,
   fullScreen,
-  computedMaxWidth,
   verificationCode,
   setVerificationCode,
-  apiError,
   isLoading,
   dialogStep,
   onSendCode,
   onConfirmEmail,
 }: SocialMediaDialogProps) {
+  const [emailError, setEmailError] = useState<string | undefined>();
+  const [touched, setTouched] = useState(false);
+
+  const validateEmail = (value: string) => {
+    if (!value) {
+      setEmailError(t('settingForm.thisFieldIsRequired'));
+      return false;
+    }
+    if (!isEmail(value)) {
+      setEmailError(t('settingForm.emailIsInvalid'));
+      return false;
+    }
+    setEmailError(undefined);
+    return true;
+  };
+
   return (
     <Dialog
       open={open}
       onClose={onClose}
       fullWidth
       fullScreen={fullScreen}
-      maxWidth={computedMaxWidth}
-      scroll="paper"
+      maxWidth="xs"
+      scroll="body"
       keepMounted
       TransitionComponent={fullScreen ? MobileSlide : undefined}
-      PaperProps={{
-        sx: {
-          borderRadius: { xs: 0, sm: 2 },
-          width: { xs: '100%', sm: '30%' },
-          height: 'auto',
-        },
-      }}
+      PaperProps={{ sx: { mx: 1 } }}
     >
-      <DialogTitle
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: 'bold',
-          fontSize: '16px',
-          gap: 1,
-          p: { xs: 1.5, sm: 2 },
-          bgcolor: 'background.default',
-        }}
-      >
-        <IconButton onClick={onClose} aria-label="Close" disabled={isLoading}>
-          <Icon Component={CloseCircle} size="medium" color="primary.main" />
-        </IconButton>
-        {t('settingForm.addEmailButton')}
+      <DialogTitle sx={{ p: 2 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <IconButton onClick={onClose} disabled={isLoading}>
+            <Icon Component={CloseCircle} size="large" color="primary.main" />
+          </IconButton>
+          <Box component="span" fontWeight="bold" fontSize={18}>
+            {t('settingForm.addEmailButton')}
+          </Box>
+        </Box>
       </DialogTitle>
 
       <DialogContent
-        dividers
         sx={{
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          py: { xs: 1.5, sm: 2 },
+          px: { xs: 2, sm: 3 },
         }}
       >
         <Box>
@@ -94,43 +96,46 @@ export default function SocialMediaDialog({
           fullWidth
           type="email"
           value={emailInput}
-          onChange={(e) => setEmailInput(e.target.value)}
+          onChange={(e) => {
+            setEmailInput(e.target.value);
+            if (touched) validateEmail(e.target.value);
+          }}
+          onBlur={() => {
+            setTouched(true);
+            validateEmail(emailInput);
+          }}
           label={t('settingForm.email')}
           placeholder="abc@email.com"
           autoComplete="email"
           inputMode="email"
-          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
           autoFocus
           disabled={isLoading || dialogStep === 'enterCode'}
+          error={touched && !!emailError}
+          helperText={touched && emailError ? emailError : ' '}
         />
 
         {dialogStep === 'enterCode' && (
-          <>
-            <TextField
-              fullWidth
-              type="text"
-              value={verificationCode}
-              onChange={(e) => setVerificationCode(e.target.value)}
-              label={t('settingForm.verificationCode')}
-              autoComplete="one-time-code"
-              inputMode="numeric"
-              sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
-              autoFocus
-              disabled={isLoading}
-            />
-          </>
-        )}
-
-        {apiError && (
-          <Typography color="error" variant="caption" sx={{ mt: 1 }}>
-            {apiError}
-          </Typography>
+          <TextField
+            fullWidth
+            type="text"
+            value={verificationCode}
+            onChange={(e) => setVerificationCode(e.target.value)}
+            label={t('settingForm.verificationCode')}
+            autoComplete="one-time-code"
+            inputMode="numeric"
+            sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+            autoFocus
+            disabled={isLoading}
+          />
         )}
+      </DialogContent>
 
+      <Box sx={{ px: 3, pb: 2 }}>
         <Button
-          variant="contained"
           fullWidth
-          sx={{ textTransform: 'none', borderRadius: 2, mt: 1 }}
+          sx={{ height: 48, textTransform: 'none', borderRadius: 2 }}
+          variant="contained"
           disabled={isLoading || (dialogStep === 'enterEmail' && !emailInput)}
           onClick={dialogStep === 'enterEmail' ? onSendCode : onConfirmEmail}
         >
@@ -142,7 +147,7 @@ export default function SocialMediaDialog({
             t('settingForm.confirmAndSave')
           )}
         </Button>
-      </DialogContent>
+      </Box>
     </Dialog>
   );
 }