diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 8ab26f256..1b084367d 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 24343932d..af61e9b86 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 1cc42ed0a..fe6f362d2 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 ae5f06cd9..955280f2a 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 27147d5cc..5c29e06fd 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 0bc2143f1..df732ecbd 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 5ca00017e..70e42ad20 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 5af42e5db..b30f40987 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 1b5c27d87..bf573e261 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 720db0f82..b80d278e6 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 89ee539d8..da74179eb 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 35d3fce1e..eecf818c6 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 10d1d466e..6baf51649 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 628f9e101..23ac6056e 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 0c3d93fb0..ea028aa67 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 6a9d5551f..88b0db048 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 9d2dc3a66..33a657044 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 84043b06e..fc555b37b 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 7d5a9c842..c533949ac 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 9a64708ba..a393b514a 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 3f7632321..b5ccec70a 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 59b8849c5..de20a55fc 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 4343f450b..dcb27284f 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 3f7ea8608..c80610d21 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 2333fce3c..46dc9d438 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 f7db9a75c..b605be342 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 bbcadf5f6..79c186091 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 65b7f60d0..517b43893 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 +