Add view password toggle to login screen

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 (
+            <InputAdornment position="end">
+                <IconButton
+                    aria-label="Toggle password visibility."
+                    onClick={ _ => setShowPassword(!showPassword) }
+                    onMouseDown={ (event) => event.preventDefault() }
+                >
+                    { showPassword ? <Visibility /> : <VisibilityOff /> }
+                </IconButton>    
+            </InputAdornment>
+        );
+    }
+
     return (
         <Box classes={{ root: classes.box_root }}>
             <form onSubmit={handleSubmit}>
@@ -99,7 +116,7 @@ export default function LoginForm() {
                         variant="outlined"     
                     />
                     <TextField 
-                        type="password" 
+                        type={ showPassword ? "text" : "password"}
                         id="password" 
                         name="password" 
                         label="Password" 
@@ -108,6 +125,9 @@ export default function LoginForm() {
                         onChange={handlePasswordChange}
                         margin="normal" 
                         variant="outlined"
+                        InputProps={{
+                            endAdornment: <ViewPasswordToggle />
+                        }}
                     />
                     <Button  
                         color="primary"