UI access sidebar (#4658)

* add error template to access so that we can see the sidebar even if you don't have permissions

* identity template cleanup

* make the token expiry warning friendlier and style it

ui/app/components/token-expire-warning.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  classNames: 'token-expire-warning',
   auth: Ember.inject.service(),
 
   routing: Ember.inject.service('-routing'),

ui/app/styles/components/token-expire-warning.scss

@@ -0,0 +1,19 @@
+.token-expire-warning {
+  position: absolute;
+  z-index: 200;
+  display: flex;
+  justify-content: center;
+  box-shadow: $box-shadow-highest;
+  top: 1rem;
+  left: 1rem;
+  right: 1rem;
+}
+.token-expire-warning .content p {
+  padding-right: $size-6;
+}
+.token-expire-warning .message-in-page {
+  margin: 0;
+}
+.token-expire-warning .message {
+  width: 100%;
+}

ui/app/styles/core.scss

@@ -65,6 +65,7 @@
 @import "./components/sidebar";
 @import "./components/status-menu";
 @import "./components/sub-nav";
+@import "./components/token-expire-warning";
 @import "./components/tool-tip";
 @import "./components/upgrade-overlay";
 @import "./components/vault-loading";

ui/app/templates/components/identity/item-aliases.hbs

@@ -17,7 +17,7 @@
         <div class="has-text-grey">
           {{item.id}}
         </div>
-        <span class="tag"> {{item.mountType}} </span>
+        <span class="tag">{{item.mountType}}</span>
         <span class="has-text-grey is-size-8">
           {{item.mountAccessor}}
         </span>

ui/app/templates/components/token-expire-warning.hbs

@@ -3,7 +3,7 @@
     {{#message-in-page type="danger"}}
       <div class="content">
         <p>
-        Your auth token expired at {{moment-format auth.tokenExpirationDate 'YYYY-MM-DD HH:mm:ss'}}.
+        Your auth token expired on {{moment-format auth.tokenExpirationDate 'MMMM Do YYYY, h:mm:ss a'}}. You will need to re-authenticate.
         </p>
       </div>
       <button type="button" class="button" {{action "reauthenticate"}}>
@@ -14,9 +14,9 @@
     {{#message-in-page type="warning"}}
       <div class="content">
         <p>
-          We've determined you are inactive, and have stopped auto-renewing your current auth token.
-          Your token will expire in {{moment-from-now auth.tokenExpirationDate interval=1000 hideSuffix=true}} at
-          {{moment-format auth.tokenExpirationDate 'YYYY-MM-DD HH:mm:ss'}}
+          We've stopped auto-renewing your current auth token due to inactivity.
+          Your token will expire in {{moment-from-now auth.tokenExpirationDate interval=1000 hideSuffix=true}} on
+          {{moment-format auth.tokenExpirationDate 'MMMM Do YYYY, h:mm:ss a'}}
         </p>
         <button type="button" class="button" {{action "renewToken"}}>Resume auto-renewal</button>
       </div>

ui/app/templates/vault/cluster/access/error.hbs

@@ -0,0 +1,25 @@
+    {{#if (eq model.httpStatus 404)}}
+      {{not-found model=model}}
+    {{else}}
+      <header class="page-header">
+        <div class="level">
+          <div class="level-left">
+            <h1 class="title is-3 has-text-grey">
+              {{#if (eq model.httpStatus 403)}}
+                Not authorized
+              {{else}}
+                Error
+              {{/if}}
+            </h1>
+          </div>
+        </div>
+      </header>
+      <div class="box is-sideless has-background-white-bis has-text-grey has-text-centered">
+        {{#if model.message}}
+          <p>{{model.message}}</p>
+        {{/if}}
+        {{#each model.errors as |error|}}
+          <p>{{error}}</p>
+        {{/each}}
+      </div>
+    {{/if}}

ui/app/templates/vault/cluster/access/identity/aliases/index.hbs

@@ -25,7 +25,7 @@
           <div class="has-text-grey">
             {{item.id}}
           </div>
-          <span class="tag"> {{item.mountType}} </span> 
+          <span class="tag">{{item.mountType}}</span>
           <span class="has-text-grey is-size-8">
             {{item.mountAccessor}}
           </span>

ui/app/templates/vault/cluster/access/identity/index.hbs

@@ -27,11 +27,8 @@
           </div>
         </div>
         <div class="column is-3 is-hidden-mobile">
-          {{#if (eq item.identityType "entity")}}
-            {{#if item.aliases.length}}
-              {{pluralize item.aliases.length "alias"}}
-            {{/if}}
-          {{else}}
+          {{#if item.aliases.length}}
+            {{pluralize item.aliases.length "alias"}}
           {{/if}}
         </div>
         <div class="column has-text-right">