@marvs13/marvinel-nextjs-supabase-starting-kit 1.0.2

package/template/src/components/forms/login-form.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { useAuthForm } from "@/hooks/use-auth-form";
+import { createClient } from "@/lib/supabase/client";
+import { LogInFormSchema } from "@/schema/form-schema";
+
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "../ui/field";
+import { Input } from "../ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../ui/input-group";
+import { Spinner } from "../ui/spinner";
+
+export const LogInForm = () => {
+  const { loginform: form } = useAuthForm();
+
+  const router = useRouter();
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Show password toggle function
+  const isOpen = () => {
+    setOpen((prev) => !prev);
+  };
+
+  async function onSubmit(values: z.infer<typeof LogInFormSchema>) {
+    const supabase = createClient();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { error } = await supabase.auth.signInWithPassword({
+        email: values.email,
+        password: values.password,
+      });
+
+      if (error) throw error;
+
+      router.push("/home"); // TODO : customize this url depends on where do you want to redirect after a successful sign up
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "An error occurred!");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    // customize this depends of your needs (eg. background color, size, etc.)
+    // you can add props if you want too
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">
+          Login to your account
+        </CardTitle>
+        <CardDescription>
+          Enter your credentials below to login to your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="login-form" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            {/* Email input */}
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="email-input">Email</FieldLabel>
+                  <Input
+                    {...field}
+                    id="email-input"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="example@mail.com"
+                    autoComplete="off"
+                  />
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            {/* Password input */}
+            <Controller
+              control={form.control}
+              name="password"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="password-input">Password</FieldLabel>
+                  <InputGroup>
+                    <InputGroupInput
+                      {...field}
+                      id="password-input"
+                      aria-invalid={fieldState.invalid}
+                      type={open ? "text" : "password"}
+                      autoComplete="off"
+                    />
+
+                    <InputGroupAddon align="inline-end">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="hover:text-muted-foreground hover:bg-transparent"
+                        type="button"
+                        onClick={isOpen}
+                      >
+                        {open ? <EyeIcon /> : <EyeOffIcon />}
+                      </Button>
+                    </InputGroupAddon>
+                  </InputGroup>
+                  <FieldLabel className="flex justify-end">
+                    <Link
+                      href="request-reset-password"
+                      className="font-normal underline-offset-4 hover:underline"
+                    >
+                      Forgot your password?
+                    </Link>
+                  </FieldLabel>
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            {/* Displaying the error that comes from the server */}
+            {error && <Field className="text-red-500">{error}</Field>}
+
+            <Field>
+              <Button
+                size="lg"
+                type="submit"
+                form="login-form"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Spinner /> Logging in...
+                  </>
+                ) : (
+                  "Login"
+                )}
+              </Button>
+
+              <FieldDescription className="text-center">
+                Don&apos;t have an account?{" "}
+                <Link
+                  href={"/signup"}
+                  className="text-sm text-neutral-800 hover:text-black"
+                >
+                  Sign up
+                </Link>
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

package/template/src/components/forms/request-reset-password-form.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { useAuthForm } from "@/hooks/use-auth-form";
+import { createClient } from "@/lib/supabase/client";
+import { ReqResetPasswordSchema } from "@/schema/form-schema";
+
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import { Field, FieldError, FieldGroup, FieldLabel } from "../ui/field";
+import { Input } from "../ui/input";
+import { Spinner } from "../ui/spinner";
+
+export const RequestResetPassword = () => {
+  const { reqresetpasswordform: form } = useAuthForm();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<null | string>(null);
+  const [success, setSuccess] = useState<boolean>(false);
+
+  async function onSubmit(values: z.infer<typeof ReqResetPasswordSchema>) {
+    const supabase = createClient();
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { error } = await supabase.auth.resetPasswordForEmail(
+        values.email,
+        {
+          redirectTo: `${window.location.origin}/reset-password`,
+        }
+      );
+
+      if (error) throw error;
+
+      setSuccess(true);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "An error occurred!");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      // customize this depends of your needs (eg. background color, size, etc.)
+      // you can add props if you want too
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-lg">Check Your Email</CardTitle>
+          <CardDescription className="text-base">
+            Reset password request link already sent to your email.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            If you registered using your email and password, you will receive a
+            password reset email.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    // customize this depends of your needs (eg. background color, size, etc.)
+    // you can add props if you want too
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-lg">Request Reset Password</CardTitle>
+        <CardDescription>
+          Enter your email and we&apos;ll send you a link to reset your
+          password.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="email-form" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="email-input">Email</FieldLabel>
+
+                  <Input
+                    {...field}
+                    id="email-input"
+                    aria-invalid={fieldState.invalid}
+                    autoComplete="off"
+                    placeholder="example@mail.com"
+                  />
+
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            {error && <Field className="text-red-500">{error}</Field>}
+            <Field>
+              <Button type="submit" form="email-form" disabled={loading}>
+                {loading ? (
+                  <>
+                    <Spinner /> Sending...
+                  </>
+                ) : (
+                  "Send reset email"
+                )}
+              </Button>
+              <Button
+                variant={"outline"}
+                onClick={() => router.push("/login")}
+                type="button"
+              >
+                Back to login
+              </Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};

