Add admin invite only signup field

frontend/src/hooks/api/admin/types.ts

@@ -1,6 +1,7 @@
 export type TServerConfig = {
   initialized: boolean;
   allowSignUp: boolean;
+  inviteOnlySignUp: boolean;
   isMigrationModeOn?: boolean;
 };
 

frontend/src/pages/signupinvite.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import crypto from "crypto";
 
-import { useState } from "react";
+import { useEffect,useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -22,6 +22,7 @@ import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
 import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
+import { useServerConfig } from "@app/context";
 import { completeAccountSignupInvite, verifySignupInvite } from "@app/hooks/api/auth/queries";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 
@@ -56,6 +57,13 @@ export default function SignupInvite() {
   const token = parsedUrl.token as string;
   const organizationId = parsedUrl.organization_id as string;
   const email = (parsedUrl.to as string)?.replace(" ", "+").trim();
+  const { config } = useServerConfig();
+
+  useEffect(() => {
+    if (!config.allowSignUp) {
+      router.push("/login");
+    }
+  }, [config.allowSignUp]);
 
   // Verifies if the information that the users entered (name, workspace) is there, and if the password matched the criteria.
   const signupErrorCheck = async () => {

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -1,7 +1,16 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
-import { ContentLoader, Switch, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  ContentLoader,
+  Select,
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useServerConfig, useUser } from "@app/context";
 import { useUpdateServerConfig } from "@app/hooks/api";
 
@@ -9,13 +18,18 @@ enum TabSections {
   Settings = "settings"
 }
 
+type SignUpMode = "disabled" | "invite-only" | "anyone";
+
 export const AdminDashboardPage = () => {
   const router = useRouter();
   const data = useServerConfig();
+  const [signUpMode, setSignUpMode] = useState<SignUpMode>("invite-only");
+
   const { config } = data;
   const { user, isLoading: isUserLoading } = useUser();
   const { orgs } = useOrganization();
   const { mutate: updateServerConfig } = useUpdateServerConfig();
+  const { createNotification } = useNotificationContext();
 
   const isNotAllowed = !user?.superAdmin;
 
@@ -28,37 +42,68 @@ export const AdminDashboardPage = () => {
     }
   }, [isNotAllowed, isUserLoading]);
 
+  useEffect(() => {
+    if (!config.allowSignUp) {
+      setSignUpMode("disabled");
+      return;
+    }
+    if (config.inviteOnlySignUp) {
+      setSignUpMode("invite-only");
+      return;
+    }
+    setSignUpMode("anyone");
+  }, [config]);
+
+  function handleSignUpModeChange(newSignUpMode: SignUpMode) {
+    config.allowSignUp = newSignUpMode !== "disabled";
+    config.inviteOnlySignUp = newSignUpMode === "invite-only";
+
+    createNotification({
+      text: "Successfully changed sign up mode.",
+      type: "success"
+    });
+
+    updateServerConfig(config);
+    setSignUpMode(newSignUpMode);
+  }
+
   return (
-    <div className="container mx-auto max-w-7xl pb-12 text-white dark:[color-scheme:dark]">
-      <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+    <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
+      <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
         <div className="mb-8 flex flex-col items-start justify-between text-xl">
           <h1 className="text-3xl font-semibold">Admin Dashboard</h1>
           <p className="text-base text-bunker-300">Manage your Infisical instance.</p>
         </div>
-        {isUserLoading || isNotAllowed ? (
-          <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
-        ) : (
-          <div>
-            <Tabs defaultValue={TabSections.Settings}>
-              <TabList>
-                <div className="flex w-full flex-row border-b border-mineshaft-600">
-                  <Tab value={TabSections.Settings}>General</Tab>
-                </div>
-              </TabList>
-              <TabPanel value={TabSections.Settings}>
-                <div className="flex items-center space-x-4">
-                  <Switch
-                    id="disable-invite"
-                    isChecked={Boolean(config?.allowSignUp)}
-                    onCheckedChange={(isChecked) => updateServerConfig({ allowSignUp: isChecked })}
-                  />
-                  <div className="flex-grow">Enable signup or invite</div>
-                </div>
-              </TabPanel>
-            </Tabs>
-          </div>
-        )}
       </div>
+      {isUserLoading || isNotAllowed ? (
+        <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
+      ) : (
+        <div>
+          <Tabs defaultValue={TabSections.Settings}>
+            <TabList>
+              <div className="flex w-full flex-row border-b border-mineshaft-600">
+                <Tab value={TabSections.Settings}>General</Tab>
+              </div>
+            </TabList>
+            <TabPanel value={TabSections.Settings}>
+              <div className="flex items-center justify-between space-x-4">
+                <div className="label"> Allow user to Sign Up </div>
+                <Select
+                  className="w-36 bg-mineshaft-700"
+                  dropdownContainerClassName="bg-mineshaft-700"
+                  onValueChange={(state) => handleSignUpModeChange(state as SignUpMode)}
+                  value={signUpMode}
+                  isDisabled={isNotAllowed}
+                >
+                  <SelectItem value="disabled">Disabled</SelectItem>
+                  <SelectItem value="invite-only">Invite Only</SelectItem>
+                  <SelectItem value="anyone">Anyone</SelectItem>
+                </Select>
+              </div>
+            </TabPanel>
+          </Tabs>
+        </div>
+      )}
     </div>
   );
 };