feat: 🎸 add type-aware account display in admin UI

addons/api/addon/models/account.js

@@ -26,15 +26,10 @@ export default class AccountModel extends GeneratedAccountModel {
    * Convenience for getting username in account.
    * @type {string}
    */
-  @computed('type', 'attributes.login_name')
-  get username() {
-    let username = '';
-    switch (this.type) {
-      case 'password':
-        username = this.attributes.login_name;
-        break;
-    }
-    return username;
+  @computed('attributes.{email,full_name,login_name}')
+  get accountName() {
+    const { email, full_name, login_name } = this.attributes;
+    return email || full_name || login_name;
   }
 
   // =methods

addons/api/mirage/factories/account.js

@@ -1,3 +1,18 @@
 import factory from '../generated/factories/account';
+import { random, internet } from 'faker';
 
-export default factory.extend();
+export default factory.extend({
+  attributes() {
+    switch (this.type) {
+      case 'password':
+        return { login_name: random.words() };
+      case 'oidc':
+        return {
+          issuer: internet.ip(),
+          subject: 'sub',
+          email: internet.email(),
+          full_name: random.words(),
+        };
+    }
+  },
+});

addons/api/mirage/factories/auth-method.js

@@ -14,9 +14,9 @@ export default factory.extend({
    */
   withAccountsAndUsers: trait({
     afterCreate(authMethod, server) {
-      const { scope } = authMethod;
+      const { scope, type } = authMethod;
       server.createList('user', 5, { scope }).map((user) => {
-        const { id } = server.create('account', { scope, authMethod });
+        const { id } = server.create('account', { scope, type, authMethod });
         user.update({ accountIds: [id] });
       });
     },

addons/api/mirage/generated/factories/account.js

@@ -1,15 +1,14 @@
 import { Factory } from 'ember-cli-mirage';
-import { random, date, datatype } from 'faker';
+import { date, datatype } from 'faker';
 
 /**
  * GeneratedAccountFactory
  */
 export default Factory.extend({
   type: 'password',
-  name: () => random.words(),
-  description: () => random.words(),
+  // name: () => random.words(),
+  // description: () => random.words(),
   created_time: () => date.recent(),
   updated_time: () => date.recent(),
   version: () => datatype.number(),
-  attributes: () => ({ login_name: random.words() }),
 });

addons/api/tests/unit/models/account-test.js

@@ -10,15 +10,14 @@ module('Unit | Model | account', function (hooks) {
     assert.ok(model);
   });
 
-  test('it has an username attribute for password account', function (assert) {
+  test('it has an accountName attribute for password account', function (assert) {
     assert.expect(2);
     const store = this.owner.lookup('service:store');
     let model = store.createRecord('account', {
-      name: 'name',
       type: 'password',
     });
-    assert.notOk(model.username);
-    model.attributes.login_name = 'username';
-    assert.equal(model.username, 'username');
+    assert.notOk(model.accountName);
+    model.attributes.login_name = 'foobar';
+    assert.equal(model.accountName, 'foobar');
   });
 });

ui/admin/app/components/form/user/add-accounts/index.hbs

@@ -17,7 +17,8 @@
       <table.header as |header|>
         <header.row as |row|>
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.username.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
           <row.headerCell>{{t 'resources.auth-method.title'}}</row.headerCell>
         </header.row>
       </table.header>
@@ -31,7 +32,12 @@
                 onChange={{fn this.toggleAccount account}}
               />
             </row.cell>
-            <row.cell>{{account.username}}</row.cell>
+            <row.cell>{{account.accountName}}</row.cell>
+            <row.cell>
+              <Rose::Badge>
+                {{t (concat 'resources.auth-method.types.' account.type)}}
+              </Rose::Badge>
+            </row.cell>
             <row.cell>
               <code>{{account.auth_method_id}}</code>
             </row.cell>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs

@@ -10,6 +10,7 @@
           <row.headerCell>{{t 'form.subject.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.email.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.full_name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         </header.row>
       </table.header>
@@ -17,7 +18,13 @@
         {{#each @model as |account|}}
           <body.row as |row|>
             <row.headerCell scope='row'>
-              {{account.displayName}}
+              <LinkTo
+                @route='scopes.scope.auth-methods.auth-method.accounts.account'
+                @model={{account.id}}
+              >
+                {{account.accountName}}
+                <p>{{account.description}}</p>
+              </LinkTo>
             </row.headerCell>
             <row.cell>
               <code>{{account.attributes.issuer}}</code>
@@ -31,6 +38,9 @@
             <row.cell>
               {{account.attributes.full_name}}
             </row.cell>
+            <row.cell>
+              <Rose::Badge>{{account.type}}</Rose::Badge>
+            </row.cell>
             <row.cell>
               <Copyable
                 @text={{account.id}}
@@ -49,11 +59,8 @@
       <table.header as |header|>
         <header.row as |row|>
           <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-          <row.headerCell>
-            {{#if @model.firstObject.isPassword}}
-              {{t 'form.login_name.label'}}
-            {{/if}}
-          </row.headerCell>
+          <row.headerCell>{{t 'form.login_name.label'}}</row.headerCell>
+          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
           <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         </header.row>
       </table.header>
@@ -65,12 +72,15 @@
                 @route='scopes.scope.auth-methods.auth-method.accounts.account'
                 @model={{account.id}}
               >
-                {{account.displayName}}
+                {{account.accountName}}
+                <p>{{account.description}}</p>
               </LinkTo>
-              <p>{{account.description}}</p>
             </row.headerCell>
             <row.cell>
-              {{account.username}}
+              {{account.attributes.login_name}}
+            </row.cell>
+            <row.cell>
+              <Rose::Badge>{{account.type}}</Rose::Badge>
             </row.cell>
             <row.cell>
               <Copyable

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -6,7 +6,7 @@
     <table.header as |header|>
       <header.row as |row|>
         <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.login_name.label'}}</row.headerCell>
+        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
         <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
         <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
       </header.row>
@@ -15,11 +15,13 @@
       {{#each @model.accounts as |account|}}
         <body.row as |row|>
           <row.headerCell>
-            {{account.displayName}}
+            {{account.accountName}}
             <p>{{account.description}}</p>
           </row.headerCell>
           <row.cell>
-            {{account.username}}
+            <Rose::Badge>
+              {{t (concat 'resources.auth-method.types.' account.type)}}
+            </Rose::Badge>
           </row.cell>
           <row.cell>
             <Copyable