feat: add user creation to users list page

framework/core/js/src/admin/compat.ts

@@ -35,6 +35,7 @@ import EditGroupModal from './components/EditGroupModal';
 import routes from './routes';
 import AdminApplication from './AdminApplication';
 import generateElementId from './utils/generateElementId';
+import CreateUserModal from './components/CreateUserModal';
 
 export default Object.assign(compat, {
   'utils/saveSettings': saveSettings,
@@ -70,6 +71,7 @@ export default Object.assign(compat, {
   'components/AdminHeader': AdminHeader,
   'components/EditCustomCssModal': EditCustomCssModal,
   'components/EditGroupModal': EditGroupModal,
+  'components/CreateUserModal': CreateUserModal,
   routes: routes,
   AdminApplication: AdminApplication,
 });

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

@@ -0,0 +1,241 @@
+import app from '../../admin/app';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
+import Button from '../../common/components/Button';
+import extractText from '../../common/utils/extractText';
+import ItemList from '../../common/utils/ItemList';
+import Stream from '../../common/utils/Stream';
+import type Mithril from 'mithril';
+import Switch from '../../common/components/Switch';
+import { generateRandomString } from '../../common/utils/string';
+
+export interface ICreateUserModalAttrs extends IInternalModalAttrs {
+  username?: string;
+  email?: string;
+  password?: string;
+  token?: string;
+  provided?: string[];
+}
+
+export type SignupBody = {
+  username: string;
+  email: string;
+  isEmailConfirmed: boolean;
+  password: string;
+};
+
+export default class CreateUserModal<CustomAttrs extends ICreateUserModalAttrs = ICreateUserModalAttrs> 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 | null>;
+
+  /**
+   * Whether email confirmation is required after signing in.
+   */
+  requireEmailConfirmation!: Stream<boolean>;
+
+  /**
+   * Keeps the modal open after the user is created to facilitate creating
+   * multiple users at once.
+   */
+  bulkAdd!: Stream<boolean>;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
+    super.oninit(vnode);
+
+    this.username = Stream('');
+    this.email = Stream('');
+    this.password = Stream<string | null>('');
+    this.requireEmailConfirmation = Stream(false);
+    this.bulkAdd = Stream(false);
+  }
+
+  className() {
+    return 'Modal--small CreateUserModal';
+  }
+
+  title() {
+    return app.translator.trans('core.admin.create_user.title');
+  }
+
+  content() {
+    return (
+      <>
+        <div className="Modal-body">{this.body()}</div>
+      </>
+    );
+  }
+
+  body() {
+    return (
+      <>
+        <div className="Form Form--centered">{this.fields().toArray()}</div>
+      </>
+    );
+  }
+
+  fields() {
+    const items = new ItemList();
+
+    const usernameLabel = extractText(app.translator.trans('core.admin.create_user.username_placeholder'));
+    const emailLabel = extractText(app.translator.trans('core.admin.create_user.email_placeholder'));
+    const emailConfirmationLabel = extractText(app.translator.trans('core.admin.create_user.email_confirmed_label'));
+    const useRandomPasswordLabel = extractText(app.translator.trans('core.admin.create_user.use_random_password'));
+    const passwordLabel = extractText(app.translator.trans('core.admin.create_user.password_placeholder'));
+
+    items.add(
+      'username',
+      <div className="Form-group">
+        <input
+          className="FormControl"
+          name="username"
+          type="text"
+          placeholder={usernameLabel}
+          aria-label={usernameLabel}
+          bidi={this.username}
+          disabled={this.loading}
+        />
+      </div>,
+      100
+    );
+
+    items.add(
+      'email',
+      <div className="Form-group">
+        <input
+          className="FormControl"
+          name="email"
+          type="email"
+          placeholder={emailLabel}
+          aria-label={emailLabel}
+          bidi={this.email}
+          disabled={this.loading}
+        />
+      </div>,
+      80
+    );
+
+    items.add(
+      'emailConfirmation',
+      <div className="Form-group">
+        <Switch
+          name="emailConfirmed"
+          state={this.requireEmailConfirmation()}
+          onchange={(checked: boolean) => this.requireEmailConfirmation(checked)}
+          disabled={this.loading}
+        >
+          {emailConfirmationLabel}
+        </Switch>
+      </div>,
+      60
+    );
+
+    items.add(
+      'password',
+      <div className="Form-group">
+        <Switch
+          name="useRandomPassword"
+          state={this.password() === null}
+          onchange={(enabled: boolean) => {
+            this.password(enabled ? null : '');
+          }}
+          disabled={this.loading}
+        >
+          {useRandomPasswordLabel}
+        </Switch>
+
+        <input
+          className="FormControl"
+          name="password"
+          type="password"
+          autocomplete="new-password"
+          placeholder={passwordLabel}
+          aria-label={passwordLabel}
+          bidi={this.password}
+          disabled={this.loading || this.password() === null}
+        />
+      </div>,
+      40
+    );
+
+    items.add(
+      'bulkAdd',
+      <div className="Form-group CreateUserModal-bulkAdd">
+        <Switch name="bulkAdd" disabled={this.loading} state={this.bulkAdd()} onchange={(checked: boolean) => this.bulkAdd(checked)}>
+          {app.translator.trans('core.admin.create_user.bulk_add_label')}
+        </Switch>
+      </div>,
+      0
+    );
+
+    items.add(
+      'submit',
+      <div className="Form-group">
+        <Button className="Button Button--primary Button--block" type="submit" loading={this.loading}>
+          {app.translator.trans('core.admin.create_user.submit_button')}
+        </Button>
+      </div>,
+      -10
+    );
+
+    return items;
+  }
+
+  onready() {
+    this.$('[name=username]').trigger('select');
+  }
+
+  onsubmit(e: SubmitEvent) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    app
+      .request({
+        url: app.forum.attribute('apiUrl') + '/users',
+        method: 'POST',
+        body: { data: { attributes: this.submitData() } },
+        errorHandler: this.onerror.bind(this),
+      })
+      .then(() => {
+        if (this.bulkAdd()) {
+          this.resetData();
+        } else {
+          this.hide();
+        }
+      })
+      .finally(() => {
+        this.loaded();
+      });
+  }
+
+  /**
+   * Get the data that should be submitted in the sign-up request.
+   */
+  submitData(): SignupBody {
+    const data = {
+      username: this.username(),
+      email: this.email(),
+      isEmailConfirmed: !this.requireEmailConfirmation(),
+      password: this.password() ?? generateRandomString(32),
+    };
+
+    return data;
+  }
+
+  resetData() {
+    this.username('');
+    this.email('');
+    this.password('');
+  }
+}

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

