Toggle password visivility

src/SignIn.js

 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>