Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 15:35:22 +02:00
Code Issues Releases Activity Actions

wip: add initial UI for forgot password flow

Browse source
This commit is contained in:
Enes Kaya 2024-01-16 22:29:05 +01:00
parent df7e83efe7
commit e442bf21bf
No known key found for this signature in database
GPG key ID: 6E2D8C8DAC586FF3
2 changed files with 93 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

19
apps/client/pages/api/auth/reset-password.ts Normal file
View file

@ -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!' })
}

75
apps/client/pages/login.tsx
View file

@ -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>