Login/logout
This commit is contained in:
@@ -1,52 +1,87 @@
|
||||
import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
|
||||
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
||||
import { AuthProvider } from "@/context/auth/AuthContext";
|
||||
import { AuthProvider, useAuth } from "@/context/auth/AuthContext";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
/** Root of the application */
|
||||
/**
|
||||
* Root header with navigation and user authentication controls.
|
||||
*/
|
||||
function RootHeader() {
|
||||
const { user, logout, isLoading } = useAuth();
|
||||
return (
|
||||
<header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
|
||||
<h1 className="text-2xl font-bold text-slate-100 m-0">
|
||||
DM's Table Companion
|
||||
</h1>
|
||||
<nav aria-label="Main navigation" className="flex gap-6">
|
||||
<Link
|
||||
to="/campaigns"
|
||||
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
|
||||
activeProps={{
|
||||
className:
|
||||
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
|
||||
}}
|
||||
>
|
||||
Campaigns
|
||||
</Link>
|
||||
<Link
|
||||
to="/sessions"
|
||||
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
|
||||
activeProps={{
|
||||
className:
|
||||
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
|
||||
}}
|
||||
>
|
||||
Sessions
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
|
||||
activeProps={{
|
||||
className:
|
||||
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
|
||||
}}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="flex items-center gap-4">
|
||||
{user ? (
|
||||
<>
|
||||
<span className="text-slate-200 text-sm" aria-label="User email">
|
||||
{user.email}
|
||||
</span>
|
||||
<button
|
||||
onClick={logout}
|
||||
disabled={isLoading}
|
||||
className="bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-3 py-1 rounded transition-colors disabled:opacity-60"
|
||||
aria-label="Log out"
|
||||
type="button"
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="bg-violet-600 hover:bg-violet-700 text-white text-sm font-semibold px-3 py-1 rounded transition-colors"
|
||||
aria-label="Log in"
|
||||
>
|
||||
Log in
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: () => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthProvider>
|
||||
<header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
|
||||
<h1 className="text-2xl font-bold text-slate-100 m-0">
|
||||
DM's Table Companion
|
||||
</h1>
|
||||
<nav aria-label="Main navigation" className="flex gap-6">
|
||||
<Link
|
||||
to="/campaigns"
|
||||
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
|
||||
activeProps={{
|
||||
className:
|
||||
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
|
||||
}}
|
||||
>
|
||||
Campaigns
|
||||
</Link>
|
||||
<Link
|
||||
to="/sessions"
|
||||
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
|
||||
activeProps={{
|
||||
className:
|
||||
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
|
||||
}}
|
||||
>
|
||||
Sessions
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
|
||||
activeProps={{
|
||||
className:
|
||||
"no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
|
||||
}}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</nav>
|
||||
</header>
|
||||
<RootHeader />
|
||||
<Outlet />
|
||||
<TanStackRouterDevtools />
|
||||
</AuthProvider>
|
||||
|
||||
205
src/routes/login.tsx
Normal file
205
src/routes/login.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useAuth } from "@/context/auth/AuthContext";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { ClientResponseError } from "pocketbase";
|
||||
|
||||
/**
|
||||
* Login and signup page for authentication.
|
||||
* Allows users to log in or create a new account.
|
||||
*/
|
||||
export const Route = createFileRoute("/login")({
|
||||
component: LoginPage,
|
||||
});
|
||||
|
||||
function LoginPage() {
|
||||
const { login, signup, user, isLoading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [mode, setMode] = useState<"login" | "signup">("login");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [fieldErrors, setFieldErrors] = useState<{
|
||||
email?: string;
|
||||
password?: string;
|
||||
passwordConfirm?: string;
|
||||
}>({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
navigate({ to: "/" });
|
||||
}
|
||||
}, [user, navigate]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setFieldErrors({});
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (mode === "login") {
|
||||
await login(email, password);
|
||||
} else {
|
||||
if (password !== passwordConfirm) {
|
||||
setFieldErrors({ passwordConfirm: "Passwords do not match" });
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
await signup(email, password, passwordConfirm);
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof ClientResponseError) {
|
||||
setFieldErrors({
|
||||
email: err.response.data.email?.message,
|
||||
password: err.response.data.password?.message,
|
||||
passwordConfirm: err.response.data.passwordConfirm?.message,
|
||||
});
|
||||
} else {
|
||||
setError((err as Error)?.message || "Authentication failed");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="flex flex-col items-center justify-center min-h-screen bg-slate-900">
|
||||
<form
|
||||
className="bg-slate-800 p-8 rounded-lg shadow-lg w-full max-w-md flex flex-col gap-6"
|
||||
onSubmit={handleSubmit}
|
||||
aria-busy={submitting || isLoading}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-slate-100 mb-2 text-center">
|
||||
{mode === "login" ? "Sign In" : "Sign Up"}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="email" className="text-slate-200 font-medium">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="px-3 py-2 rounded bg-slate-700 text-slate-100 focus:outline-none focus:ring-2 focus:ring-violet-400"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
disabled={submitting || isLoading}
|
||||
aria-invalid={!!fieldErrors.email}
|
||||
aria-describedby={fieldErrors.email ? "email-error" : undefined}
|
||||
/>
|
||||
{fieldErrors.email && (
|
||||
<div
|
||||
className="text-red-400 text-xs mt-1"
|
||||
id="email-error"
|
||||
role="alert"
|
||||
>
|
||||
{fieldErrors.email}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="password" className="text-slate-200 font-medium">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete={
|
||||
mode === "login" ? "current-password" : "new-password"
|
||||
}
|
||||
required
|
||||
className="px-3 py-2 rounded bg-slate-700 text-slate-100 focus:outline-none focus:ring-2 focus:ring-violet-400"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={submitting || isLoading}
|
||||
aria-invalid={!!fieldErrors.password}
|
||||
aria-describedby={
|
||||
fieldErrors.password ? "password-error" : undefined
|
||||
}
|
||||
/>
|
||||
{fieldErrors.password && (
|
||||
<div
|
||||
className="text-red-400 text-xs mt-1"
|
||||
id="password-error"
|
||||
role="alert"
|
||||
>
|
||||
{fieldErrors.password}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{mode === "signup" && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="passwordConfirm"
|
||||
className="text-slate-200 font-medium"
|
||||
>
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="passwordConfirm"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className="px-3 py-2 rounded bg-slate-700 text-slate-100 focus:outline-none focus:ring-2 focus:ring-violet-400"
|
||||
value={passwordConfirm}
|
||||
onChange={(e) => setPasswordConfirm(e.target.value)}
|
||||
disabled={submitting || isLoading}
|
||||
aria-invalid={!!fieldErrors.passwordConfirm}
|
||||
aria-describedby={
|
||||
fieldErrors.passwordConfirm
|
||||
? "passwordConfirm-error"
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{fieldErrors.passwordConfirm && (
|
||||
<div
|
||||
className="text-red-400 text-xs mt-1"
|
||||
id="passwordConfirm-error"
|
||||
role="alert"
|
||||
>
|
||||
{fieldErrors.passwordConfirm}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!fieldErrors.email &&
|
||||
!fieldErrors.password &&
|
||||
!fieldErrors.passwordConfirm &&
|
||||
error && (
|
||||
<div className="text-red-400 text-sm text-center" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-violet-600 hover:bg-violet-700 text-white font-semibold py-2 rounded transition-colors disabled:opacity-60"
|
||||
disabled={submitting || isLoading}
|
||||
>
|
||||
{submitting
|
||||
? mode === "login"
|
||||
? "Signing In..."
|
||||
: "Signing Up..."
|
||||
: mode === "login"
|
||||
? "Sign In"
|
||||
: "Sign Up"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-violet-400 hover:underline text-sm mt-2"
|
||||
onClick={() => {
|
||||
setMode(mode === "login" ? "signup" : "login");
|
||||
setError(null);
|
||||
setFieldErrors({});
|
||||
}}
|
||||
disabled={submitting || isLoading}
|
||||
>
|
||||
{mode === "login"
|
||||
? "Don't have an account? Sign up."
|
||||
: "Already have an account? Sign in."}
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user