Add new settings/tokens/new page

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/components/settings/api-tokens.js

@@ -8,15 +8,20 @@ import { task } from 'ember-concurrency';
 export default class ApiTokens extends Component {
   @service store;
   @service notifications;
+  @service router;
 
   @tracked newToken;
 
   get sortedTokens() {
     return this.args.tokens.filter(t => !t.isNew).sort((a, b) => (a.created_at < b.created_at ? 1 : -1));
   }
 
-  @action startNewToken() {
-    this.newToken = this.store.createRecord('api-token');
+  @action startNewToken(event) {
+    if (event.altKey) {
+      this.router.transitionTo('settings.tokens.new');
+    } else {
+      this.newToken = this.store.createRecord('api-token');
+    }
   }
 
   saveTokenTask = task(async () => {

app/components/side-menu/item.hbs

@@ -1,3 +1,3 @@
-<li>
+<li ...attributes>
   <a href={{@link.url}} local-class="link {{if @link.isActive "active"}}" {{on "click" @link.transitionTo}}>{{yield}}</a>
 </li>

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.js

@@ -1,26 +1,3 @@
-import { inject as service } from '@ember/service';
-
-import { TrackedArray } from 'tracked-built-ins';
-
 import AuthenticatedRoute from '../-authenticated-route';
 
-export default class TokenSettingsRoute extends AuthenticatedRoute {
-  @service store;
-
-  async model() {
-    let apiTokens = await this.store.findAll('api-token');
-    return TrackedArray.from(apiTokens.slice());
-  }
-
-  /**
-   * Ensure that all plaintext tokens are deleted from memory after leaving
-   * the API tokens settings page.
-   */
-  resetController(controller) {
-    for (let token of controller.model) {
-      if (token.token) {
-        token.token = undefined;
-      }
-    }
-  }
-}
+export default class TokenSettingsRoute extends AuthenticatedRoute {}

app/routes/settings/tokens/index.js

@@ -0,0 +1,25 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+import { TrackedArray } from 'tracked-built-ins';
+
+export default class TokenListRoute extends Route {
+  @service store;
+
+  async model() {
+    let apiTokens = await this.store.findAll('api-token');
+    return TrackedArray.from(apiTokens.slice());
+  }
+
+  /**
+   * Ensure that all plaintext tokens are deleted from memory after leaving
+   * the API tokens settings page.
+   */
+  resetController(controller) {
+    for (let token of controller.model) {
+      if (token.token) {
+        token.token = undefined;
+      }
+    }
+  }
+}

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/styles/shared/buttons.module.css

@@ -33,6 +33,10 @@
     background: linear-gradient(to bottom, var(--bg-color-top) 0%, var(--bg-color-bottom) 100%);
     cursor: pointer;
 
+    &:hover, &:active, &:visited {
+        color: var(--text-color);
+    }
+
     img, svg {
         float: left;
         display: inline-block;

app/templates/settings/tokens.hbs

@@ -3,5 +3,5 @@
 <PageHeader @title="Account Settings" />
 
 <SettingsPage>
-  <Settings::ApiTokens @tokens={{@model}} />
+  {{outlet}}
 </SettingsPage>

app/templates/settings/tokens/index.hbs

@@ -0,0 +1 @@
+<Settings::ApiTokens @tokens={{@model}} />

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>