cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-20 04:39:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat add eye to show passw in the pages login, signup and usermodal
This commit is contained in:
Cassio Santos
2021-11-23 20:56:25 -03:00
committed by GitHub
parent 3d51c05475 150090bc2c
commit 9b547cb323
3 changed files with 100 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/pages/Login/index.js
View File

@@ -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"

48
frontend/src/pages/Signup/index.js
View File

@@ -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>