mirrors/rybbit
1
0
Fork 0
mirror of https://github.com/rybbit-io/rybbit.git synced 2025-05-11 20:35:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor login

Browse source
This commit is contained in:
Bill Yang 2025-02-17 18:27:24 -08:00
parent e61ec28531
commit f5ce57f772
3 changed files with 75 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/app/layout.tsx
View file

@ -45,12 +45,18 @@ export default function RootLayout({
></script>
<ThemeProvider>
<QueryProvider>
<div className="min-h-full">
<TopBar />
<main className="flex min-h-screen flex-col items-center p-4">
<div className="w-full max-w-6xl">{children}</div>
</main>
</div>
{pathname === "/login" ? (
<div className="min-h-full flex items-center justify-center">
{children}
</div>
) : (
<div className="min-h-full">
<TopBar />
<main className="flex min-h-screen flex-col items-center p-4">
<div className="w-full max-w-6xl">{children}</div>
</main>
</div>
)}
</QueryProvider>
</ThemeProvider>
</body>

121
client/src/app/login/page.tsx
View file

@ -1,31 +1,28 @@
"use client";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { authClient } from "../../lib/auth";
import { userStore } from "../../lib/userStore";
import { AlertCircle } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "../../components/ui/alert";
export default function Page() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string>();
const router = useRouter();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
setError("");
try {
const { data, error } = await authClient.signIn.username({
username,
@ -37,62 +34,70 @@ export default function Page() {
});
router.push("/");
}
if (error) {
setError(error.message);
}
} catch (error) {
console.error("Login error:", error);
alert("Failed to login. Please try again.");
setError(String(error));
} finally {
setIsLoading(false);
}
};
return (
<div className={cn("flex flex-col gap-6 items-center")}>
<Card className="w-[500px]">
<CardHeader>
<CardTitle className="text-2xl">Login</CardTitle>
<CardDescription>
Enter your email below to login to your account
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<div className="flex flex-col gap-6">
<div className="grid gap-2">
<Label htmlFor="username">Username</Label>
<Input
id="username"
type="username"
placeholder="username"
required
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div className="grid gap-2">
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
<a
href="#"
className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</a>
</div>
<Input
id="password"
type="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? "Logging in..." : "Login"}
</Button>
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle className="text-2xl flex justify-center">
Welcome back!
</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<div className="flex flex-col gap-6">
<div className="grid gap-2">
<Label htmlFor="username">Username</Label>
<Input
id="username"
type="username"
placeholder="username"
required
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
</form>
</CardContent>
</Card>
</div>
<div className="grid gap-2">
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
<a
href="#"
className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</a>
</div>
<Input
id="password"
type="password"
placeholder="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? "Logging in..." : "Login"}
</Button>
{error && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error Logging In</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
</div>
</form>
</CardContent>
</Card>
);
}

2
server/src/lib/auth.ts
View file

@ -29,8 +29,6 @@ export const initAuth = (allowList: string[]) => {
defaultCookieAttributes: {
sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
path: "/",
// httpOnly: true is default
// secure: false (implied by useSecureCookies false)
},
},
});