Update move to react hook form, rename allowedSignUpDomain

backend/src/db/migrations/20240205200732_invite-only.ts

@@ -7,7 +7,7 @@ export async function up(knex: Knex): Promise<void> {
   if (isTablePresent) {
     await knex.schema.alterTable(TableName.SuperAdmin, (t) => {
       t.boolean("inviteOnlySignUp").defaultTo(false);
-      t.string("allowSpecificDomainSignUp");
+      t.string("allowedSignUpDomain");
     });
   }
 }
@@ -19,9 +19,9 @@ export async function down(knex: Knex): Promise<void> {
     });
   }
 
-  if (await knex.schema.hasColumn(TableName.SuperAdmin, "allowSpecificDomainSignUp")) {
+  if (await knex.schema.hasColumn(TableName.SuperAdmin, "allowedSignUpDomain")) {
     await knex.schema.alterTable(TableName.SuperAdmin, (t) => {
-      t.dropColumn("allowSpecificDomainSignUp");
+      t.dropColumn("allowedSignUpDomain");
     });
   }
 }

backend/src/db/schemas/super-admin.ts

@@ -12,7 +12,7 @@ export const SuperAdminSchema = z.object({
   initialized: z.boolean().default(false).nullable().optional(),
   allowSignUp: z.boolean().default(true).nullable().optional(),
   inviteOnlySignUp: z.boolean().default(false).nullable().optional(),
-  allowSpecificDomainSignUp: z.string().nullable().optional(),
+  allowedSignUpDomain: z.string().nullable().optional(),
   createdAt: z.date(),
   updatedAt: z.date()
 });

backend/src/server/routes/v1/admin-router.ts

