feat: add reset password functionality

src/pages/api/users/forgot-password.ts

@@ -0,0 +1,75 @@
+import { generateResetPasswordToken } from '@/config/jwt';
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+import sendEmail from '@/config/sparkpost/sendEmail';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+import DBClient from '@/prisma/DBClient';
+import { render } from '@react-email/render';
+import ForgotEmail from '@/emails/ForgotEmail';
+import { ReactElement } from 'react';
+
+import { User } from '@prisma/client';
+import { BASE_URL } from '@/config/env';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+
+interface ResetPasswordRequest extends NextApiRequest {
+  body: { email: string };
+}
+
+const sendResetPasswordEmail = async (user: User) => {
+  const token = generateResetPasswordToken({ id: user.id, username: user.username });
+
+  const url = `${BASE_URL}/users/reset-password?token=${token}`;
+
+  const component = ForgotEmail({ name: user.username, url })! as ReactElement<
+    unknown,
+    string
+  >;
+
+  const html = render(component);
+  const text = render(component, { plainText: true });
+
+  await sendEmail({
+    address: user.email,
+    subject: 'Reset Password',
+    html,
+    text,
+  });
+};
+
+const forgetPassword = async (
+  req: ResetPasswordRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const { email } = req.body;
+
+  const user = await DBClient.instance.user.findUnique({
+    where: { email },
+  });
+
+  if (user) {
+    await sendResetPasswordEmail(user);
+  }
+
+  res.status(200).json({
+    statusCode: 200,
+    success: true,
+    message:
+      'If an account with that email exists, we have sent you an email to reset your password.',
+  });
+};
+
+const router = createRouter<
+  ResetPasswordRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.post(
+  validateRequest({ bodySchema: z.object({ email: z.string().email() }) }),
+  forgetPassword,
+);
+
+const handler = router.handler(NextConnectOptions);
+export default handler;

src/pages/api/users/register.ts

@@ -11,7 +11,6 @@ import findUserByEmail from '@/services/User/findUserByEmail';
 import validateRequest from '@/config/nextConnect/middleware/validateRequest';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 
-import { NODE_ENV } from '@/config/env';
 import sendConfirmationEmail from '@/services/User/sendConfirmationEmail';
 
 interface RegisterUserRequest extends NextApiRequest {
@@ -45,9 +44,7 @@ const registerUser = async (req: RegisterUserRequest, res: NextApiResponse) => {
     username: user.username,
   });
 
-  if (NODE_ENV === 'production') {
-    await sendConfirmationEmail(user);
-  }
+  await sendConfirmationEmail(user);
 
   res.status(201).json({
     success: true,

src/pages/login/index.tsx

@@ -40,7 +40,7 @@ const LoginPage: NextPage = () => {
                 Don't have an account?
               </Link>
               <Link
-                href="/reset-password"
+                href="/users/forgot-password"
                 className="text-primary-500 link-hover link italic"
               >
                 Forgot password?

src/pages/users/forgot-password.tsx

@@ -0,0 +1,88 @@
+import Button from '@/components/ui/forms/Button';
+import FormError from '@/components/ui/forms/FormError';
+import FormInfo from '@/components/ui/forms/FormInfo';
+import FormLabel from '@/components/ui/forms/FormLabel';
+import FormSegment from '@/components/ui/forms/FormSegment';
+import FormTextInput from '@/components/ui/forms/FormTextInput';
+import { BaseCreateUserSchema } from '@/services/User/schema/CreateUserValidationSchemas';
+import createErrorToast from '@/util/createErrorToast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { NextPage } from 'next';
+
+import { SubmitHandler, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/router';
+import sendForgotPasswordRequest from '@/requests/User/sendForgotPasswordRequest';
+import { FaUserCircle } from 'react-icons/fa';
+
+interface ForgotPasswordPageProps {}
+
+const ForgotPasswordPage: NextPage<ForgotPasswordPageProps> = () => {
+  const { register, handleSubmit, formState, reset } = useForm({
+    resolver: zodResolver(BaseCreateUserSchema.pick({ email: true })),
+    defaultValues: { email: '' },
+  });
+
+  const router = useRouter();
+  const { errors } = formState;
+
+  const onSubmit: SubmitHandler<{ email: string }> = async (data) => {
+    try {
+      const loadingToast = toast.loading('Sending reset link...');
+      await sendForgotPasswordRequest(data.email);
+      reset();
+      toast.dismiss(loadingToast);
+      toast.success('Password reset link sent!');
+
+      router.push('/');
+    } catch (error) {
+      createErrorToast(error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center h-full">
+      <div className="xl:w-6/12 w-10/12 mt-64 text-center flex flex-col space-y-3">
+        <div className="space-y-1">
+          <div className="flex flex-col items-center justify-center my-2">
+            <FaUserCircle className="text-3xl" />
+            <h1 className="text-3xl font-bold">Forgot Your Password?</h1>
+          </div>
+          <p className="xl:text-lg">
+            Enter your email address below, and we will send you a link to reset your
+            password.
+          </p>
+        </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="form-control space-y-3"
+          noValidate
+        >
+          <div>
+            <FormInfo>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <FormError>{errors.email?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="email"
+                type="email"
+                formValidationSchema={register('email')}
+                disabled={formState.isSubmitting}
+                error={!!errors.email}
+                placeholder="Email"
+              />
+            </FormSegment>
+          </div>
+          <div>
+            <Button type="submit" isSubmitting={formState.isSubmitting}>
+              Send Reset Link
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPasswordPage;

src/pages/users/reset-password.tsx

@@ -0,0 +1,43 @@
+import { setLoginSession } from '@/config/auth/session';
+import { verifyResetPasswordToken } from '@/config/jwt';
+import ServerError from '@/config/util/ServerError';
+import findUserById from '@/services/User/findUserById';
+
+import { GetServerSideProps, NextApiResponse, NextPage } from 'next';
+
+const TokenExpiredPage: NextPage = () => {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold">Token Expired</h1>
+        <p className="text-lg">
+          Your link to reset your password has expired or is invalid.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TokenExpiredPage;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  try {
+    const token = context.query.token as string | undefined;
+    if (!token) {
+      throw new ServerError('Token not provided', 400);
+    }
+
+    const { id } = await verifyResetPasswordToken(token as string);
+
+    const user = await findUserById(id);
+    if (!user) {
+      throw new ServerError('User not found', 404);
+    }
+
+    await setLoginSession(context.res as NextApiResponse, user);
+
+    return { redirect: { destination: '/account', permanent: false } };
+  } catch (error) {
+    return { props: {} };
+  }
+};