pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-01 00:06:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

added resource auth status cards and moved login to reusable login form

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-23 17:56:21 -05:00
parent 795c144e1e
commit 78b23a8956
14 changed files with 507 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/auth/login/DashboardLoginForm.tsx Normal file
View File

@@ -0,0 +1,38 @@
"use client";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import LoginForm from "@app/components/LoginForm";
import { useRouter } from "next/navigation";
type DashboardLoginFormProps = {
redirect?: string;
};
export default function DashboardLoginForm({
redirect,
}: DashboardLoginFormProps) {
const router = useRouter();
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<CardTitle>Login</CardTitle>
<CardDescription>
Enter your credentials to access your dashboard
</CardDescription>
</CardHeader>
<CardContent>
<LoginForm
redirect={redirect}
onLogin={() => router.push("/")}
/>
</CardContent>
</Card>
);
}

165
src/app/auth/login/LoginForm.tsx
View File

@@ -1,165 +0,0 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { LoginResponse } from "@server/routers/auth";
import { api } from "@app/api";
import { useRouter } from "next/navigation";
import { AxiosResponse } from "axios";
import { formatAxiosError } from "@app/lib/utils";
import { LockIcon } from "lucide-react";
type LoginFormProps = {
redirect?: string;
};
const formSchema = z.object({
email: z.string().email({ message: "Invalid email address" }),
password: z
.string()
.min(8, { message: "Password must be at least 8 characters" }),
});
export default function LoginForm({ redirect }: LoginFormProps) {
const router = useRouter();
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
},
});
async function onSubmit(values: z.infer<typeof formSchema>) {
const { email, password } = values;
setLoading(true);
const res = await api
.post<AxiosResponse<LoginResponse>>("/auth/login", {
email,
password,
})
.catch((e) => {
console.error(e);
setError(
formatAxiosError(e, "An error occurred while logging in")
);
});
if (res && res.status === 200) {
setError(null);
console.log(res)
if (res.data?.data?.emailVerificationRequired) {
if (redirect) {
router.push(`/auth/verify-email?redirect=${redirect}`);
} else {
router.push("/auth/verify-email");
}
return;
}
if (redirect && redirect.includes("http")) {
window.location.href = redirect;
} else if (redirect) {
router.push(redirect);
} else {
router.push("/");
}
}
setLoading(false);
}
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<CardTitle>Login</CardTitle>
<CardDescription>
Enter your credentials to access your dashboard
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
placeholder="Enter your email"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Enter your password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<Button
type="submit"
className="w-full"
loading={loading}
>
<LockIcon className="w-4 h-4 mr-2" />
Login
</Button>
</form>
</Form>
</CardContent>
</Card>
);
}

6
src/app/auth/login/page.tsx
View File

@@ -1,10 +1,10 @@
import LoginForm from "@app/app/auth/login/LoginForm";
import { verifySession } from "@app/lib/auth/verifySession";
import Link from "next/link";
import { redirect } from "next/navigation";
import { cache } from "react";
import DashboardLoginForm from "./DashboardLoginForm";
export const dynamic = 'force-dynamic';
export const dynamic = "force-dynamic";
export default async function Page(props: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -19,7 +19,7 @@ export default async function Page(props: {
return (
<>
<LoginForm redirect={searchParams.redirect as string} />
<DashboardLoginForm redirect={searchParams.redirect as string} />
<p className="text-center text-muted-foreground mt-4">
Don't have an account?{" "}