@@ -1,4 +1,4 @@
-import type Mithril from 'mithril';
+import Mithril from 'mithril';
 
 import app from '../../admin/app';
 
@@ -17,6 +17,7 @@ import classList from '../../common/utils/classList';
 import extractText from '../../common/utils/extractText';
 import AdminPage from './AdminPage';
 import { debounce } from '../../common/utils/throttleDebounce';
+import CreateUserModal from './CreateUserModal';
 
 type ColumnData = {
   /**
@@ -116,19 +117,7 @@ export default class UserListPage extends AdminPage {
     const columns = this.columns().toArray();
 
     return [
-      <div className="Search-input">
-        <input
-          className="FormControl SearchBar"
-          type="search"
-          placeholder={app.translator.trans('core.admin.users.search_placeholder')}
-          oninput={(e: InputEvent) => {
-            this.isLoadingPage = true;
-            this.query = (e?.target as HTMLInputElement)?.value;
-            this.throttledSearch();
-          }}
-        />
-      </div>,
-      <p class="UserListPage-totalUsers">{app.translator.trans('core.admin.users.total_users', { count: this.userCount })}</p>,
+      <div className="UserListPage-header">{this.headerItems().toArray()}</div>,
       <section
         class={classList(['UserListPage-grid', this.isLoadingPage ? 'UserListPage-grid--loadingPage' : 'UserListPage-grid--loaded'])}
         style={{ '--columns': columns.length }}
@@ -243,6 +232,51 @@ export default class UserListPage extends AdminPage {
     ];
   }
 
+  headerItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'search',
+      <div className="Search-input">
+        <input
+          className="FormControl SearchBar"
+          type="search"
+          placeholder={app.translator.trans('core.admin.users.search_placeholder')}
+          oninput={(e: InputEvent) => {
+            this.isLoadingPage = true;
+            this.query = (e?.target as HTMLInputElement)?.value;
+            this.throttledSearch();
+          }}
+        />
+      </div>,
+      100
+    );
+
+    items.add(
+      'totalUsers',
+      <p class="UserListPage-totalUsers">{app.translator.trans('core.admin.users.total_users', { count: this.userCount })}</p>,
+      90
+    );
+
+    items.add('actions', <div className="UserListPage-actions">{this.actionItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  actionItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'createUser',
+      <Button className="Button UserListPage-createUserBtn" icon="fas fa-user-plus" onclick={() => app.modal.show(CreateUserModal)}>
+        {app.translator.trans('core.admin.users.create_user_button')}
+      </Button>,
+      100
+    );
+
+    return items;
+  }
+
   /**
    * Build an item list of columns to show for each user.
    *

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

@@ -79,3 +79,23 @@ export function ucfirst(string: string): string {
 export function camelCaseToSnakeCase(str: string): string {
   return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
 }
+
+/**
+ * Generate a random string (a-z, 0-9) of a given length.
+ *
+ * Providing a length of less than 0 will result in an error.
+ *
+ * @param length Length of the random string to generate
+ * @returns A random string of provided length
+ */
+export function generateRandomString(length: number): string {
+  if (length < 0) throw new Error('Cannot generate a random string with length less than 0.');
+  if (length === 0) return '';
+
+  const arr = new Uint8Array(length / 2);
+  window.crypto.getRandomValues(arr);
+
+  return Array.from(arr, (dec) => {
+    return dec.toString(16).padStart(2, '0');
+  }).join('');
+}

framework/core/less/admin.less

@@ -2,6 +2,7 @@
 
 @import "admin/AdminHeader";
 @import "admin/AdminNav";
+@import "admin/CreateUserModal";
 @import "admin/DashboardPage";
 @import "admin/DebugWarningWidget";
 @import "admin/BasicsPage";

framework/core/less/admin/CreateUserModal.less

@@ -0,0 +1,6 @@
+.CreateUserModal {
+  &-bulkAdd {
+    margin-top: 32px;
+    margin-bottom: 24px;
+  }
+}