add function hide password to login

src/renderer/components/Login/AuthForm.tsx

@@ -1,5 +1,10 @@
-import { Box, Button, TextField, Typography } from '@mui/material';
-import GradientTextField from '../../components/GradientTextField';
+import { useState } from "react";
+import { Box, Button, TextField, Typography, InputAdornment, IconButton } from '@mui/material';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import GradientTextField from '../GradientTextField';
+import GradientVisibilityToggleIcon from '../Icons/GradientVisibilityToggleIcon'
+import GradientVisibilityIcon from '../Icons/GradientVisibilityIcon'
 
 interface AuthFormProps {
   config: {
@@ -11,6 +16,7 @@ interface AuthFormProps {
 }
 
 const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
+  const [showPassword, setShowPassword] = useState(false);
   return (
     <Box
       sx={{
@@ -34,9 +40,42 @@ const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
       <GradientTextField
         label="Пароль"
         required
+        type={showPassword ? "text" : "password"}
         name="password"
         value={config.password}
         onChange={handleInputChange}
+        sx={{
+          '& .MuiInputBase-input': {
+          color: 'white',
+          padding: '1rem 0.7rem 1.1rem 1.5rem',
+          fontFamily: 'Benzin-Bold',
+        },
+        }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end" sx={{ margin: '0' }}>
+              <IconButton
+                disableRipple
+                disableFocusRipple
+                disableTouchRipple
+                onClick={() => setShowPassword((prev) => !prev)}
+                edge="end"
+                sx={{
+                  color: "white",
+                  margin: '0',
+                  padding: '0',
+                  '& MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root': {
+                    display: 'none',
+                  },
+                }}>
+                <GradientVisibilityToggleIcon
+                  crossed={showPassword}     // когда type="text" -> перечеркнуть
+                  sx={{ fontSize: "2.5vw", mr: '0.5vw' }}
+                />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
       />
       <Button onClick={onLogin} variant="contained"
       sx={{
@@ -48,7 +87,7 @@ const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
         borderRadius: '2.5vw',
         fontSize: '2vw',
         '&:hover': {
-          transform: 'scale(1.1)',
+          transform: 'scale(1.02)',
 
         },
       }}>