ysandler/midrashim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reset/forgot password flow

Browse Source
This commit is contained in:
Yehoshua Sandler 2025-05-03 20:28:19 -05:00
parent 2b9d35b7a7
commit 31b2180726
8 changed files with 305 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

@ -1,6 +1,10 @@
DATABASE_URI=postgres://postgres:<password>@127.0.0.1:5432/your-database-name DATABASE_URI=postgres://postgres:<password>@127.0.0.1:5432/your-database-name
PAYLOAD_SECRET=YOUR_SECRET_HERE PAYLOAD_SECRET=YOUR_SECRET_HERE
DOMIAN_NAME=
SMTP_HOST= SMTP_HOST=
SMTP_USER= SMTP_USER=
SMTP_PASS= SMTP_PASS=
SMTP_PORT=587 SMTP_PORT=587
PASSWORD_RESET_EXPIRATION_IN_MINUTES=

0
src/app/(frontend)/forgotPassword/page.client.tsx Normal file
View File

41
src/app/(frontend)/forgotPassword/page.tsx Normal file
View 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

55
src/collections/Users.ts
View File

@ -1,12 +1,59 @@
import { defaultAccess } from '@/lib/utils' import { defaultAccess } from '@/lib/utils'
import type { CollectionConfig } from 'payload' 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 = { export const Users: CollectionConfig = {
slug: 'users', slug: 'users',
admin: { admin: {
useAsTitle: 'email', 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: { access: {
...defaultAccess, ...defaultAccess,
update: ({ req, data }) => { update: ({ req, data }) => {
@ -21,7 +68,7 @@ export const Users: CollectionConfig = {
{ {
name: 'role', name: 'role',
type: 'select', type: 'select',
options: ['admin', 'user', 'unclaimed'], options: ['admin', 'user'],
saveToJWT: true saveToJWT: true
}, },
{ {
@ -32,10 +79,6 @@ export const Users: CollectionConfig = {
name: 'lastName', name: 'lastName',
type: 'text', type: 'text',
}, },
{
name: 'isOwnershipClaimed',
type: 'checkbox',
},
{ {
name: 'repositories', name: 'repositories',
type: 'join', type: 'join',

145
src/components/ForgotPasswordForm.tsx Normal file
View 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>
)
}

4
src/payload-types.ts
View File

@ -158,10 +158,9 @@ export interface UserAuthOperations {
*/ */
export interface User { export interface User {
id: number; id: number;
role?: ('admin' | 'user' | 'unclaimed') | null; role?: ('admin' | 'user') | null;
firstName?: string | null; firstName?: string | null;
lastName?: string | null; lastName?: string | null;
isOwnershipClaimed?: boolean | null;
repositories?: { repositories?: {
docs?: (number | Repository)[]; docs?: (number | Repository)[];
hasNextPage?: boolean; hasNextPage?: boolean;
@ -479,7 +478,6 @@ export interface UsersSelect<T extends boolean = true> {
role?: T; role?: T;
firstName?: T; firstName?: T;
lastName?: T; lastName?: T;
isOwnershipClaimed?: T;
repositories?: T; repositories?: T;
profilePicture?: T; profilePicture?: T;
updatedAt?: T; updatedAt?: T;

28
src/serverActions/ForgotPassword.ts Normal file
View 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
View 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