Create Form component to de-duplicate styling for forms

Author: robertknight

h/static/scripts/forms-common/components/Form.tsx

@@ -0,0 +1,33 @@
+import type { ComponentChildren } from 'preact';
+import type { JSX } from 'preact';
+
+export type FormProps = JSX.FormHTMLAttributes & {
+  /**
+   * CSRF token to render in a hidden field.
+   *
+   * If the form is not going to be submitted to the backend directly, for
+   * example because the frontend is going to make API requests instead, this
+   * can be set to `null`. This prop is required so that callers have to make
+   * an explicit choice.
+   */
+  csrfToken: string | null;
+
+  children: ComponentChildren;
+};
+
+/**
+ * Wrapper around an HTML form which adds standard styling, CSRF token etc.
+ */
+export default function Form({ children, csrfToken, ...formAttrs }: FormProps) {
+  return (
+    <form
+      method="POST"
+      data-testid="form"
+      className="max-w-[530px] mx-auto flex flex-col gap-y-4"
+      {...formAttrs}
+    >
+      {csrfToken && <input type="hidden" name="csrf_token" value={csrfToken} />}
+      {children}
+    </form>
+  );
+}

h/static/scripts/group-forms/components/CreateEditGroupForm.tsx

@@ -9,6 +9,7 @@ import { useContext, useEffect, useId, useState } from 'preact/hooks';
 
 import Checkbox from '../../forms-common/components/Checkbox';
 import ErrorNotice from '../../forms-common/components/ErrorNotice';
+import Form from '../../forms-common/components/Form';
 import FormContainer from '../../forms-common/components/FormContainer';
 import Label from '../../forms-common/components/Label';
 import Star from '../../forms-common/components/Star';
@@ -242,11 +243,7 @@ export default function CreateEditGroupForm({
   return (
     <FormContainer>
       <GroupFormHeader group={group} title={heading} />
-      <form
-        onSubmit={onSubmit}
-        data-testid="form"
-        className="max-w-[530px] mx-auto flex flex-col gap-y-4"
-      >
+      <Form onSubmit={onSubmit} csrfToken={null}>
         <TextField
           type="input"
           value={name}
@@ -335,7 +332,7 @@ export default function CreateEditGroupForm({
             {group ? 'Save changes' : 'Create group'}
           </Button>
         </div>
-      </form>
+      </Form>
 
       {group && pendingGroupType && (
         <GroupTypeChangeWarning

h/static/scripts/login-forms/components/LoginForm.tsx

@@ -1,6 +1,7 @@
 import { Button, Link } from '@hypothesis/frontend-shared';
 import { useContext } from 'preact/hooks';
 
+import Form from '../../forms-common/components/Form';
 import FormContainer from '../../forms-common/components/FormContainer';
 import TextField from '../../forms-common/components/TextField';
 import { useFormValue } from '../../forms-common/form-value';
@@ -20,12 +21,7 @@ export default function LoginForm() {
 
   return (
     <FormContainer>
-      <form
-        method="POST"
-        data-testid="form"
-        className="max-w-[530px] mx-auto flex flex-col gap-y-4"
-      >
-        <input type="hidden" name="csrf_token" value={config.csrfToken} />
+      <Form csrfToken={config.csrfToken}>
         <TextField
           type="input"
           name="username"
@@ -74,7 +70,7 @@ export default function LoginForm() {
             Log in
           </Button>
         </div>
-      </form>
+      </Form>
     </FormContainer>
   );
 }

h/static/scripts/login-forms/components/SignupForm.tsx

@@ -2,6 +2,7 @@ import { Button } from '@hypothesis/frontend-shared';
 import { useContext } from 'preact/hooks';
 
 import Checkbox from '../../forms-common/components/Checkbox';
+import Form from '../../forms-common/components/Form';
 import FormContainer from '../../forms-common/components/FormContainer';
 import TextField from '../../forms-common/components/TextField';
 import { useFormValue } from '../../forms-common/form-value';
@@ -39,12 +40,7 @@ export default function SignupForm() {
 
   return (
     <FormContainer>
-      <form
-        method="POST"
-        data-testid="form"
-        className="max-w-[530px] mx-auto flex flex-col gap-y-4"
-      >
-        <input type="hidden" name="csrf_token" value={config.csrfToken} />
+      <Form csrfToken={config.csrfToken}>
         <TextField
           type="input"
           name="username"
@@ -130,7 +126,7 @@ export default function SignupForm() {
             Sign up
           </Button>
         </div>
-      </form>
+      </Form>
     </FormContainer>
   );
 }