[ui, epic] SSO and Auth improvements (#15110)

* Top nav auth dropdown (#15055)

* Basic dropdown styles

* Some cleanup

* delog

* Default nomad hover state styles

* Component separation-of-concerns and acceptance tests for auth dropdown

* lintfix

* [ui, sso] Handle token expiry 500s (#15073)

* Handle error states generally

* Dont direct, just redirect

* no longer need explicit error on controller

* Redirect on token-doesnt-exist

* Forgot to import our time lib

* Linting on _blank

* Redirect tests

* changelog

* [ui, sso] warn user about pending token expiry (#15091)

* Handle error states generally

* Dont direct, just redirect

* no longer need explicit error on controller

* Linting on _blank

* Custom notification actions and shift the template to within an else block

* Lintfix

* Make the closeAction optional

* changelog

* Add a mirage token that will always expire in 11 minutes

* Test for token expiry with ember concurrency waiters

* concurrency handling for earlier test, and button redirect test

* [ui] if ACLs are disabled, remove the Sign In link from the top of the UI (#15114)

* Remove top nav link if ACLs disabled

* Change to an enabled-by-default model since you get no agent config when ACLs are disabled but you lack a token

* PR feedback addressed; down with double negative conditionals

* lintfix

* ember getter instead of ?.prop

* [SSO] Auth Methods and Mock OIDC Flow (#15155)

* Big ol first pass at a redirect sign in flow

* dont recursively add queryparams on redirect

* Passing state and code qps

* In which I go off the deep end and embed a faux provider page in the nomad ui

* Buggy but self-contained flow

* Flow auto-delay added and a little more polish to resetting token

* secret passing turned to accessor passing

* Handle SSO Failure

* General cleanup and test fix

* Lintfix

* SSO flow acceptance tests

* Percy snapshots added

* Explicitly note the OIDC test route is mirage only

* Handling failure case for complete-auth

* Leentfeex

* Tokens page styles (#15273)

* styling and moving columns around

* autofocus and enter press handling

* Styles refined

* Split up manager and regular tests

* Standardizing to a binary status state

* Serialize auth-methods response to use "name" as primary key (#15380)

* Serializer for unique-by-name

* Use @classic because of class extension

Author: philrenaud

.changelog/15073.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: redirect users to Sign In should their tokens ever come back expired or not-found
+```

.changelog/15091.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: give users a notification if their token is going to expire within the next 10 minutes
+```

ui/app/adapters/auth-method.js

@@ -0,0 +1,41 @@
+// @ts-check
+import { default as ApplicationAdapter, namespace } from './application';
+import { dasherize } from '@ember/string';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class AuthMethodAdapter extends ApplicationAdapter {
+  namespace = `${namespace}/acl`;
+
+  /**
+   * @param {string} modelName
+   * @returns {string}
+   */
+  urlForFindAll(modelName) {
+    return dasherize(this.buildURL(modelName));
+  }
+
+  /**
+   * @typedef {Object} ACLOIDCAuthURLParams
+   * @property {string} AuthMethod
+   * @property {string} RedirectUri
+   * @property {string} ClientNonce
+   * @property {Object[]} Meta // NOTE: unsure if array of objects or kv pairs
+   */
+
+  /**
+   * @param {ACLOIDCAuthURLParams} params
+   * @returns
+   */
+  getAuthURL({ AuthMethod, RedirectUri, ClientNonce, Meta }) {
+    const url = `/${this.namespace}/oidc/auth-url`;
+    return this.ajax(url, 'POST', {
+      data: {
+        AuthMethod,
+        RedirectUri,
+        ClientNonce,
+        Meta,
+      },
+    });
+  }
+}

ui/app/components/global-header.js

@@ -11,4 +11,15 @@ export default class GlobalHeader extends Component {
 
   'data-test-global-header' = true;
   onHamburgerClick() {}
+
+  // Show sign-in if:
+  // - User can't load agent config (meaning ACLs are enabled but they're not signed in)
+  // - User can load agent config in and ACLs are enabled (meaning ACLs are enabled and they're signed in)
+  // The excluded case here is if there is both an agent config and ACLs are disabled
+  get shouldShowProfileNav() {
+    return (
+      !this.system.agent?.get('config') ||
+      this.system.agent?.get('config.ACL.Enabled') === true
+    );
+  }
 }

ui/app/components/profile-navbar-item.hbs

@@ -0,0 +1,24 @@
+{{#if this.token.selfToken}}
+  <PowerSelect
+  data-test-header-profile-dropdown
+  {{keyboard-shortcut menuLevel=true pattern=(array "g" "p") }}
+  @options={{this.profileOptions}}
+  @onChange={{action (queue 
+      (fn (mut this.profileSelection))
+      this.profileSelection.action
+  )}}
+  @dropdownClass="dropdown-options"
+  @matchTriggerWidth={{false}}
+  @selected={{get this.profileSelection "key"}}
+  class="profile-dropdown navbar-item"
+  as |option|>
+  <span class="ember-power-select-prefix">Profile</span>
+  <span class="dropdown-label" data-test-dropdown-option={{option.key}}>{{option.label}}</span>
+  </PowerSelect>
+{{else}}
+  <LinkTo data-test-header-signin-link @route="settings.tokens" class="navbar-item" {{keyboard-shortcut menuLevel=true pattern=(array "g" "p") }}>
+    Sign In
+  </LinkTo>
+{{/if}}
+
+{{yield}}

ui/app/components/profile-navbar-item.js

@@ -0,0 +1,36 @@
+// @ts-check
+
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ProfileNavbarItemComponent extends Component {
+  @service token;
+  @service router;
+  @service store;
+
+  profileOptions = [
+    {
+      label: 'Authorization',
+      key: 'authorization',
+      action: () => {
+        this.router.transitionTo('settings.tokens');
+      },
+    },
+    {
+      label: 'Sign Out',
+      key: 'sign-out',
+      action: () => {
+        this.token.setProperties({
+          secret: undefined,
+        });
+
+        // Clear out all data to ensure only data the anonymous token is privileged to see is shown
+        this.store.unloadAll();
+        this.token.reset();
+        this.router.transitionTo('jobs.index');
+      },
+    },
+  ];
+
+  profileSelection = this.profileOptions[0];
+}

ui/app/controllers/oidc-mock.js

@@ -0,0 +1,32 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Ember from 'ember';
+
+export default class OidcMockController extends Controller {
+  @service router;
+
+  queryParams = ['auth_method', 'client_nonce', 'redirect_uri', 'meta'];
+
+  @action
+  signIn(fakeAccount) {
+    const url = `${this.redirect_uri.split('?')[0]}?code=${
+      fakeAccount.accessor
+    }&state=success`;
+    if (Ember.testing) {
+      this.router.transitionTo(url);
+    } else {
+      window.location = url;
+    }
+  }
+
+  @action
+  failToSignIn() {
+    const url = `${this.redirect_uri.split('?')[0]}?state=failure`;
+    if (Ember.testing) {
+      this.router.transitionTo(url);
+    } else {
+      window.location = url;
+    }
+  }
+}

ui/app/controllers/settings/tokens.js

@@ -1,20 +1,30 @@
+// @ts-check
 import { inject as service } from '@ember/service';
 import { reads } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import { getOwner } from '@ember/application';
 import { alias } from '@ember/object/computed';
 import { action } from '@ember/object';
 import classic from 'ember-classic-decorator';
+import { tracked } from '@glimmer/tracking';
+import Ember from 'ember';
 
 @classic
 export default class Tokens extends Controller {
   @service token;
   @service store;
+  @service router;
+
+  queryParams = ['code', 'state'];
 
   @reads('token.secret') secret;
 
-  tokenIsValid = false;
-  tokenIsInvalid = false;
+  /**
+   * @type {(null | "success" | "failure")} signInStatus
+   */
+  @tracked
+  signInStatus = null;
+
   @alias('token.selfToken') tokenRecord;
 
   resetStore() {
@@ -25,22 +35,27 @@ export default class Tokens extends Controller {
   clearTokenProperties() {
     this.token.setProperties({
       secret: undefined,
+      tokenNotFound: false,
     });
-    this.setProperties({
-      tokenIsValid: false,
-      tokenIsInvalid: false,
-    });
+    this.signInStatus = null;
     // Clear out all data to ensure only data the anonymous token is privileged to see is shown
     this.resetStore();
     this.token.reset();
+    this.store.findAll('auth-method');
+  }
+
+  get authMethods() {
+    return this.store.peekAll('auth-method');
   }
 
   @action
   verifyToken() {
     const { secret } = this;
+    this.clearTokenProperties();
     const TokenAdapter = getOwner(this).lookup('adapter:token');
 
     this.set('token.secret', secret);
+    this.set('secret', null);
 
     TokenAdapter.findSelf().then(
       () => {
@@ -50,18 +65,95 @@ export default class Tokens extends Controller {
         // Refetch the token and associated policies
         this.get('token.fetchSelfTokenAndPolicies').perform().catch();
 
-        this.setProperties({
-          tokenIsValid: true,
-          tokenIsInvalid: false,
-        });
+        this.signInStatus = 'success';
+        this.token.set('tokenNotFound', false);
       },
       () => {
         this.set('token.secret', undefined);
-        this.setProperties({
-          tokenIsValid: false,
-          tokenIsInvalid: true,
-        });
+        this.signInStatus = 'failure';
       }
     );
   }
+
+  // Generate a 20-char nonce, using window.crypto to
+  // create a sufficiently-large output then trimming
+  generateNonce() {
+    let randomArray = new Uint32Array(10);
+    crypto.getRandomValues(randomArray);
+    return randomArray.join('').slice(0, 20);
+  }
+
+  @action redirectToSSO(method) {
+    const provider = method.name;
+    const nonce = this.generateNonce();
+
+    window.localStorage.setItem('nomadOIDCNonce', nonce);
+    window.localStorage.setItem('nomadOIDCAuthMethod', provider);
+
+    method
+      .getAuthURL({
+        AuthMethod: provider,
+        ClientNonce: nonce,
+        RedirectUri: Ember.testing
+          ? this.router.currentURL
+          : window.location.toString(),
+      })
+      .then(({ AuthURL }) => {
+        if (Ember.testing) {
+          this.router.transitionTo(AuthURL.split('/ui')[1]);
+        } else {
+          window.location = AuthURL;
+        }
+      });
+  }
+
+  @tracked code = null;
+  @tracked state = null;
+
+  get isValidatingToken() {
+    if (this.code && this.state === 'success') {
+      this.validateSSO();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  async validateSSO() {
+    const res = await this.token.authorizedRequest(
+      '/v1/acl/oidc/complete-auth',
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          AuthMethod: window.localStorage.getItem('nomadOIDCAuthMethod'),
+          ClientNonce: window.localStorage.getItem('nomadOIDCNonce'),
+          Code: this.code,
+          State: this.state,
+        }),
+      }
+    );
+
+    if (res.ok) {
+      const data = await res.json();
+      this.token.set('secret', data.ACLToken);
+      this.verifyToken();
+      this.state = null;
+      this.code = null;
+    } else {
+      this.state = 'failure';
+      this.code = null;
+    }
+  }
+
+  get SSOFailure() {
+    return this.state === 'failure';
+  }
+
+  get canSignIn() {
+    return !this.tokenRecord || this.tokenRecord.isExpired;
+  }
+
+  get shouldShowPolicies() {
+    return this.tokenRecord;
+  }
 }

ui/app/models/auth-method.js

@@ -0,0 +1,19 @@
+// @ts-check
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
+
+export default class AuthMethodModel extends Model {
+  @attr('string') name;
+  @attr('string') type;
+  @attr('string') tokenLocality;
+  @attr('string') maxTokenTTL;
+  @attr('boolean') default;
+  @attr('date') createTime;
+  @attr('number') createIndex;
+  @attr('date') modifyTime;
+  @attr('number') modifyIndex;
+
+  getAuthURL(params) {
+    return this.store.adapterFor('authMethod').getAuthURL(params);
+  }
+}

ui/app/models/token.js

@@ -11,6 +11,11 @@ export default class Token extends Model {
   @attr('string') type;
   @hasMany('policy') policies;
   @attr() policyNames;
+  @attr('date') expirationTime;
 
   @alias('id') accessor;
+
+  get isExpired() {
+    return this.expirationTime && this.expirationTime < new Date();
+  }
 }

ui/app/router.js

@@ -98,4 +98,8 @@ Router.map(function () {
       path: '/path/*absolutePath',
     });
   });
+  // Mirage-only route for testing OIDC flow
+  if (config['ember-cli-mirage']) {
+    this.route('oidc-mock');
+  }
 });

ui/app/routes/application.js

@@ -13,6 +13,7 @@ export default class ApplicationRoute extends Route {
   @service system;
   @service store;
   @service token;
+  @service router;
 
   queryParams = {
     region: {
@@ -140,7 +141,17 @@ export default class ApplicationRoute extends Route {
   @action
   error(error) {
     if (!(error instanceof AbortError)) {
-      this.controllerFor('application').set('error', error);
+      if (
+        error.errors?.any(
+          (e) =>
+            e.detail === 'ACL token expired' ||
+            e.detail === 'ACL token not found'
+        )
+      ) {
+        this.router.transitionTo('settings.tokens');
+      } else {
+        this.controllerFor('application').set('error', error);
+      }
     }
   }
 }