diff --git a/Frontend/app/(public)/[ignore]/auth/confirm-email-change/[token]/page.tsx b/Frontend/app/(public)/[ignore]/auth/confirm-email-change/[token]/page.tsx new file mode 100644 index 0000000..9270ca9 --- /dev/null +++ b/Frontend/app/(public)/[ignore]/auth/confirm-email-change/[token]/page.tsx @@ -0,0 +1,89 @@ +"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 ( + + +
+ } + /> +
+
+ +
+ {errors.password?.message}  +
+
+
+ +
+
+
+ + + ); +} diff --git a/Frontend/app/(public)/[ignore]/auth/confirm-password-reset/[token]/page.tsx b/Frontend/app/(public)/[ignore]/auth/confirm-password-reset/[token]/page.tsx new file mode 100644 index 0000000..ef3f365 --- /dev/null +++ b/Frontend/app/(public)/[ignore]/auth/confirm-password-reset/[token]/page.tsx @@ -0,0 +1,103 @@ +"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, 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 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: any) => { + 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 ( + + +
+ } + /> +
+
+ +
+ {errors.newPassword?.message}  +
+
+
+ +
+ {errors.newPasswordConfirm?.message}  +
+
+
+ +
+
+
+ + + ); +} diff --git a/Frontend/app/(public)/[ignore]/auth/confirm-verification/[token]/page.tsx b/Frontend/app/(public)/[ignore]/auth/confirm-verification/[token]/page.tsx new file mode 100644 index 0000000..15382d1 --- /dev/null +++ b/Frontend/app/(public)/[ignore]/auth/confirm-verification/[token]/page.tsx @@ -0,0 +1,60 @@ +"use client" + +import React, { useEffect } from "react"; +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 ConfirmVerification() { + const pathName = usePathname(); + const router = useRouter(); + const token = pathName.split('/').at(-1); + + useEffect(() => { + (async () => { + try { + await pb.collection('user').confirmVerification( + token ?? "" + ); + } catch (error) { + if (error instanceof Error) { + toast.error("There was a problem. Please try confirm your email again", { + position: "bottom-left", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "colored", + }); + } + } + })() + }, []) + + const handleSignInRedirect = () => { + document.getElementById("sign-in-modal")?.click(); + }; + + return ( + + +
+ } + /> + +
+ + + ); +} diff --git a/Frontend/app/layout.tsx b/Frontend/app/layout.tsx index 7680d2d..de5e2b4 100644 --- a/Frontend/app/layout.tsx +++ b/Frontend/app/layout.tsx @@ -46,7 +46,7 @@ export default async function RootLayout({ -
+
{children} (); const [statefulUser, setStatefulUser] = useState(); + const pathName = usePathname(); useEffect(() => { (async () => { const user = await getUser(); setUser(user as User); })(); }, [statefulUser]); - //End Advice + + const { theme, setTheme } = useTheme(); return (
@@ -150,6 +155,7 @@ export default function Header({ isUserLoggedIn }: HeaderProps) { +
); diff --git a/Frontend/components/Modals/ModalEmailChange.tsx b/Frontend/components/Modals/ModalEmailChange.tsx index 1581aef..81c10d9 100644 --- a/Frontend/components/Modals/ModalEmailChange.tsx +++ b/Frontend/components/Modals/ModalEmailChange.tsx @@ -1,28 +1,30 @@ import React, { useRef } from "react"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; -import { signInValidationSchema } from "@/utils/form"; +import { emailValidationSchema } from "@/utils/form"; import { toast } from "react-toastify"; import pb from "@/lib/pocketbase"; import {Dismiss20Filled} from "@fluentui/react-icons" +import { redirect } from "next/navigation"; -function ModalEmailChange() { +function ModalEmailChange({authString}:{authString:string}) { const { register, handleSubmit, reset, formState: { errors, isSubmitting }, } = useForm({ - resolver: yupResolver(signInValidationSchema), + resolver: yupResolver(emailValidationSchema), }); const onSubmit = async (data: any) => { console.log(data); + pb.authStore.loadFromCookie(authString); + !pb.authStore.isValid && redirect("/"); try { - //login user - if (await pb.collection("user").requestPasswordReset(data.email)) { + if (await pb.collection("user").requestEmailChange(data.email)) { reset(); - document.getElementById("password-reset-modal")?.click(); + document.getElementById("email-change-modal")?.click(); document.getElementById("sign-in-modal")?.click(); } } catch (error) { @@ -44,17 +46,17 @@ function ModalEmailChange() { <> { reset(); }} /> -