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 function Login({
|
|
|
|
searchParams,
|
|
|
|
}: {
|
|
|
|
searchParams: { message: string };
|
|
|
|
}) {
|
|
|
|
const signIn = async (formData: FormData) => {
|
|
|
|
"use server";
|
|
|
|
|
|
|
|
const email = formData.get("email") as string;
|
|
|
|
const password = formData.get("password") as string;
|
|
|
|
const supabase = createClient();
|
|
|
|
|
|
|
|
const { error } = await supabase.auth.signInWithPassword({
|
|
|
|
email,
|
|
|
|
password,
|
|
|
|
});
|
|
|
|
|
|
|
|
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`,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
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
|
|
|
|
className="rounded-md px-4 py-2 bg-inherit border mb-2 mx-1"
|
|
|
|
name="email"
|
|
|
|
placeholder="Email Address"
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
className="rounded-md px-4 py-2 bg-inherit border mb-2 mx-1"
|
|
|
|
type="password"
|
|
|
|
name="password"
|
|
|
|
placeholder="Password "
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
<div className="flex">
|
|
|
|
<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
|
|
|
);
|
|
|
|
}
|