fix/ styles and seperate the main file to different components

src/features/authentication/components/EmailSection.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  TextField,
+  Box,
+  Button,
+  Switch,
+  FormGroup,
+  Typography,
+  InputAdornment,
+  IconButton,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TickCircle, Edit, Refresh } from 'iconsax-react';
+
+interface EmailSectionProps {
+  showEmail: boolean;
+  setShowEmail: (checked: boolean) => void;
+  email: string;
+  setEmail: (email: string) => void;
+  correctEmail: boolean;
+  codeSent: boolean;
+  verificationCode: string;
+  setVerificationCode: (code: string) => void;
+  buttonState: 'default' | 'counting' | 'sent';
+  getButtonLabel: () => string;
+  handleSendCode: () => void;
+  handleVerifyCode: () => void;
+  emailVerified: boolean;
+  isVerifyingCode: boolean;
+  handleEditEmail: () => void;
+}
+
+export function EmailSection({
+  showEmail,
+  setShowEmail,
+  email,
+  setEmail,
+  correctEmail,
+  codeSent,
+  verificationCode,
+  setVerificationCode,
+  buttonState,
+  getButtonLabel,
+  handleSendCode,
+  handleVerifyCode,
+  emailVerified,
+  isVerifyingCode,
+  handleEditEmail,
+}: EmailSectionProps) {
+  const { t } = useTranslation('completionForm');
+
+  const handleToggleEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setShowEmail(e.target.checked);
+  };
+
+  return (
+    <>
+      <FormGroup>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 6 }}>
+          <Switch
+            checked={showEmail}
+            onChange={handleToggleEmail}
+            sx={{
+              '& .MuiSwitch-switchBase.Mui-checked': {
+                color: '#2979FF',
+              },
+              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                backgroundColor: '#2979FF',
+              },
+            }}
+          />
+          <Typography sx={{ color: showEmail ? '#2979FF' : 'black' }}>
+            {t('completion.determineEmail')}
+          </Typography>
+        </Box>
+      </FormGroup>
+      {showEmail && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
+          <Box sx={{ display: 'flex', gap: 4 }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+              <TextField
+                label={t('completion.email')}
+                variant="outlined"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                sx={{
+                  width: !isVerifyingCode && !emailVerified ? '446px' : '634px',
+                  transition: 'width 0.3s',
+                }}
+                InputProps={{
+                  startAdornment:
+                    buttonState === 'counting' ? (
+                      <InputAdornment position="start">
+                        <IconButton size="small" onClick={handleEditEmail}>
+                          <Edit size="20" color="#2979FF" />
+                        </IconButton>
+                      </InputAdornment>
+                    ) : null,
+                  endAdornment:
+                    !isVerifyingCode && emailVerified ? (
+                      <TickCircle size="16" color="#2e7d32" variant="Bold" />
+                    ) : null,
+                }}
+              />
+              {email && (
+                <Typography
+                  sx={{ color: correctEmail ? 'green' : 'red' }}
+                  variant="caption"
+                >
+                  {correctEmail ? '' : t('completion.emailCorrectForm')}
+                </Typography>
+              )}
+            </Box>
+            {!isVerifyingCode && !emailVerified && (
+              <Button
+                variant="text"
+                onClick={handleSendCode}
+                sx={{ width: '200px', color: '#2979FF' }}
+                disabled={
+                  buttonState === 'sent' ||
+                  buttonState === 'counting' ||
+                  !correctEmail
+                }
+              >
+                {getButtonLabel()}
+              </Button>
+            )}
+          </Box>
+          {!emailVerified && codeSent && (
+            <Box sx={{ display: 'flex', gap: 4 }}>
+              <TextField
+                label={t('completion.verificationCode')}
+                variant="outlined"
+                value={verificationCode}
+                onChange={(e) => setVerificationCode(e.target.value)}
+                sx={{ width: '446px' }}
+                disabled={isVerifyingCode}
+              />
+              <Button
+                variant="contained"
+                sx={{
+                  width: '156px',
+                  backgroundColor: 'white',
+                  border: 0.5,
+                  borderColor: '#2979FF',
+                  color: '#2979FF',
+                }}
+                onClick={handleVerifyCode}
+                disabled={isVerifyingCode}
+              >
+                {isVerifyingCode ? (
+                  <Box
+                    component="span"
+                    sx={{
+                      display: 'flex',
+                      animation: 'spin 1s linear infinite',
+                      '@keyframes spin': {
+                        '0%': { transform: 'rotate(0deg)' },
+                        '100%': { transform: 'rotate(360deg)' },
+                      },
+                    }}
+                  >
+                    <Refresh size="20" color="text.secondary" />
+                  </Box>
+                ) : (
+                  t('completion.checkCodeButton')
+                )}
+              </Button>
+            </Box>
+          )}
+        </Box>
+      )}
+    </>
+  );
+}