neroshitron/app/login/page.tsx

131 lines
3.6 KiB
TypeScript
Raw Normal View History

2024-05-24 17:57:03 -04:00
import Link from "next/link";
import { headers } from "next/headers";
import { createClient } from "@/utils/supabase/server";
import { redirect } from "next/navigation";
import { SubmitButton } from "./submit-button";
export default async function Login({
2024-05-24 17:57:03 -04:00
searchParams,
}: {
searchParams: { message: string };
}) {
const supabase = createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (user) {
return redirect("/gallery");
}
2024-05-24 17:57:03 -04:00
const signIn = async (formData: FormData) => {
"use server";
const email = formData.get("email") as string;
const password = formData.get("password") as string;
const supabase = createClient();
2024-05-27 09:52:26 -04:00
const { data:data, error } = await supabase.auth.signInWithPassword({
2024-05-24 17:57:03 -04:00
email,
password,
});
//console.log(error);
2024-05-24 17:57:03 -04:00
if (error) {
return redirect("/login?message=Could not authenticate user");
}
2024-05-26 02:14:59 -04:00
return redirect("/gallery");
2024-05-24 17:57:03 -04:00
};
const signUp = async (formData: FormData) => {
"use server";
const origin = headers().get("origin");
const email = formData.get("email") as string;
const password = formData.get("password") as string;
const supabase = createClient();
const { error } = await supabase.auth.signUp({
email,
password,
options: {
emailRedirectTo: `${origin}/auth/callback`,
},
});
//console.log(error);
2024-05-24 17:57:03 -04:00
if (error) {
return redirect("/login?message=Could not authenticate user");
}
return redirect("/login?message=Check email to continue sign in process");
};
return (
2024-05-24 19:03:20 -04:00
2024-05-24 20:52:39 -04:00
<div className="flex-1 w-full flex flex-col gap-20 items-center animate-in"> <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
2024-05-24 19:03:20 -04:00
2024-05-24 20:52:39 -04:00
<form className="animate-in flex-1 flex flex-col w-full my-32 gap-2 text-foreground">
<Link
href="/"
2024-05-26 02:14:59 -04:00
className="absolute left-1 top-44 py-2 px-4 rounded-md no-underline text-foreground flex items-center group text-sm"
2024-05-24 20:52:39 -04:00
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
>
<polyline points="15 18 9 12 15 6" />
</svg>{" "}
Back
</Link>
<input
2024-05-27 23:24:18 -04:00
className="rounded-md px-4 py-2 bg-inherit border mb-2 mx-1 w-full sm:w-auto"
2024-05-24 20:52:39 -04:00
name="email"
placeholder="Email Address"
required
/>
<input
2024-05-27 23:24:18 -04:00
className="rounded-md px-4 py-2 bg-inherit border mb-2 mx-1 w-full sm:w-auto"
2024-05-24 20:52:39 -04:00
type="password"
name="password"
placeholder="Password "
required
/>
2024-05-27 23:24:18 -04:00
<div className="flex text-white white">
2024-05-24 20:52:39 -04:00
<SubmitButton
formAction={signIn}
2024-05-26 02:14:59 -04:00
className="bg-neroshi-blue-500 hover:bg-neroshi-blue-400 rounded-md px-4 py-2 text-foreground mb-2 mx-1 w-1/2"
2024-05-24 20:52:39 -04:00
pendingText="Signing In..."
>
Sign In
</SubmitButton>
<SubmitButton
formAction={signUp}
2024-05-26 02:14:59 -04:00
className="bg-neroshi-blue-300 hover:bg-neroshi-blue-200 border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2 mx-1 w-1/2"
2024-05-24 20:52:39 -04:00
pendingText="Signing Up..."
2024-05-24 17:57:03 -04:00
>
2024-05-24 20:52:39 -04:00
Sign Up
</SubmitButton>
</div>
{searchParams?.message && (
2024-05-26 02:14:59 -04:00
<p className="mt-4 bg-foreground/10 mt-14 p-2 text-foreground text-center">
2024-05-24 20:52:39 -04:00
{searchParams.message}
</p>
)}
</form>
</div>
2024-05-24 17:57:03 -04:00
</div>
2024-05-24 20:52:39 -04:00
2024-05-24 17:57:03 -04:00
);
}