package/template/src/components/forms/reset-password-form.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Controller } from "react-hook-form";
+import z from "zod";
+
+import { useAuthForm } from "@/hooks/use-auth-form";
+import { createClient } from "@/lib/supabase/client";
+import { UpdatePasswordSchema } from "@/schema/form-schema";
+
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "../ui/field";
+import { Input } from "../ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../ui/input-group";
+import { Spinner } from "../ui/spinner";
+
+export const ResetPasswordForm = () => {
+  const { updatepasswordform: form } = useAuthForm();
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [success, setSuccess] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Show password toggle function
+  const isOpen = () => {
+    setOpen((prev) => !prev);
+  };
+
+  async function onSubmit(values: z.infer<typeof UpdatePasswordSchema>) {
+    const supabase = createClient();
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { error } = await supabase.auth.updateUser({
+        password: values.password,
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      // Force the user to login after the successful reset password
+      //NOTE : In this case the scope is local so that the user will only sign out in the device their
+      //are currently using. Use a global scope if you want the user to signout all the devices that they currently login
+      await supabase.auth.signOut({
+        scope: "local",
+      });
+
+      setSuccess(true);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "An error occurred!");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      // customize this depends of your needs (eg. background color, size, etc.)
+      // you can add props if you want too
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-lg">Password Successfully Reset</CardTitle>
+          <CardDescription>
+            <p>You can now login to your account using your new password.</p>
+            <p className="mt-4">
+              Go back to
+              <Link
+                href={"/login"}
+                className="text-neutral-800 underline underline-offset-4 hover:text-neutral-950"
+              >
+                {" "}
+                Login
+              </Link>
+            </p>
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  return (
+    // customize this depends of your needs (eg. background color, size, etc.)
+    // you can add props if you want too
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-lg">Reset Your Password</CardTitle>
+        <CardDescription className="text-base">
+          Enter your new password below.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="reset-password-form" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            {/* Password input */}
+            <Controller
+              control={form.control}
+              name="password"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="new-password-input">
+                    New Password
+                  </FieldLabel>
+                  <InputGroup>
+                    <InputGroupInput
+                      {...field}
+                      id="new-password-input"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="Enter new password"
+                      autoComplete="off"
+                      type={open ? "text" : "password"}
+                    />
+                    <InputGroupAddon align="inline-end">
+                      <Button
+                        type="button"
+                        className="hover:text-muted-foreground hover:bg-transparent"
+                        size="icon"
+                        variant="ghost"
+                        onClick={isOpen}
+                      >
+                        {open ? <EyeIcon /> : <EyeOffIcon />}
+                      </Button>
+                    </InputGroupAddon>
+                  </InputGroup>
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            {/* Confirm Password input */}
+            <Controller
+              control={form.control}
+              name="confirmPassword"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="confirm-password-input">
+                    Confirm Password
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="confirm-password-input"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Confirm password"
+                    autoComplete="off"
+                    type="password"
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            {error && <p className="text-red-500">{error}</p>}
+            <FieldContent>
+              <Button
+                type="submit"
+                form="reset-password-form"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Spinner /> Saving...
+                  </>
+                ) : (
+                  "Save new password"
+                )}
+              </Button>
+            </FieldContent>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};