Rewrite with React after AI got stuck in some obscure state errors on SolidJS

ui/src/routes/login.tsx

@@ -1,65 +1,83 @@
-import { Title } from "@solidjs/meta";
-import { useSubmission } from "@solidjs/router";
-import { Show } from "solid-js";
-import { useOAuthLogin } from "start-oauth";
-import { formLogin } from "~/auth";
-import { language, t } from "~/i18n";
+import { FormEvent, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useRecoilState } from "recoil";
+import { useT } from "~/i18n";
+import { sessionAtom } from "~/state/appState";
 
 export default function Login() {
-  const login = useOAuthLogin();
+  const t = useT();
+  const navigate = useNavigate();
+  const [session, setSession] = useRecoilState(sessionAtom);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    document.title = t("login.title");
+  }, [t]);
+
+  useEffect(() => {
+    if (!session) return;
+    navigate("/");
+  }, [session, navigate]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!email.trim() || !password.trim()) {
+      setError(t("errors.requiredEmailPassword"));
+      return;
+    }
+
+    const normalizedEmail = email.trim().toLowerCase();
+    setSession({ email: normalizedEmail });
+    localStorage.setItem("session-email", normalizedEmail);
+    navigate("/");
+  };
 
   return (
     <main>
-      <Title>{t("login.title")}</Title>
       <h1>{t("login.heading")}</h1>
-      <div class="space-y-6 font-medium">
-        <PasswordLogin />
-      </div>
+      <form onSubmit={submit} className="w-full max-w-md space-y-4 px-4">
+        <label htmlFor="email" className="block w-full text-left">
+          {t("login.email")}
+          <input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            placeholder="john@doe.com"
+            required
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            className="mt-1 block w-full rounded-md border border-[#C99763] bg-[#FFF7EE] px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#A56C38]"
+          />
+        </label>
+
+        <label htmlFor="password" className="block w-full text-left">
+          {t("login.password")}
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            minLength={6}
+            required
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            className="mt-1 block w-full rounded-md border border-[#C99763] bg-[#FFF7EE] px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#A56C38]"
+          />
+        </label>
+
+        <button
+          type="submit"
+          className="w-full rounded-lg bg-gradient-to-r from-[#A56C38] to-[#70421E] px-4 py-2 text-[#FFF7EE] shadow-lg shadow-[#70421E]/30 transition-colors duration-300 hover:from-[#8E4F24] hover:to-[#4C250E]"
+        >
+          {t("login.submit")}
+        </button>
+
+        {error && <p className="mt-2 text-center text-xs text-[#8E4F24]">{error}</p>}
+      </form>
     </main>
   );
 }
-
-function PasswordLogin() {
-  const submission = useSubmission(formLogin);
-
-  return (
-    <form action={formLogin} method="post" class="space-y-4 space-x-12">
-      <input type="hidden" name="lang" value={language()} />
-      <label for="email" class="block text-left w-full">
-        {t("login.email")}
-        <input
-          id="email"
-          name="email"
-          type="email"
-          autocomplete="email"
-          placeholder="john@doe.com"
-          required
-          class="bg-[#FFF7EE] mt-1 block w-full px-4 py-2 border border-[#C99763] rounded-md focus:outline-none focus:ring-2 focus:ring-[#A56C38]"
-        />
-      </label>
-      <label for="password" class="block text-left w-full">
-        {t("login.password")}
-        <input
-          id="password"
-          name="password"
-          type="password"
-          autocomplete="current-password"
-          placeholder="••••••••"
-          minLength={6}
-          required
-          class="bg-[#FFF7EE] mt-1 block w-full px-4 py-2 border border-[#C99763] rounded-md focus:outline-none focus:ring-2 focus:ring-[#A56C38]"
-        />
-      </label>
-      <button
-        type="submit"
-        disabled={submission.pending}
-        class="w-full px-4 py-2 bg-gradient-to-r from-[#A56C38] to-[#70421E] text-[#FFF7EE] rounded-lg hover:from-[#8E4F24] hover:to-[#4C250E] focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300 shadow-lg shadow-[#70421E]/30"
-      >
-        {t("login.submit")}
-      </button>
-      <Show when={submission.error} keyed>
-        {({ message }) => <p class="text-[#8E4F24] mt-2 text-xs text-center">{message}</p>}
-      </Show>
-    </form>
-  );
-}