From 36c8366d5d2f2cc058bebfa31c00c7ca885bfa28 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Wed, 26 May 2021 13:59:11 -0500 Subject: [PATCH] UI unseal screen updates (#11705) * Styling for empty-state and splash-page * Update shamir-flow language and trigger onError on non-400 error * Add license terminated screen to unseal * Add changelog --- changelog/11705.txt | 3 + ui/app/controllers/vault/cluster/unseal.js | 5 ++ ui/app/styles/components/empty-state.scss | 10 +++ ui/app/styles/components/splash-page.scss | 2 +- ui/app/templates/vault/cluster/unseal.hbs | 86 +++++++++++++------ ui/lib/core/addon/components/empty-state.js | 2 +- ui/lib/core/addon/components/shamir-flow.js | 5 ++ .../templates/components/shamir-flow.hbs | 2 +- 8 files changed, 86 insertions(+), 29 deletions(-) create mode 100644 changelog/11705.txt diff --git a/changelog/11705.txt b/changelog/11705.txt new file mode 100644 index 000000000..42d683d81 --- /dev/null +++ b/changelog/11705.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Add specific error message if unseal fails due to license +``` diff --git a/ui/app/controllers/vault/cluster/unseal.js b/ui/app/controllers/vault/cluster/unseal.js index 7f975cd90..8d1e76adb 100644 --- a/ui/app/controllers/vault/cluster/unseal.js +++ b/ui/app/controllers/vault/cluster/unseal.js @@ -3,6 +3,7 @@ import Controller from '@ember/controller'; export default Controller.extend({ wizard: service(), + showLicenseError: false, actions: { transitionToCluster(resp) { @@ -19,5 +20,9 @@ export default Controller.extend({ isUnsealed(data) { return data.sealed === false; }, + + handleLicenseError() { + this.set('showLicenseError', true); + }, }, }); diff --git a/ui/app/styles/components/empty-state.scss b/ui/app/styles/components/empty-state.scss index 9f685794b..7a90a73ea 100644 --- a/ui/app/styles/components/empty-state.scss +++ b/ui/app/styles/components/empty-state.scss @@ -8,6 +8,16 @@ box-shadow: 0 -2px 0 -1px $ui-gray-300; } +.empty-state-transparent { + align-items: center; + color: $grey; + background: transparent; + display: flex; + justify-content: center; + padding: $spacing-xxl 0; + box-shadow: none; +} + .empty-state-content { max-width: 320px; } diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index 2b6c887ba..637bfd5fa 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -21,5 +21,5 @@ } .splash-page-header { - padding: $size-6 $size-5; + padding: $size-6 0; } diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs index 86be949bf..d135f5544 100644 --- a/ui/app/templates/vault/cluster/unseal.hbs +++ b/ui/app/templates/vault/cluster/unseal.hbs @@ -1,26 +1,60 @@ - - -

- Unseal Vault -

- - - - - - +{{#if showLicenseError}} + + + + + + + +
+ +
+ + +
+
+ +

License documentation

+ +
+
+{{else}} + + +

+ Unseal Vault +

+ + +
+

{{capitalize model.name}} is {{if model.unsealed 'unsealed' 'sealed'}}

+

+ Unseal Vault by entering portions of the unseal key. This can be done via multiple mechanisms on multiple computers. Once all portions are entered, the root key will be decrypted and Vault will unseal. +

+
+ + + +
+

Seal/unseal documentation

+
+ + +{{/if}} diff --git a/ui/lib/core/addon/components/empty-state.js b/ui/lib/core/addon/components/empty-state.js index 4a455e0d3..62b82ec1a 100644 --- a/ui/lib/core/addon/components/empty-state.js +++ b/ui/lib/core/addon/components/empty-state.js @@ -14,7 +14,7 @@ import layout from '../templates/components/empty-state'; * @param title=null{String} - A short label for the empty state * @param subTitle=null{String} - A sub title that goes underneath the main title * @param message=null{String} - A description of why a user might be seeing the empty state and possibly instructions for actions they may take. - * @param [icon='']{String} - An optional param to display icon to the right of the title + * @param [icon='']{String} - An optional param to display icon to the left of the title * @param bottomBorder=false{Boolean} - A bottom border underneath the message. Generally used when you have links under the message */ diff --git a/ui/lib/core/addon/components/shamir-flow.js b/ui/lib/core/addon/components/shamir-flow.js index 7f109f06e..b0426feb8 100644 --- a/ui/lib/core/addon/components/shamir-flow.js +++ b/ui/lib/core/addon/components/shamir-flow.js @@ -42,6 +42,7 @@ export default Component.extend(DEFAULTS, { }, onUpdate() {}, + onLicenseError() {}, onShamirSuccess() {}, // can be overridden w/an attr isComplete(data) { @@ -88,6 +89,10 @@ export default Component.extend(DEFAULTS, { if (e.httpStatus === 400) { this.set('errors', e.errors); } else { + // if licensing error, trigger parent method to handle + if (e.httpStatus === 500 && e.errors?.join(' ').includes('licensing is in an invalid state')) { + this.onLicenseError(); + } throw e; } }, diff --git a/ui/lib/core/addon/templates/components/shamir-flow.hbs b/ui/lib/core/addon/templates/components/shamir-flow.hbs index ace02e1d8..6b5bfa6b1 100644 --- a/ui/lib/core/addon/templates/components/shamir-flow.hbs +++ b/ui/lib/core/addon/templates/components/shamir-flow.hbs @@ -148,7 +148,7 @@
{{input class="input"type="password" name="key" value=key data-test-shamir-input=true}}