feat: implement account activation logic, add login drawer page, and improve form accessibility

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import Activate from "./pages/Activate";
+import Drawer from "./pages/Drawer";
 import Home from "./pages/Home";
 import Register from "./pages/Register";
 import VerifyEmail from "./pages/VerifyEmail";
@@ -13,6 +14,7 @@ export default function App() {
           <Route path="/onboard" element={<Register />} />
           <Route path="/verify-email" element={<VerifyEmail />} />
           <Route path="/activate/:uidb64/:token" element={<Activate />} />
+          <Route path="/login" element={<Drawer />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </div>

frontend/src/components/ui/FormField.tsx

@@ -17,7 +17,12 @@ export default function FormField({
 }: FormFieldProps) {
   return (
     <div className="form-control">
-      <label className="field-label font-display text-primary-content">{label}</label>
+      <label
+        htmlFor={registration.name}
+        className="field-label font-display text-primary-content"
+      >
+        {label}
+      </label>
       <input
         {...registration}
         type={type}

frontend/src/pages/Activate.tsx

@@ -1,7 +1,97 @@
+import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import apiClient from "../api/apiClient";
+import Logo from "../components/Logo";
+
 export default function Activate() {
+  const { uidb64, token } = useParams();
+  const [status, setStatus] = useState<"loading" | "success" | "error">(
+    "loading",
+  );
+  const hasCalled = useRef(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!uidb64 || !token || hasCalled.current) return;
+
+    // prevent double api calls
+    hasCalled.current = true;
+
+    const activateAccount = async () => {
+      try {
+        await apiClient.get(`/activate/${uidb64}/${token}/`);
+        setStatus("success");
+      } catch (err) {
+        console.error("Activation error:", err);
+        setStatus("error");
+      }
+    };
+
+    activateAccount();
+  }, [uidb64, token]);
+
   return (
-    <div>
+    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
-      <h1>Activate</h1>
+      {status === "loading" && (
+        <div className="flex flex-col items-center gap-4 py-8">
+          <span className="loading loading-spinner loading-lg text-primary" />
+          <p className="text-sm opacity-70">Activating your account...</p>
+        </div>
+      )}
+
+      {status === "success" && (
+        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+          <div className="bg-success/10 p-4 rounded-full">
+            <CheckCircleIcon
+              size={64}
+              weight="duotone"
+              className="text-success"
+            />
+          </div>
+          <h2 className="font-display text-xl text-success">
+            Account Activated!
+          </h2>
+          <p className="opacity-70 mb-8 leading-relaxed">
+            Welcome to <Logo />
+            <br />
+            Your identity is now verified and ready for timeless letters.
+          </p>
+          <button
+            type="button"
+            className="btn btn-primary w-full shadow-lg"
+            onClick={() => navigate("/login")}
+          >
+            Open Drawer
+          </button>
+        </div>
+      )}
+
+      {status === "error" && (
+        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+          <div className="bg-error/10 p-4 rounded-full">
+            <XCircleIcon
+              size={64}
+              weight="duotone"
+              className="text-error-content"
+            />
+          </div>
+          <h2 className="font-display text-xl text-error-content">
+            Activation Failed
+          </h2>
+          <p className="opacity-70 mb-8 leading-relaxed">
+            The link might be expired or already used. Please try registering
+            again.
+          </p>
+          <button
+            type="button"
+            className="btn btn-ghost w-full"
+            onClick={() => navigate("/onboard")}
+          >
+            Back to Registration
+          </button>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/pages/Drawer.tsx

@@ -0,0 +1,15 @@
+import Logo from "../components/Logo";
+
+export default function Login() {
+  return (
+    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
+      <h2 className="font-display text-2xl font-bold text-primary">
+        Login to <Logo />
+      </h2>
+      <div className="divider"></div>
+      <button type="button" disabled className="btn btn-primary w-full">
+        Sign In
+      </button>
+    </div>
+  );
+}

frontend/src/pages/Register.tsx

@@ -46,10 +46,10 @@ export default function Register() {
         password: data.password,
       });
       navigate("/verify-email");
-    } catch (err: any) {
+    } catch (err) {
       console.error("Registration error:", err);
       setApiError(
-        err.response?.data?.message || "Registration failed. Please try again."
+        err.response?.data?.message || "Registration failed. Please try again.",
       );
     } finally {
       setIsLoading(false);
@@ -109,7 +109,8 @@ export default function Register() {
           />
           <p className="text-sm text-warning-content font-medium opacity-90">
             Choose a password you won't forget. <br />
-            <span className="font-semibold underline">There is no reset.</span> If you lose it, your letters cannot be recovered.
+            <span className="font-semibold underline">There is no reset.</span>{" "}
+            If you lose it, your letters cannot be recovered.
           </p>
         </div>
 

frontend/src/pages/VerifyEmail.tsx

@@ -5,7 +5,11 @@ export default function VerifyEmail() {
   return (
     <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
       <div className="auth-icon-container">
-        <EnvelopeSimpleOpenIcon size={32} weight="duotone" className="text-primary" />
+        <EnvelopeSimpleOpenIcon
+          size={32}
+          weight="duotone"
+          className="text-primary"
+        />
       </div>
 
       <div className="space-y-2">
@@ -25,7 +29,11 @@ export default function VerifyEmail() {
         </p>
       </div>
 
-      <p className="text-xs italic opacity-40 cursor-pointer underline" onClick={() => window.close()}>
+      <p
+        className="text-xs italic opacity-40 cursor-pointer underline"
+        onClick={() => window.close()}
+        onKeyDown={(e) => e.key === "Enter" && window.close()}
+      >
         You can close this window now.
       </p>
     </div>