feat: button to make password visible

src/Login.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { currentUser, login, User } from "./api";
 import Header from "./Header";
 import { useLocation, useNavigate } from "react-router";
+import { Eye, EyeSlash } from "./Icons";
 
 export interface LoginProps {
   onLogin: (user: User) => void;
@@ -12,6 +13,7 @@ export const Login = ({ onLogin }: LoginProps) => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -52,34 +54,65 @@ export const Login = ({ onLogin }: LoginProps) => {
     <>
       <Header />
       <form onSubmit={handleSubmit}>
-        <div>
-          <input
-            type="text"
-            id="username"
-            name="username"
-            placeholder="username"
-            required
-            value={username}
-            onChange={(evt) => {
-              setError("");
-              setUsername(evt.target.value);
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            alignItems: "end",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              marginRight: "8px",
+              display: "flex",
+              justifyContent: "center",
+              flexDirection: "column",
             }}
-          />
-        </div>
-        <div>
-          <input
-            type="password"
-            id="password"
-            name="password"
-            placeholder="password"
-            minLength={8}
-            value={password}
-            required
-            onChange={(evt) => {
-              setError("");
-              setPassword(evt.target.value);
+          >
+            <div>
+              <input
+                type="text"
+                id="username"
+                name="username"
+                placeholder="username"
+                required
+                value={username}
+                onChange={(evt) => {
+                  setError("");
+                  setUsername(evt.target.value);
+                }}
+              />
+            </div>
+            <div>
+              <input
+                type={visible ? "text" : "password"}
+                id="password"
+                name="password"
+                placeholder="password"
+                minLength={8}
+                value={password}
+                required
+                onChange={(evt) => {
+                  setError("");
+                  setPassword(evt.target.value);
+                }}
+              />
+            </div>
+          </div>
+          <div
+            style={{
+              position: "absolute",
+              right: "-1em",
+              margin: "auto 4px",
+              background: "unset",
+              fontSize: "x-large",
+              cursor: "pointer",
             }}
-          />
+            onClick={() => setVisible(!visible)}
+          >
+            {visible ? <Eye /> : <EyeSlash />}
+          </div>
         </div>
         <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
         <button type="submit" value="login" style={{ fontSize: "small" }}>