From 33053dee50eeaf99f497425794ec180b6ccd341a Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Wed, 29 Aug 2018 17:16:50 -0600 Subject: [PATCH] Animate wizard trigger, move instructions text to make things clearer --- ui/app/styles/components/ui-wizard.scss | 12 ++++++++++-- ui/app/styles/utils/_bulma_variables.scss | 5 ++--- ui/app/templates/components/wizard-section.hbs | 6 ++++++ ui/app/templates/components/wizard/auth-details.hbs | 8 ++++---- ui/app/templates/components/wizard/auth-edit.hbs | 9 +++++---- ui/app/templates/components/wizard/auth-enable.hbs | 7 ++++--- ui/app/templates/components/wizard/auth-idle.hbs | 3 ++- ui/app/templates/components/wizard/auth-list.hbs | 9 +++++---- .../templates/components/wizard/policies-create.hbs | 1 + .../templates/components/wizard/policies-delete.hbs | 9 +++++---- .../templates/components/wizard/policies-details.hbs | 9 +++++---- .../templates/components/wizard/policies-intro.hbs | 9 +++++---- .../components/wizard/replication-details.hbs | 2 +- .../components/wizard/replication-setup.hbs | 3 ++- .../templates/components/wizard/secrets-details.hbs | 3 ++- .../templates/components/wizard/secrets-enable.hbs | 7 ++++--- ui/app/templates/components/wizard/secrets-idle.hbs | 7 ++++--- ui/app/templates/components/wizard/secrets-list.hbs | 9 +++++---- ui/app/templates/components/wizard/secrets-role.hbs | 3 ++- .../templates/components/wizard/secrets-secret.hbs | 9 +++++---- ui/app/templates/components/wizard/tools-info.hbs | 9 +++++---- ui/app/templates/components/wizard/tools-lookup.hbs | 7 ++++--- ui/app/templates/components/wizard/tools-rewrap.hbs | 9 +++++---- .../templates/components/wizard/tools-rewrapped.hbs | 9 +++++---- ui/app/templates/components/wizard/tools-unwrap.hbs | 9 +++++---- .../templates/components/wizard/tools-unwrapped.hbs | 6 +++--- ui/app/templates/components/wizard/tools-wrap.hbs | 7 ++++--- ui/app/templates/components/wizard/tools-wrapped.hbs | 9 +++++---- 28 files changed, 115 insertions(+), 80 deletions(-) diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 8ab26f2560..1b084367d5 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/ui/app/styles/components/ui-wizard.scss @@ -8,6 +8,7 @@ display: flex; flex-direction: column; flex-grow: 1; + transition: padding $speed; } .ui-wizard-container .app-content.wizard-open { @@ -32,7 +33,7 @@ overflow: auto; p { - line-height: 1.2; + line-height: 1.33; } .dismiss-collapsed { @@ -64,7 +65,9 @@ } .wizard-header { - margin-bottom: $size-5; + border-bottom: $light-border; + padding-bottom: $size-8; + margin-bottom: $size-4; position: relative; .icon { @@ -81,6 +84,7 @@ } .ui-wizard.collapsed { + animation: drop-fade-above $speed-slow; color: $white; background: $black; bottom: auto; @@ -142,3 +146,7 @@ margin-top: $size-4; border-top: 1px solid $grey-light; } + +.wizard-instructions { + margin: $size-4 0; +} diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss index 24343932db..af61e9b863 100644 --- a/ui/app/styles/utils/_bulma_variables.scss +++ b/ui/app/styles/utils/_bulma_variables.scss @@ -69,9 +69,8 @@ $menu-item-hover-color: $white; $progress-bar-background-color: lighten($grey-light, 15%); -$base-border: 1px solid $grey-light; -$component-border: 1px solid $grey; -$layout-border: $base-border; +$base-border: 1px solid $ui-gray-300; +$light-border: 1px solid $ui-gray-200; //menu $menu-item-hover-color: $text; diff --git a/ui/app/templates/components/wizard-section.hbs b/ui/app/templates/components/wizard-section.hbs index 1cc42ed0a2..fe6f362d26 100644 --- a/ui/app/templates/components/wizard-section.hbs +++ b/ui/app/templates/components/wizard-section.hbs @@ -6,6 +6,12 @@ {{headerText}} {{yield}} + {{#if instructions}} +
+

What to do

+

{{instructions}}

+
+ {{/if}} {{#if docText}} {{docText}} diff --git a/ui/app/templates/components/wizard/auth-details.hbs b/ui/app/templates/components/wizard/auth-details.hbs index ae5f06cd9e..955280f2ae 100644 --- a/ui/app/templates/components/wizard/auth-details.hbs +++ b/ui/app/templates/components/wizard/auth-details.hbs @@ -1,5 +1,5 @@ - @@ -7,7 +7,7 @@ Fantastic! Now you're ready to use your new {{mountName}} auth method!

- @@ -17,4 +17,4 @@ - \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/auth-edit.hbs b/ui/app/templates/components/wizard/auth-edit.hbs index 27147d5cc5..5c29e06fd4 100644 --- a/ui/app/templates/components/wizard/auth-edit.hbs +++ b/ui/app/templates/components/wizard/auth-edit.hbs @@ -1,9 +1,10 @@ -

- You can update your new auth method configuration here. Click the "View method" link to see its details. + You can update your new auth method configuration here.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/auth-enable.hbs b/ui/app/templates/components/wizard/auth-enable.hbs index 0bc2143f1f..df732ecbd1 100644 --- a/ui/app/templates/components/wizard/auth-enable.hbs +++ b/ui/app/templates/components/wizard/auth-enable.hbs @@ -1,9 +1,10 @@ -

Great! Now you can customize this method with a name and description that makes sense for your team, and fill out any options that are specific to this method.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/auth-idle.hbs b/ui/app/templates/components/wizard/auth-idle.hbs index 5ca00017e3..70e42ad20d 100644 --- a/ui/app/templates/components/wizard/auth-idle.hbs +++ b/ui/app/templates/components/wizard/auth-idle.hbs @@ -2,8 +2,9 @@ @headerText="Enabling an Auth Method" @docText="Docs: Authentication Methods" @docPath="/docs/auth/index.html" + @instructions='Choose an authentication method and click "Next" to get started.' >

- Controlling who can see your secrets is important. Let's set up a an authentication method for you and your team to use. Don't worry, you can add more methods later. Choose an authentication method to get started. + Controlling who can see your secrets is important. Let's set up a an authentication method for you and your team to use. Don't worry, you can add more methods later.

diff --git a/ui/app/templates/components/wizard/auth-list.hbs b/ui/app/templates/components/wizard/auth-list.hbs index 5af42e5dbb..b30f409874 100644 --- a/ui/app/templates/components/wizard/auth-list.hbs +++ b/ui/app/templates/components/wizard/auth-list.hbs @@ -1,9 +1,10 @@ -

- Awesome! Now you can see your new auth method in the list. Click the ellipsis menu for your method and then click "View Configuration" to see its details. + Awesome! Now you can see your new auth method in the list.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/policies-create.hbs b/ui/app/templates/components/wizard/policies-create.hbs index 1b5c27d87a..bf573e261e 100644 --- a/ui/app/templates/components/wizard/policies-create.hbs +++ b/ui/app/templates/components/wizard/policies-create.hbs @@ -3,6 +3,7 @@ @headerText="Creating a policy" @docText="Docs: Policies" @docPath="/docs/concepts/policies.html" + @instructions='Fill in your policy details and click "Create Policy".' >

Let's use "my-new-policy" for your policy name. Copy the policy below to try it out: diff --git a/ui/app/templates/components/wizard/policies-delete.hbs b/ui/app/templates/components/wizard/policies-delete.hbs index 720db0f82f..b80d278e65 100644 --- a/ui/app/templates/components/wizard/policies-delete.hbs +++ b/ui/app/templates/components/wizard/policies-delete.hbs @@ -1,11 +1,12 @@ -

- You can delete your test policy by clicking the "..." icon to the right of the policy name. Click on "Delete" to remove it. + You can delete your test policy by clicking the "..." icon to the right of the policy name.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/policies-details.hbs b/ui/app/templates/components/wizard/policies-details.hbs index 89ee539d8e..da74179eb3 100644 --- a/ui/app/templates/components/wizard/policies-details.hbs +++ b/ui/app/templates/components/wizard/policies-details.hbs @@ -1,11 +1,12 @@ -

- Good job! Here you can see your new policy. If you'd like to edit it, you'd just click the "Edit" toggle. Let's go back to the list of policies by clicking on "ACL Policies" in the sidebar. + Good job! Here you can see your new policy. If you'd like to edit it, you'd just click the "Edit" toggle.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/policies-intro.hbs b/ui/app/templates/components/wizard/policies-intro.hbs index 35d3fce1e1..eecf818c67 100644 --- a/ui/app/templates/components/wizard/policies-intro.hbs +++ b/ui/app/templates/components/wizard/policies-intro.hbs @@ -1,11 +1,12 @@ -

- Policies in Vault are a way for you to control what data can be accessed, including things like creating new secrets, listing users, or even entire Vault features. To get started with something simple, click on "Create ACL policy" + Policies in Vault are a way for you to control what data can be accessed, including things like creating new secrets, listing users, or even entire Vault features.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/replication-details.hbs b/ui/app/templates/components/wizard/replication-details.hbs index 10d1d466e0..6baf51649f 100644 --- a/ui/app/templates/components/wizard/replication-details.hbs +++ b/ui/app/templates/components/wizard/replication-details.hbs @@ -5,7 +5,7 @@ @docPath="/docs/internals/replication.html" >

- Here you can see the details about your new replication cluster, manage or disable replication, and handle secondary clusters. You can also get a quick status by hovering over the "Replication" link at the top. + Here you can see the details about your new replication cluster, manage or disable replication, and handle secondary clusters. You can also get a quick status by hovering over the "Replication" link at the top.

diff --git a/ui/app/templates/components/wizard/replication-setup.hbs b/ui/app/templates/components/wizard/replication-setup.hbs index 628f9e101b..23ac6056e1 100644 --- a/ui/app/templates/components/wizard/replication-setup.hbs +++ b/ui/app/templates/components/wizard/replication-setup.hbs @@ -3,9 +3,10 @@ @headerText="Setting up Replication" @docText="Docs: Replication" @docPath="/docs/internals/replication.html" + @instructions='Choose the one that is right for your needs and click "Enable Replication"' >

- Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access? Choose the one that is right for your needs. + Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access?

diff --git a/ui/app/templates/components/wizard/secrets-details.hbs b/ui/app/templates/components/wizard/secrets-details.hbs index 0c3d93fb03..ea028aa67f 100644 --- a/ui/app/templates/components/wizard/secrets-details.hbs +++ b/ui/app/templates/components/wizard/secrets-details.hbs @@ -1,11 +1,12 @@

{{#if needsEncryption}} The Transit Secrets Engine uses encryption keys to provide "encryption as a service". Click on "Create Encryption Key" at the top to create one. {{else}} - Now that we've mounted the {{secretType}} Secrets Engine, let's add a {{nextStep}}. Click on the link in the page header. + Now that we've mounted the {{secretType}} Secrets Engine, let's add a {{nextStep}}. {{/if}}

diff --git a/ui/app/templates/components/wizard/secrets-enable.hbs b/ui/app/templates/components/wizard/secrets-enable.hbs index 6a9d5551f8..88b0db0489 100644 --- a/ui/app/templates/components/wizard/secrets-enable.hbs +++ b/ui/app/templates/components/wizard/secrets-enable.hbs @@ -1,9 +1,10 @@ -

Good choice! Now you can customize your engine with a name and description that makes sense for your team, as well as options for replication and caching.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/secrets-idle.hbs b/ui/app/templates/components/wizard/secrets-idle.hbs index 9d2dc3a665..33a657044c 100644 --- a/ui/app/templates/components/wizard/secrets-idle.hbs +++ b/ui/app/templates/components/wizard/secrets-idle.hbs @@ -1,9 +1,10 @@ -

Vault is all about managing secrets, so let's set up your first secrets engine. You can use a static engine to store your secrets locally in Vault, or connect to a cloud backend with one of the dynamic engines.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/secrets-list.hbs b/ui/app/templates/components/wizard/secrets-list.hbs index 84043b06e5..fc555b37b3 100644 --- a/ui/app/templates/components/wizard/secrets-list.hbs +++ b/ui/app/templates/components/wizard/secrets-list.hbs @@ -1,7 +1,8 @@ -

- This engine isn't fully supported in the Vault UI yet, but you can view and edit the configuration and use the Vault Browser CLI to interact with the engine just like you would on the command-ine. Find the engine in the list and click on "View Configuration" in the menu on the right. + This engine isn't fully supported in the Vault UI yet, but you can view and edit the configuration and use the Vault Browser CLI to interact with the engine just like you would on the command-line.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/secrets-role.hbs b/ui/app/templates/components/wizard/secrets-role.hbs index 7d5a9c842b..c533949ac0 100644 --- a/ui/app/templates/components/wizard/secrets-role.hbs +++ b/ui/app/templates/components/wizard/secrets-role.hbs @@ -1,7 +1,8 @@

- A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions. Enter your role details and save it. + A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions.

diff --git a/ui/app/templates/components/wizard/secrets-secret.hbs b/ui/app/templates/components/wizard/secrets-secret.hbs index 9a64708ba4..a393b514a1 100644 --- a/ui/app/templates/components/wizard/secrets-secret.hbs +++ b/ui/app/templates/components/wizard/secrets-secret.hbs @@ -1,7 +1,8 @@ -

- Enter the details of your secret and save it. + Here you can specify the path of your secret and include the key/value pairs to include.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-info.hbs b/ui/app/templates/components/wizard/tools-info.hbs index 3f76323210..b5ccec70a1 100644 --- a/ui/app/templates/components/wizard/tools-info.hbs +++ b/ui/app/templates/components/wizard/tools-info.hbs @@ -1,11 +1,12 @@ -

- Good job! You can see some basic information about your wrapped data, including the expiration time. Next up, we'll take the token you still have in your clipboard and rewrap it to keep it active and extend that expiration time. Click on "Rewrap" in the sidebar. + Good job! You can see some basic information about your wrapped data, including the expiration time. Next up, we'll take the token you still have in your clipboard and rewrap it to keep it active and extend that expiration time.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-lookup.hbs b/ui/app/templates/components/wizard/tools-lookup.hbs index 59b8849c58..de20a55fc6 100644 --- a/ui/app/templates/components/wizard/tools-lookup.hbs +++ b/ui/app/templates/components/wizard/tools-lookup.hbs @@ -1,11 +1,12 @@ -

Lookup lets you see information about your token without unwrapping it or changing it. Paste your token here and click "Lookup". If you find that your data didn't copy for some reason, you can always go back and do it again.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-rewrap.hbs b/ui/app/templates/components/wizard/tools-rewrap.hbs index 4343f450bf..dcb27284fb 100644 --- a/ui/app/templates/components/wizard/tools-rewrap.hbs +++ b/ui/app/templates/components/wizard/tools-rewrap.hbs @@ -1,11 +1,12 @@ -

- Paste your token into the input and click "Rewrap Token" to transform your token into a new one. Don't worry though, it will still have the same data. + You can rewrap your data to rotate the token, but it will still have the same creation time and TTL. Don't worry, the new token will still have the same data.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-rewrapped.hbs b/ui/app/templates/components/wizard/tools-rewrapped.hbs index 3f7ea86088..c80610d219 100644 --- a/ui/app/templates/components/wizard/tools-rewrapped.hbs +++ b/ui/app/templates/components/wizard/tools-rewrapped.hbs @@ -1,11 +1,12 @@ -

- It's a subtle transformation, but your old token has been revoked and this new one has taken its place. Copy this one and then click on "Unwrap" in the sidebar to make sure the data is still in there. + It's a subtle transformation, but your old token has been revoked and this new one has taken its place.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-unwrap.hbs b/ui/app/templates/components/wizard/tools-unwrap.hbs index 2333fce3c5..46dc9d4387 100644 --- a/ui/app/templates/components/wizard/tools-unwrap.hbs +++ b/ui/app/templates/components/wizard/tools-unwrap.hbs @@ -1,11 +1,12 @@ -

- We saved this step for the end because unwrapping the token will revoke it, so we can only do this once. Paste your token into the input and click "Unwrap Data" + We saved this step for the end because unwrapping the token will revoke it, so we can only do this once.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-unwrapped.hbs b/ui/app/templates/components/wizard/tools-unwrapped.hbs index f7db9a75cc..b605be3421 100644 --- a/ui/app/templates/components/wizard/tools-unwrapped.hbs +++ b/ui/app/templates/components/wizard/tools-unwrapped.hbs @@ -1,6 +1,6 @@ - @@ -11,4 +11,4 @@ - \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-wrap.hbs b/ui/app/templates/components/wizard/tools-wrap.hbs index bbcadf5f6e..79c186091b 100644 --- a/ui/app/templates/components/wizard/tools-wrap.hbs +++ b/ui/app/templates/components/wizard/tools-wrap.hbs @@ -1,11 +1,12 @@ -

Vault provides several ways to create or wrap data, and manage it from there. Here you can wrap a token (or anything you like) in JSON format. Give it a try.

- \ No newline at end of file + diff --git a/ui/app/templates/components/wizard/tools-wrapped.hbs b/ui/app/templates/components/wizard/tools-wrapped.hbs index 65b7f60d06..517b438938 100644 --- a/ui/app/templates/components/wizard/tools-wrapped.hbs +++ b/ui/app/templates/components/wizard/tools-wrapped.hbs @@ -1,11 +1,12 @@ -

- Your data is now encrypted. You can recover the data using the token on this page, but be careful because if you lose the token you won't be able to retrieve your data! We will use this token for the next few steps, so copy the token and then click on "Lookup" in the sidebar. + Your data is now encrypted. You can recover the data using the token on this page, but be careful because if you lose the token you won't be able to retrieve your data! We will use this token for the next few steps.

- \ No newline at end of file +