feat: button to make password visible

src/SetPassword.tsx

@@ -2,6 +2,9 @@ import { jwtDecode, JwtPayload } from "jwt-decode";
 import { useEffect, useState } from "react";
 import { baseUrl } from "./api";
 import { useNavigate } from "react-router";
+import eye from "./eye.svg";
+import { Eye, EyeSlash } from "./Icons";
+import { relative } from "path";
 
 interface SetPassToken extends JwtPayload {
   name: string;
@@ -15,6 +18,7 @@ export const SetPassword = () => {
   const [token, setToken] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -85,35 +89,66 @@ export const SetPassword = () => {
         </span>
       )}
       <form onSubmit={handleSubmit}>
-        <div>
-          <input
-            type="password"
-            id="password"
-            name="password"
-            placeholder="password"
-            minLength={8}
-            value={password}
-            required
-            onChange={(evt) => {
-              setError("");
-              setPassword(evt.target.value);
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              marginRight: "8px",
+              display: "flex",
+              justifyContent: "center",
+              flexDirection: "column",
             }}
-          />
-        </div>
-        <div>
-          <input
-            type="password"
-            id="password-repeat"
-            name="password-repeat"
-            placeholder="repeat password"
-            minLength={8}
-            value={passwordr}
-            required
-            onChange={(evt) => {
-              setError("");
-              setPasswordr(evt.target.value);
+          >
+            <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>
+              <input
+                type={visible ? "text" : "password"}
+                id="password-repeat"
+                name="password-repeat"
+                placeholder="repeat password"
+                minLength={8}
+                value={passwordr}
+                required
+                onChange={(evt) => {
+                  setError("");
+                  setPasswordr(evt.target.value);
+                }}
+              />
+            </div>
+          </div>
+          <div
+            style={{
+              position: "absolute",
+              right: 0,
+              margin: "auto 4px",
+              background: "unset",
+              fontSize: "xx-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" }}>