Auth and Error View Updates (#19749)

* adds vault logo to auth page * updates top level error template
hashicorp · Apr 6, 2023 · 8048c5a · 8048c5a
1 parent 354cbdb
commit 8048c5a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 26 deletions.
diff --git a/ui/app/styles/components/icon.scss b/ui/app/styles/components/icon.scss
@@ -60,3 +60,11 @@
 .icon-blue {
   color: $blue;
 }
+
+.brand-icon-large {
+  width: 62px;
+}
+
+.error-icon {
+  width: 48px;
+}
diff --git a/ui/app/styles/core/helpers.scss b/ui/app/styles/core/helpers.scss
@@ -12,6 +12,9 @@
 .is-no-underline {
   text-decoration: none;
 }
+.has-line-height-1 {
+  line-height: 1;
+}
 .is-sideless {
   box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
 }
@@ -245,6 +248,9 @@
 .has-top-padding-xxl {
   padding-top: $spacing-xxl;
 }
+.has-bottom-padding-l {
+  padding-bottom: $spacing-l;
+}
 .has-bottom-margin-xs {
   margin-bottom: $spacing-xs;
 }

diff --git a/ui/app/templates/vault/cluster/auth.hbs b/ui/app/templates/vault/cluster/auth.hbs
@@ -22,6 +22,11 @@
         <LogoEdition aria-label="Sign in with Hashicorp Vault" />
       </div>
     {{else}}
+      <div class="is-flex-v-centered has-bottom-margin-xxl">
+        <div class="brand-icon-large">
+          <Icon @name="vault" @size="24" @stretched={{true}} />
+        </div>
+      </div>
       <div class="is-flex-row">
         {{#if this.mfaAuthData}}
           <button type="button" class="icon-button" {{on "click" (fn (mut this.mfaAuthData) null)}}>

diff --git a/ui/app/templates/vault/error.hbs b/ui/app/templates/vault/error.hbs
@@ -1,27 +1,45 @@
-<section class="section">
-  <div class="container">
-    {{#if (eq this.model.httpStatus 404)}}
-      <NotFound @model={{this.model}} />
-    {{else}}
-      <PageHeader as |p|>
-        <p.levelLeft>
-          <h1 class="title is-3 has-text-grey">
-            {{#if (eq this.model.httpStatus 403)}}
-              Not authorized
-            {{else}}
-              Error
-            {{/if}}
-          </h1>
-        </p.levelLeft>
-      </PageHeader>
-      <BlockError>
-        {{#if this.model.message}}
-          <p>{{this.model.message}}</p>
-        {{/if}}
-        {{#each this.model.errors as |error|}}
-          <p>{{error}}</p>
-        {{/each}}
-      </BlockError>
-    {{/if}}
+<div class="is-flex-1 is-flex-v-centered">
+  <div class="empty-state-content">
+    <div class="is-flex-v-centered has-bottom-margin-xxl">
+      <div class="brand-icon-large">
+        <Icon @name="vault" @size="24" @stretched={{true}} />
+      </div>
+    </div>
+    <div class="is-flex-center">
+      <div class="error-icon">
+        <Icon @name="help" @size="24" class="has-text-grey" @stretched={{true}} />
+      </div>
+      <div class="has-left-margin-s">
+        <h1 class="is-size-4 has-text-semibold has-text-grey has-line-height-1">
+          {{#if (eq this.model.httpStatus 403)}}
+            Not authorized
+          {{else if (eq this.model.httpStatus 404)}}
+            Page not found
+          {{else}}
+            Error
+          {{/if}}
+        </h1>
+        <p class="has-text-grey is-size-8">Error {{this.model.httpStatus}}</p>
+      </div>
+    </div>
+
+    <p class="has-text-grey has-top-margin-m has-bottom-padding-l has-border-bottom-light">
+      {{#if (eq this.model.httpStatus 404)}}
+        Sorry, we were unable to find any content at that URL. Double check it or go back home.
+      {{else}}
+        {{this.model.message}}
+        {{join ". " this.model.errors}}
+      {{/if}}
+    </p>
+
+    <div class="is-flex-between has-top-margin-s">
+      <ExternalLink @href="/" @sameTab={{true}} class="is-no-underline is-flex-center has-text-semibold">
+        <Chevron @direction="left" />
+        Go home
+      </ExternalLink>
+      <DocLink @path="/vault/api-docs#http-status-codes">
+        Learn more
+      </DocLink>
+    </div>
   </div>
-</section>
+</div>