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}} +
{{instructions}}
+- 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.
-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.
-- 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.
-
Let's use "
- 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.
- 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.
- 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.
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 @@
- 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.
- 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?
{{#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}}
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.
-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.
-- 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.
-- 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.
- 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.
-- 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.
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.
- 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.
- 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.
- 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.
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.
- 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.