MFA method and enforcement list view

ui/app/adapters/mfa-method.js

@@ -3,24 +3,26 @@ import ApplicationAdapter from './application';
 export default class MfaMethodAdapter extends ApplicationAdapter {
   namespace = 'v1';
 
-  urlForQuery(methodType) {
-    let baseUrl = this.buildURL() + '/identity/mfa/method';
-    if (methodType) {
-      return `${baseUrl}/${methodType}`;
-    }
-    return baseUrl;
+  pathForType() {
+    return 'identity/mfa/method';
   }
 
-  queryRecord(type, id) {
-    return this.ajax(this.urlForQuery(type), 'POST', {
+  queryRecord(store, type, query) {
+    const { id } = query;
+    if (!id) {
+      return;
+    }
+    const url = this.urlForQuery(query, type.modelName);
+    return this.ajax(url, 'POST', {
       data: {
         id,
       },
     });
   }
 
-  query() {
-    return this.ajax(this.urlForQuery(), 'GET', {
+  query(store, type, query) {
+    const url = this.urlForQuery(query, type.modelName);
+    return this.ajax(url, 'GET', {
       data: {
         list: true,
       },

ui/app/controllers/vault/cluster/access/mfa/enforcements.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+
+export default class MfaEnforcementListController extends Controller {
+  queryParams = {
+    page: 'page',
+  };
+
+  page = 1;
+}

ui/app/controllers/vault/cluster/access/mfa/methods.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+
+export default class MfaMethodsListController extends Controller {
+  queryParams = {
+    page: 'page',
+  };
+
+  page = 1;
+}

ui/app/router.js

@@ -59,9 +59,13 @@ Router.map(function () {
           this.route('section', { path: '/:section_name' });
         });
         this.route('mfa', function () {
-          // lookup
-          this.route('index', { path: '/' });
           this.route('configure', { path: '/landing' });
+          this.route('methods', { path: '/' });
+          this.route('method', { path: '/method/:method_id' }, function () {
+            this.route('index', { path: '/' });
+          });
+          this.route('enforcements', { path: '/enforcement-list' });
+          this.route('enforcement', { path: '/enforcement/:id' });
         });
         this.route('leases', function () {
           // lookup

ui/app/routes/vault/cluster/access/mfa/configure.js

@@ -1,6 +1,6 @@
 import Route from '@ember/routing/route';
 
-export default class ConfigureRoute extends Route {
+export default class MfaConfigureRoute extends Route {
   model() {
     return {};
   }

ui/app/routes/vault/cluster/access/mfa/enforcements.js

@@ -0,0 +1,27 @@
+import Route from '@ember/routing/route';
+
+export default class MfaEnforcementsRoute extends Route {
+  queryParams = {
+    page: {
+      refreshModel: true,
+    },
+  };
+
+  model(params) {
+    return this.store
+      .lazyPaginatedQuery('mfa-login-enforcement', {
+        responsePath: 'data.keys',
+        page: params.page || 1,
+      })
+      .catch((err) => {
+        if (err.httpStatus === 404) {
+          return [];
+        } else {
+          throw err;
+        }
+      });
+  }
+  setupController(controller, model) {
+    controller.set('model', model);
+  }
+}

ui/app/routes/vault/cluster/access/mfa/method.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+
+export default class MfaMethodRoute extends Route {
+  model(params) {
+    return this.store.findRecord('mfa-method', params['method_id']);
+  }
+  setupController(controller, model) {
+    controller.set('model', model);
+  }
+}

ui/app/routes/vault/cluster/access/mfa/index.js → ui/app/routes/vault/cluster/access/mfa/methods.js

@@ -1,7 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-export default class MfaRoute extends Route {
+export default class MfaMethodsRoute extends Route {
   @service router;
 
   queryParams = {

ui/app/templates/components/mfa/nav.hbs

@@ -0,0 +1,12 @@
+<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
+  <nav class="tabs">
+    <ul>
+      <LinkTo @route="vault.cluster.access.mfa.methods">
+        Methods
+      </LinkTo>
+      <LinkTo @route="vault.cluster.access.mfa.enforcements">
+        Enforcements
+      </LinkTo>
+    </ul>
+  </nav>
+</div>

ui/app/templates/vault/cluster/access/mfa/enforcements.hbs

@@ -0,0 +1,40 @@
+<PageHeader as |p|>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Multi-factor Authentication
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+
+<Mfa::Nav />
+
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarLink @type="add" @params={{array "vault.cluster.access.mfa.configure"}}>
+      New enforcement
+    </ToolbarLink>
+  </ToolbarActions>
+</Toolbar>
+
+{{#if this.model.meta.total}}
+  {{#each this.model as |item|}}
+    <LinkedBlock class="list-item-row" @params={{array "vault.cluster.access.mfa.enforcement" item.id}}>
+      <div class="level is-mobile">
+        <div class="level-left">
+          <div>
+            <span class="has-text-weight-semibold has-text-black">
+              {{item.name}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </LinkedBlock>
+  {{/each}}
+{{/if}}
+{{#if (gt this.model.meta.lastPage 1)}}
+  <ListPagination
+    @page={{this.model.meta.currentPage}}
+    @lastPage={{this.model.meta.lastPage}}
+    @link={{concat "vault.cluster.access.mfa.enforcements"}}
+  />
+{{/if}}

ui/app/templates/vault/cluster/access/mfa/index.hbs → ui/app/templates/vault/cluster/access/mfa/method/index.hbs

@@ -1,9 +1,13 @@
 <PageHeader as |p|>
   <p.levelLeft>
     <h1 class="title is-3">
-      Multi-factor Authentication
+      {{this.model.type}}
     </h1>
   </p.levelLeft>
 </PageHeader>
 
-List view
+<Toolbar>
+  <ToolbarActions />
+</Toolbar>
+
+{{this.model.id}}

ui/app/templates/vault/cluster/access/mfa/methods.hbs

@@ -0,0 +1,45 @@
+<PageHeader as |p|>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Multi-factor Authentication
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+
+<Mfa::Nav />
+
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarLink @type="add" @params={{array "vault.cluster.access.mfa.configure"}}>
+      New MFA method
+    </ToolbarLink>
+  </ToolbarActions>
+</Toolbar>
+
+{{#if this.model.meta.total}}
+  {{#each this.model as |item|}}
+    <LinkedBlock class="list-item-row" @params={{array "vault.cluster.access.mfa.method" item.id}}>
+      <div class="level is-mobile">
+        <div class="level-left">
+          <div>
+            <span class="has-text-weight-semibold has-text-black">
+              <Icon @size="24" @name={{item.type}} />
+              {{item.type}}
+            </span>
+            <br />
+            <code class="has-text-grey is-size-8">
+              {{item.id}}
+            </code>
+          </div>
+        </div>
+      </div>
+    </LinkedBlock>
+  {{/each}}
+{{/if}}
+{{#if (gt this.model.meta.lastPage 1)}}
+  <ListPagination
+    @page={{this.model.meta.currentPage}}
+    @lastPage={{this.model.meta.lastPage}}
+    @link={{concat "vault.cluster.access.mfa.methods"}}
+  />
+{{/if}}

ui/lib/core/icon-mappings.js

@@ -21,6 +21,8 @@ export const localIconMap = {
   radius: 'user',
   ssh: 'terminal-screen',
   totp: 'history',
+  duo: null,
+  pingid: null,
   transit: 'swap-horizontal',
   userpass: 'identity-user',
   stopwatch: 'clock',