From 14c0576f7ba645f19f58c96288df477b7beb09dd Mon Sep 17 00:00:00 2001
From: iamhectorsosa <hello@hectorsosa.me>
Date: Thu, 14 Mar 2024 13:54:16 +0100
Subject: [PATCH] Updating

---
 .../app/login/reset-password/new/page.tsx     |  23 +++
 apps/next/app/login/reset-password/page.tsx   |  23 +++
 apps/next/components/user/account-form.tsx    |   8 +-
 apps/next/components/user/login-form.tsx      |  17 +-
 .../user/new-reset-password-form.tsx          | 156 ++++++++++++++++++
 apps/next/components/user/profile-form.tsx    |   8 +-
 apps/next/components/user/register-form.tsx   |   8 +-
 .../components/user/reset-password-form.tsx   | 150 +++++++++++++++++
 apps/next/modules/user/auth.ts                |  17 ++
 9 files changed, 394 insertions(+), 16 deletions(-)
 create mode 100644 apps/next/app/login/reset-password/new/page.tsx
 create mode 100644 apps/next/app/login/reset-password/page.tsx
 create mode 100644 apps/next/components/user/new-reset-password-form.tsx
 create mode 100644 apps/next/components/user/reset-password-form.tsx

diff --git a/apps/next/app/login/reset-password/new/page.tsx b/apps/next/app/login/reset-password/new/page.tsx
new file mode 100644
index 0000000..d5181d4
--- /dev/null
+++ b/apps/next/app/login/reset-password/new/page.tsx
@@ -0,0 +1,23 @@
+import { NewResetPasswordForm } from "@/components/user/new-reset-password-form";
+import { useSupabaseServer } from "@/modules/utils/server";
+import { cookies } from "next/headers";
+
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  const supabase = useSupabaseServer({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="min-h-dvh grid items-center">
+      <NewResetPasswordForm />
+    </div>
+  );
+}
diff --git a/apps/next/app/login/reset-password/page.tsx b/apps/next/app/login/reset-password/page.tsx
new file mode 100644
index 0000000..e5106f7
--- /dev/null
+++ b/apps/next/app/login/reset-password/page.tsx
@@ -0,0 +1,23 @@
+import { ResetPasswordForm } from "@/components/user/reset-password-form";
+import { useSupabaseServer } from "@/modules/utils/server";
+import { cookies } from "next/headers";
+
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  const supabase = useSupabaseServer({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user) {
+    redirect("/settings");
+  }
+
+  return (
+    <div className="min-h-dvh grid items-center">
+      <ResetPasswordForm />
+    </div>
+  );
+}
diff --git a/apps/next/components/user/account-form.tsx b/apps/next/components/user/account-form.tsx
index c308444..f478952 100644
--- a/apps/next/components/user/account-form.tsx
+++ b/apps/next/components/user/account-form.tsx
@@ -165,16 +165,16 @@ const AccountFormComponent: React.FC<{
               </AlertDescription>
             </Alert>
           )}
-          <footer className="flex justify-end">
+          <footer className="flex justify-end space-x-2">
+            <Button asChild variant="link">
+              <Link href="/settings/profile">Profile Settings</Link>
+            </Button>
             <Button type="submit" disabled={isPending}>
               {isPending && (
                 <CircleIcon className="mr-2 h-4 w-4 animate-spin" />
               )}
               Update Settings
             </Button>
-            <Button asChild variant="link">
-              <Link href="/settings/profile">Profile Settings</Link>
-            </Button>
           </footer>
         </form>
       </Form>
diff --git a/apps/next/components/user/login-form.tsx b/apps/next/components/user/login-form.tsx
index f0536c1..a349723 100644
--- a/apps/next/components/user/login-form.tsx
+++ b/apps/next/components/user/login-form.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -128,6 +129,14 @@ const LoginFormComponent: React.FC<{
                 <FormControl>
                   <Input type="password" placeholder="Password" {...field} />
                 </FormControl>
+                <FormDescription className="pt-1">
+                  <Link
+                    className="hover:underline underline-offset-4"
+                    href="/login/reset-password"
+                  >
+                    Forgot password?
+                  </Link>
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -141,16 +150,16 @@ const LoginFormComponent: React.FC<{
               </AlertDescription>
             </Alert>
           )}
