From 5b8f476997914c4b5fffbc8834fbab83097fab8e Mon Sep 17 00:00:00 2001 From: julius Date: Tue, 11 Mar 2025 19:14:34 +0100 Subject: [PATCH] feat: button to make password visible --- public/gitea.svg | 42 +-------------------- public/logo.svg | 50 +------------------------ src/Icons.tsx | 72 ++++++++++++++++++++++++++++++++++++ src/Login.tsx | 85 ++++++++++++++++++++++++++++++------------- src/SetPassword.tsx | 89 +++++++++++++++++++++++++++++++-------------- 5 files changed, 195 insertions(+), 143 deletions(-) create mode 100644 src/Icons.tsx diff --git a/public/gitea.svg b/public/gitea.svg index cbb4c12..a5b540a 100644 --- a/public/gitea.svg +++ b/public/gitea.svg @@ -1,41 +1 @@ - - + \ No newline at end of file diff --git a/public/logo.svg b/public/logo.svg index eded6ed..0588888 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,49 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/src/Icons.tsx b/src/Icons.tsx new file mode 100644 index 0000000..5024b64 --- /dev/null +++ b/src/Icons.tsx @@ -0,0 +1,72 @@ +export const Eye = () => ( + + + + + + + + +); + +export const EyeSlash = () => ( + + + + + + + + + +); diff --git a/src/Login.tsx b/src/Login.tsx index ae31add..62aa361 100644 --- a/src/Login.tsx +++ b/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) => { <>
-
- { - setError(""); - setUsername(evt.target.value); +
+
-
-
- { - setError(""); - setPassword(evt.target.value); + > +
+ { + setError(""); + setUsername(evt.target.value); + }} + /> +
+
+ { + setError(""); + setPassword(evt.target.value); + }} + /> +
+
+
+ onClick={() => setVisible(!visible)} + > + {visible ? : } +
{error && {error}}