fix/ styles and seperate the main file to different components

src/features/authentication/components/PasswordSection.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import {
+  TextField,
+  Box,
+  IconButton,
+  Switch,
+  FormGroup,
+  Typography,
+  InputAdornment,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TickCircle, Eye, EyeSlash } from 'iconsax-react';
+import { PasswordValidationItem } from './PasswordValidation';
+
+interface PasswordSectionProps {
+  showPasswordSection: boolean;
+  setShowPasswordSection: (checked: boolean) => void;
+  password: string;
+  setPassword: (password: string) => void;
+  confirmPassword: string;
+  setConfirmPassword: (confirmPassword: string) => void;
+  matchPassword: boolean;
+  hasNumber: boolean;
+  hasMinLength: boolean;
+  hasUpperAndLower: boolean;
+  hasSpecialChar: boolean;
+  validPassword: boolean;
+  showValidations: boolean;
+}
+
+export function PasswordSection({
+  showPasswordSection,
+  setShowPasswordSection,
+  password,
+  setPassword,
+  confirmPassword,
+  setConfirmPassword,
+  matchPassword,
+  hasNumber,
+  hasMinLength,
+  hasUpperAndLower,
+  hasSpecialChar,
+  validPassword,
+  showValidations,
+}: PasswordSectionProps) {
+  const { t } = useTranslation('completionForm');
+  const [showPasswordText, setShowPasswordText] = useState(false);
+
+  const handleTogglePasswordSection = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setShowPasswordSection(e.target.checked);
+  };
+
+  const handleTogglePasswordEye = () => {
+    setShowPasswordText((prev) => !prev);
+  };
+
+  return (
+    <>
+      <FormGroup>
+        <Box sx={{ display: 'flex', gap: 0.5, px: 6, alignItems: 'center' }}>
+          <Switch
+            checked={showPasswordSection}
+            onChange={handleTogglePasswordSection}
+            sx={{
+              '& .MuiSwitch-switchBase.Mui-checked': { color: '#2979FF' },
+              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                backgroundColor: '#2979FF',
+              },
+            }}
+          />
+          <Typography sx={{ color: showPasswordSection ? '#2979FF' : 'black' }}>
+            {t('completion.determinePassword')}
+          </Typography>
+        </Box>
+      </FormGroup>
+
+      {showPasswordSection && (
+        <Box sx={{ display: 'flex', gap: 2, px: 6 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <TextField
+              label={t('completion.password')}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              variant="outlined"
+              type={showPasswordText ? 'text' : 'password'}
+              sx={{ width: '309px' }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    {validPassword && (
+                      <TickCircle
+                        size="16"
+                        color="#2e7d32"
+                        variant="Bold"
+                        style={{ marginRight: '8px' }}
+                      />
+                    )}
+                    <IconButton onClick={handleTogglePasswordEye}>
+                      {showPasswordText ? (
+                        <EyeSlash size="20" color="#000" />
+                      ) : (
+                        <Eye size="20" color="#000" />
+                      )}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+
+            {password && (
+              <Box sx={{ mt: 1 }}>
+                {showValidations && (
+                  <Box sx={{ mt: 1 }}>
+                    <PasswordValidationItem
+                      isValid={hasNumber}
+                      label={t('completion.hasNumber')}
+                    />
+                    <PasswordValidationItem
+                      isValid={hasMinLength}
+                      label={t('completion.hasMinLength')}
+                    />
+                    <PasswordValidationItem
+                      isValid={hasUpperAndLower}
+                      label={t('completion.hasUpperAndLower')}
+                    />
+                    <PasswordValidationItem
+                      isValid={hasSpecialChar}
+                      label={t('completion.hasSpecialChar')}
+                    />
+                  </Box>
+                )}
+              </Box>
+            )}
+          </Box>
+
+          <TextField
+            label={t('completion.passwordRepetition')}
+            variant="outlined"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            error={confirmPassword.length > 0 && !matchPassword}
+            helperText={
+              confirmPassword.length > 0 && !matchPassword
+                ? t('completion.notCompatibility')
+                : ' '
+            }
+            sx={{ width: '309px' }}
+            type={showPasswordText ? 'text' : 'password'}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  {confirmPassword.length > 0 && matchPassword && (
+                    <TickCircle
+                      size="16"
+                      color="#2e7d32"
+                      variant="Bold"
+                      style={{ marginRight: '8px' }}
+                    />
+                  )}
+                  <IconButton onClick={handleTogglePasswordEye}>
+                    {showPasswordText ? (
+                      <EyeSlash size="20" color="#000" />
+                    ) : (
+                      <Eye size="20" color="#000" />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+        </Box>
+      )}
+    </>
+  );
+}