forked from mrwyndham/fastpocket
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
"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, useRouter } from 'next/navigation';
|
|
import Background from "@/components/Utilities/Background";
|
|
import PageHeader from "@/sections/PageHeader";
|
|
|
|
const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL as string);
|
|
|
|
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: any) => {
|
|
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>
|
|
);
|
|
}
|