forked from mrwyndham/fastpocket
109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
"use client"
|
|
|
|
import React from "react"
|
|
import { useForm } from "react-hook-form"
|
|
import { yupResolver } from "@hookform/resolvers/yup"
|
|
import { passwordValidationSchema } from "@/utils/form"
|
|
import { toast } from "react-toastify"
|
|
import PocketBase from "pocketbase"
|
|
import PageWrapper from "@/components/Utilities/PageWrapper"
|
|
import { usePathname } from "next/navigation"
|
|
import Background from "@/components/Utilities/Background"
|
|
import PageHeader from "@/sections/PageHeader"
|
|
|
|
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL)
|
|
|
|
export default function ConfirmPasswordResetPage() {
|
|
const pathName = usePathname()
|
|
const token = pathName.split("/").at(-1)
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
reset
|
|
} = useForm({
|
|
resolver: yupResolver(passwordValidationSchema)
|
|
})
|
|
|
|
const onSubmit = async data => {
|
|
try {
|
|
await pb
|
|
.collection("user")
|
|
.confirmPasswordReset(
|
|
token ?? "",
|
|
data.newPassword,
|
|
data.newPasswordConfirm
|
|
)
|
|
reset()
|
|
document.getElementById("sign-in-modal")?.click()
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast.error(
|
|
"There was a problem. Please try reset your password again",
|
|
{
|
|
position: "bottom-left",
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeOnClick: true,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
progress: undefined,
|
|
theme: "colored"
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PageWrapper>
|
|
<Background>
|
|
<div className="h-screen w-screen flex items-center flex-col">
|
|
<PageHeader title={"Enter Your New Password"} subtitle={<></>} />
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="w-full max-w-xl px-4"
|
|
>
|
|
<div className="relative mt-6">
|
|
<input
|
|
type="password"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="New password…"
|
|
aria-label="New password…"
|
|
autoComplete="on"
|
|
{...register("newPassword")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.newPassword?.message}
|
|
</div>
|
|
</div>
|
|
<div className="relative mt-6">
|
|
<input
|
|
type="password"
|
|
className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Confirm new password…"
|
|
aria-label="Confirm new password…"
|
|
autoComplete="on"
|
|
{...register("newPasswordConfirm")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.newPasswordConfirm?.message}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row w-full justify-between">
|
|
<button
|
|
disabled={isSubmitting}
|
|
type="submit"
|
|
className={isSubmitting ? "btn btn-gray" : "btn btn-primary"}
|
|
>
|
|
Reset Password
|
|
{isSubmitting && <div className="loading"></div>}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Background>
|
|
</PageWrapper>
|
|
)
|
|
}
|