feat: add setup wizard

frontend/src/pages/_app.tsx

@@ -8,9 +8,10 @@ import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
 import { NotificationsProvider } from "@mantine/notifications";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../components/navBar/NavBar";
-import { ConfigContext } from "../hooks/config.hook";
+import useConfig, { ConfigContext } from "../hooks/config.hook";
 import { UserContext } from "../hooks/user.hook";
 import authService from "../services/auth.service";
 import configService from "../services/config.service";
@@ -23,15 +24,17 @@ import { GlobalLoadingContext } from "../utils/loading.util";
 
 function App({ Component, pageProps }: AppProps) {
   const systemTheme = useColorScheme();
+  const router = useRouter();
+  const config = useConfig();
 
   const [colorScheme, setColorScheme] = useState<ColorScheme>();
   const [isLoading, setIsLoading] = useState(true);
   const [user, setUser] = useState<CurrentUser | null>(null);
-  const [config, setConfig] = useState<Config[] | null>(null);
+  const [configVariables, setConfigVariables] = useState<Config[] | null>(null);
 
   const getInitalData = async () => {
     setIsLoading(true);
-    setConfig(await configService.getAll());
+    setConfigVariables(await configService.list());
     await authService.refreshAccessToken();
     setUser(await userService.getCurrentUser());
     setIsLoading(false);
@@ -42,6 +45,16 @@ function App({ Component, pageProps }: AppProps) {
     getInitalData();
   }, []);
 
+  useEffect(() => {
+    if (
+      configVariables &&
+      configVariables.filter((variable) => variable.key)[0].value == "false" &&
+      !["/auth/signUp", "/admin/setup"].includes(router.asPath)
+    ) {
+      router.push(!user ? "/auth/signUp" : "admin/setup");
+    }
+  }, [router.asPath]);
+
   useEffect(() => {
     setColorScheme(systemTheme);
   }, [systemTheme]);
@@ -59,7 +72,7 @@ function App({ Component, pageProps }: AppProps) {
             {isLoading ? (
               <LoadingOverlay visible overlayOpacity={1} />
             ) : (
-              <ConfigContext.Provider value={config}>
+              <ConfigContext.Provider value={configVariables}>
                 <UserContext.Provider value={user}>
                   <LoadingOverlay visible={isLoading} overlayOpacity={1} />
                   <Header />

frontend/src/pages/admin/config.tsx

@@ -0,0 +1,13 @@
+import { Space } from "@mantine/core";
+import AdminConfigTable from "../../components/admin/AdminConfigTable";
+
+const AdminConfig = () => {
+  return (
+    <>
+      <AdminConfigTable />
+      <Space h="xl" />
+    </>
+  );
+};
+
+export default AdminConfig;

frontend/src/pages/admin/setup.tsx

@@ -0,0 +1,50 @@
+import { Button, Stack, Text, Title } from "@mantine/core";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import AdminConfigTable from "../../components/admin/AdminConfigTable";
+import Logo from "../../components/Logo";
+import useConfig from "../../hooks/config.hook";
+import useUser from "../../hooks/user.hook";
+import configService from "../../services/config.service";
+
+const Setup = () => {
+  const router = useRouter();
+  const config = useConfig();
+  const user = useUser();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (!user) {
+    router.push("/auth/signUp");
+    return;
+  } else if (config.get("setupFinished")) {
+    router.push("/");
+    return;
+  }
+
+  return (
+    <>
+      <Stack align="center">
+        <Logo height={80} width={80} />
+        <Title order={2}>Welcome to Pingvin Share</Title>
+        <Text>Let's customize Pingvin Share for you! </Text>
+        <AdminConfigTable />
+        <Button
+          loading={isLoading}
+          onClick={async () => {
+            setIsLoading(true);
+            await configService.finishSetup();
+            setIsLoading(false);
+            window.location.reload();
+          }}
+          mb={70}
+          mt="lg"
+        >
+          Let me in!
+        </Button>
+      </Stack>
+    </>
+  );
+};
+
+export default Setup;

frontend/src/pages/auth/signIn.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import AuthForm from "../../components/auth/AuthForm";
+import SignInForm from "../../components/auth/SignInForm";
 import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
 
@@ -12,7 +12,7 @@ const SignIn = () => {
     return (
       <>
         <Meta title="Sign In" />
-        <AuthForm mode="signIn" />
+        <SignInForm />
       </>
     );
   }

frontend/src/pages/auth/signUp.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import AuthForm from "../../components/auth/AuthForm";
+import SignUpForm from "../../components/auth/SignUpForm";
 import Meta from "../../components/Meta";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
@@ -16,7 +16,7 @@ const SignUp = () => {
     return (
       <>
         <Meta title="Sign Up" />
-        <AuthForm mode="signUp" />
+        <SignUpForm />
       </>
     );
   }