-          <footer className="flex justify-end">
+          <footer className="flex justify-end space-x-2">
+            <Button asChild variant="link">
+              <Link href="/register">Create new account</Link>
+            </Button>
             <Button type="submit" disabled={isPending}>
               {isPending && (
                 <CircleIcon className="mr-2 h-4 w-4 animate-spin" />
               )}
               Sign in
             </Button>
-            <Button asChild variant="link">
-              <Link href="/register">Create new account</Link>
-            </Button>
           </footer>
         </form>
       </Form>
diff --git a/apps/next/components/user/new-reset-password-form.tsx b/apps/next/components/user/new-reset-password-form.tsx
new file mode 100644
index 0000000..fc8081d
--- /dev/null
+++ b/apps/next/components/user/new-reset-password-form.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { CircleIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { useRouter } from "next/navigation";
+import { useUpdateUser } from "@/modules/user/auth";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export const NewResetPasswordForm: React.FC = () => {
+  const router = useRouter();
+
+  // #region useUpdateUser
+  const {
+    mutate: updateUser,
+    isPending,
+    isError,
+    error,
+  } = useUpdateUser({
+    onSuccess: () => {
+      router.push("/settings");
+    },
+    onError: (error) => {
+      if (error instanceof Error) {
+        console.error(error.message);
+      }
+    },
+  });
+  // #endregion useUpdateUser
+
+  return (
+    <NewResetPasswordFormComponent
+      updateUser={updateUser}
+      isPending={isPending}
+      isError={isError}
+      errorMessage={error?.message}
+    />
+  );
+};
+
+const FormSchema = z.object({
+  password: z.string().min(5, { message: "Must be 5 or more characters long" }),
+});
+
+const NewResetPasswordFormComponent: React.FC<{
+  updateUser: ({ password }: { password: string }) => void;
+  isPending: boolean;
+  isError: boolean;
+  errorMessage?: string;
+}> = ({ updateUser, isPending, isError, errorMessage }) => {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      password: "",
+    },
+  });
+
+  return (
+    <div className="space-y-6">
+      <header className="space-y-2">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/login">Login</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/login/reset-password">Reset Password</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/login/reset-password/new">New Password</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <h2 className="font-semibold text-4xl">New Password</h2>
+        <p>Please fill out the form below</p>
+      </header>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(({ password }) => {
+            updateUser({ password });
+          })}
+          className="space-y-6"
+        >
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" placeholder="Password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {isError && (
+            <Alert variant="destructive">
+              <CrossCircledIcon className="h-4 w-4" />
+              <AlertTitle>Something went wrong!</AlertTitle>
+              <AlertDescription>
+                {errorMessage ?? "Unknown error"}
+              </AlertDescription>
+            </Alert>
+          )}
+          <footer className="flex justify-end space-x-2">
+            <Button asChild variant="link">
+              <Link href="/login">Back to Login</Link>
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending && (
+                <CircleIcon className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Set new password
+            </Button>
+          </footer>
+        </form>
+      </Form>
+    </div>
+  );
+};
diff --git a/apps/next/components/user/profile-form.tsx b/apps/next/components/user/profile-form.tsx
index 42b4107..857f0ab 100644
--- a/apps/next/components/user/profile-form.tsx
+++ b/apps/next/components/user/profile-form.tsx
@@ -255,16 +255,16 @@ const ProfileFormComponent: React.FC<{
               </AlertDescription>
             </Alert>
           )}
-          <footer className="flex justify-end">
+          <footer className="flex justify-end space-x-2">
+            <Button asChild variant="link">
+              <Link href="/settings/account">Account Settings</Link>
+            </Button>
             <Button type="submit" disabled={isPending}>
               {isPending && (
                 <CircleIcon className="mr-2 h-4 w-4 animate-spin" />
               )}
               Update Settings
             </Button>
-            <Button asChild variant="link">
-              <Link href="/settings/account">Account Settings</Link>
-            </Button>
           </footer>
         </form>
       </Form>
