feat!: reset password with email

frontend/src/components/admin/configuration/AdminConfigTable.tsx

@@ -35,6 +35,12 @@ const AdminConfigTable = () => {
     UpdateConfig[]
   >([]);
 
+  useEffect(() => {
+    if (config.get("SETUP_STATUS") != "FINISHED") {
+      config.refresh();
+    }
+  }, []);
+
   const updateConfigVariable = (configVariable: UpdateConfig) => {
     const index = updatedConfigVariables.findIndex(
       (item) => item.key === configVariable.key

frontend/src/components/auth/SignInForm.tsx

@@ -2,6 +2,7 @@ import {
   Anchor,
   Button,
   Container,
+  Group,
   Paper,
   PasswordInput,
   Text,
@@ -91,13 +92,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
 
   return (
     <Container size={420} my={40}>
-      <Title
-        align="center"
-        sx={(theme) => ({
-          fontFamily: `Greycliff CF, ${theme.fontFamily}`,
-          fontWeight: 900,
-        })}
-      >
+      <Title order={2} align="center" weight={900}>
         Welcome back
       </Title>
       {config.get("ALLOW_REGISTRATION") && (
@@ -118,7 +113,7 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
         >
           <TextInput
             label="Email or username"
-            placeholder="you@email.com"
+            placeholder="Your email or username"
             {...form.getInputProps("emailOrUsername")}
           />
           <PasswordInput
@@ -136,6 +131,13 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
               {...form.getInputProps("totp")}
             />
           )}
+          {config.get("SMTP_ENABLED") && (
+            <Group position="right" mt="xs">
+              <Anchor component={Link} href="/auth/resetPassword" size="xs">
+                Forgot password?
+              </Anchor>
+            </Group>
+          )}
           <Button fullWidth mt="xl" type="submit">
             Sign in
           </Button>

frontend/src/components/auth/SignUpForm.tsx

@@ -49,13 +49,7 @@ const SignUpForm = () => {
 
   return (
     <Container size={420} my={40}>
-      <Title
-        align="center"
-        sx={(theme) => ({
-          fontFamily: `Greycliff CF, ${theme.fontFamily}`,
-          fontWeight: 900,
-        })}
-      >
+      <Title order={2} align="center" weight={900}>
         Sign up
       </Title>
       {config.get("ALLOW_REGISTRATION") && (
@@ -74,12 +68,12 @@ const SignUpForm = () => {
         >
           <TextInput
             label="Username"
-            placeholder="john.doe"
+            placeholder="Your username"
             {...form.getInputProps("username")}
           />
           <TextInput
             label="Email"
-            placeholder="you@email.com"
+            placeholder="Your email"
             mt="md"
             {...form.getInputProps("email")}
           />

frontend/src/components/navBar/NavBar.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
@@ -109,11 +110,18 @@ const useStyles = createStyles((theme) => ({
 
 const NavBar = () => {
   const { user } = useUser();
+  const router = useRouter();
   const config = useConfig();
 
   const [opened, toggleOpened] = useDisclosure(false);
 
-  const authenticatedLinks = [
+  const [currentRoute, setCurrentRoute] = useState("");
+
+  useEffect(() => {
+    setCurrentRoute(router.pathname);
+  }, [router.pathname]);
+
+  const authenticatedLinks: NavLink[] = [
     {
       link: "/upload",
       label: "Upload",
@@ -126,32 +134,31 @@ const NavBar = () => {
     },
   ];
 
-  const [unauthenticatedLinks, setUnauthenticatedLinks] = useState<NavLink[]>([
+  let unauthenticatedLinks: NavLink[] = [
     {
       link: "/auth/signIn",
       label: "Sign in",
     },
-  ]);
+  ];
 
-  useEffect(() => {
-    if (config.get("SHOW_HOME_PAGE"))
-      setUnauthenticatedLinks((array) => [
-        {
-          link: "/",
-          label: "Home",
-        },
-        ...array,
-      ]);
+  if (config.get("ALLOW_UNAUTHENTICATED_SHARES")) {
+    unauthenticatedLinks.unshift({
+      link: "/upload",
+      label: "Upload",
+    });
+  }
 
-    if (config.get("ALLOW_REGISTRATION"))
-      setUnauthenticatedLinks((array) => [
-        ...array,
-        {
-          link: "/auth/signUp",
-          label: "Sign up",
-        },
-      ]);
-  }, []);
+  if (config.get("SHOW_HOME_PAGE"))
+    unauthenticatedLinks.unshift({
+      link: "/",
+      label: "Home",
+    });
+
+  if (config.get("ALLOW_REGISTRATION"))
+    unauthenticatedLinks.push({
+      link: "/auth/signUp",
+      label: "Sign up",
+    });
 
   const { classes, cx } = useStyles();
   const items = (
@@ -170,9 +177,7 @@ const NavBar = () => {
             href={link.link ?? ""}
             onClick={() => toggleOpened.toggle()}
             className={cx(classes.link, {
-              [classes.linkActive]:
-                typeof window != "undefined" &&
-                window.location.pathname == link.link,
+              [classes.linkActive]: currentRoute == link.link,
             })}
           >
             {link.label}