@@ -33,7 +33,7 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
       body: z.object({
         allowSignUp: z.boolean().optional(),
         inviteOnlySignUp: z.boolean().optional(),
-        allowSpecificDomainSignUp: z.string().optional()
+        allowedSignUpDomain: z.string().optional()
       }),
       response: {
         200: z.object({

backend/src/server/routes/v3/signup-router.ts

@@ -28,9 +28,9 @@ export const registerSignupRouter = async (server: FastifyZodProvider) => {
       const { email } = req.body;
       const serverCfg = await getServerCfg();
 
-      if (serverCfg?.allowSpecificDomainSignUp) {
+      if (serverCfg?.allowedSignUpDomain) {
         const domain = email.split("@")[1];
-        const allowedDomains = serverCfg.allowSpecificDomainSignUp.split(",").map((e) => e.trim());
+        const allowedDomains = serverCfg.allowedSignUpDomain.split(",").map((e) => e.trim());
         if (!allowedDomains.includes(domain)) {
           throw new BadRequestError({
             message: `Email with a domain (@${domain}) is not supported`

backend/src/services/auth/auth-login-service.ts

@@ -273,9 +273,9 @@ export const authLoginServiceFactory = ({ userDAL, tokenService, smtpService }:
       if (!serverCfg?.allowSignUp)
         throw new BadRequestError({ message: "User signup disabled", name: "Oauth 2 login" });
 
-      if (serverCfg?.allowSpecificDomainSignUp) {
+      if (serverCfg?.allowedSignUpDomain) {
         const domain = email.split("@")[1];
-        const allowedDomains = serverCfg.allowSpecificDomainSignUp.split(",").map((e) => e.trim());
+        const allowedDomains = serverCfg.allowedSignUpDomain.split(",").map((e) => e.trim());
         if (!allowedDomains.includes(domain))
           throw new BadRequestError({
             message: `Email with a domain (@${domain}) is not supported`,

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

@@ -2,7 +2,7 @@ export type TServerConfig = {
   initialized: boolean;
   allowSignUp: boolean;
   inviteOnlySignUp: boolean;
-  allowSpecificDomainSignUp?: string;
+  allowedSignUpDomain?: string;
   isMigrationModeOn?: boolean;
 };
 

frontend/src/pages/signupinvite.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import crypto from "crypto";
 
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -226,7 +226,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         </Button>
       </div>
       {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-      {config.allowSignUp ? (
+      {config.allowSignUp && !config.inviteOnlySignUp ? (
         <div className="mt-6 flex flex-row text-sm text-bunker-400">
           <Link href="/signup">
             <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">

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

@@ -1,7 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { useRouter } from "next/router";
 import { faAt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
@@ -23,15 +26,37 @@ enum TabSections {
   Settings = "settings"
 }
 
-type SignUpMode = "disabled" | "invite-only" | "anyone";
+const formSchema = yup.object({
+  signUpMode: yup
+    .string()
+    .oneOf(["disabled", "invite-only", "anyone"])
+    .required(),
+  allowedSignUpDomain: yup.string().optional()
+});
+
+type TDashboardForm = yup.InferType<typeof formSchema>;
 
 export const AdminDashboardPage = () => {
   const router = useRouter();
   const data = useServerConfig();
-  const [signUpMode, setSignUpMode] = useState<SignUpMode>("invite-only");
-  const [allowSpecificDomain, setAllowSpecificDomain] = useState<string | undefined>();
-
   const { config } = data;
+
+  const signUpStatus = config.allowSignUp
+  ? config.inviteOnlySignUp && "invite-only"
+  : "disabled";
+
+  const signUpType = signUpStatus || "anyone";
+  
+  const { control, handleSubmit, watch } = useForm<TDashboardForm>({
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      signUpMode: signUpType,
+      allowedSignUpDomain: config.allowedSignUpDomain
+    }
+  });
+
+  const signupMode = watch("signUpMode");
+
   const { user, isLoading: isUserLoading } = useUser();
   const { orgs } = useOrganization();
   const { mutate: updateServerConfig } = useUpdateServerConfig();
@@ -49,29 +74,15 @@ export const AdminDashboardPage = () => {
     }
   }, [isNotAllowed, isUserLoading]);
 
-  useEffect(() => {
-    if (!config.allowSignUp) {
-      setSignUpMode("disabled");
-      return;
-    }
-    if (config.inviteOnlySignUp) {
-      setSignUpMode("invite-only");
-    } else {
-      setSignUpMode("anyone");
-    }
-
-    if (config.allowSpecificDomainSignUp) {
-      setAllowSpecificDomain(config.allowSpecificDomainSignUp);
-    }
-  }, [config]);
-
-  const handleSubmit = async () => {
+  const onFormSubmit = async (formData: TDashboardForm) => {
     try {
-      config.allowSignUp = signUpMode !== "disabled";
-      config.inviteOnlySignUp = signUpMode === "invite-only";
-      config.allowSpecificDomainSignUp = signUpMode === "anyone" ? allowSpecificDomain : "";
+      const { signUpMode, allowedSignUpDomain } = formData;
 
-      await updateServerConfig(config);
+      await updateServerConfig({
+        allowSignUp: signUpMode !== "disabled",
+        inviteOnlySignUp: signUpMode === "invite-only",
+        allowedSignUpDomain: signUpMode === "anyone" ? allowedSignUpDomain : ""
+      });
 
       createNotification({
         text: "Successfully changed sign up setting.",
@@ -86,6 +97,8 @@ export const AdminDashboardPage = () => {
     }
   };
 
+
+
   return (
     <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">
@@ -105,46 +118,70 @@ export const AdminDashboardPage = () => {
               </div>
             </TabList>
             <TabPanel value={TabSections.Settings}>
-              <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <form
+                className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+                onSubmit={handleSubmit(onFormSubmit)}
+              >
                 <div className="flex justify-between">
                   <div className="mb-4 text-xl font-semibold text-mineshaft-100">
                     Allow user to Sign Up
                   </div>
-                  <Select
-                    className="w-72 bg-mineshaft-700"
-                    dropdownContainerClassName="bg-mineshaft-700"
-                    onValueChange={(state) => setSignUpMode(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>
+                  <Controller
+                    control={control}
+                    name="signUpMode"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        className="max-w-72 w-72"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          className="w-72 bg-mineshaft-700"
+                          dropdownContainerClassName="bg-mineshaft-700"
+                          defaultValue={field.value}
+                          onValueChange={(e) => onChange(e)}
+                          {...field}
+                        >
+                          <SelectItem value="disabled">Disabled</SelectItem>
+                          <SelectItem value="invite-only">Invite Only</SelectItem>
+                          <SelectItem value="anyone">Anyone</SelectItem>
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
                 </div>
 
-                {signUpMode === "anyone" && (
+                {signupMode === "anyone" && (
                   <div className="mt-4 flex items-center justify-between">
                     <div className="mb-4 flex text-mineshaft-100">
                       Allow email with only specific domain(s)
                     </div>
-                    <FormControl label="Leave blank to allow any domain handle" className="w-72">
-                      <div>
-                        <Input
-                          placeholder="domain.com, domain2.com"
-                          leftIcon={<FontAwesomeIcon icon={faAt} />}
-                          value={allowSpecificDomain}
-                          onChange={(ev) => setAllowSpecificDomain(ev.target.value)}
-                        />
-                      </div>
-                    </FormControl>
+                    <Controller
+                      control={control}
+                      defaultValue=""
+                      name="allowedSignUpDomain"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Leave blank to allow any domain handle"
+                          className="w-72"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            placeholder="domain.com, domain2.com"
+                            leftIcon={<FontAwesomeIcon icon={faAt} />}
+                          />
+                        </FormControl>
+                      )}
+                    />
                   </div>
                 )}
 
-                <Button colorSchema="primary" variant="outline_bg" onClick={handleSubmit}>
+                <Button colorSchema="primary" variant="outline_bg" type="submit">
                   Save
                 </Button>
-              </div>
+              </form>
             </TabPanel>
           </Tabs>
         </div>