forked from mrwyndham/fastpocket
90 lines
2.9 KiB
JavaScript
90 lines
2.9 KiB
JavaScript
"use client"
|
|
|
|
import React from "react"
|
|
import { useForm } from "react-hook-form"
|
|
import { yupResolver } from "@hookform/resolvers/yup"
|
|
import { changeEmailValidationSchema } 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 ConfirmEmailChangePage() {
|
|
const pathName = usePathname()
|
|
const token = pathName.split("/").at(-1)
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
reset
|
|
} = useForm({
|
|
resolver: yupResolver(changeEmailValidationSchema)
|
|
})
|
|
|
|
const onSubmit = async data => {
|
|
try {
|
|
await pb.collection("user").confirmEmailChange(token ?? "", data.password)
|
|
reset()
|
|
document.getElementById("sign-in-modal")?.click()
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast.error("There was a problem. Please try change your email 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 Password To Change Your Email"}
|
|
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="Password…"
|
|
aria-label="Password…"
|
|
autoComplete="on"
|
|
{...register("password")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.password?.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"}
|
|
>
|
|
Change Email
|
|
{isSubmitting && <div className="loading"></div>}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Background>
|
|
</PageWrapper>
|
|
)
|
|
}
|