Merge pull request #4 from upryzing/feat/registerinvitecode

Add an invite code field to the register page
upryzing · Dec 15, 2024 · edf386c · edf386c
2 parents 7c86234 + 48bc54e
commit edf386c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 29 deletions.
diff --git a/packages/client/components/auth/src/flows/FlowCreate.tsx b/packages/client/components/auth/src/flows/FlowCreate.tsx
@@ -26,11 +26,13 @@ export default function FlowCreate() {
     const email = data.get("email") as string;
     const password = data.get("password") as string;
     const captcha = data.get("captcha") as string;
+    const invite = data.get("invite") as string;
 
     await clientController.api.post("/auth/account/create", {
       email,
       password,
       captcha,
+      invite,
     });
 
     // FIXME: should tell client if email was sent
@@ -48,7 +50,7 @@ export default function FlowCreate() {
         {t("login.welcome2")}
       </FlowTitle>
       <Form onSubmit={create} captcha={CONFIGURATION.HCAPTCHA_SITEKEY}>
-        <Fields fields={["email", "password"]} />
+        <Fields fields={["email", "password", "invite"]} />
         <Row align justify="center">
           <a href="..">
             <Button variant="plain">

diff --git a/packages/client/components/auth/src/flows/Form.tsx b/packages/client/components/auth/src/flows/Form.tsx
@@ -1,16 +1,17 @@
 import HCaptcha, { HCaptchaFunctions } from "solid-hcaptcha";
-import { For, JSX, Show, createSignal } from "solid-js";
+import { For, JSX, Show, Switch, Match, createSignal } from "solid-js";
 
 import { cva } from "styled-system/css";
 
-import { mapAnyError } from "@revolt/client";
+import { clientController, mapAnyError } from "@revolt/client";
 import { useTranslation } from "@revolt/i18n";
 import { Checkbox, Column, FormGroup, Input, Typography } from "@revolt/ui";
+import { autoComplete } from "@revolt/ui/directives";
 
 /**
  * Available field types
  */
-type Field = "email" | "password" | "new-password" | "log-out" | "username";
+type Field = "email" | "password" | "new-password" | "log-out" | "username" | "invite";
 
 /**
  * Properties to apply to fields
@@ -47,6 +48,13 @@ const useFieldConfiguration = () => {
       name: () => t("login.username"),
       placeholder: () => t("login.enter.username"),
     },
+    invite: {
+      minLength: 2,
+      type: "text",
+      autocomplete: "none",
+      name: () => t("login.invite"),
+      placeholder: () => t("login.enter.invite"),
+    }
   };
 };
 
@@ -72,6 +80,8 @@ export function Fields(props: FieldProps) {
   const fieldConfiguration = useFieldConfiguration();
   const [failedValidation, setFailedValidation] = createSignal(false);
 
+  const inviteCodeNeeded: boolean | undefined = clientController.lifecycle.client.configuration?.features.invite_only;
+
   /**
    * If an input element notifies us it was invalid, enable live input validation.
    */
@@ -82,30 +92,37 @@ export function Fields(props: FieldProps) {
   return (
     <For each={props.fields}>
       {(field) => (
-        <FormGroup>
-          {field === "log-out" ? (
-            <label class={labelRow()}>
-              <Checkbox name="log-out" />
-              <Typography variant="label">
-                {fieldConfiguration["log-out"].name()}
-              </Typography>
-            </label>
-          ) : (
-            <>
-              <Typography variant="label">
-                {fieldConfiguration[field].name()}
-              </Typography>
-              <Input
-                required
-                {...fieldConfiguration[field]}
-                name={field}
-                placeholder={fieldConfiguration[field].placeholder()}
-                submissionTried={failedValidation()}
-                onInvalid={onInvalid}
-              />
-            </>
-          )}
-        </FormGroup>
+        <Show when={field != "invite" || inviteCodeNeeded}>
+          <FormGroup>
+            <Switch fallback={
+                <>
+                  <Typography variant="label">
+                    {fieldConfiguration[field].name()}
+                  </Typography>
+                  <Input
+                    required
+                    {...fieldConfiguration[field]}
+                    name={field}
+                    // Following ignore is due to log-out not having a placeholder but log-out never gets here from the fallback
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    placeholder={fieldConfiguration[field].placeholder()}
+                    submissionTried={failedValidation()}
+                    onInvalid={onInvalid}
+                  />
+              </>
+            }>
+              <Match when={field == "log-out"}>
+                  <label class={labelRow()}>
+                    <Checkbox name="log-out" />
+                    <Typography variant="label">
+                      {fieldConfiguration["log-out"].name()}
+                    </Typography>
+                  </label>
+              </Match>
+            </Switch>
+          </FormGroup>
+        </Show>
       )}
     </For>
   );

diff --git a/packages/client/components/client/Controller.ts b/packages/client/components/client/Controller.ts
@@ -127,7 +127,7 @@ class Lifecycle {
         },
         captcha: {} as never,
         email: true,
-        invite_only: false,
+        invite_only: CONFIGURATION.INVITE_ONLY,
         voso: {} as never,
       },
       vapid: String(),

diff --git a/packages/client/components/common/lib/env.ts b/packages/client/components/common/lib/env.ts
@@ -39,6 +39,12 @@ export default {
    * Maximum number of attachments a message can have
    */
   MAX_ATTACHMENTS: (import.meta.env.VITE_CFG_MAX_ATTACHMENTS as number) ?? 5,
+
+  /**
+   * Determines whether or not an invite code is required on signing up.
+  */
+  INVITE_ONLY: (import.meta.env.VITE_INVITE_ONLY as boolean) ?? false,
+
   /**
    * Session ID to set during development.
    */