From f2548a99e7c68b66e7f2ec9468ce1e5a985a81bf Mon Sep 17 00:00:00 2001 From: jackra1n <45038833+jackra1n@users.noreply.github.com> Date: Sat, 30 Aug 2025 19:21:03 +0200 Subject: [PATCH 1/4] Use proper form for login, add autocomplete and names to input fields --- frontend/src/pages/login.tsx | 48 ++++++++++++++++++++++++------------ 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx index 1e9528f5b..732a0dc13 100644 --- a/frontend/src/pages/login.tsx +++ b/frontend/src/pages/login.tsx @@ -15,7 +15,7 @@ import { useLoginOptions, useUserInvalidate, } from "@lib/hooks"; -import { useState } from "react"; +import { useRef, type FormEvent } from "react"; import { ThemeToggle } from "@ui/theme"; import { KOMODO_BASE_URL } from "@main"; import { KeyRound, X } from "lucide-react"; @@ -38,9 +38,9 @@ const login_with_oauth = (provider: OauthProvider) => { export default function Login() { const options = useLoginOptions().data; - const [creds, set] = useState({ username: "", password: "" }); const userInvalidate = useUserInvalidate(); const { toast } = useToast(); + const formRef = useRef(null); // If signing in another user, need to redirect away from /login manually const maybeNavigate = location.pathname.startsWith("/login") @@ -98,7 +98,21 @@ export default function Login() { }, }); - + const handleLoginSubmit = (e: FormEvent) => { + e.preventDefault(); + const fd = new FormData(e.currentTarget); + const username = String(fd.get("username") ?? ""); + const password = String(fd.get("password") ?? ""); + login({ username, password }); + }; + + const handleSignupClick = () => { + if (!formRef.current) return; + const fd = new FormData(formRef.current); + const username = String(fd.get("username") ?? ""); + const password = String(fd.get("password") ?? ""); + signup({ username, password }); + }; const no_auth_configured = options !== undefined && @@ -166,28 +180,29 @@ export default function Login() { {options?.local && ( - <> +
- set((c) => ({ ...c, username: target.value })) - } + name="username" + autoComplete="username" + autoCapitalize="none" + autoCorrect="off" />
- set((c) => ({ ...c, password: target.value })) - } - onKeyDown={(e) => e.key === "Enter" && login(creds)} + autoComplete="current-password" />
@@ -195,7 +210,8 @@ export default function Login() { {show_sign_up && ( - +
)} {no_auth_configured && ( From 491eb8cd1b2fcdbc0064bd8f61959594444e8aa3 Mon Sep 17 00:00:00 2001 From: jackra1n <45038833+jackra1n@users.noreply.github.com> Date: Sat, 30 Aug 2025 19:51:11 +0200 Subject: [PATCH 2/4] Do not return null if loading --- frontend/src/router.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index f470c9b3a..bdb317828 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -63,7 +63,7 @@ const useExchangeToken = () => { }; export const Router = () => { - const { data: user, isLoading, error } = useUser(); + const { data: user, error } = useUser(); // Handle exchange token loop to avoid showing login flash const exchangeTokenPending = useExchangeToken(); @@ -75,8 +75,6 @@ export const Router = () => { ); } - if (isLoading && !user) return null; - if (!user || error) return ; if (!user.enabled) return ; From 9935b1b1860796c5a7ef47c62925e97835fbb1cf Mon Sep 17 00:00:00 2001 From: jackra1n <45038833+jackra1n@users.noreply.github.com> Date: Sat, 30 Aug 2025 19:52:51 +0200 Subject: [PATCH 3/4] Remove unused function --- frontend/src/components/util.tsx | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/frontend/src/components/util.tsx b/frontend/src/components/util.tsx index 34636dbdf..8bea00579 100644 --- a/frontend/src/components/util.tsx +++ b/frontend/src/components/util.tsx @@ -93,24 +93,6 @@ import { } from "@ui/select"; import { useServer } from "./resources/server"; -export const WithLoading = ({ - children, - isLoading, - loading, - isError, - error, -}: { - children: ReactNode; - isLoading: boolean; - loading?: ReactNode; - isError: boolean; - error?: ReactNode; -}) => { - if (isLoading) return <>{loading ?? "loading"}; - if (isError) return <>{error ?? null}; - return <>{children}; -}; - export const ActionButton = forwardRef< HTMLButtonElement, { From dc23c6feaf120b994ccfffe06150ec7640951e08 Mon Sep 17 00:00:00 2001 From: jackra1n <45038833+jackra1n@users.noreply.github.com> Date: Sat, 30 Aug 2025 22:05:43 +0200 Subject: [PATCH 4/4] Cleanup and streamline --- frontend/src/pages/login.tsx | 48 +++++++++++++++++------------------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx index 732a0dc13..6bbc3d0a5 100644 --- a/frontend/src/pages/login.tsx +++ b/frontend/src/pages/login.tsx @@ -15,7 +15,7 @@ import { useLoginOptions, useUserInvalidate, } from "@lib/hooks"; -import { useRef, type FormEvent } from "react"; +import { type FormEvent } from "react"; import { ThemeToggle } from "@ui/theme"; import { KOMODO_BASE_URL } from "@main"; import { KeyRound, X } from "lucide-react"; @@ -40,7 +40,6 @@ export default function Login() { const options = useLoginOptions().data; const userInvalidate = useUserInvalidate(); const { toast } = useToast(); - const formRef = useRef(null); // If signing in another user, need to redirect away from /login manually const maybeNavigate = location.pathname.startsWith("/login") @@ -98,20 +97,17 @@ export default function Login() { }, }); - const handleLoginSubmit = (e: FormEvent) => { + const handleSubmit = (e: FormEvent) => { e.preventDefault(); const fd = new FormData(e.currentTarget); const username = String(fd.get("username") ?? ""); const password = String(fd.get("password") ?? ""); - login({ username, password }); - }; - - const handleSignupClick = () => { - if (!formRef.current) return; - const fd = new FormData(formRef.current); - const username = String(fd.get("username") ?? ""); - const password = String(fd.get("password") ?? ""); - signup({ username, password }); + const action = String(fd.get("action") ?? "login"); + if (action === "signup") { + signup({ username, password }); + } else { + login({ username, password }); + } }; const no_auth_configured = @@ -124,7 +120,6 @@ export default function Login() { return (
- {/* */}
{options?.local && (
@@ -210,8 +204,9 @@ export default function Login() { {show_sign_up && ( + + example config + for information on configuring auth. )}