feat!: reset password with email

frontend/src/pages/auth/resetPassword/[resetPasswordToken].tsx

@@ -0,0 +1,81 @@
+import {
+  Button,
+  Container,
+  createStyles,
+  Group,
+  Paper,
+  PasswordInput,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useForm, yupResolver } from "@mantine/form";
+import { useRouter } from "next/router";
+import * as yup from "yup";
+import authService from "../../../services/auth.service";
+import toast from "../../../utils/toast.util";
+
+const useStyles = createStyles((theme) => ({
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      width: "100%",
+    },
+  },
+}));
+
+const ResetPassword = () => {
+  const { classes } = useStyles();
+  const router = useRouter();
+
+  const form = useForm({
+    initialValues: {
+      password: "",
+    },
+    validate: yupResolver(
+      yup.object().shape({
+        password: yup.string().min(8).required(),
+      })
+    ),
+  });
+
+  const resetPasswordToken = router.query.resetPasswordToken as string;
+
+  return (
+    <Container size={460} my={30}>
+      <Title order={2} weight={900} align="center">
+        Reset password
+      </Title>
+      <Text color="dimmed" size="sm" align="center">
+        Enter your new password
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} radius="md" mt="xl">
+        <form
+          onSubmit={form.onSubmit((values) => {
+            console.log(resetPasswordToken);
+            authService
+              .resetPassword(resetPasswordToken, values.password)
+              .then(() => {
+                toast.success("Your password has been reset successfully.");
+
+                router.push("/auth/signIn");
+              })
+              .catch(toast.axiosError);
+          })}
+        >
+          <PasswordInput
+            label="New password"
+            placeholder="••••••••••"
+            {...form.getInputProps("password")}
+          />
+          <Group position="right" mt="lg">
+            <Button type="submit" className={classes.control}>
+              Reset password
+            </Button>
+          </Group>
+        </form>
+      </Paper>
+    </Container>
+  );
+};
+
+export default ResetPassword;

frontend/src/pages/auth/resetPassword/index.tsx

@@ -0,0 +1,107 @@
+import {
+  Anchor,
+  Box,
+  Button,
+  Center,
+  Container,
+  createStyles,
+  Group,
+  Paper,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useForm, yupResolver } from "@mantine/form";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { TbArrowLeft } from "react-icons/tb";
+import * as yup from "yup";
+import authService from "../../../services/auth.service";
+import toast from "../../../utils/toast.util";
+
+const useStyles = createStyles((theme) => ({
+  title: {
+    fontSize: 26,
+    fontWeight: 900,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+  },
+
+  controls: {
+    [theme.fn.smallerThan("xs")]: {
+      flexDirection: "column-reverse",
+    },
+  },
+
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      width: "100%",
+      textAlign: "center",
+    },
+  },
+}));
+
+const ResetPassword = () => {
+  const { classes } = useStyles();
+  const router = useRouter();
+
+  const form = useForm({
+    initialValues: {
+      email: "",
+    },
+    validate: yupResolver(
+      yup.object().shape({
+        email: yup.string().email().required(),
+      })
+    ),
+  });
+
+  return (
+    <Container size={460} my={30}>
+      <Title order={2} weight={900} align="center">
+        Forgot your password?
+      </Title>
+      <Text color="dimmed" size="sm" align="center">
+        Enter your email to get a reset link
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} radius="md" mt="xl">
+        <form
+          onSubmit={form.onSubmit((values) =>
+            authService
+              .requestResetPassword(values.email)
+              .then(() => {
+                toast.success("The email has been sent.");
+                router.push("/auth/signIn");
+              })
+              .catch(toast.axiosError)
+          )}
+        >
+          <TextInput
+            label="Your email"
+            placeholder="Your email"
+            {...form.getInputProps("email")}
+          />
+          <Group position="apart" mt="lg" className={classes.controls}>
+            <Anchor
+              component={Link}
+              color="dimmed"
+              size="sm"
+              className={classes.control}
+              href={"/auth/signIn"}
+            >
+              <Center inline>
+                <TbArrowLeft size={12} />
+                <Box ml={5}>Back to login page</Box>
+              </Center>
+            </Anchor>
+            <Button type="submit" className={classes.control}>
+              Reset password
+            </Button>
+          </Group>
+        </form>
+      </Paper>
+    </Container>
+  );
+};
+
+export default ResetPassword;

frontend/src/pages/index.tsx

@@ -10,8 +10,11 @@ import {
 } from "@mantine/core";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { TbCheck } from "react-icons/tb";
 import Meta from "../components/Meta";
+import useUser from "../hooks/user.hook";
 
 const useStyles = createStyles((theme) => ({
   inner: {
@@ -67,6 +70,17 @@ const useStyles = createStyles((theme) => ({
 
 export default function Home() {
   const { classes } = useStyles();
+  const { refreshUser } = useUser();
+  const router = useRouter();
+
+  // If the user is already logged in, redirect to the upload page
+  useEffect(() => {
+    refreshUser().then((user) => {
+      if (user) {
+        router.replace("/upload");
+      }
+    });
+  }, []);
 
   return (
     <>