Merge pull request #287 from Dionatas1114/feat-add-eye-to-show-passw

feat add eye to show passw in the pages login, signup and usermodal

frontend/src/components/UserModal/index.js

@@ -4,19 +4,26 @@ import * as Yup from "yup";
 import { Formik, Form, Field } from "formik";
 import { toast } from "react-toastify";
 
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogTitle,
+	CircularProgress,
+	Select,
+	InputLabel,
+	MenuItem,
+	FormControl,
+	TextField,
+	InputAdornment,
+	IconButton
+  } from '@material-ui/core';
+
+import { Visibility, VisibilityOff } from '@material-ui/icons';
+
 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import Select from "@material-ui/core/Select";
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import FormControl from "@material-ui/core/FormControl";
 
 import { i18n } from "../../translate/i18n";
 
@@ -79,6 +86,8 @@ const UserModal = ({ open, onClose, userId }) => {
 
 	const [user, setUser] = useState(initialState);
 	const [selectedQueueIds, setSelectedQueueIds] = useState([]);
+	const [showPassword, setShowPassword] = useState(false);
+
 
 	useEffect(() => {
 		const fetchUser = async () => {
@@ -160,13 +169,25 @@ const UserModal = ({ open, onClose, userId }) => {
 									/>
 									<Field
 										as={TextField}
-										label={i18n.t("userModal.form.password")}
-										type="password"
 										name="password"
-										error={touched.password && Boolean(errors.password)}
-										helperText={touched.password && errors.password}
 										variant="outlined"
 										margin="dense"
+										label={i18n.t("userModal.form.password")}
+										error={touched.password && Boolean(errors.password)}
+										helperText={touched.password && errors.password}
+										type={showPassword ? 'text' : 'password'}
+										InputProps={{
+										endAdornment: (
+											<InputAdornment position="end">
+											<IconButton
+												aria-label="toggle password visibility"
+												onClick={() => setShowPassword((e) => !e)}
+											>
+												{showPassword ? <VisibilityOff /> : <Visibility />}
+											</IconButton>
+											</InputAdornment>
+										)
+										}}
 										fullWidth
 									/>
 								</div>

frontend/src/pages/Login/index.js

@@ -1,17 +1,23 @@
 import React, { useState, useContext } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
-import Avatar from "@material-ui/core/Avatar";
-import Button from "@material-ui/core/Button";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import TextField from "@material-ui/core/TextField";
-import Link from "@material-ui/core/Link";
-import Grid from "@material-ui/core/Grid";
-import Box from "@material-ui/core/Box";
-import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
-import Typography from "@material-ui/core/Typography";
+import {
+  Avatar,
+  Button,
+  CssBaseline,
+  TextField,
+  Grid,
+  Box,
+  Typography,
+  Container,
+  InputAdornment,
+  IconButton,
+  Link
+} from '@material-ui/core';
+
+import { LockOutlined, Visibility, VisibilityOff } from '@material-ui/icons';
+
 import { makeStyles } from "@material-ui/core/styles";
-import Container from "@material-ui/core/Container";
 
 import { i18n } from "../../translate/i18n";
 
@@ -54,6 +60,7 @@ const Login = () => {
   const classes = useStyles();
 
   const [user, setUser] = useState({ email: "", password: "" });
+  const [showPassword, setShowPassword] = useState(false);
 
   const { handleLogin } = useContext(AuthContext);
 
@@ -71,7 +78,7 @@ const Login = () => {
       <CssBaseline />
       <div className={classes.paper}>
         <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
+          <LockOutlined />
         </Avatar>
         <Typography component="h1" variant="h5">
           {i18n.t("login.title")}
@@ -97,11 +104,23 @@ const Login = () => {
             fullWidth
             name="password"
             label={i18n.t("login.form.password")}
-            type="password"
             id="password"
             value={user.password}
             onChange={handleChangeInput}
             autoComplete="current-password"
+            type={showPassword ? 'text' : 'password'}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword((e) => !e)}
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              )
+            }}
           />
           <Button
             type="submit"

frontend/src/pages/Signup/index.js

@@ -6,17 +6,23 @@ import { Link as RouterLink } from "react-router-dom";
 import { toast } from "react-toastify";
 import { Formik, Form, Field } from "formik";
 
-import Avatar from "@material-ui/core/Avatar";
-import Button from "@material-ui/core/Button";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import TextField from "@material-ui/core/TextField";
-import Link from "@material-ui/core/Link";
-import Grid from "@material-ui/core/Grid";
-import Box from "@material-ui/core/Box";
-import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
-import Typography from "@material-ui/core/Typography";
+import {
+	Avatar,
+	Button,
+	CssBaseline,
+	TextField,
+	Grid,
+	Box,
+	Typography,
+	Container,
+	InputAdornment,
+	IconButton,
+	Link
+  } from '@material-ui/core';
+  
+import { LockOutlined, Visibility, VisibilityOff } from '@material-ui/icons';
+  
 import { makeStyles } from "@material-ui/core/styles";
-import Container from "@material-ui/core/Container";
 
 import { i18n } from "../../translate/i18n";
 
@@ -70,7 +76,7 @@ const SignUp = () => {
 	const history = useHistory();
 
 	const initialState = { name: "", email: "", password: "" };
-
+	const [showPassword, setShowPassword] = useState(false);
 	const [user] = useState(initialState);
 
 	const handleSignUp = async values => {
@@ -88,7 +94,7 @@ const SignUp = () => {
 			<CssBaseline />
 			<div className={classes.paper}>
 				<Avatar className={classes.avatar}>
-					<LockOutlinedIcon />
+					<LockOutlined />
 				</Avatar>
 				<Typography component="h1" variant="h5">
 					{i18n.t("signup.title")}
@@ -142,12 +148,24 @@ const SignUp = () => {
 										variant="outlined"
 										fullWidth
 										name="password"
+										id="password"
+										autoComplete="current-password"
 										error={touched.password && Boolean(errors.password)}
 										helperText={touched.password && errors.password}
 										label={i18n.t("signup.form.password")}
-										type="password"
-										id="password"
-										autoComplete="current-password"
+										type={showPassword ? 'text' : 'password'}
+										InputProps={{
+										endAdornment: (
+											<InputAdornment position="end">
+											<IconButton
+												aria-label="toggle password visibility"
+												onClick={() => setShowPassword((e) => !e)}
+											>
+												{showPassword ? <VisibilityOff /> : <Visibility />}
+											</IconButton>
+											</InputAdornment>
+										)
+										}}
 									/>
 								</Grid>
 							</Grid>