skalara-web/app/login/page.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import Link from "next/link";
import { ChevronLeft, AlertCircle } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const authSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
});

export default function Login() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("false");
  const [view, setView] = useState("sign-in");
  const router = useRouter();
  const supabase = createClientComponentClient();
  const form = useForm<z.infer<typeof authSchema>>({
    resolver: zodResolver(authSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  async function handleSignUp(values: z.infer<typeof authSchema>) {
    try {
      setError("false");
      const { email, password } = values;
      const res = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: `${location.origin}/auth/callback`,
        },
      });
      if (res.error) throw res.error;
      setEmail(email);
      setView("check-email");
    } catch (error) {
      setError("sign-up-error");
    }
  }

  async function handleSignIn(values: z.infer<typeof authSchema>) {
    try {
      setError("false");
      const { email, password } = values;
      const res = await supabase.auth.signInWithPassword({
        email,
        password,
      });
      if (res.error) throw res.error;
      router.push("/");
      router.refresh();
    } catch (error) {
      setError("sign-in-error");
    }
  }

  return (
    <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
      <Link
        href="/"
        className={cn(
          buttonVariants({ variant: "outline" }),
          "absolute left-8 top-8"
        )}
      >
        <ChevronLeft size={16} className="mr-1" />
        Back
      </Link>
      {view === "check-email" ? (
        <p className="text-center text-foreground">
          Check <span className="font-bold">{email}</span> to continue signing
          up
        </p>
      ) : (
        <div>
          {error === "sign-in-error" && (
            <Alert variant="destructive" className="mb-4">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>
                The email or password you entered is incorrect.
              </AlertDescription>
            </Alert>
          )}
          {error === "sign-up-error" && (
            <Alert variant="destructive" className="mb-4">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>
                The email or password you entered is incorrect.
              </AlertDescription>
            </Alert>
          )}
          <Form {...form}>
            <form
              className="flex-1 flex flex-col w-full justify-center gap-2 text-foreground"
              onSubmit={
                view === "sign-in"
                  ? form.handleSubmit(handleSignIn)
                  : form.handleSubmit(handleSignUp)
              }
            >
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input
                        type="email"
                        placeholder="you@example.com"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="••••••••"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {view === "sign-in" && (
                <>
                  <Button className="mb-6" type="submit">
                    Sign In
                  </Button>
                  <p className="text-sm text-center">
                    Don&apos;t have an account?
                    <Button
                      variant="link"
                      className="px-1 py-0"
                      onClick={() => {
                        setError("false");
                        setView("sign-up");
                      }}
                    >
                      Sign Up Now
                    </Button>
                  </p>
                </>
              )}
              {view === "sign-up" && (
                <>
                  <Button className="mb-6" type="submit">
                    Sign Up
                  </Button>
                  <p className="text-sm text-center">
                    Already have an account?
                    <Button
                      variant="link"
                      className="px-1 py-0"
                      onClick={() => {
                        setError("false");
                        setView("sign-in");
                      }}
                    >
                      Sign In Now
                    </Button>
                  </p>
                </>
              )}
            </form>
          </Form>
        </div>
      )}
    </div>
  );
}