Add disable registration option

.env.example

@@ -1,3 +1,4 @@
 APPWRITE_FUNCTION_API_KEY=
 PUBLIC_APPWRITE_HOST=http://localhost/v1
 PUBLIC_MAX_FILE_SIZE="300000000" # Must be the same as in the _APP_STORAGE_LIMIT in the Appwrite env file
+PUBLIC_DISABLE_REGISTRATION=true

src/components/auth/AuthForm.tsx

@@ -11,9 +11,11 @@ import {
 import { useForm, yupResolver } from "@mantine/form";
 import * as yup from "yup";
 import aw from "../../utils/appwrite.util";
+import { useConfig } from "../../utils/config.util";
 import toast from "../../utils/toast.util";
 
 const AuthForm = ({ mode }: { mode: "signUp" | "signIn" }) => {
+  const config = useConfig();
   const validationSchema = yup.object().shape({
     email: yup.string().email().required(),
     password: yup.string().min(8).required(),
@@ -39,7 +41,6 @@ const AuthForm = ({ mode }: { mode: "signUp" | "signIn" }) => {
       .then(() => signIn(email, password))
       .catch((e) => toast.error(e.message));
   };
-
   return (
     <Container size={420} my={40}>
       <Title
@@ -51,15 +52,16 @@ const AuthForm = ({ mode }: { mode: "signUp" | "signIn" }) => {
       >
         {mode == "signUp" ? "Sign up" : "Welcome back"}
       </Title>
-      <Text color="dimmed" size="sm" align="center" mt={5}>
+      {!config.DISABLE_REGISTRATION && (
-        {mode == "signUp"
+        <Text color="dimmed" size="sm" align="center" mt={5}>
-          ? "You have an account already?"
+          {mode == "signUp"
-          : "You don't have an account yet?"}{" "}
+            ? "You have an account already?"
-        <Anchor href={mode == "signUp" ? "signIn" : "signUp"} size="sm">
+            : "You don't have an account yet?"}{" "}
-          {mode == "signUp" ? "Sign in" : "Sign up"}
+          <Anchor href={mode == "signUp" ? "signIn" : "signUp"} size="sm">
-        </Anchor>
+            {mode == "signUp" ? "Sign in" : "Sign up"}
-      </Text>
+          </Anchor>
-
+        </Text>
+      )}
       <Paper withBorder shadow="md" p={30} mt={30} radius="md">
         <form
           onSubmit={form.onSubmit((values) =>

src/components/navBar/NavBar.tsx

@@ -15,6 +15,7 @@ import React, { useContext, useEffect, useState } from "react";
 import headerStyle from "../../styles/header.style";
 import aw from "../../utils/appwrite.util";
 import { IsSignedInContext } from "../../utils/auth.util";
+import { useConfig } from "../../utils/config.util";
 import ToggleThemeButton from "./ToggleThemeButton";
 
 type Link = {
@@ -23,62 +24,67 @@ type Link = {
   action?: () => Promise<void>;
 };
 
-const authenticatedLinks: Link[] = [
-  {
-    link: "/upload",
-    label: "Upload",
-  },
-  {
-    label: "Sign out",
-    action: async () => {
-      await aw.account.deleteSession("current");
-      window.location.reload();
-    },
-  },
-];
-
-const unauthenticatedLinks: Link[] = [
-  {
-    link: "/",
-    label: "Home",
-  },
-  {
-    link: "/auth/signUp",
-    label: "Sign up",
-  },
-  {
-    link: "/auth/signIn",
-    label: "Sign in",
-  },
-];
-
 const Header = () => {
   const [opened, toggleOpened] = useBooleanToggle(false);
   const [active, setActive] = useState<string>();
   const isSignedIn = useContext(IsSignedInContext);
+  const config = useConfig();
   const { classes, cx } = headerStyle();
 
+  const authenticatedLinks: Link[] = [
+    {
+      link: "/upload",
+      label: "Upload",
+    },
+    {
+      label: "Sign out",
+      action: async () => {
+        await aw.account.deleteSession("current");
+        window.location.reload();
+      },
+    },
+  ];
+
+  const unauthenticatedLinks: Link[] | undefined = [
+    {
+      link: "/",
+      label: "Home",
+    },
+    {
+      link: "/auth/signIn",
+      label: "Sign in",
+    },
+  ];
+
+  if (!config.DISABLE_REGISTRATION)
+    unauthenticatedLinks.push({
+      link: "/auth/signUp",
+      label: "Sign up",
+    });
+
   const links = isSignedIn ? authenticatedLinks : unauthenticatedLinks;
 
   const items = links.map((link) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    if (link) {
-    useEffect(() => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
-      if (window.location.pathname == link.link) {
+      useEffect(() => {
-        setActive(link.link);
+        if (window.location.pathname == link.link) {
-      }
+          setActive(link.link);
-    });
+        }
-    return (
+      });
-      <NextLink
+      return (
-        key={link.label}
+        <NextLink
-        href={link.link ?? ""}
+          key={link.label}
-        onClick={link.action}
+          href={link.link ?? ""}
-        className={cx(classes.link, {
+          onClick={link.action}
-          [classes.linkActive]: link.link && active === link.link,
+          className={cx(classes.link, {
-        })}
+            [classes.linkActive]: link.link && active === link.link,
-      >
+          })}
-        {link.label}
+        >
-      </NextLink>
+          {link.label}
-    );
+        </NextLink>
+      );
+    }
   });
 
   return (

src/components/upload/Dropzone.tsx

@@ -56,7 +56,6 @@ const Dropzone = ({
   const config = useConfig()
   const { classes } = useStyles();
   const openRef = useRef<() => void>();
-
   return (
     <div className={classes.wrapper}>
       <MantineDropzone

src/pages/_app.tsx

@@ -27,13 +27,13 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
   );
   const [isLoading, setIsLoading] = useState(true);
   const [isSignedIn, setIsSignedIn] = useState(false);
-
+  const [environmentVariables, setEnvironmentVariables] = useState<any>({});
-  let environmentVariables: any = {};
 
   const getInitalData = async () => {
     setIsLoading(true);
-    environmentVariables = await configUtil.getGonfig();
+    const environmentVariables = await configUtil.getGonfig();
     aw.setEndpoint(environmentVariables.APPWRITE_HOST);
+    setEnvironmentVariables(environmentVariables);
     setIsSignedIn(await authUtil.isSignedIn());
     setIsLoading(false);
   };

src/pages/api/config.ts

@@ -2,9 +2,15 @@ import type { NextApiRequest, NextApiResponse } from "next";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   let publicEnvironmentVariables: any = {};
-  Object.entries(process.env).forEach(([key, value]) => {
+  Object.entries(process.env).forEach(([key, value]: any) => {
-    if (key.startsWith("PUBLIC")) {
+    value as string | number | boolean;
+    if (key.startsWith("PUBLIC") && value) {
       key = key.replace("PUBLIC_", "");
+      if (value == "false" || value == "true") {
+        value = JSON.parse(value);
+      } else if (!isNaN(Number(value))) {
+        value = parseInt(value as string);
+      }
       publicEnvironmentVariables[key] = value;
     }
   });

src/pages/auth/signUp.tsx

@@ -3,12 +3,16 @@ import React, { useContext } from "react";
 import AuthForm from "../../components/auth/AuthForm";
 import Meta from "../../components/Meta";
 import { IsSignedInContext } from "../../utils/auth.util";
+import { useConfig } from "../../utils/config.util";
 
 const SignUp = () => {
   const isSignedIn = useContext(IsSignedInContext);
+  const config = useConfig();
   const router = useRouter();
   if (isSignedIn) {
     router.replace("/");
+  } else if (config.DISABLE_REGISTRATION) {
+    router.replace("/auth/signIn");
   } else {
     return (
       <>

src/pages/upload.tsx

@@ -76,7 +76,6 @@ const Upload = () => {
       }
     }
   };
-
   if (!isSignedIn) {
     router.replace("/");
   } else {