Add new settings/tokens/new page

Author: Turbo87

app/components/header.hbs

@@ -27,7 +27,7 @@
 
           <dd.Menu local-class="current-user-links" as |menu|>
             <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="settings">Account Settings</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="settings" data-test-settings>Account Settings</LinkTo></menu.Item>
             <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
             <menu.Item local-class="menu-item-with-separator">
               <button

app/components/settings-page.hbs

@@ -1,11 +1,11 @@
 <div local-class="page" ...attributes>
-  <SideMenu as |menu|>
+  <SideMenu data-test-settings-menu as |menu|>
     <menu.Item @link={{link "settings.profile"}}>Profile</menu.Item>
     {{#if this.design.showToggleButton}}
       <menu.Item @link={{link "settings.appearance"}}>Appearance</menu.Item>
     {{/if}}
     <menu.Item @link={{link "settings.email-notifications"}}>Email Notifications</menu.Item>
-    <menu.Item @link={{link "settings.tokens"}}>API Tokens</menu.Item>
+    <menu.Item @link={{link "settings.tokens"}} data-test-tokens>API Tokens</menu.Item>
   </SideMenu>
 
   <div local-class="content">

app/controllers/settings/tokens/new.js

@@ -0,0 +1,56 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+import { task } from 'ember-concurrency';
+
+export default class NewTokenController extends Controller {
+  @service notifications;
+  @service sentry;
+  @service store;
+  @service router;
+
+  @tracked name;
+  @tracked nameInvalid;
+
+  constructor() {
+    super(...arguments);
+    this.reset();
+  }
+
+  saveTokenTask = task(async () => {
+    let { name } = this;
+    if (!name) {
+      this.nameInvalid = true;
+      return;
+    }
+
+    let token = this.store.createRecord('api-token', { name });
+
+    try {
+      // Save the new API token on the backend
+      await token.save();
+      // Reset the form
+      this.reset();
+      // Navigate to the API token list
+      this.router.transitionTo('settings.tokens.index');
+    } catch (error) {
+      // Notify the user
+      this.notifications.error('An error has occurred while generating your API token. Please try again later!');
+      // Notify the crates.io team
+      this.sentry.captureException(error);
+      // Notify the developer
+      console.error(error);
+    }
+  });
+
+  reset() {
+    this.name = '';
+    this.nameInvalid = false;
+  }
+
+  @action resetNameValidation() {
+    this.nameInvalid = false;
+  }
+}

app/router.js

@@ -34,7 +34,9 @@ Router.map(function () {
     this.route('appearance');
     this.route('email-notifications');
     this.route('profile');
-    this.route('tokens');
+    this.route('tokens', function () {
+      this.route('new');
+    });
   });
   this.route('user', { path: '/users/:user_id' });
   this.route('install');

app/routes/settings/tokens/new.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class TokenListRoute extends Route {
+  resetController(controller) {
+    controller.saveTokenTask.cancelAll();
+  }
+}

app/styles/settings/tokens/new.module.css

@@ -0,0 +1,45 @@
+.form-group, .buttons {
+    position: relative;
+    margin: var(--space-s) 0;
+}
+
+.form-group {
+    label {
+        display: block;
+        margin-bottom: var(--space-3xs);
+        font-weight: 600;
+    }
+}
+
+.buttons {
+    display: flex;
+    gap: var(--space-2xs);
+    flex-wrap: wrap;
+}
+
+.name-input {
+    max-width: 440px;
+    width: 100%;
+    padding: var(--space-2xs);
+    border: 1px solid #ada796;
+    border-radius: var(--space-3xs);
+
+    &[aria-invalid="true"] {
+        background: #fff2f2;
+        border-color: red;
+    }
+}
+
+.generate-button {
+    composes: yellow-button small from '../../../styles/shared/buttons.module.css';
+    border-radius: 4px;
+
+    .spinner {
+        margin-left: var(--space-2xs);
+    }
+}
+
+.cancel-button {
+    composes: tan-button small from '../../../styles/shared/buttons.module.css';
+    border-radius: 4px;
+}

app/templates/settings/tokens/new.hbs

@@ -0,0 +1,43 @@
+<h2>New API Token</h2>
+
+<form local-class="form" {{on "submit" (prevent-default (perform this.saveTokenTask))}}>
+  <div local-class="form-group">
+    <label for={{this.id}}>Name</label>
+    <Input
+      id={{this.id}}
+      @type="text"
+      @value={{this.name}}
+      disabled={{this.saveTokenTask.isRunning}}
+      aria-required="true"
+      aria-invalid={{if this.nameInvalid "true" "false"}}
+      local-class="name-input"
+      data-test-name
+      {{auto-focus}}
+      {{on "input" this.resetNameValidation}}
+    />
+  </div>
+
+  <div local-class="buttons">
+    <button
+      type="submit"
+      local-class="generate-button"
+      disabled={{this.saveTokenTask.isRunning}}
+      data-test-generate
+    >
+      Generate Token
+
+      {{#if this.saveTokenTask.isRunning}}
+        <LoadingSpinner local-class="spinner" data-test-spinner />
+      {{/if}}
+    </button>
+
+    <LinkTo
+      @route="settings.tokens.index"
+      local-class="cancel-button"
+      data-test-cancel
+    >
+      Cancel
+    </LinkTo>
+  </div>
+
+</form>

tests/routes/settings/tokens/new-test.js

@@ -0,0 +1,94 @@
+import { click, currentURL, fillIn, waitFor } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { defer } from 'rsvp';
+
+import { Response } from 'miragejs';
+
+import { setupApplicationTest } from 'cargo/tests/helpers';
+
+import { visit } from '../../../helpers/visit-ignoring-abort';
+
+module('/settings/tokens/new', function (hooks) {
+  setupApplicationTest(hooks);
+
+  function prepare(context) {
+    let user = context.server.create('user', {
+      login: 'johnnydee',
+      name: 'John Doe',
+      email: 'john@doe.com',
+      avatar: 'https://avatars2.githubusercontent.com/u/1234567?v=4',
+    });
+
+    context.authenticateAs(user);
+  }
+
+  test('access is blocked if unauthenticated', async function (assert) {
+    await visit('/settings/tokens/new');
+    assert.strictEqual(currentURL(), '/settings/tokens/new');
+    assert.dom('[data-test-title]').hasText('This page requires authentication');
+    assert.dom('[data-test-login]').exists();
+  });
+
+  test('happy path', async function (assert) {
+    prepare(this);
+
+    await visit('/settings/tokens/new');
+    assert.strictEqual(currentURL(), '/settings/tokens/new');
+
+    await fillIn('[data-test-name]', 'token-name');
+    await click('[data-test-generate]');
+
+    let token = this.server.schema.apiTokens.findBy({ name: 'token-name' });
+    assert.ok(Boolean(token), 'API token has been created in the backend database');
+
+    assert.strictEqual(currentURL(), '/settings/tokens');
+    assert.dom('[data-test-api-token="1"] [data-test-name]').hasText('token-name');
+    assert.dom('[data-test-api-token="1"] [data-test-token]').hasText(token.token);
+  });
+
+  test('loading and error state', async function (assert) {
+    prepare(this);
+
+    let deferred = defer();
+    this.server.put('/api/v1/me/tokens', deferred.promise);
+
+    await visit('/settings/tokens/new');
+    assert.strictEqual(currentURL(), '/settings/tokens/new');
+
+    await fillIn('[data-test-name]', 'token-name');
+    let clickPromise = click('[data-test-generate]');
+    await waitFor('[data-test-generate] [data-test-spinner]');
+    assert.dom('[data-test-name]').isDisabled();
+    assert.dom('[data-test-generate]').isDisabled();
+
+    deferred.resolve(new Response(500));
+    await clickPromise;
+
+    let message = 'An error has occurred while generating your API token. Please try again later!';
+    assert.dom('[data-test-notification-message="error"]').hasText(message);
+    assert.dom('[data-test-name]').isEnabled();
+    assert.dom('[data-test-generate]').isEnabled();
+  });
+
+  test('cancel button navigates back to the token list', async function (assert) {
+    prepare(this);
+
+    await visit('/settings/tokens/new');
+    assert.strictEqual(currentURL(), '/settings/tokens/new');
+
+    await click('[data-test-cancel]');
+    assert.strictEqual(currentURL(), '/settings/tokens');
+  });
+
+  test('empty name shows an error', async function (assert) {
+    prepare(this);
+
+    await visit('/settings/tokens/new');
+    assert.strictEqual(currentURL(), '/settings/tokens/new');
+
+    await click('[data-test-generate]');
+    assert.strictEqual(currentURL(), '/settings/tokens/new');
+    assert.dom('[data-test-name]').hasAria('invalid', 'true');
+  });
+});