chore: extract FormModal from Modal (#3922)

framework/core/js/src/admin/components/CreateUserModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../admin/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import extractText from '../../common/utils/extractText';
 import ItemList from '../../common/utils/ItemList';
@@ -9,7 +9,7 @@ import Switch from '../../common/components/Switch';
 import { generateRandomString } from '../../common/utils/string';
 import Form from '../../common/components/Form';
 
-export interface ICreateUserModalAttrs extends IInternalModalAttrs {
+export interface ICreateUserModalAttrs extends IFormModalAttrs {
   username?: string;
   email?: string;
   password?: string;
@@ -24,7 +24,7 @@ export type SignupBody = {
   password: string;
 };
 
-export default class CreateUserModal<CustomAttrs extends ICreateUserModalAttrs = ICreateUserModalAttrs> extends Modal<CustomAttrs> {
+export default class CreateUserModal<CustomAttrs extends ICreateUserModalAttrs = ICreateUserModalAttrs> extends FormModal<CustomAttrs> {
   /**
    * The value of the username input.
    */

framework/core/js/src/admin/components/EditGroupModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../admin/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import Badge from '../../common/components/Badge';
 import Group from '../../common/models/Group';
@@ -11,7 +11,7 @@ import extractText from '../../common/utils/extractText';
 import ColorPreviewInput from '../../common/components/ColorPreviewInput';
 import Form from '../../common/components/Form';
 
-export interface IEditGroupModalAttrs extends IInternalModalAttrs {
+export interface IEditGroupModalAttrs extends IFormModalAttrs {
   group?: Group;
 }
 
@@ -19,7 +19,7 @@ export interface IEditGroupModalAttrs extends IInternalModalAttrs {
  * The `EditGroupModal` component shows a modal dialog which allows the user
  * to create or edit a group.
  */
-export default class EditGroupModal<CustomAttrs extends IEditGroupModalAttrs = IEditGroupModalAttrs> extends Modal<CustomAttrs> {
+export default class EditGroupModal<CustomAttrs extends IEditGroupModalAttrs = IEditGroupModalAttrs> extends FormModal<CustomAttrs> {
   group!: Group;
   nameSingular!: Stream<string>;
   namePlural!: Stream<string>;

framework/core/js/src/admin/components/LoadingModal.tsx

@@ -19,8 +19,4 @@ export default class LoadingModal<ModalAttrs extends ILoadingModalAttrs = ILoadi
   content() {
     return null;
   }
-
-  onsubmit(e: Event): void {
-    throw new Error('LoadingModal should not throw errors.');
-  }
 }

framework/core/js/src/admin/components/SettingsModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../admin/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
 import saveSettings from '../utils/saveSettings';
@@ -7,9 +7,9 @@ import Mithril from 'mithril';
 import { MutableSettings, SettingValue } from './AdminPage';
 import Form from '../../common/components/Form';
 
-export interface ISettingsModalAttrs extends IInternalModalAttrs {}
+export interface ISettingsModalAttrs extends IFormModalAttrs {}
 
-export default abstract class SettingsModal<CustomAttrs extends ISettingsModalAttrs = ISettingsModalAttrs> extends Modal<CustomAttrs> {
+export default abstract class SettingsModal<CustomAttrs extends ISettingsModalAttrs = ISettingsModalAttrs> extends FormModal<CustomAttrs> {
   settings: MutableSettings = {};
   loading: boolean = false;
 

framework/core/js/src/common/common.ts

@@ -65,6 +65,7 @@ import './components/SelectDropdown';
 import './components/ModalManager';
 import './components/Button';
 import './components/Modal';
+import './components/FormModal';
 import './components/GroupBadge';
 import './components/TextEditor';
 import './components/TextEditorButton';

framework/core/js/src/common/components/EditUserModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../common/app';
-import Modal, { IInternalModalAttrs } from './Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from './Button';
 import GroupBadge from './GroupBadge';
 import Group from '../models/Group';
@@ -11,11 +11,11 @@ import type User from '../models/User';
 import type { SaveAttributes, SaveRelationships } from '../Model';
 import Form from './Form';
 
-export interface IEditUserModalAttrs extends IInternalModalAttrs {
+export interface IEditUserModalAttrs extends IFormModalAttrs {
   user: User;
 }
 
-export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEditUserModalAttrs> extends Modal<CustomAttrs> {
+export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEditUserModalAttrs> extends FormModal<CustomAttrs> {
   protected username!: Stream<string>;
   protected email!: Stream<string>;
   protected isEmailConfirmed!: Stream<boolean>;

framework/core/js/src/common/components/FormModal.tsx

@@ -0,0 +1,51 @@
+import Modal from './Modal';
+import type { IInternalModalAttrs } from './Modal';
+import RequestError from '../utils/RequestError';
+import Mithril from 'mithril';
+
+export interface IFormModalAttrs extends IInternalModalAttrs {}
+
+/**
+ * The `FormModal` component displays a modal dialog, wrapped in a form.
+ * Subclasses should implement the `className`, `title`, and `content` methods.
+ */
+export default abstract class FormModal<ModalAttrs extends IFormModalAttrs = IFormModalAttrs, CustomState = undefined> extends Modal<
+  ModalAttrs,
+  CustomState
+> {
+  wrapper(children: Mithril.Children): Mithril.Children {
+    return <form onsubmit={this.onsubmit.bind(this)}>{children}</form>;
+  }
+
+  /**
+   * Handle the modal form's submit event.
+   */
+  onsubmit(e: SubmitEvent): void {
+    // ...
+  }
+
+  /**
+   * Callback executed when the modal is shown and ready to be interacted with.
+   *
+   * @remark Focuses the first input in the modal.
+   */
+  onready(): void {
+    this.$().find('input, select, textarea').first().trigger('focus').trigger('select');
+  }
+
+  /**
+   * Shows an alert describing an error returned from the API, and gives focus to
+   * the first relevant field involved in the error.
+   */
+  onerror(error: RequestError): void {
+    this.alertAttrs = error.alert;
+
+    m.redraw();
+
+    if (error.status === 422 && error.response?.errors) {
+      this.$('form [name=' + (error.response.errors as any[])[0].source.pointer.replace('/data/attributes/', '') + ']').trigger('select');
+    } else {
+      this.onready();
+    }
+  }
+}

framework/core/js/src/common/components/Modal.tsx

@@ -5,7 +5,6 @@ import Button from './Button';
 
 import type Mithril from 'mithril';
 import type ModalManagerState from '../states/ModalManagerState';
-import type RequestError from '../utils/RequestError';
 import type ModalManager from './ModalManager';
 import fireDebugWarning from '../helpers/fireDebugWarning';
 import classList from '../utils/classList';
@@ -101,25 +100,34 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
               />
             </div>
           )}
-
-          <form onsubmit={this.onsubmit.bind(this)}>
-            <div className="Modal-header">
-              <h3 className="App-titleControl App-titleControl--text">{this.title()}</h3>
-            </div>
-
-            {!!this.alertAttrs && (
-              <div className="Modal-alert">
-                <Alert {...this.alertAttrs} />
-              </div>
-            )}
-
-            {this.content()}
-          </form>
+          {this.wrapper(this.inner())}
         </div>
       </div>
     );
   }
 
+  protected wrapper(children: Mithril.Children): Mithril.Children {
+    return <>{children}</>;
+  }
+
+  protected inner(): Mithril.Children {
+    return (
+      <>
+        <div className="Modal-header">
+          <h3 className="App-titleControl App-titleControl--text">{this.title()}</h3>
+        </div>
+
+        {!!this.alertAttrs && (
+          <div className="Modal-alert">
+            <Alert {...this.alertAttrs} />
+          </div>
+        )}
+
+        {this.content()}
+      </>
+    );
+  }
+
   /**
    * Get the class name to apply to the modal.
    */
@@ -135,20 +143,11 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
    */
   abstract content(): Mithril.Children;
 
-  /**
-   * Handle the modal form's submit event.
-   */
-  onsubmit(e: SubmitEvent): void {
-    // ...
-  }
-
   /**
    * Callback executed when the modal is shown and ready to be interacted with.
-   *
-   * @remark Focuses the first input in the modal.
    */
   onready(): void {
-    this.$().find('input, select, textarea').first().trigger('focus').trigger('select');
+    // ...
   }
 
   /**
@@ -166,22 +165,6 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
     m.redraw();
   }
 
-  /**
-   * Shows an alert describing an error returned from the API, and gives focus to
-   * the first relevant field involved in the error.
-   */
-  onerror(error: RequestError): void {
-    this.alertAttrs = error.alert;
-
-    m.redraw();
-
-    if (error.status === 422 && error.response?.errors) {
-      this.$('form [name=' + (error.response.errors as any[])[0].source.pointer.replace('/data/attributes/', '') + ']').trigger('select');
-    } else {
-      this.onready();
-    }
-  }
-
   private get dismissibleOptions(): IDismissibleOptions {
     return (this.constructor as typeof Modal).dismissibleOptions;
   }

framework/core/js/src/forum/components/ChangeEmailModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../forum/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
 import type Mithril from 'mithril';
@@ -11,7 +11,7 @@ import Form from '../../common/components/Form';
  * The `ChangeEmailModal` component shows a modal dialog which allows the user
  * to change their email address.
  */
-export default class ChangeEmailModal<CustomAttrs extends IInternalModalAttrs = IInternalModalAttrs> extends Modal<CustomAttrs> {
+export default class ChangeEmailModal<CustomAttrs extends IFormModalAttrs = IFormModalAttrs> extends FormModal<CustomAttrs> {
   /**
    * The value of the email input.
    */

framework/core/js/src/forum/components/ChangePasswordModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../forum/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import Mithril from 'mithril';
 import ItemList from '../../common/utils/ItemList';
@@ -9,7 +9,7 @@ import Form from '../../common/components/Form';
  * The `ChangePasswordModal` component shows a modal dialog which allows the
  * user to send themself a password reset email.
  */
-export default class ChangePasswordModal<CustomAttrs extends IInternalModalAttrs = IInternalModalAttrs> extends Modal<CustomAttrs> {
+export default class ChangePasswordModal<CustomAttrs extends IFormModalAttrs = IFormModalAttrs> extends FormModal<CustomAttrs> {
   className() {
     return 'ChangePasswordModal Modal--small';
   }

framework/core/js/src/forum/components/ForgotPasswordModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../forum/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import extractText from '../../common/utils/extractText';
 import Stream from '../../common/utils/Stream';
@@ -8,7 +8,7 @@ import RequestError from '../../common/utils/RequestError';
 import ItemList from '../../common/utils/ItemList';
 import Form from '../../common/components/Form';
 
-export interface IForgotPasswordModalAttrs extends IInternalModalAttrs {
+export interface IForgotPasswordModalAttrs extends IFormModalAttrs {
   email?: string;
 }
 
@@ -16,7 +16,7 @@ export interface IForgotPasswordModalAttrs extends IInternalModalAttrs {
  * The `ForgotPasswordModal` component displays a modal which allows the user to
  * enter their email address and request a link to reset their password.
  */
-export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModalAttrs = IForgotPasswordModalAttrs> extends Modal<CustomAttrs> {
+export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModalAttrs = IForgotPasswordModalAttrs> extends FormModal<CustomAttrs> {
   /**
    * The value of the email input.
    */

framework/core/js/src/forum/components/LogInModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../forum/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import LogInButtons from './LogInButtons';
 import extractText from '../../common/utils/extractText';
@@ -9,13 +9,13 @@ import type Mithril from 'mithril';
 import RequestError from '../../common/utils/RequestError';
 import type { LoginParams } from '../../common/Session';
 
-export interface ILoginModalAttrs extends IInternalModalAttrs {
+export interface ILoginModalAttrs extends IFormModalAttrs {
   identification?: string;
   password?: string;
   remember?: boolean;
 }
 
-export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginModalAttrs> extends Modal<CustomAttrs> {
+export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginModalAttrs> extends FormModal<CustomAttrs> {
   /**
    * The value of the identification input.
    */

framework/core/js/src/forum/components/NewAccessTokenModal.tsx

@@ -1,5 +1,5 @@
 import app from '../app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
 import type AccessToken from '../../common/models/AccessToken';
@@ -7,11 +7,11 @@ import type { SaveAttributes } from '../../common/Model';
 import type Mithril from 'mithril';
 import Form from '../../common/components/Form';
 
-export interface INewAccessTokenModalAttrs extends IInternalModalAttrs {
+export interface INewAccessTokenModalAttrs extends IFormModalAttrs {
   onsuccess: (token: AccessToken) => void;
 }
 
-export default class NewAccessTokenModal<CustomAttrs extends INewAccessTokenModalAttrs = INewAccessTokenModalAttrs> extends Modal<CustomAttrs> {
+export default class NewAccessTokenModal<CustomAttrs extends INewAccessTokenModalAttrs = INewAccessTokenModalAttrs> extends FormModal<CustomAttrs> {
   protected titleInput = Stream('');
 
   className(): string {

framework/core/js/src/forum/components/RenameDiscussionModal.tsx

@@ -1,12 +1,12 @@
 import app from '../../forum/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import Stream from '../../common/utils/Stream';
 import Mithril from 'mithril';
 import Discussion from '../../common/models/Discussion';
 import Form from '../../common/components/Form';
 
-export interface IRenameDiscussionModalAttrs extends IInternalModalAttrs {
+export interface IRenameDiscussionModalAttrs extends IFormModalAttrs {
   discussion: Discussion;
   currentTitle: string;
 }
@@ -14,7 +14,9 @@ export interface IRenameDiscussionModalAttrs extends IInternalModalAttrs {
 /**
  * The 'RenameDiscussionModal' displays a modal dialog with an input to rename a discussion
  */
-export default class RenameDiscussionModal<CustomAttrs extends IRenameDiscussionModalAttrs = IRenameDiscussionModalAttrs> extends Modal<CustomAttrs> {
+export default class RenameDiscussionModal<
+  CustomAttrs extends IRenameDiscussionModalAttrs = IRenameDiscussionModalAttrs
+> extends FormModal<CustomAttrs> {
   discussion!: Discussion;
   currentTitle!: string;
   newTitle!: Stream<string>;

framework/core/js/src/forum/components/SignUpModal.tsx

@@ -1,5 +1,5 @@
 import app from '../../forum/app';
-import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import FormModal, { IFormModalAttrs } from '../../common/components/FormModal';
 import Button from '../../common/components/Button';
 import LogInButtons from './LogInButtons';
 import extractText from '../../common/utils/extractText';
@@ -7,7 +7,7 @@ import ItemList from '../../common/utils/ItemList';
 import Stream from '../../common/utils/Stream';
 import type Mithril from 'mithril';
 
-export interface ISignupModalAttrs extends IInternalModalAttrs {
+export interface ISignupModalAttrs extends IFormModalAttrs {
   username?: string;
   email?: string;
   password?: string;
@@ -20,7 +20,7 @@ export type SignupBody = {
   email: string;
 } & ({ token: string } | { password: string });
 
-export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignupModalAttrs> extends Modal<CustomAttrs> {
+export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignupModalAttrs> extends FormModal<CustomAttrs> {
   /**
    * The value of the username input.
    */