Modal typescript cleanup and conversions

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

@@ -1,7 +1,9 @@
 import app from '../../admin/app';
 import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 
-export default class LoadingModal<ModalAttrs extends IInternalModalAttrs = IInternalModalAttrs> extends Modal<ModalAttrs> {
+export interface ILoadingModalAttrs extends IInternalModalAttrs {}
+
+export default class LoadingModal<ModalAttrs extends ILoadingModalAttrs = ILoadingModalAttrs> extends Modal<ModalAttrs> {
   /**
    * @inheritdoc
    */

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

@@ -1,11 +1,21 @@
 import app from '../../admin/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import Placeholder from '../../common/components/Placeholder';
 import ExtensionReadme from '../models/ExtensionReadme';
+import type Mithril from 'mithril';
+import { Extension } from '../AdminApplication';
 
-export default class ReadmeModal extends Modal {
+export interface IReadmeModalAttrs extends IInternalModalAttrs {
-  oninit(vnode) {
+  extension: Extension;
+}
+
+export default class ReadmeModal<CustomAttrs extends IReadmeModalAttrs = IReadmeModalAttrs> extends Modal<CustomAttrs> {
+  protected name!: string;
+  protected extName!: string;
+  protected readme!: ExtensionReadme;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
     app.store.models['extension-readmes'] = ExtensionReadme;

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

@@ -32,11 +32,11 @@ export interface SavedModelData {
 
 export type ModelData = UnsavedModelData | SavedModelData;
 
-interface SaveRelationships {
+export interface SaveRelationships {
   [relationship: string]: Model | Model[];
 }
 
-interface SaveAttributes {
+export interface SaveAttributes {
   [key: string]: unknown;
   relationships?: SaveRelationships;
 }

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

@@ -7,11 +7,8 @@ export type LoginParams = {
    * The username/email
    */
   identification: string;
-
-  /**
-   * Password
-   */
   password: string;
+  remember: boolean;
 };
 
 /**

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

@@ -1,17 +1,28 @@
 import app from '../../common/app';
-import Modal from './Modal';
+import Modal, { IInternalModalAttrs } from './Modal';
 import Button from './Button';
 import GroupBadge from './GroupBadge';
 import Group from '../models/Group';
 import extractText from '../utils/extractText';
 import ItemList from '../utils/ItemList';
 import Stream from '../utils/Stream';
+import Mithril from 'mithril';
+import User from '../models/User';
+import { SaveAttributes, SaveRelationships } from '../Model';
 
-/**
+export interface IEditUserModalAttrs extends IInternalModalAttrs {
- * The `EditUserModal` component displays a modal dialog with a login form.
+  user: User;
- */
+}
-export default class EditUserModal extends Modal {
+
-  oninit(vnode) {
+export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEditUserModalAttrs> extends Modal<CustomAttrs> {
+  protected username!: Stream<string>;
+  protected email!: Stream<string>;
+  protected isEmailConfirmed!: Stream<boolean>;
+  protected setPassword!: Stream<boolean>;
+  protected password!: Stream<string>;
+  protected groups: Record<string, Stream<boolean>> = {};
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
     const user = this.attrs.user;
@@ -19,14 +30,15 @@ export default class EditUserModal extends Modal {
     this.username = Stream(user.username() || '');
     this.email = Stream(user.email() || '');
     this.isEmailConfirmed = Stream(user.isEmailConfirmed() || false);
-    this.setPassword = Stream(false);
+    this.setPassword = Stream(false as boolean);
     this.password = Stream(user.password() || '');
-    this.groups = {};
+
+    const userGroups = user.groups() || [];
 
     app.store
-      .all('groups')
+      .all<Group>('groups')
-      .filter((group) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
+      .filter((group) => ![Group.GUEST_ID, Group.MEMBER_ID].includes(group.id()!))
-      .forEach((group) => (this.groups[group.id()] = Stream(user.groups().indexOf(group) !== -1)));
+      .forEach((group) => (this.groups[group.id()!] = Stream(userGroups.includes(group))));
   }
 
   className() {
@@ -49,7 +61,7 @@ export default class EditUserModal extends Modal {
   fields() {
     const items = new ItemList();
 
-    if (app.session.user.canEditCredentials()) {
+    if (app.session.user?.canEditCredentials()) {
       items.add(
         'username',
         <div className="Form-group">
@@ -103,10 +115,11 @@ export default class EditUserModal extends Modal {
               <label className="checkbox">
                 <input
                   type="checkbox"
-                  onchange={(e) => {
+                  onchange={(e: KeyboardEvent) => {
-                    this.setPassword(e.target.checked);
+                    const target = e.target as HTMLInputElement;
+                    this.setPassword(target.checked);
                     m.redraw.sync();
-                    if (e.target.checked) this.$('[name=password]').select();
+                    if (target.checked) this.$('[name=password]').select();
                     e.redraw = false;
                   }}
                   disabled={this.nonAdminEditingAdmin()}
@@ -132,24 +145,31 @@ export default class EditUserModal extends Modal {
       }
     }
 
-    if (app.session.user.canEditGroups()) {
+    if (app.session.user?.canEditGroups()) {
       items.add(
         'groups',
         <div className="Form-group EditUserModal-groups">
           <label>{app.translator.trans('core.lib.edit_user.groups_heading')}</label>
           <div>
             {Object.keys(this.groups)
-              .map((id) => app.store.getById('groups', id))
+              .map((id) => app.store.getById<Group>('groups', id))
-              .map((group) => (
+              .filter(Boolean)
-                <label className="checkbox">
+              .map(
-                  <input
+                (group) =>
-                    type="checkbox"
+                  // Necessary because filter(Boolean) doesn't narrow out falsy values.
-                    bidi={this.groups[group.id()]}
+                  group && (
-                    disabled={group.id() === Group.ADMINISTRATOR_ID && (this.attrs.user === app.session.user || !this.userIsAdmin(app.session.user))}
+                    <label className="checkbox">
-                  />
+                      <input
-                  {GroupBadge.component({ group, label: '' })} {group.nameSingular()}
+                        type="checkbox"
-                </label>
+                        bidi={this.groups[group.id()!]}
-              ))}
+                        disabled={
+                          group.id() === Group.ADMINISTRATOR_ID && (this.attrs.user === app.session.user || !this.userIsAdmin(app.session.user))
+                        }
+                      />
+                      {GroupBadge.component({ group, label: '' })} {group.nameSingular()}
+                    </label>
+                  )
+              )}
           </div>
         </div>,
         10
@@ -194,9 +214,8 @@ export default class EditUserModal extends Modal {
   }
 
   data() {
-    const data = {
+    const data: SaveAttributes = {};
-      relationships: {},
+    const relationships: SaveRelationships = {};
-    };
 
     if (this.attrs.user.canEditCredentials() && !this.nonAdminEditingAdmin()) {
       data.username = this.username();
@@ -211,15 +230,18 @@ export default class EditUserModal extends Modal {
     }
 
     if (this.attrs.user.canEditGroups()) {
-      data.relationships.groups = Object.keys(this.groups)
+      relationships.groups = Object.keys(this.groups)
         .filter((id) => this.groups[id]())
-        .map((id) => app.store.getById('groups', id));
+        .map((id) => app.store.getById<Group>('groups', id))
+        .filter((g): g is Group => g instanceof Group);
     }
 
+    data.relationships = relationships;
+
     return data;
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -239,9 +261,8 @@ export default class EditUserModal extends Modal {
 
   /**
    * @internal
-   * @protected
    */
-  userIsAdmin(user) {
+  protected userIsAdmin(user: User | null) {
-    return user.groups().some((g) => g.id() === Group.ADMINISTRATOR_ID);
+    return user && (user.groups() || []).some((g) => g?.id() === Group.ADMINISTRATOR_ID);
   }
 }

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

@@ -32,7 +32,7 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
    */
   alertAttrs: AlertAttrs | null = null;
 
-  oninit(vnode: Mithril.VnodeDOM<ModalAttrs, this>) {
+  oninit(vnode: Mithril.Vnode<ModalAttrs, this>) {
     super.oninit(vnode);
 
     // TODO: [Flarum 2.0] Remove the code below.

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

@@ -1,6 +1,12 @@
-import Modal from './Modal';
+import RequestError from '../utils/RequestError';
+import Modal, { IInternalModalAttrs } from './Modal';
 
-export default class RequestErrorModal extends Modal {
+export interface IRequestErrorModalAttrs extends IInternalModalAttrs {
+  error: RequestError;
+  formattedError: string[];
+};
+
+export default class RequestErrorModal<CustomAttrs extends IRequestErrorModalAttrs = IRequestErrorModalAttrs> extends Modal<CustomAttrs> {
   className() {
     return 'RequestErrorModal Modal--large';
   }
@@ -18,14 +24,10 @@ export default class RequestErrorModal extends Modal {
     // else try to parse it as JSON and stringify it with indentation
     if (formattedError) {
       responseText = formattedError.join('\n\n');
+    } else if (error.response) {
+      responseText = JSON.stringify(error.response, null, 2);
     } else {
-      try {
+      responseText = error.responseText;
-        const json = error.response || JSON.parse(error.responseText);
-
-        responseText = JSON.stringify(json, null, 2);
-      } catch (e) {
-        responseText = error.responseText;
-      }
     }
 
     return (

framework/core/js/src/forum/ForumApplication.ts

@@ -125,7 +125,7 @@ export default class ForumApplication extends Application {
       app.history.home();
 
       // Reload the current user so that their unread notification count is refreshed.
-      const userId = app.session.user?.id()
+      const userId = app.session.user?.id();
       if (userId) {
         app.store.find('users', userId);
         m.redraw();

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

@@ -1,34 +1,31 @@
 import app from '../../forum/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import Button from '../../common/components/Button';
 import extractText from '../../common/utils/extractText';
 import Stream from '../../common/utils/Stream';
+import Mithril from 'mithril';
+import RequestError from '../../common/utils/RequestError';
+
+export interface IForgotPasswordModalAttrs extends IInternalModalAttrs {
+  email?: string;
+}
 
 /**
  * The `ForgotPasswordModal` component displays a modal which allows the user to
  * enter their email address and request a link to reset their password.
- *
- * ### Attrs
- *
- * - `email`
  */
-export default class ForgotPasswordModal extends Modal {
+export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModalAttrs = IForgotPasswordModalAttrs> extends Modal<CustomAttrs> {
-  oninit(vnode) {
+  /**
+   * The value of the email input.
+   */
+  email!: Stream<string>;
+
+  success: boolean = false;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
-    /**
-     * The value of the email input.
-     *
-     * @type {Function}
-     */
     this.email = Stream(this.attrs.email || '');
-
-    /**
-     * Whether or not the password reset email was sent successfully.
-     *
-     * @type {Boolean}
-     */
-    this.success = false;
   }
 
   className() {
@@ -84,7 +81,7 @@ export default class ForgotPasswordModal extends Modal {
     );
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -98,14 +95,14 @@ export default class ForgotPasswordModal extends Modal {
       })
       .then(() => {
         this.success = true;
-        this.alert = null;
+        this.alertAttrs = null;
       })
       .catch(() => {})
       .then(this.loaded.bind(this));
   }
 
-  onerror(error) {
+  onerror(error: RequestError) {
-    if (error.status === 404) {
+    if (error.status === 404 && error.alert) {
       error.alert.content = app.translator.trans('core.forum.forgot_password.not_found_message');
     }
 

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

@@ -1,5 +1,5 @@
 import app from '../../forum/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import ForgotPasswordModal from './ForgotPasswordModal';
 import SignUpModal from './SignUpModal';
 import Button from '../../common/components/Button';
@@ -7,38 +7,34 @@ import LogInButtons from './LogInButtons';
 import extractText from '../../common/utils/extractText';
 import ItemList from '../../common/utils/ItemList';
 import Stream from '../../common/utils/Stream';
+import type Mithril from 'mithril';
+import RequestError from '../../common/utils/RequestError';
 
-/**
+export interface ILoginModalAttrs extends IInternalModalAttrs {
- * The `LogInModal` component displays a modal dialog with a login form.
+  identification?: string;
- *
+  password?: string;
- * ### Attrs
+  remember?: boolean;
- *
+}
- * - `identification`
+
- * - `password`
+export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginModalAttrs> extends Modal<CustomAttrs> {
- */
+  /**
-export default class LogInModal extends Modal {
+   * The value of the identification input.
-  oninit(vnode) {
+   */
+  identification!: Stream<string>;
+  /**
+   * The value of the password input.
+   */
+  password!: Stream<string>;
+  /**
+   * The value of the remember me input.
+   */
+  remember!: Stream<boolean>;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
-    /**
-     * The value of the identification input.
-     *
-     * @type {Function}
-     */
     this.identification = Stream(this.attrs.identification || '');
-
-    /**
-     * The value of the password input.
-     *
-     * @type {Function}
-     */
     this.password = Stream(this.attrs.password || '');
-
-    /**
-     * The value of the remember me input.
-     *
-     * @type {Function}
-     */
     this.remember = Stream(!!this.attrs.remember);
   }
 
@@ -140,12 +136,10 @@ export default class LogInModal extends Modal {
   /**
    * Open the forgot password modal, prefilling it with an email if the user has
    * entered one.
-   *
-   * @public
    */
   forgotPassword() {
     const email = this.identification();
-    const attrs = email.indexOf('@') !== -1 ? { email } : undefined;
+    const attrs = email.includes('@') ? { email } : undefined;
 
     app.modal.show(ForgotPasswordModal, attrs);
   }
@@ -153,13 +147,14 @@ export default class LogInModal extends Modal {
   /**
    * Open the sign up modal, prefilling it with an email/username/password if
    * the user has entered one.
-   *
-   * @public
    */
   signUp() {
-    const attrs = { password: this.password() };
     const identification = this.identification();
-    attrs[identification.indexOf('@') !== -1 ? 'email' : 'username'] = identification;
+
+    const attrs = {
+      [identification.includes('@') ? 'email' : 'username']: identification,
+      password: this.password(),
+    };
 
     app.modal.show(SignUpModal, attrs);
   }
@@ -168,7 +163,7 @@ export default class LogInModal extends Modal {
     this.$('[name=' + (this.identification() ? 'password' : 'identification') + ']').select();
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -182,8 +177,8 @@ export default class LogInModal extends Modal {
       .then(() => window.location.reload(), this.loaded.bind(this));
   }
 
-  onerror(error) {
+  onerror(error: RequestError) {
-    if (error.status === 401) {
+    if (error.status === 401 && error.alert) {
       error.alert.content = app.translator.trans('core.forum.log_in.invalid_login_message');
     }
 

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

@@ -1,45 +1,47 @@
 import app from '../../forum/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 import LogInModal from './LogInModal';
 import Button from '../../common/components/Button';
 import LogInButtons from './LogInButtons';
 import extractText from '../../common/utils/extractText';
 import ItemList from '../../common/utils/ItemList';
 import Stream from '../../common/utils/Stream';
+import type Mithril from 'mithril';
 
-/**
+export interface ISignupModalAttrs extends IInternalModalAttrs {
- * The `SignUpModal` component displays a modal dialog with a singup form.
+  username?: string;
- *
+  email?: string;
- * ### Attrs
+  password?: string;
- *
+  token?: string;
- * - `username`
+  provided?: string[];
- * - `email`
+}
- * - `password`
+
- * - `token` An email token to sign up with.
+export type SignupBody = {
- */
+  username: string;
-export default class SignUpModal extends Modal {
+  email: string;
-  oninit(vnode) {
+} & ({ token: string } | { password: string });
+
+export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignupModalAttrs> extends Modal<CustomAttrs> {
+  /**
+   * The value of the username input.
+   */
+  username!: Stream<string>;
+
+  /**
+   * The value of the email input.
+   */
+  email!: Stream<string>;
+
+  /**
+   * The value of the password input.
+   */
+  password!: Stream<string>;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
 
-    /**
-     * The value of the username input.
-     *
-     * @type {Function}
-     */
     this.username = Stream(this.attrs.username || '');
-
-    /**
-     * The value of the email input.
-     *
-     * @type {Function}
-     */
     this.email = Stream(this.attrs.email || '');
-
-    /**
-     * The value of the password input.
-     *
-     * @type {Function}
-     */
     this.password = Stream(this.attrs.password || '');
   }
 
@@ -55,12 +57,12 @@ export default class SignUpModal extends Modal {
     return [<div className="Modal-body">{this.body()}</div>, <div className="Modal-footer">{this.footer()}</div>];
   }
 
-  isProvided(field) {
+  isProvided(field: string): boolean {
-    return this.attrs.provided && this.attrs.provided.indexOf(field) !== -1;
+    return this.attrs.provided?.includes(field) ?? false;
   }
 
   body() {
-    return [this.attrs.token ? '' : <LogInButtons />, <div className="Form Form--centered">{this.fields().toArray()}</div>];
+    return [!this.attrs.token && <LogInButtons />, <div className="Form Form--centered">{this.fields().toArray()}</div>];
   }
 
   fields() {
@@ -156,7 +158,7 @@ export default class SignUpModal extends Modal {
     }
   }
 
-  onsubmit(e) {
+  onsubmit(e: SubmitEvent) {
     e.preventDefault();
 
     this.loading = true;
@@ -175,22 +177,16 @@ export default class SignUpModal extends Modal {
 
   /**
    * Get the data that should be submitted in the sign-up request.
-   *
-   * @return {Object}
-   * @protected
    */
-  submitData() {
+  submitData(): SignupBody {
+    const authData = this.attrs.token ? { token: this.attrs.token } : { password: this.password() };
+
     const data = {
       username: this.username(),
       email: this.email(),
+      ...authData,
     };
 
-    if (this.attrs.token) {
-      data.token = this.attrs.token;
-    } else {
-      data.password = this.password();
-    }
-
     return data;
   }
 }