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

src/features/profile/components/security/PasswordDialog.tsx

@@ -10,11 +10,14 @@ import {
   Link,
   CircularProgress,
   Typography,
+  InputAdornment,
 } from '@mui/material';
-import { CloseCircle } from 'iconsax-react';
+import { CloseCircle, Eye, EyeSlash } from 'iconsax-react';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PasswordDialogProps } from '../../types/settingsType';
 import { PasswordValidationItem } from './PasswordValidation';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 export function PasswordDialog({
   open,
@@ -27,7 +30,6 @@ export function PasswordDialog({
   currentPassword,
   setCurrentPassword,
   showValidation,
-  validPassword,
   matchPassword,
   loading,
   handleSubmit,
@@ -39,6 +41,11 @@ export function PasswordDialog({
   hasUpperAndLower,
   hasSpecialChar,
 }: PasswordDialogProps) {
+  const [showCurrent, setShowCurrent] = useState(false);
+  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const navigate = useNavigate();
+
   return (
     <Dialog
       open={open}
@@ -80,13 +87,25 @@ export function PasswordDialog({
           <>
             <TextField
               label={t('securityForm.currentPassword')}
-              type="password"
+              type={showCurrent ? 'text' : 'password'}
               fullWidth
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
               sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton onClick={() => setShowCurrent(!showCurrent)}>
+                      <Icon Component={showCurrent ? Eye : EyeSlash} />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
             />
-            <Link sx={{ fontSize: '15px', cursor: 'pointer' }}>
+            <Link
+              sx={{ fontSize: '15px', cursor: 'pointer' }}
+              onClick={() => navigate('/forget-password')}
+            >
               {t('securityForm.forgetPassword')}
             </Link>
           </>
@@ -94,11 +113,20 @@ export function PasswordDialog({
 
         <TextField
           label={t('securityForm.newPassword')}
-          type="password"
+          type={showNew ? 'text' : 'password'}
           fullWidth
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={() => setShowNew(!showNew)}>
+                  <Icon Component={showNew ? Eye : EyeSlash} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
         />
 
         {showValidation && (
@@ -124,7 +152,7 @@ export function PasswordDialog({
 
         <TextField
           label={t('securityForm.confirmPassword')}
-          type="password"
+          type={showConfirm ? 'text' : 'password'}
           fullWidth
           value={confirmPassword}
           onChange={(e) => setConfirmPassword(e.target.value)}
@@ -135,6 +163,15 @@ export function PasswordDialog({
               : ' '
           }
           sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={() => setShowConfirm(!showConfirm)}>
+                  <Icon Component={showConfirm ? Eye : EyeSlash} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
         />
       </DialogContent>
 
@@ -144,7 +181,6 @@ export function PasswordDialog({
           sx={{ height: 48, textTransform: 'none' }}
           variant="contained"
           onClick={handleSubmit}
-          disabled={!validPassword || !matchPassword || loading}
         >
           {loading ? (
             <CircularProgress size={24} color="inherit" />

src/features/profile/components/security/PasswordSecurity.tsx

@@ -94,23 +94,26 @@ export function PasswordSecurity() {
       setPassword('');
       setConfirmPassword('');
       setCurrentPassword('');
-    }
-  }, [addData, changeData, changePasswordUI, showToast, t]);
-
-  useEffect(() => {
-    if (addError || changeError) {
+    } else if (addData || changeData) {
       showToast({
         message:
-          getErrorMessage(addError || changeError) || t('securityForm.general'),
+          addData?.message || changeData?.message || t('securityForm.error'),
         severity: 'error',
       });
     }
-  }, [addError, changeError, t, showToast]);
+  }, [addData, changeData, changePasswordUI, showToast, t]);
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
   const handlePasswordSubmit = async () => {
+    if (!matchPassword) {
+      showToast({
+        message: t('securityForm.notCompatibility'),
+        severity: 'error',
+      });
+      return;
+    }
     if (changePasswordUI) {
       await executeChangePassword({
         oldPassword: currentPassword,