Merge branch 'develop' into fix/completion-page

src/features/authentication/components/UserCompletionForm/PasswordSection.tsx

@@ -0,0 +1,227 @@
+import React, { useState } from 'react';
+import {
+  TextField,
+  Box,
+  IconButton,
+  Switch,
+  FormGroup,
+  Typography,
+  InputAdornment,
+  Grid,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TickCircle, Eye, EyeSlash, CloseCircle } from 'iconsax-react';
+import { PasswordValidationItem } from './PasswordValidation';
+import { Icon } from '@rkheftan/harmony-ui';
+import { type PasswordSectionProps } from '../../types/settingForm';
+
+export function PasswordSection({
+  showPasswordSection,
+  setShowPasswordSection,
+  password,
+  setPassword,
+  confirmPassword,
+  setConfirmPassword,
+  matchPassword,
+  hasNumber,
+  hasMinLength,
+  hasUpperAndLower,
+  hasSpecialChar,
+  validPassword,
+  errors,
+  touched,
+  handleBlur,
+}: PasswordSectionProps) {
+  const { t } = useTranslation('completionForm');
+  const [showPasswordText, setShowPasswordText] = useState(false);
+  const [showPasswordRepetitionText, setShowPasswordRepetitionText] =
+    useState(false);
+  const [showValidations, setShowValidation] = useState(false);
+
+  const handleTogglePasswordSection = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setShowPasswordSection(e.target.checked);
+  };
+
+  const handleTogglePasswordEye = () => setShowPasswordText((prev) => !prev);
+  const handleTogglePasswordRepetitionEye = () =>
+    setShowPasswordRepetitionText((prev) => !prev);
+
+  const handleBlurPassword = () => {
+    handleBlur('password');
+    setShowValidation(false);
+  };
+
+  return (
+    <>
+      <FormGroup>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 0.5,
+            alignItems: 'center',
+          }}
+        >
+          <Switch
+            checked={showPasswordSection}
+            onChange={handleTogglePasswordSection}
+          />
+          <Typography
+            sx={{
+              color: showPasswordSection ? 'primary.main' : 'text.primary',
+            }}
+          >
+            {t('completion.determinePassword')}
+          </Typography>
+        </Box>
+      </FormGroup>
+
+      {showPasswordSection && (
+        <Grid container spacing={2}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <TextField
+              fullWidth
+              label={t('completion.password')}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              variant="outlined"
+              type={showPasswordText ? 'text' : 'password'}
+              autoFocus
+              onBlur={handleBlurPassword}
+              onFocus={() => setShowValidation(true)}
+              error={touched.password && !!errors.password}
+              helperText={touched.password && errors.password}
+              sx={{
+                flex: '1 1 260px',
+                '& .MuiInputBase-input': {
+                  pr: 8, // Increased padding to accommodate both icons
+                },
+              }}
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        onClick={handleTogglePasswordEye}
+                        sx={{ p: 0.5 }}
+                      >
+                        {showPasswordText ? (
+                          <Icon
+                            Component={Eye}
+                            color="primary.main"
+                            size="medium"
+                          />
+                        ) : (
+                          <Icon
+                            Component={EyeSlash}
+                            size="medium"
+                            color="primary.main"
+                          />
+                        )}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                  startAdornment: validPassword && (
+                    <InputAdornment position="start">
+                      <Icon
+                        Component={TickCircle}
+                        size="medium"
+                        color="success.main"
+                        variant="Bold"
+                      />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <TextField
+              fullWidth
+              label={t('completion.passwordRepetition')}
+              variant="outlined"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              onBlur={() => handleBlur('confirmPassword')}
+              error={touched.confirmPassword && !!errors.confirmPassword}
+              helperText={touched.confirmPassword && errors.confirmPassword}
+              type={showPasswordRepetitionText ? 'text' : 'password'}
+              sx={{
+                flex: '1 1',
+              }}
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        onClick={handleTogglePasswordRepetitionEye}
+                        sx={{ p: 0.5 }}
+                      >
+                        {showPasswordRepetitionText ? (
+                          <Icon
+                            Component={Eye}
+                            color="primary.main"
+                            size="medium"
+                          />
+                        ) : (
+                          <Icon
+                            Component={EyeSlash}
+                            size="medium"
+                            color="primary.main"
+                          />
+                        )}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                  startAdornment: confirmPassword.length > 0 && (
+                    <InputAdornment position="start">
+                      <Icon
+                        Component={matchPassword ? TickCircle : CloseCircle}
+                        size="medium"
+                        color={matchPassword ? 'success.main' : 'error.main'}
+                        variant="Bold"
+                      />
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+          </Grid>
+
+          {showValidations && (
+            <>
+              <Grid size={{ xs: 12, md: 6 }}>
+                <PasswordValidationItem
+                  isValid={hasNumber}
+                  label={t('completion.hasNumber')}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <PasswordValidationItem
+                  isValid={hasMinLength}
+                  label={t('completion.hasMinLength')}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <PasswordValidationItem
+                  isValid={hasUpperAndLower}
+                  label={t('completion.hasUpperAndLower')}
+                />
+              </Grid>
+
+              <Grid size={{ xs: 12, md: 6 }}>
+                <PasswordValidationItem
+                  isValid={hasSpecialChar}
+                  label={t('completion.hasSpecialChar')}
+                />
+              </Grid>
+            </>
+          )}
+        </Grid>
+      )}
+    </>
+  );
+}