From e442bf21bf04bd7a218fd0c7beaba43be8737219 Mon Sep 17 00:00:00 2001
From: Enes Kaya <eneskaya@me.com>
Date: Tue, 16 Jan 2024 22:29:05 +0100
Subject: [PATCH] wip: add initial UI for forgot password flow

---
 apps/client/pages/api/auth/reset-password.ts | 19 +++++
 apps/client/pages/login.tsx                  | 75 +++++++++++++++++++-
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/pages/api/auth/reset-password.ts

diff --git a/apps/client/pages/api/auth/reset-password.ts b/apps/client/pages/api/auth/reset-password.ts
new file mode 100644
index 00000000..8b1ac9bb
--- /dev/null
+++ b/apps/client/pages/api/auth/reset-password.ts
@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type ResponseData = {
+    message: string
+}
+
+export default function handler(req: NextApiRequest, res: NextApiResponse<ResponseData>) {
+    // TODO: implement password reset functionality
+
+    // 1. Generate a password reset token
+    // 2. Send a password reset email
+    // 3. Redirect to a password reset page
+    // 4. Verify the password reset token
+    // 5. Reset the password
+    // 6. Redirect to the login page
+    // 7. Login with the new password
+
+    res.status(200).json({ message: 'Hello from Next.js!' })
+}
diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx
index a2c2dc2b..94b7b277 100644
--- a/apps/client/pages/login.tsx
+++ b/apps/client/pages/login.tsx
@@ -1,6 +1,6 @@
 import { useState, type ReactElement } from 'react'
 import { FullPageLayout } from '@maybe-finance/client/features'
-import { Input, InputPassword, Button } from '@maybe-finance/design-system'
+import { Input, InputPassword, Button, Dialog, Toast } from '@maybe-finance/design-system'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
@@ -11,6 +11,13 @@ export default function LoginPage() {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
     const [isValid, setIsValid] = useState(false)
+
+    // FIXME - move this to a separate component/hook?
+    const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
+    const [showForgotPasswordDialog, setShowForgotPasswordDialog] = useState(false)
+    const [sendResetPasswordEmailLoading, setSendResetPasswordEmailLoading] = useState(false)
+    const [showResetPasswordSuccess, setShowResetPasswordSuccess] = useState(false)
+
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
     const [isLoading, setIsLoading] = useState(false)
 
@@ -48,6 +55,24 @@ export default function LoginPage() {
         setIsValid(e.target.value.length > 0)
     }
 
+    const sendResetPasswordEmail = async () => {
+        setSendResetPasswordEmailLoading(true)
+
+        const response = await fetch('/api/auth/reset-password', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                email: forgotPasswordEmail,
+            }),
+        })
+
+        if (response.ok) {
+            setShowResetPasswordSuccess(true)
+            setSendResetPasswordEmailLoading(false)
+            setForgotPasswordEmail('')
+        }
+    }
+
     return (
         <>
             <Script
@@ -107,6 +132,54 @@ export default function LoginPage() {
                                     </Link>
                                 </div>
                             </div>
+
+                            <Dialog
+                                onClose={() => {
+                                    setShowForgotPasswordDialog(false)
+                                    setShowResetPasswordSuccess(false)
+                                    setForgotPasswordEmail('')
+                                }}
+                                isOpen={showForgotPasswordDialog}
+                            >
+                                <Dialog.Title>Forgot password?</Dialog.Title>
+                                <Dialog.Content>
+                                    {showResetPasswordSuccess && (
+                                        <Toast variant="success" className="my-2">
+                                            If the email you provided exists, we&apos;ve sent you a
+                                            password reset email.
+                                        </Toast>
+                                    )}
+
+                                    <Input
+                                        type="text"
+                                        label="Email"
+                                        value={forgotPasswordEmail}
+                                        onChange={(e) =>
+                                            setForgotPasswordEmail(e.currentTarget.value)
+                                        }
+                                    />
+                                </Dialog.Content>
+                                <Dialog.Actions>
+                                    <Button
+                                        type="button"
+                                        disabled={sendResetPasswordEmailLoading}
+                                        onClick={() => sendResetPasswordEmail()}
+                                        fullWidth
+                                    >
+                                        Send Password Reset Email
+                                    </Button>
+                                </Dialog.Actions>
+                            </Dialog>
+
+                            <div className="text-sm text-gray-50 mt-2">
+                                <button
+                                    className="hover:text-cyan-400 underline font-medium"
+                                    type="button"
+                                    onClick={() => setShowForgotPasswordDialog(true)}
+                                >
+                                    Forgot password?
+                                </button>
+                            </div>
                         </form>
                     </div>
                 </div>