feat: reset/forgot password flow
This commit is contained in:
parent
2b9d35b7a7
commit
31b2180726
@ -1,6 +1,10 @@
|
||||
DATABASE_URI=postgres://postgres:<password>@127.0.0.1:5432/your-database-name
|
||||
PAYLOAD_SECRET=YOUR_SECRET_HERE
|
||||
|
||||
DOMIAN_NAME=
|
||||
|
||||
SMTP_HOST=
|
||||
SMTP_USER=
|
||||
SMTP_PASS=
|
||||
SMTP_PORT=587
|
||||
PASSWORD_RESET_EXPIRATION_IN_MINUTES=
|
||||
|
||||
0
src/app/(frontend)/forgotPassword/page.client.tsx
Normal file
0
src/app/(frontend)/forgotPassword/page.client.tsx
Normal file
41
src/app/(frontend)/forgotPassword/page.tsx
Normal file
41
src/app/(frontend)/forgotPassword/page.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { headers as nextHeaders } from 'next/headers'
|
||||
import { getPayload } from 'payload'
|
||||
import configPromise from '@payload-config'
|
||||
import { redirect } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import { ForgotPasswordForm } from '@/components/ForgotPasswordForm'
|
||||
|
||||
const LoginPage = async () => {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const headers = await nextHeaders()
|
||||
const userResult = await payload.auth({ headers })
|
||||
if (Boolean(userResult.user)) redirect('/profile')
|
||||
|
||||
return (
|
||||
<div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10 rounded-md">
|
||||
<div className="flex w-full max-w-sm flex-col gap-6">
|
||||
<a
|
||||
href="https://beitzah.net?ref=midrashim"
|
||||
className="flex items-center gap-2 self-center font-medium"
|
||||
>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
|
||||
<Image
|
||||
src="https://cdn.beitzah.net/egg-highlight-white.svg"
|
||||
className="h-full"
|
||||
height={46}
|
||||
width={20}
|
||||
alt="beitzah logo"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block leading-3.5">Developed with 💜</span>
|
||||
<span className="block leading-3.5">by Beitzah.tech</span>
|
||||
</div>
|
||||
</a>
|
||||
<ForgotPasswordForm />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginPage
|
||||
@ -1,12 +1,59 @@
|
||||
import { defaultAccess } from '@/lib/utils'
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
const expirationInMinutes = parseInt(process.env.PASSWORD_RESET_EXPIRATION_IN_MINUTES || '30')
|
||||
const domain = process.env.DOMAIN_NAME || 'localhost:3000'
|
||||
|
||||
export const Users: CollectionConfig = {
|
||||
slug: 'users',
|
||||
admin: {
|
||||
useAsTitle: 'email',
|
||||
},
|
||||
auth: true,
|
||||
auth: {
|
||||
// verify: {
|
||||
// generateEmailSubject: () => {
|
||||
// return `Verify Account for ${domain}`
|
||||
// },
|
||||
// generateEmailHTML: ({ req, token, user }) => {
|
||||
// const url = `https://${domain}/verify?token=${token}`
|
||||
// return `
|
||||
// <!doctype html>
|
||||
// <html>
|
||||
// <body>
|
||||
// <h1>Verify Account for ${domain}</h1>
|
||||
// <p>Hey ${user.email}, verify your email by clicking here: ${url}</p>
|
||||
// <p>If you have not recently been signed up for ${domain} then please ignore this email.</p>
|
||||
// </body>
|
||||
// </html>
|
||||
// `
|
||||
//
|
||||
// },
|
||||
// },
|
||||
forgotPassword: {
|
||||
expiration: (60000 * expirationInMinutes),
|
||||
generateEmailSubject: () => {
|
||||
return `Reset password request for ${domain}`
|
||||
},
|
||||
generateEmailHTML: (props) => {
|
||||
const resetPasswordURL = `https://${domain}/forgotPassword?token=${props?.token}`
|
||||
|
||||
return `
|
||||
<!doctype html>
|
||||
<html>
|
||||
<body>
|
||||
<h1>Reset Password for ${domain}</h1>
|
||||
<p>Hello, ${props?.user.firstName}!</p>
|
||||
<p>There has been a request for the account account for ${props?.user.email}. If this is not the case then please ignore this email.</p>
|
||||
<p>If you intend to reset your password then you can do so with the link below.</p>
|
||||
<p>
|
||||
<a href="${resetPasswordURL}">${resetPasswordURL}</a>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
},
|
||||
}
|
||||
},
|
||||
access: {
|
||||
...defaultAccess,
|
||||
update: ({ req, data }) => {
|
||||
@ -21,7 +68,7 @@ export const Users: CollectionConfig = {
|
||||
{
|
||||
name: 'role',
|
||||
type: 'select',
|
||||
options: ['admin', 'user', 'unclaimed'],
|
||||
options: ['admin', 'user'],
|
||||
saveToJWT: true
|
||||
},
|
||||
{
|
||||
@ -32,10 +79,6 @@ export const Users: CollectionConfig = {
|
||||
name: 'lastName',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'isOwnershipClaimed',
|
||||
type: 'checkbox',
|
||||
},
|
||||
{
|
||||
name: 'repositories',
|
||||
type: 'join',
|
||||
|
||||
145
src/components/ForgotPasswordForm.tsx
Normal file
145
src/components/ForgotPasswordForm.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
'use client'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
import resetPassword from '@/serverActions/ResetPassword'
|
||||
import { toast } from 'sonner'
|
||||
import forgotPassword from '@/serverActions/ForgotPassword'
|
||||
|
||||
export function ForgotPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
const router = useRouter()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [didSendForgetRequest, setDidSendForgetRequest] = useState(false)
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
const token = searchParams.get('token')
|
||||
|
||||
const handleResetPasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (isLoading) return
|
||||
setIsLoading(true)
|
||||
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const password = String(formData.get('password'))
|
||||
const confirmPassword = String(formData.get('confirmPassword'))
|
||||
|
||||
if (!password || !confirmPassword || password !== confirmPassword) {
|
||||
toast('Finish the form to continue')
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
toast('Password reset token is missing')
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const didReset = await resetPassword({
|
||||
token,
|
||||
password,
|
||||
confirmPassword,
|
||||
})
|
||||
|
||||
console.log('didReset', didReset)
|
||||
|
||||
if (!didReset) {
|
||||
toast('Issue resetting your password')
|
||||
setIsLoading(false)
|
||||
} else router.push('/login')
|
||||
}
|
||||
|
||||
const handleForgotPasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (isLoading) return
|
||||
setIsLoading(true)
|
||||
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const email = String(formData.get('email'))
|
||||
|
||||
if (!email) return
|
||||
|
||||
const didForget = await forgotPassword({ email })
|
||||
|
||||
if (didForget) {
|
||||
toast('A password change email was sent')
|
||||
setDidSendForgetRequest(true)
|
||||
} else toast('There was an issue with your forget password request')
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-6', className)} {...props}>
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">Welcome back</CardTitle>
|
||||
<CardDescription>
|
||||
{!token
|
||||
? 'An email to reset your password will be sent if we find it in our system'
|
||||
: 'Please enter your new password'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={token ? handleResetPasswordSubmit : handleForgotPasswordSubmit}
|
||||
aria-disabled={isLoading}
|
||||
>
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-6">
|
||||
{!token ? (
|
||||
<div className="grid gap-3">
|
||||
{didSendForgetRequest ? (
|
||||
<p className="accent-muted">
|
||||
Your request has been sent. Check you emails inbox and span folders
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="me@example.com"
|
||||
required
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
<div className="flex items-center">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
</div>
|
||||
<Input id="password" name="password" type="password" required />
|
||||
|
||||
<div className="flex items-center">
|
||||
<Label htmlFor="password">Confirm Password</Label>
|
||||
</div>
|
||||
<Input id="confirmPassword" name="confirmPassword" type="password" required />
|
||||
</div>
|
||||
)}
|
||||
{!didSendForgetRequest && (
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{!!token ? 'Forgot Password' : 'Reset'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
|
||||
By clicking <i>Rest</i> or <i>Forgot Password</i>, you agree to our{' '}
|
||||
<a href="/info/toc">Terms of Service</a> and <a href="/info/privacy">Privacy Policy</a>.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -158,10 +158,9 @@ export interface UserAuthOperations {
|
||||
*/
|
||||
export interface User {
|
||||
id: number;
|
||||
role?: ('admin' | 'user' | 'unclaimed') | null;
|
||||
role?: ('admin' | 'user') | null;
|
||||
firstName?: string | null;
|
||||
lastName?: string | null;
|
||||
isOwnershipClaimed?: boolean | null;
|
||||
repositories?: {
|
||||
docs?: (number | Repository)[];
|
||||
hasNextPage?: boolean;
|
||||
@ -479,7 +478,6 @@ export interface UsersSelect<T extends boolean = true> {
|
||||
role?: T;
|
||||
firstName?: T;
|
||||
lastName?: T;
|
||||
isOwnershipClaimed?: T;
|
||||
repositories?: T;
|
||||
profilePicture?: T;
|
||||
updatedAt?: T;
|
||||
|
||||
28
src/serverActions/ForgotPassword.ts
Normal file
28
src/serverActions/ForgotPassword.ts
Normal file
@ -0,0 +1,28 @@
|
||||
'use server'
|
||||
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@/payload.config'
|
||||
|
||||
type Props = {
|
||||
email: string,
|
||||
}
|
||||
export const forgotPassword = async (props: Props): Promise<boolean> => {
|
||||
const { email } = props
|
||||
|
||||
const payloadConfig = await config
|
||||
const payload = await getPayload({ config: payloadConfig })
|
||||
|
||||
try {
|
||||
await payload.forgotPassword({
|
||||
collection: 'users',
|
||||
data: {
|
||||
email
|
||||
}
|
||||
})
|
||||
return true
|
||||
} catch (_) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default forgotPassword
|
||||
37
src/serverActions/ResetPassword.ts
Normal file
37
src/serverActions/ResetPassword.ts
Normal file
@ -0,0 +1,37 @@
|
||||
'use server'
|
||||
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@/payload.config'
|
||||
|
||||
type Props = {
|
||||
password: string,
|
||||
confirmPassword: string,
|
||||
token: string
|
||||
}
|
||||
export const resetPassword = async (props: Props): Promise<boolean> => {
|
||||
const { password, confirmPassword, token } = props
|
||||
|
||||
if (password !== confirmPassword) return false
|
||||
|
||||
const payloadConfig = await config
|
||||
const payload = await getPayload({ config: payloadConfig })
|
||||
|
||||
try {
|
||||
const result = await payload.resetPassword({
|
||||
collection: 'users',
|
||||
overrideAccess: false,
|
||||
data: {
|
||||
password: password,
|
||||
token: token,
|
||||
}
|
||||
})
|
||||
console.log('result')
|
||||
console.log(result)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default resetPassword
|
||||
Loading…
x
Reference in New Issue
Block a user