Rebuild authorize page. Now it has password that could be shown or hidden

frontend/package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@material/icon-button": "^14.0.0",
+    "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/axios": "^0.14.0",

frontend/src/containers/AuthorizeForm/AuthorizeForm.module.css

@@ -5,6 +5,7 @@
     justify-content: center;
     align-items: center;
     margin-top: 100px;
+    color: black;
 }
 
 .AuthorizeForm p {
@@ -18,12 +19,13 @@
   flex-direction: column;
   align-items: center;
   padding: 20px;
-  background: rgba(83, 26, 136, 0.659);
+  background: rgb(255, 255, 255);
   border-radius: 5px;
 }
 
 .login_input{
   width: 80%;
+  color: white;
   height: 40px;
   padding: 5px;
   border-radius: 7px;
@@ -88,7 +90,7 @@
   }
   .login_btn{
     margin: 0 auto;
-    margin-top: 30px;
+    margin-top: 10px;
     width: 170px;
     height: 50px;
   }

frontend/src/containers/AuthorizeForm/AuthorizeForm.tsx

@@ -7,6 +7,9 @@ import { shallowEqual, useSelector } from 'react-redux'
 import Preloader from '../../components/UI/Preloader/Preloader'
 import { createUser, hideMessage, loginUser } from '../../store/user/user.slice'
 import Alert from '@mui/material/Alert';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, OutlinedInput, Switch, TextField } from '@mui/material'
 
 const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
     const navigate = useNavigate()
@@ -23,6 +26,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
 
     const [isLoginUser, setIsLoginUser] = useState<boolean>(true)
 
+    const [showPassword, setShowPassword] = useState<boolean>(false);
+
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+
     const inputHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {
         setUserValues(prevState => {
             return {...prevState, [e.target.name]: e.target.value}
@@ -42,6 +49,10 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
         }
     }
 
+    const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+    };
+
     useEffect(() => {
         checkButton()
     },[userValues])
@@ -77,35 +88,73 @@ const AuthorizeForm: React.FunctionComponent = (): React.ReactElement => {
                     </Alert> : null
                 }
                 <p>{isLoginUser ? 'Login user' : 'Authorize user'}</p>
-                <p>Username:</p>
-                <input
-                    className={styles.login_input} 
-                    placeholder='username...' 
-                    name={'username'} 
+                {/* <OutlinedInput
+                    label="Username"
+                    name={'username'}
+                    
                     autoComplete='off'
                     value={userValues.username}
                     onChange={inputHandler}
+                    style={{
+                        marginBottom: '20px'
+                    }}
+                /> */}
+
+                <FormControl sx={{ m: 1, width: '80%' }} variant="outlined">
+                <InputLabel htmlFor="outlined-adornment-password">Username</InputLabel>
+                    <OutlinedInput
+                        id="outlined-adornment-password"
+                        type={'text'}
+                        label="Username"
+                        name={'username'}
+                        autoComplete='off'
+                        value={userValues.username}
+                        onChange={inputHandler}
+                        style={{
+                            marginBottom: '10px',
+                            width: '100%'
+                        }
+                    }    
                 />
-                <p>Password:</p>
-                <input
-                    className={styles.login_input}  
-                    placeholder='password...' 
-                    name={'password'} 
-                    type='password'
-                    autoComplete='off'
-                    value={userValues.password}
-                    onChange={inputHandler}
+                </FormControl>
+                
+
+                <FormControl sx={{ m: 1, width: '80%' }} variant="outlined">
+                <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
+                    <OutlinedInput
+                        id="outlined-adornment-password"
+                        type={showPassword ? 'text' : 'password'}
+                        label="Password"
+                        name={'password'}
+                        autoComplete='off'
+                        value={userValues.password}
+                        onChange={inputHandler}
+                        style={{
+                            marginBottom: '10px',
+                            width: '100%'
+                        }}
+                        endAdornment={
+                        <InputAdornment position="end">
+                            <IconButton
+                            aria-label="toggle password visibility"
+                            onClick={handleClickShowPassword}
+                            onMouseDown={handleMouseDownPassword}
+                            edge="end"
+                            >
+                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                            </IconButton>
+                        </InputAdornment>
+                        }
                 />
-                <label style={{display: 'flex', alignItems: 'center'}}>
-                    <input 
-                        className={styles.toggleCheckbox} 
-                        type="checkbox" 
+                </FormControl>
+                <FormControlLabel
+                    control={<Switch
                         checked={isLoginUser}
-                        onChange={toggleChangeHandler} 
-                    />
-                    <div className={styles.toggleSwitch}></div>
-                    <span className={styles.toggleLabel}>New user?</span>
-                </label>
+                        onChange={toggleChangeHandler}
+                        inputProps={{ 'aria-label': 'controlled' }}
+                    />} 
+                    label={<p style={{color: 'black'}}>Add new user</p>}
+                />
                 <button
                     className={styles.login_btn}
                     disabled={buttonDisabled}