Persist username across login/register form toggle

client/src/menus/AuthScreen.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { RegisterUserForm } from "./RegisterUserForm";
 import { LoginUserForm } from "./LoginUserForm";
 
@@ -10,10 +11,12 @@ export function AuthScreen({
     setShowRegister: (v: boolean) => void;
     setHasJwt: (v: boolean) => void;
 }) {
+    const [name, setName] = useState("");
+
     if (showRegister) {
         return (
             <>
-                <RegisterUserForm onRegister={() => setHasJwt(true)} />
+                <RegisterUserForm onRegister={() => setHasJwt(true)} name={name} setName={setName} />
                 <div style={{ textAlign: "center", marginTop: 16 }}>
                     <span>
                         Already have an account?{" "}
@@ -38,7 +41,7 @@ export function AuthScreen({
     } else {
         return (
             <>
-                <LoginUserForm onLogin={() => setHasJwt(true)} />
+                <LoginUserForm onLogin={() => setHasJwt(true)} name={name} setName={setName} />
                 <div style={{ textAlign: "center", marginTop: 16 }}>
                     <span>
                         Don&apos;t have an account?{" "}

client/src/menus/LoginUserForm.tsx

@@ -36,8 +36,15 @@ const ButtonRow = styled.div`
     gap: 1rem;
 `;
 
-export const LoginUserForm = ({ onLogin }: { onLogin?: () => void }) => {
-    const [name, setName] = useState("");
+export const LoginUserForm = ({
+    onLogin,
+    name,
+    setName,
+}: {
+    onLogin?: () => void;
+    name: string;
+    setName: (v: string) => void;
+}) => {
     const [password, setPassword] = useState("");
     const [error, setError] = useState<string | null>(null);
     const [loggedIn, setLoggedIn] = useState(false);

client/src/menus/RegisterUserForm.tsx

@@ -38,10 +38,13 @@ const ButtonRow = styled.div`
 
 export const RegisterUserForm = ({
     onRegister,
+    name,
+    setName,
 }: {
     onRegister?: () => void;
+    name: string;
+    setName: (v: string) => void;
 }) => {
-    const [name, setName] = useState("");
     const [password, setPassword] = useState("");
     const [error, setError] = useState<string | null>(null);
     const { login } = useAuth();