diff --git a/src/components/LoginForm/LoginForm.js b/src/components/LoginForm/LoginForm.js index daa43ab..6cd39ad 100644 --- a/src/components/LoginForm/LoginForm.js +++ b/src/components/LoginForm/LoginForm.js @@ -1,5 +1,7 @@ import React, { useState } from "react"; -import { Box, Paper, TextField, Button, Avatar, Typography, useTheme, makeStyles } from "@material-ui/core"; +import { Box, Paper, TextField, Button, Avatar, Typography, InputAdornment, IconButton, useTheme, makeStyles } from "@material-ui/core"; +import Visibility from '@material-ui/icons/Visibility'; +import VisibilityOff from '@material-ui/icons/VisibilityOff'; import { Redirect } from "react-router-dom"; import { Alert } from '@material-ui/lab'; import { useLogin, useLoginSetter, useTokenSetter } from "../AuthProvider/"; @@ -9,6 +11,7 @@ export default function LoginForm() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(false); + const [showPassword, setShowPassword] = useState(false); const handleUsernameChange = (event) => setUsername(event.target.value); const handlePasswordChange = (event) => setPassword(event.target.value); @@ -74,6 +77,20 @@ export default function LoginForm() { ); } + const ViewPasswordToggle = _ => { + return ( + + setShowPassword(!showPassword) } + onMouseDown={ (event) => event.preventDefault() } + > + { showPassword ? : } + + + ); + } + return (
@@ -99,7 +116,7 @@ export default function LoginForm() { variant="outlined" /> + }} />