diff --git a/apps/next/components/user/register-form.tsx b/apps/next/components/user/register-form.tsx
index 7d0e9c9..28d0037 100644
--- a/apps/next/components/user/register-form.tsx
+++ b/apps/next/components/user/register-form.tsx
@@ -144,16 +144,16 @@ const RegisterFormComponent: React.FC<{
               </AlertDescription>
             </Alert>
           )}
-          <footer className="flex justify-end">
+          <footer className="flex justify-end space-x-2">
+            <Button asChild variant="link">
+              <Link href="/login">I already have an account</Link>
+            </Button>
             <Button type="submit" disabled={isPending}>
               {isPending && (
                 <CircleIcon className="mr-2 h-4 w-4 animate-spin" />
               )}
               Create account
             </Button>
-            <Button asChild variant="link">
-              <Link href="/login">I already have an account</Link>
-            </Button>
           </footer>
         </form>
       </Form>
diff --git a/apps/next/components/user/reset-password-form.tsx b/apps/next/components/user/reset-password-form.tsx
new file mode 100644
index 0000000..dc0b164
--- /dev/null
+++ b/apps/next/components/user/reset-password-form.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { CircleIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { useRouter } from "next/navigation";
+import { useResetPasswordForEmail } from "@/modules/user/auth";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export const ResetPasswordForm: React.FC = () => {
+  const router = useRouter();
+
+  // #region useResetPasswordForEmail
+  const {
+    mutate: resetPassword,
+    isPending,
+    isError,
+    error,
+  } = useResetPasswordForEmail({
+    onSuccess: () => {
+      router.push("/login");
+    },
+    onError: (error) => {
+      if (error instanceof Error) {
+        console.error(error.message);
+      }
+    },
+  });
+  // #endregion useResetPasswordForEmail
+
+  return (
+    <ResetPasswordFormComponent
+      resetPassword={resetPassword}
+      isPending={isPending}
+      isError={isError}
+      errorMessage={error?.message}
+    />
+  );
+};
+
+const FormSchema = z.object({
+  email: z.string().email({ message: "Invalid email address" }),
+});
+
+const ResetPasswordFormComponent: React.FC<{
+  resetPassword: (email: string) => void;
+  isPending: boolean;
+  isError: boolean;
+  errorMessage?: string;
+}> = ({ resetPassword, isPending, isError, errorMessage }) => {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  return (
+    <div className="space-y-6">
+      <header className="space-y-2">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/login">Login</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/login/reset-password">Reset Password</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <h2 className="font-semibold text-4xl">Reset Password</h2>
+        <p>Please fill out the form below</p>
+      </header>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(({ email }) => {
+            resetPassword(email);
+          })}
+          className="space-y-6"
+        >
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input placeholder="sosa@webscope.io" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {isError && (
+            <Alert variant="destructive">
+              <CrossCircledIcon className="h-4 w-4" />
+              <AlertTitle>Something went wrong!</AlertTitle>
+              <AlertDescription>
+                {errorMessage ?? "Unknown error"}
+              </AlertDescription>
+            </Alert>
+          )}
+          <footer className="flex justify-end space-x-2">
+            <Button asChild variant="link">
+              <Link href="/login">Back to Login</Link>
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending && (
+                <CircleIcon className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Reset password
+            </Button>
+          </footer>
+        </form>
+      </Form>
+    </div>
+  );
+};
diff --git a/apps/next/modules/user/auth.ts b/apps/next/modules/user/auth.ts
index cd9332e..a11f5ec 100644
--- a/apps/next/modules/user/auth.ts
+++ b/apps/next/modules/user/auth.ts
@@ -63,6 +63,23 @@ export const useSignInWithEmailPassword: AuthHook<
   });
 };
 
+export const useResetPasswordForEmail: AuthHook<
+  unknown,
+  AuthTokenResponse["error"],
+  string
+> = (options) => {
+  const supabase = useSupabaseClient();
+  return useMutation({
+    mutationFn: async (email) => {
+      const { error } = await supabase.auth.resetPasswordForEmail(email);
+      if (error) {
+        throw error;
+      }
+    },
+    ...options,
+  });
+};
+
 export const useSignOut: AuthHook<unknown, AuthTokenResponse["error"], void> = (
   options
 ) => {