diff --git a/src/SignIn.js b/src/SignIn.js index 0abdfa64ae3a8c70660b613d60b71f779fd0164e..c12a934f3040a4f61fb38b1d020b5279a29703cc 100644 --- a/src/SignIn.js +++ b/src/SignIn.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; -import { Form, Button, Row } from "react-bootstrap"; +import { Form, Button, Row, InputGroup } from "react-bootstrap"; +import { FaEye, FaEyeSlash } from "react-icons/fa"; import Sender from "./Sender"; function SignIn(props) { @@ -9,6 +10,7 @@ function SignIn(props) { const [password, setPassword] = useState(""); const [noExpire, setNoExpire] = useState(Boolean(native)); const [badAuth, setBadAuth] = useState(false); + const [passVisible, setPassVisible] = useState(false); const onError = (status) => { if (status === 400) { @@ -18,6 +20,10 @@ function SignIn(props) { return false; }; + const togglePassVisible = () => { + setPassVisible(!passVisible); + }; + return ( <div> <Row className="justify-content-center"> @@ -39,13 +45,20 @@ function SignIn(props) { <Form.Group> <Form.Label>Contraseña</Form.Label> - <Form.Control - type="password" - placeholder="Contraseña" - value={password} - onChange={(e) => setPassword(e.target.value)} - isInvalid={badAuth} - /> + <InputGroup> + <Form.Control + type={passVisible ? "input" : "password"} + placeholder="Contraseña" + value={password} + onChange={(e) => setPassword(e.target.value)} + isInvalid={badAuth} + /> + <InputGroup.Append> + <InputGroup.Text onClick={togglePassVisible}> + {passVisible ? <FaEyeSlash /> : <FaEye />} + </InputGroup.Text> + </InputGroup.Append> + </InputGroup> <Form.Control.Feedback type="invalid"> Nombre o contraseña invalidos. </Form.Control.Feedback>