diff --git a/ui/app/components/auth-info.js b/ui/app/components/auth-info.js index ba44e5c71c1..50e9b3c495f 100644 --- a/ui/app/components/auth-info.js +++ b/ui/app/components/auth-info.js @@ -1,9 +1,10 @@ import Ember from 'ember'; -export default Ember.Component.extend({ - auth: Ember.inject.service(), - - routing: Ember.inject.service('-routing'), +const { Component, inject, computed, run } = Ember; +export default Component.extend({ + auth: inject.service(), + wizard: inject.service(), + routing: inject.service('-routing'), transitionToRoute: function() { var router = this.get('routing.router'); @@ -12,12 +13,15 @@ export default Ember.Component.extend({ classNames: 'user-menu auth-info', - isRenewing: Ember.computed.or('fakeRenew', 'auth.isRenewing'), + isRenewing: computed.or('fakeRenew', 'auth.isRenewing'), actions: { + restartGuide() { + this.get('wizard').restartGuide(); + }, renewToken() { this.set('fakeRenew', true); - Ember.run.later(() => { + run.later(() => { this.set('fakeRenew', false); this.get('auth').renew(); }, 200); diff --git a/ui/app/components/doc-link.js b/ui/app/components/doc-link.js index 892cb2ffe06..6a2a9088751 100644 --- a/ui/app/components/doc-link.js +++ b/ui/app/components/doc-link.js @@ -5,6 +5,7 @@ const { Component, computed } = Ember; export default Component.extend({ tagName: 'a', + classNames: ['doc-link'], attributeBindings: ['target', 'rel', 'href'], layout: hbs`{{yield}}`, @@ -14,6 +15,6 @@ export default Component.extend({ path: '/', href: computed('path', function() { - return `https://www.vaultproject.io/docs${this.get('path')}`; + return `https://www.vaultproject.io${this.get('path')}`; }), }); diff --git a/ui/app/components/generate-credentials.js b/ui/app/components/generate-credentials.js index b8ddd912242..d6851ad94f5 100644 --- a/ui/app/components/generate-credentials.js +++ b/ui/app/components/generate-credentials.js @@ -26,6 +26,7 @@ const MODEL_TYPES = { }; export default Component.extend({ + wizard: inject.service(), store: inject.service(), routing: inject.service('-routing'), // set on the component @@ -57,6 +58,16 @@ export default Component.extend({ this.createOrReplaceModel(); }, + didReceiveAttrs() { + if (this.get('wizard.featureState') === 'displayRole') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'CONTINUE', + this.get('backend.type') + ); + } + }, + willDestroy() { this.get('model').unloadRecord(); this._super(...arguments); @@ -84,10 +95,21 @@ export default Component.extend({ create() { let model = this.get('model'); this.set('loading', true); - model.save().finally(() => { - model.set('hasGenerated', true); - this.set('loading', false); - }); + this.model + .save() + .catch(() => { + if (this.get('wizard.featureState') === 'credentials') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'ERROR', + this.get('backend.type') + ); + } + }) + .finally(() => { + model.set('hasGenerated', true); + this.set('loading', false); + }); }, codemirrorUpdated(attr, val, codemirror) { diff --git a/ui/app/components/i-con.js b/ui/app/components/i-con.js index d079d451aa1..cc82e8f5155 100644 --- a/ui/app/components/i-con.js +++ b/ui/app/components/i-con.js @@ -3,6 +3,10 @@ import hbs from 'htmlbars-inline-precompile'; const { computed } = Ember; const GLYPHS_WITH_SVG_TAG = [ + 'learn', + 'video', + 'tour', + 'stopwatch', 'download', 'folder', 'file', @@ -16,7 +20,7 @@ const GLYPHS_WITH_SVG_TAG = [ 'upload', 'control-lock', 'edition-enterprise', - 'edition-oss' + 'edition-oss', ]; export default Ember.Component.extend({ @@ -40,11 +44,12 @@ export default Ember.Component.extend({ glyph: null, excludeSVG: computed('glyph', function() { - return GLYPHS_WITH_SVG_TAG.includes(this.get('glyph')); + let glyph = this.get('glyph'); + return glyph.startsWith('enable/') || GLYPHS_WITH_SVG_TAG.includes(glyph); }), - size: computed(function() { - return 12; + size: computed('glyph', function() { + return this.get('glyph').startsWith('enable/') ? 48 : 12; }), partialName: computed('glyph', function() { diff --git a/ui/app/components/mount-backend-form.js b/ui/app/components/mount-backend-form.js index d9c48dfd68e..4c0abbb047e 100644 --- a/ui/app/components/mount-backend-form.js +++ b/ui/app/components/mount-backend-form.js @@ -1,12 +1,15 @@ import Ember from 'ember'; import { task } from 'ember-concurrency'; import { methods } from 'vault/helpers/mountable-auth-methods'; +import { engines } from 'vault/helpers/mountable-secret-engines'; -const { inject } = Ember; +const { inject, computed, Component } = Ember; const METHODS = methods(); +const ENGINES = engines(); -export default Ember.Component.extend({ +export default Component.extend({ store: inject.service(), + wizard: inject.service(), flashMessages: inject.service(), routing: inject.service('-routing'), @@ -38,23 +41,29 @@ export default Ember.Component.extend({ */ mountModel: null, + showConfig: false, + init() { this._super(...arguments); const type = this.get('mountType'); const modelType = type === 'secret' ? 'secret-engine' : 'auth-method'; const model = this.get('store').createRecord(modelType); this.set('mountModel', model); - this.changeConfigModel(model.get('type')); }, + mountTypes: computed('mountType', function() { + return this.get('mountType') === 'secret' ? ENGINES : METHODS; + }), + willDestroy() { // if unsaved, we want to unload so it doesn't show up in the auth mount list this.get('mountModel').rollbackAttributes(); }, getConfigModelType(methodType) { + let mountType = this.get('mountType'); let noConfig = ['approle']; - if (noConfig.includes(methodType)) { + if (mountType === 'secret' || noConfig.includes(methodType)) { return; } if (methodType === 'aws') { @@ -64,27 +73,32 @@ export default Ember.Component.extend({ }, changeConfigModel(methodType) { - const mount = this.get('mountModel'); - const configRef = mount.hasMany('authConfigs').value(); - const currentConfig = configRef.get('firstObject'); + let mount = this.get('mountModel'); + if (this.get('mountType') === 'secret') { + return; + } + let configRef = mount.hasMany('authConfigs').value(); + let currentConfig = configRef.get('firstObject'); if (currentConfig) { // rollbackAttributes here will remove the the config model from the store // because `isNew` will be true currentConfig.rollbackAttributes(); + currentConfig.unloadRecord(); } - const configType = this.getConfigModelType(methodType); + let configType = this.getConfigModelType(methodType); if (!configType) return; - const config = this.get('store').createRecord(configType); + let config = this.get('store').createRecord(configType); config.set('backend', mount); }, checkPathChange(type) { - const mount = this.get('mountModel'); - const currentPath = mount.get('path'); + let mount = this.get('mountModel'); + let currentPath = mount.get('path'); + let list = this.get('mountTypes'); // if the current path matches a type (meaning the user hasn't altered it), // change it here to match the new type - const isUnchanged = METHODS.findBy('type', currentPath); - if (isUnchanged) { + let isUnchanged = list.findBy('type', currentPath); + if (!currentPath || isUnchanged) { mount.set('path', type); } }, @@ -101,6 +115,10 @@ export default Ember.Component.extend({ this.get('flashMessages').success( `Successfully mounted ${type} ${this.get('mountType')} method at ${path}.` ); + if (this.get('mountType') === 'secret') { + yield this.get('onMountSuccess')(type, path); + return; + } yield this.get('saveConfig').perform(mountModel); }).drop(), @@ -111,11 +129,16 @@ export default Ember.Component.extend({ try { if (config && Object.keys(config.changedAttributes()).length) { yield config.save(); + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'CONTINUE', + this.get('mountModel').get('type') + ); this.get('flashMessages').success( `The config for ${type} ${this.get('mountType')} method at ${path} was saved successfully.` ); } - yield this.get('onMountSuccess')(); + yield this.get('onMountSuccess')(type, path); } catch (err) { this.get('flashMessages').danger( `There was an error saving the configuration for ${type} ${this.get( @@ -129,9 +152,27 @@ export default Ember.Component.extend({ actions: { onTypeChange(path, value) { if (path === 'type') { + this.get('wizard').set('componentState', value); this.changeConfigModel(value); this.checkPathChange(value); } }, + + toggleShowConfig(value) { + this.set('showConfig', value); + if (value === true && this.get('wizard.featureState') === 'idle') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'CONTINUE', + this.get('mountModel').get('type') + ); + } else { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'RESET', + this.get('mountModel').get('type') + ); + } + }, }, }); diff --git a/ui/app/components/outer-html.js b/ui/app/components/outer-html.js new file mode 100644 index 00000000000..f071ff55109 --- /dev/null +++ b/ui/app/components/outer-html.js @@ -0,0 +1,11 @@ +// THIS COMPONENT IS ONLY FOR EXTENDING +// You should use this component if you want to use outerHTML symantics +// in your components - this is the default for upcoming Glimmer components +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: '', +}); + +// yep! that's it, it's more of a way to keep track of what components +// use tagless semantics to make the upgrade to glimmer components easier diff --git a/ui/app/components/popup-menu.js b/ui/app/components/popup-menu.js index e3ac4fb5c0a..ced037466a9 100644 --- a/ui/app/components/popup-menu.js +++ b/ui/app/components/popup-menu.js @@ -1,5 +1,5 @@ import Ember from 'ember'; export default Ember.Component.extend({ - tagName: '', + tagName: 'span', }); diff --git a/ui/app/components/replication-summary.js b/ui/app/components/replication-summary.js index 35ae26fe1df..3e68265e78c 100644 --- a/ui/app/components/replication-summary.js +++ b/ui/app/components/replication-summary.js @@ -2,7 +2,7 @@ import Ember from 'ember'; import decodeConfigFromJWT from 'vault/utils/decode-config-from-jwt'; import ReplicationActions from 'vault/mixins/replication-actions'; -const { computed, get } = Ember; +const { computed, get, Component, inject } = Ember; const DEFAULTS = { mode: 'primary', @@ -17,7 +17,9 @@ const DEFAULTS = { replicationMode: 'dr', }; -export default Ember.Component.extend(ReplicationActions, DEFAULTS, { +export default Component.extend(ReplicationActions, DEFAULTS, { + wizard: inject.service(), + version: inject.service(), didReceiveAttrs() { this._super(...arguments); const initialReplicationMode = this.get('initialReplicationMode'); @@ -28,7 +30,6 @@ export default Ember.Component.extend(ReplicationActions, DEFAULTS, { showModeSummary: false, initialReplicationMode: null, cluster: null, - version: Ember.inject.service(), replicationAttrs: computed.alias('cluster.replicationAttrs'), @@ -55,7 +56,6 @@ export default Ember.Component.extend(ReplicationActions, DEFAULTS, { ) { return false; } - return true; } ), @@ -66,7 +66,12 @@ export default Ember.Component.extend(ReplicationActions, DEFAULTS, { actions: { onSubmit(/*action, mode, data, event*/) { - return this.submitHandler(...arguments); + let promise = this.submitHandler(...arguments); + let wizard = this.get('wizard'); + promise.then(() => { + wizard.transitionFeatureMachine(wizard.get('featureState'), 'ENABLEREPLICATION'); + }); + return promise; }, clear() { diff --git a/ui/app/components/role-aws-edit.js b/ui/app/components/role-aws-edit.js index 23e6f6ae595..4021ce46b48 100644 --- a/ui/app/components/role-aws-edit.js +++ b/ui/app/components/role-aws-edit.js @@ -5,10 +5,6 @@ const { get, set } = Ember; const SHOW_ROUTE = 'vault.cluster.secrets.backend.show'; export default RoleEdit.extend({ - init() { - this._super(...arguments); - }, - actions: { createOrUpdate(type, event) { event.preventDefault(); @@ -21,13 +17,13 @@ export default RoleEdit.extend({ } var credential_type = get(this, 'model.credential_type'); - if (credential_type == "iam_user") { + if (credential_type == 'iam_user') { set(this, 'model.role_arns', []); } - if (credential_type == "assumed_role") { + if (credential_type == 'assumed_role') { set(this, 'model.policy_arns', []); } - if (credential_type == "federation_token") { + if (credential_type == 'federation_token') { set(this, 'model.role_arns', []); set(this, 'model.policy_arns', []); } diff --git a/ui/app/components/role-edit.js b/ui/app/components/role-edit.js index 4cc43763f68..dd179d685e4 100644 --- a/ui/app/components/role-edit.js +++ b/ui/app/components/role-edit.js @@ -2,7 +2,7 @@ import Ember from 'ember'; import FocusOnInsertMixin from 'vault/mixins/focus-on-insert'; import keys from 'vault/lib/keycodes'; -const { get, set, computed } = Ember; +const { get, set, computed, inject } = Ember; const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root'; const SHOW_ROUTE = 'vault.cluster.secrets.backend.show'; @@ -12,8 +12,31 @@ export default Ember.Component.extend(FocusOnInsertMixin, { onDataChange: () => {}, refresh: 'refresh', model: null, - routing: Ember.inject.service('-routing'), + routing: inject.service('-routing'), + wizard: inject.service(), requestInFlight: computed.or('model.isLoading', 'model.isReloading', 'model.isSaving'), + + didReceiveAttrs() { + this._super(...arguments); + if ( + (this.get('wizard.featureState') === 'details' && this.get('mode') === 'create') || + (this.get('wizard.featureState') === 'role' && this.get('mode') === 'show') + ) { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'CONTINUE', + this.get('backendType') + ); + } + if (this.get('wizard.featureState') === 'displayRole') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'NOOP', + this.get('backendType') + ); + } + }, + willDestroyElement() { const model = this.get('model'); if (get(model, 'isError')) { @@ -49,6 +72,9 @@ export default Ember.Component.extend(FocusOnInsertMixin, { const model = get(this, 'model'); return model[method]().then(() => { if (!Ember.get(model, 'isError')) { + if (this.get('wizard.featureState') === 'role') { + this.get('wizard').transitionFeatureMachine('role', 'CONTINUE', this.get('backendType')); + } successCallback(model); } }); diff --git a/ui/app/components/role-pki-edit.js b/ui/app/components/role-pki-edit.js index 25d06d37aaf..01340509501 100644 --- a/ui/app/components/role-pki-edit.js +++ b/ui/app/components/role-pki-edit.js @@ -1,3 +1,8 @@ import RoleEdit from './role-edit'; -export default RoleEdit.extend({}); +export default RoleEdit.extend({ + init() { + this._super(...arguments); + this.set('backendType', 'pki'); + }, +}); diff --git a/ui/app/components/role-ssh-edit.js b/ui/app/components/role-ssh-edit.js index 25d06d37aaf..7e8c5b5d67d 100644 --- a/ui/app/components/role-ssh-edit.js +++ b/ui/app/components/role-ssh-edit.js @@ -1,3 +1,8 @@ import RoleEdit from './role-edit'; -export default RoleEdit.extend({}); +export default RoleEdit.extend({ + init() { + this._super(...arguments); + this.set('backendType', 'ssh'); + }, +}); diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js index 45372cca492..ff115506a37 100644 --- a/ui/app/components/secret-edit.js +++ b/ui/app/components/secret-edit.js @@ -6,7 +6,7 @@ import KVObject from 'vault/lib/kv-object'; const LIST_ROUTE = 'vault.cluster.secrets.backend.list'; const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root'; const SHOW_ROUTE = 'vault.cluster.secrets.backend.show'; -const { get, computed } = Ember; +const { get, computed, inject } = Ember; export default Ember.Component.extend(FocusOnInsertMixin, { // a key model @@ -35,6 +35,8 @@ export default Ember.Component.extend(FocusOnInsertMixin, { hasLintError: false, + wizard: inject.service(), + init() { this._super(...arguments); const secrets = this.get('key.secretData'); @@ -45,6 +47,11 @@ export default Ember.Component.extend(FocusOnInsertMixin, { this.set('preferAdvancedEdit', true); } this.checkRows(); + if (this.get('wizard.featureState') === 'details' && this.get('mode') === 'create') { + let engine = this.get('key').backend.includes('kv') ? 'kv' : this.get('key').backend; + this.get('wizard').transitionFeatureMachine('details', 'CONTINUE', engine); + } + if (this.get('mode') === 'edit') { this.send('addRow'); } @@ -144,6 +151,9 @@ export default Ember.Component.extend(FocusOnInsertMixin, { return model[method]().then(() => { if (!Ember.get(model, 'isError')) { + if (this.get('wizard.featureState') === 'secret') { + this.get('wizard').transitionFeatureMachine('secret', 'CONTINUE'); + } successCallback(key); } }); diff --git a/ui/app/components/shamir-flow.js b/ui/app/components/shamir-flow.js index 7b0647b1c8d..48cd5ab12e7 100644 --- a/ui/app/components/shamir-flow.js +++ b/ui/app/components/shamir-flow.js @@ -26,15 +26,20 @@ export default Component.extend(DEFAULTS, { buttonText: 'Submit', thresholdPath: 'required', generateAction: false, - encoded_token: null, init() { + this._super(...arguments); if (this.get('fetchOnInit')) { this.attemptProgress(); } - return this._super(...arguments); }, + didInsertElement() { + this._super(...arguments); + this.onUpdate(this.getProperties(Object.keys(DEFAULTS))); + }, + + onUpdate() {}, onShamirSuccess() {}, // can be overridden w/an attr isComplete(data) { @@ -56,17 +61,23 @@ export default Component.extend(DEFAULTS, { hasProgress: computed.gt('progress', 0), actionSuccess(resp) { - const { isComplete, onShamirSuccess, thresholdPath } = this.getProperties( + let { onUpdate, isComplete, onShamirSuccess, thresholdPath } = this.getProperties( + 'onUpdate', 'isComplete', 'onShamirSuccess', 'thresholdPath' ); + let threshold = get(resp, thresholdPath); + let props = { + ...resp, + threshold, + }; this.stopLoading(); - this.set('threshold', get(resp, thresholdPath)); - this.setProperties(resp); - if (isComplete(resp)) { + this.setProperties(props); + onUpdate(props); + if (isComplete(props)) { this.reset(); - onShamirSuccess(resp); + onShamirSuccess(props); } }, diff --git a/ui/app/components/tool-actions-form.js b/ui/app/components/tool-actions-form.js index 61c9bea3357..916a1a29bdb 100644 --- a/ui/app/components/tool-actions-form.js +++ b/ui/app/components/tool-actions-form.js @@ -22,6 +22,7 @@ const WRAPPING_ENDPOINTS = ['lookup', 'wrap', 'unwrap', 'rewrap']; export default Ember.Component.extend(DEFAULTS, { store: Ember.inject.service(), + wizard: Ember.inject.service(), // putting these attrs here so they don't get reset when you click back //random bytes: 32, @@ -76,11 +77,13 @@ export default Ember.Component.extend(DEFAULTS, { props = Ember.assign({}, props, { unwrap_data: secret }); } props = Ember.assign({}, props, secret); - if (resp && resp.wrap_info) { const keyName = action === 'rewrap' ? 'rewrap_token' : 'token'; props = Ember.assign({}, props, { [keyName]: resp.wrap_info.token }); } + if (props.token || props.rewrap_token || props.unwrap_data || action === 'lookup') { + this.get('wizard').transitionFeatureMachine(this.get('wizard.featureState'), 'CONTINUE'); + } setProperties(this, props); }, diff --git a/ui/app/components/transit-edit.js b/ui/app/components/transit-edit.js index 56e11870791..3928b86dd75 100644 --- a/ui/app/components/transit-edit.js +++ b/ui/app/components/transit-edit.js @@ -2,7 +2,7 @@ import Ember from 'ember'; import FocusOnInsertMixin from 'vault/mixins/focus-on-insert'; import keys from 'vault/lib/keycodes'; -const { get, set, computed } = Ember; +const { get, set, computed, inject } = Ember; const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root'; const SHOW_ROUTE = 'vault.cluster.secrets.backend.show'; @@ -11,8 +11,14 @@ export default Ember.Component.extend(FocusOnInsertMixin, { onDataChange: null, refresh: 'refresh', key: null, - routing: Ember.inject.service('-routing'), + routing: inject.service('-routing'), requestInFlight: computed.or('key.isLoading', 'key.isReloading', 'key.isSaving'), + wizard: inject.service(), + + init() { + this._super(...arguments); + }, + willDestroyElement() { const key = this.get('key'); if (get(key, 'isError')) { @@ -48,6 +54,13 @@ export default Ember.Component.extend(FocusOnInsertMixin, { const key = get(this, 'key'); return key[method]().then(() => { if (!Ember.get(key, 'isError')) { + if (this.get('wizard.featureState') === 'secret') { + this.get('wizard').transitionFeatureMachine('secret', 'CONTINUE'); + } else { + if (this.get('wizard.featureState') === 'encryption') { + this.get('wizard').transitionFeatureMachine('encryption', 'CONTINUE', 'transit'); + } + } successCallback(key); } }); diff --git a/ui/app/components/ui-wizard.js b/ui/app/components/ui-wizard.js new file mode 100644 index 00000000000..82a028cf3bf --- /dev/null +++ b/ui/app/components/ui-wizard.js @@ -0,0 +1,61 @@ +import Ember from 'ember'; +import { matchesState } from 'xstate'; + +const { inject, computed } = Ember; + +export default Ember.Component.extend({ + classNames: ['ui-wizard-container'], + wizard: inject.service(), + auth: inject.service(), + + shouldRender: computed('wizard.showWhenUnauthenticated', 'auth.currentToken', function() { + return this.get('auth.currentToken') || this.get('wizard.showWhenUnauthenticated'); + }), + currentState: computed.alias('wizard.currentState'), + featureState: computed.alias('wizard.featureState'), + featureComponent: computed.alias('wizard.featureComponent'), + tutorialComponent: computed.alias('wizard.tutorialComponent'), + componentState: computed.alias('wizard.componentState'), + nextFeature: computed.alias('wizard.nextFeature'), + nextStep: computed.alias('wizard.nextStep'), + + actions: { + dismissWizard() { + this.get('wizard').transitionTutorialMachine(this.get('currentState'), 'DISMISS'); + }, + + advanceWizard() { + let inInit = matchesState('init', this.get('wizard.currentState')); + let event = inInit ? this.get('wizard.initEvent') || 'CONTINUE' : 'CONTINUE'; + this.get('wizard').transitionTutorialMachine(this.get('currentState'), event); + }, + + advanceFeature() { + this.get('wizard').transitionFeatureMachine(this.get('featureState'), 'CONTINUE'); + }, + + finishFeature() { + this.get('wizard').transitionFeatureMachine(this.get('featureState'), 'DONE'); + }, + + repeatStep() { + this.get('wizard').transitionFeatureMachine( + this.get('featureState'), + 'REPEAT', + this.get('componentState') + ); + }, + + resetFeature() { + this.get('wizard').transitionFeatureMachine( + this.get('featureState'), + 'RESET', + this.get('componentState') + ); + }, + + pauseWizard() { + this.get('wizard').transitionTutorialMachine(this.get('currentState'), 'PAUSE'); + }, + }, +}); diff --git a/ui/app/components/wizard-content.js b/ui/app/components/wizard-content.js new file mode 100644 index 00000000000..402c0b7fd1c --- /dev/null +++ b/ui/app/components/wizard-content.js @@ -0,0 +1,14 @@ +import Ember from 'ember'; + +const { Component, inject } = Ember; +export default Component.extend({ + wizard: inject.service(), + classNames: ['ui-wizard'], + glyph: null, + headerText: null, + actions: { + dismissWizard() { + this.get('wizard').transitionTutorialMachine(this.get('wizard.currentState'), 'DISMISS'); + }, + }, +}); diff --git a/ui/app/components/wizard-section.js b/ui/app/components/wizard-section.js new file mode 100644 index 00000000000..7163b9edfe0 --- /dev/null +++ b/ui/app/components/wizard-section.js @@ -0,0 +1,8 @@ +import outerHTMLComponent from './outer-html'; + +export default outerHTMLComponent.extend({ + headerText: null, + headerIcon: null, + docText: null, + docPath: null, +}); diff --git a/ui/app/components/wizard/features-selection.js b/ui/app/components/wizard/features-selection.js new file mode 100644 index 00000000000..dabc23e87ef --- /dev/null +++ b/ui/app/components/wizard/features-selection.js @@ -0,0 +1,75 @@ +import Ember from 'ember'; + +const { inject, computed } = Ember; + +export default Ember.Component.extend({ + wizard: inject.service(), + version: inject.service(), + init() { + this._super(...arguments); + this.maybeHideFeatures(); + }, + + maybeHideFeatures() { + if (this.get('showReplication') === false) { + let feature = this.get('allFeatures').findBy('key', 'replication'); + feature.show = false; + } + }, + + allFeatures: computed(function() { + return [ + { + key: 'secrets', + name: 'Secrets', + steps: ['Enabling a secrets engine', 'Adding a secret'], + selected: false, + show: true, + }, + { + key: 'authentication', + name: 'Authentication', + steps: ['Enabling an auth method', 'Managing your auth method'], + selected: false, + show: true, + }, + { + key: 'policies', + name: 'Policies', + steps: ['Choosing a policy type', 'Creating a policy', 'Deleting your policy', 'Other types of policies'], + selected: false, + show: true, + }, + { + key: 'replication', + name: 'Replication', + steps: ['Setting up replication', 'Your cluster information'], + selected: false, + show: true, + }, + { + key: 'tools', + name: 'Tools', + steps: ['Wrapping data', 'Lookup wrapped data', 'Rewrapping your data', 'Unwrapping your data'], + selected: false, + show: true, + }, + ]; + }), + + showReplication: computed('version.hasPerfReplication', 'version.hasDRReplication', function() { + return this.get('version.hasPerfReplication') || this.get('version.hasDRReplication'); + }), + + selectedFeatures: computed('allFeatures.@each.selected', function() { + return this.get('allFeatures').filterBy('selected').mapBy('key'); + }), + + actions: { + saveFeatures() { + let wizard = this.get('wizard'); + wizard.saveFeatures(this.get('selectedFeatures')); + wizard.transitionTutorialMachine('active.select', 'CONTINUE'); + }, + }, +}); diff --git a/ui/app/components/wizard/mounts-wizard.js b/ui/app/components/wizard/mounts-wizard.js new file mode 100644 index 00000000000..1a8edb58a88 --- /dev/null +++ b/ui/app/components/wizard/mounts-wizard.js @@ -0,0 +1,71 @@ +import Ember from 'ember'; +import { engines } from 'vault/helpers/mountable-secret-engines'; +import { methods } from 'vault/helpers/mountable-auth-methods'; +import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends'; +const supportedSecrets = supportedSecretBackends(); +import { supportedAuthBackends } from 'vault/helpers/supported-auth-backends'; +const supportedAuth = supportedAuthBackends(); +const { inject, computed } = Ember; + +export default Ember.Component.extend({ + wizard: inject.service(), + featureState: computed.alias('wizard.featureState'), + currentState: computed.alias('wizard.currentState'), + currentMachine: computed.alias('wizard.currentMachine'), + mountSubtype: computed.alias('wizard.componentState'), + fullNextStep: computed.alias('wizard.nextStep'), + nextFeature: computed.alias('wizard.nextFeature'), + nextStep: computed('fullNextStep', function() { + return this.get('fullNextStep').split('.').lastObject; + }), + needsEncryption: computed('mountSubtype', function() { + return this.get('mountSubtype') === 'transit'; + }), + stepComponent: computed.alias('wizard.stepComponent'), + detailsComponent: computed('mountSubtype', function() { + let suffix = this.get('currentMachine') === 'secrets' ? 'engine' : 'method'; + return this.get('mountSubtype') ? `wizard/${this.get('mountSubtype')}-${suffix}` : null; + }), + isSupported: computed('mountSubtype', function() { + if (this.get('currentMachine') === 'secrets') { + return supportedSecrets.includes(this.get('mountSubtype')); + } else { + return supportedAuth.includes(this.get('mountSubtype')); + } + }), + mountName: computed('mountSubtype', function() { + if (this.get('currentMachine') === 'secrets') { + var secret = engines().find(engine => { + return engine.type === this.get('mountSubtype'); + }); + if (secret) { + return secret.displayName; + } + } else { + var auth = methods().find(method => { + return method.type === this.get('mountSubtype'); + }); + if (auth) { + return auth.displayName; + } + } + return null; + }), + actionText: computed('mountSubtype', function() { + switch (this.get('mountSubtype')) { + case 'aws': + return 'Generate Credential'; + case 'ssh': + return 'Sign Keys'; + case 'pki': + return 'Generate Certificate'; + default: + return null; + } + }), + + onAdvance() {}, + onRepeat() {}, + onReset() {}, + onDone() {}, +}); diff --git a/ui/app/controllers/vault/cluster/init.js b/ui/app/controllers/vault/cluster/init.js index c04dd306dcd..4b163894566 100644 --- a/ui/app/controllers/vault/cluster/init.js +++ b/ui/app/controllers/vault/cluster/init.js @@ -10,6 +10,8 @@ const DEFAULTS = { }; export default Ember.Controller.extend(DEFAULTS, { + wizard: Ember.inject.service(), + reset() { this.setProperties(DEFAULTS); }, @@ -17,6 +19,8 @@ export default Ember.Controller.extend(DEFAULTS, { initSuccess(resp) { this.set('loading', false); this.set('keyData', resp); + this.get('wizard').set('initEvent', 'SAVE'); + this.get('wizard').transitionTutorialMachine(this.get('wizard.currentState'), 'TOSAVE'); }, initError(e) { diff --git a/ui/app/controllers/vault/cluster/policies/create.js b/ui/app/controllers/vault/cluster/policies/create.js index 1787086e22f..862d146bb46 100644 --- a/ui/app/controllers/vault/cluster/policies/create.js +++ b/ui/app/controllers/vault/cluster/policies/create.js @@ -5,7 +5,6 @@ import PolicyEditController from 'vault/mixins/policy-edit-controller'; export default Ember.Controller.extend(PolicyEditController, { showFileUpload: false, file: null, - actions: { setPolicyFromFile(index, fileInfo) { let { value, fileName } = fileInfo; diff --git a/ui/app/controllers/vault/cluster/policies/index.js b/ui/app/controllers/vault/cluster/policies/index.js index 8d02e0ad3c1..14934a2e1b4 100644 --- a/ui/app/controllers/vault/cluster/policies/index.js +++ b/ui/app/controllers/vault/cluster/policies/index.js @@ -3,6 +3,7 @@ let { inject } = Ember; export default Ember.Controller.extend({ flashMessages: inject.service(), + wizard: inject.service(), queryParams: { page: 'page', @@ -54,6 +55,9 @@ export default Ember.Controller.extend({ .destroyRecord() .then(() => { flash.success(`${policyType.toUpperCase()} policy "${name}" was successfully deleted.`); + if (this.get('wizard.featureState') === 'delete') { + this.get('wizard').transitionFeatureMachine('delete', 'CONTINUE', policyType); + } // this will clear the dataset cache on the store this.send('willTransition'); }) diff --git a/ui/app/controllers/vault/cluster/settings/auth/enable.js b/ui/app/controllers/vault/cluster/settings/auth/enable.js index 945a3bf89a3..3756cd71673 100644 --- a/ui/app/controllers/vault/cluster/settings/auth/enable.js +++ b/ui/app/controllers/vault/cluster/settings/auth/enable.js @@ -1,9 +1,13 @@ import Ember from 'ember'; export default Ember.Controller.extend({ + wizard: Ember.inject.service(), actions: { - onMountSuccess: function() { - return this.transitionToRoute('vault.cluster.access.methods'); + onMountSuccess: function(type) { + let transition = this.transitionToRoute('vault.cluster.access.methods'); + return transition.followRedirects().then(() => { + this.get('wizard').transitionFeatureMachine(this.get('wizard.featureState'), 'CONTINUE', type); + }); }, onConfigError: function(modelId) { return this.transitionToRoute('vault.cluster.settings.auth.configure', modelId); diff --git a/ui/app/controllers/vault/cluster/settings/mount-secret-backend.js b/ui/app/controllers/vault/cluster/settings/mount-secret-backend.js index 973d0544e96..eeabc2ef829 100644 --- a/ui/app/controllers/vault/cluster/settings/mount-secret-backend.js +++ b/ui/app/controllers/vault/cluster/settings/mount-secret-backend.js @@ -3,138 +3,24 @@ import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends const SUPPORTED_BACKENDS = supportedSecretBackends(); -const { computed } = Ember; - -export default Ember.Controller.extend({ - mountTypes: [ - { label: 'Active Directory', value: 'ad' }, - { label: 'AWS', value: 'aws' }, - { label: 'Consul', value: 'consul' }, - { label: 'Databases', value: 'database' }, - { label: 'Google Cloud', value: 'gcp' }, - { label: 'KV', value: 'kv' }, - { label: 'Nomad', value: 'nomad' }, - { label: 'PKI', value: 'pki' }, - { label: 'RabbitMQ', value: 'rabbitmq' }, - { label: 'SSH', value: 'ssh' }, - { label: 'Transit', value: 'transit' }, - { label: 'TOTP', value: 'totp' }, - { label: 'Cassandra', value: 'cassandra', deprecated: true }, - { label: 'MongoDB', value: 'mongodb', deprecated: true }, - { label: 'MSSQL', value: 'mssql', deprecated: true }, - { label: 'MySQL', value: 'mysql', deprecated: true }, - { label: 'PostgreSQL', value: 'postgresql', deprecated: true }, - ], - - selectedType: null, - selectedPath: null, - description: null, - default_lease_ttl: null, - max_lease_ttl: null, - showConfig: false, - local: false, - sealWrap: false, - version: 2, - - selection: computed('selectedType', function() { - return this.get('mountTypes').findBy('value', this.get('selectedType')); - }), - - flashMessages: Ember.inject.service(), - - reset() { - const defaultBackend = this.get('mountTypes.firstObject.value'); - this.setProperties({ - selectedPath: defaultBackend, - selectedType: defaultBackend, - description: null, - default_lease_ttl: null, - max_lease_ttl: null, - local: false, - showConfig: false, - sealWrap: false, - version: 2, - }); - }, - - init() { - this._super(...arguments); - this.reset(); - }, +const { inject, Controller } = Ember; +export default Controller.extend({ + wizard: inject.service(), actions: { - onTypeChange(val) { - const { selectedPath, selectedType } = this.getProperties('selectedPath', 'selectedType'); - this.set('selectedType', val); - if (selectedPath === selectedType) { - this.set('selectedPath', val); - } - }, - - toggleShowConfig() { - this.toggleProperty('showConfig'); - }, - - mountBackend() { - const { - selectedPath: path, - selectedType: type, - description, - default_lease_ttl, - local, - max_lease_ttl, - sealWrap, - version, - } = this.getProperties( - 'selectedPath', - 'selectedType', - 'description', - 'default_lease_ttl', - 'local', - 'max_lease_ttl', - 'sealWrap', - 'version' - ); - const currentModel = this.get('model'); - if (currentModel && currentModel.rollbackAttributes) { - currentModel.rollbackAttributes(); - } - let attrs = { - path, - type, - description, - local, - sealWrap, - }; - - if (this.get('showConfig')) { - attrs.config = { - defaultLeaseTtl: default_lease_ttl, - maxLeaseTtl: max_lease_ttl, - }; + onMountSuccess: function(type, path) { + let transition; + if (SUPPORTED_BACKENDS.includes(type)) { + transition = this.transitionToRoute('vault.cluster.secrets.backend.index', path); + } else { + transition = this.transitionToRoute('vault.cluster.secrets.backends'); } - - if (type === 'kv') { - attrs.options = { - version, - }; - } - - const model = this.store.createRecord('secret-engine', attrs); - - this.set('model', model); - model.save().then(() => { - this.reset(); - let transition; - if (SUPPORTED_BACKENDS.includes(type)) { - transition = this.transitionToRoute('vault.cluster.secrets.backend.index', path); - } else { - transition = this.transitionToRoute('vault.cluster.secrets.backends'); - } - transition.followRedirects().then(() => { - this.get('flashMessages').success(`Successfully mounted '${type}' at '${path}'!`); - }); + return transition.followRedirects().then(() => { + this.get('wizard').transitionFeatureMachine(this.get('wizard.featureState'), 'CONTINUE', type); }); }, + onConfigError: function(modelId) { + return this.transitionToRoute('vault.cluster.settings.configure-secret-backend', modelId); + }, }, }); diff --git a/ui/app/controllers/vault/cluster/unseal.js b/ui/app/controllers/vault/cluster/unseal.js index d20b3812511..5abcc4a8ce7 100644 --- a/ui/app/controllers/vault/cluster/unseal.js +++ b/ui/app/controllers/vault/cluster/unseal.js @@ -1,12 +1,20 @@ import Ember from 'ember'; export default Ember.Controller.extend({ + wizard: Ember.inject.service(), + actions: { - transitionToCluster() { + transitionToCluster(resp) { return this.get('model').reload().then(() => { + this.get('wizard').transitionTutorialMachine(this.get('wizard.currentState'), 'CONTINUE', resp); return this.transitionToRoute('vault.cluster', this.get('model.name')); }); }, + + setUnsealState(resp) { + this.get('wizard').set('componentState', resp); + }, + isUnsealed(data) { return data.sealed === false; }, diff --git a/ui/app/helpers/mountable-auth-methods.js b/ui/app/helpers/mountable-auth-methods.js index 06573e9dff9..e56d0872e3c 100644 --- a/ui/app/helpers/mountable-auth-methods.js +++ b/ui/app/helpers/mountable-auth-methods.js @@ -5,61 +5,76 @@ const MOUNTABLE_AUTH_METHODS = [ displayName: 'AppRole', value: 'approle', type: 'approle', + category: 'generic', }, { displayName: 'AWS', value: 'aws', type: 'aws', + category: 'cloud', }, { displayName: 'Azure', value: 'azure', type: 'azure', + category: 'cloud', }, { displayName: 'Google Cloud', value: 'gcp', type: 'gcp', + category: 'cloud', }, { displayName: 'GitHub', value: 'github', type: 'github', + category: 'cloud', }, { displayName: 'JWT/OIDC', value: 'jwt', type: 'jwt', + glyph: 'auth', + category: 'generic', }, { displayName: 'Kubernetes', value: 'kubernetes', type: 'kubernetes', + category: 'infra', }, { displayName: 'LDAP', value: 'ldap', type: 'ldap', + glyph: 'auth', + category: 'infra', }, { displayName: 'Okta', value: 'okta', type: 'okta', + category: 'infra', }, { displayName: 'RADIUS', value: 'radius', type: 'radius', + glyph: 'auth', + category: 'infra', }, { displayName: 'TLS Certificates', value: 'cert', type: 'cert', + category: 'generic', }, { displayName: 'Username & Password', value: 'userpass', type: 'userpass', + category: 'generic', }, ]; diff --git a/ui/app/helpers/mountable-secret-engines.js b/ui/app/helpers/mountable-secret-engines.js new file mode 100644 index 00000000000..4c2d95032de --- /dev/null +++ b/ui/app/helpers/mountable-secret-engines.js @@ -0,0 +1,83 @@ +import Ember from 'ember'; + +const MOUNTABLE_SECRET_ENGINES = [ + { + displayName: 'Active Directory', + value: 'ad', + type: 'ad', + glyph: 'azure', + category: 'cloud', + }, + { + displayName: 'AWS', + value: 'aws', + type: 'aws', + category: 'cloud', + }, + { + displayName: 'Consul', + value: 'consul', + type: 'consul', + category: 'infra', + }, + { + displayName: 'Databases', + value: 'database', + type: 'database', + category: 'infra', + }, + { + displayName: 'Google Cloud', + value: 'gcp', + type: 'gcp', + category: 'cloud', + }, + { + displayName: 'KV', + value: 'kv', + type: 'kv', + category: 'generic', + }, + { + displayName: 'Nomad', + value: 'nomad', + type: 'nomad', + category: 'infra', + }, + { + displayName: 'PKI Certificates', + value: 'pki', + type: 'pki', + category: 'generic', + }, + { + displayName: 'RabbitMQ', + value: 'rabbitmq', + type: 'rabbitmq', + category: 'infra', + }, + { + displayName: 'SSH', + value: 'ssh', + type: 'ssh', + category: 'generic', + }, + { + displayName: 'Transit', + value: 'transit', + type: 'transit', + category: 'generic', + }, + { + displayName: 'TOTP', + value: 'totp', + type: 'totp', + category: 'generic', + }, +]; + +export function engines() { + return MOUNTABLE_SECRET_ENGINES; +} + +export default Ember.Helper.helper(engines); diff --git a/ui/app/machines/auth-machine.js b/ui/app/machines/auth-machine.js new file mode 100644 index 00000000000..cec39a9896b --- /dev/null +++ b/ui/app/machines/auth-machine.js @@ -0,0 +1,50 @@ +export default { + key: 'auth', + initial: 'idle', + on: { + RESET: 'idle', + DONE: 'complete', + }, + states: { + idle: { + onEntry: [ + { type: 'routeTransition', params: ['vault.cluster.settings.auth.enable'] }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + { type: 'render', level: 'step', component: 'wizard/auth-idle' }, + ], + on: { + CONTINUE: 'enable', + }, + }, + enable: { + onEntry: [ + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + { type: 'render', level: 'step', component: 'wizard/auth-enable' }, + ], + on: { + CONTINUE: 'list', + }, + }, + list: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/auth-list' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + DETAILS: 'details', + }, + }, + details: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/auth-details' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'complete', + }, + }, + complete: { + onEntry: ['completeFeature'], + }, + }, +}; diff --git a/ui/app/machines/policies-machine.js b/ui/app/machines/policies-machine.js new file mode 100644 index 00000000000..fce6140dc4d --- /dev/null +++ b/ui/app/machines/policies-machine.js @@ -0,0 +1,42 @@ +export default { + key: 'policies', + initial: 'idle', + states: { + idle: { + onEntry: [ + { type: 'routeTransition', params: ['vault.cluster.policies.index', 'acl'] }, + { type: 'render', level: 'feature', component: 'wizard/policies-intro' }, + ], + on: { + CONTINUE: 'create', + }, + }, + create: { + on: { + CONTINUE: 'details', + }, + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/policies-create' }], + }, + details: { + on: { + CONTINUE: 'delete', + }, + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/policies-details' }], + }, + delete: { + on: { + CONTINUE: 'others', + }, + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/policies-delete' }], + }, + others: { + on: { + CONTINUE: 'complete', + }, + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/policies-others' }], + }, + complete: { + onEntry: ['completeFeature'], + }, + }, +}; diff --git a/ui/app/machines/replication-machine.js b/ui/app/machines/replication-machine.js new file mode 100644 index 00000000000..2a0efc1d772 --- /dev/null +++ b/ui/app/machines/replication-machine.js @@ -0,0 +1,25 @@ +export default { + key: 'replication', + initial: 'setup', + states: { + setup: { + on: { + ENABLEREPLICATION: 'details', + }, + onEntry: [ + { type: 'routeTransition', params: ['vault.cluster.replication'] }, + { type: 'render', level: 'feature', component: 'wizard/replication-setup' }, + ], + }, + details: { + on: { + CONTINUE: 'complete', + }, + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/replication-details' }], + }, + complete: { + onEntry: ['completeFeature'], + on: { RESET: 'idle' }, + }, + }, +}; diff --git a/ui/app/machines/secrets-machine.js b/ui/app/machines/secrets-machine.js new file mode 100644 index 00000000000..8ac5eba70c1 --- /dev/null +++ b/ui/app/machines/secrets-machine.js @@ -0,0 +1,143 @@ +import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends'; +const supportedBackends = supportedSecretBackends(); + +export default { + key: 'secrets', + initial: 'idle', + on: { + RESET: 'idle', + DONE: 'complete', + ERROR: 'error', + }, + states: { + idle: { + onEntry: [ + { type: 'routeTransition', params: ['vault.cluster.settings.mount-secret-backend'] }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + { type: 'render', level: 'step', component: 'wizard/secrets-idle' }, + ], + on: { + CONTINUE: 'enable', + }, + }, + enable: { + onEntry: [ + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + { type: 'render', level: 'step', component: 'wizard/secrets-enable' }, + ], + on: { + CONTINUE: { + details: { cond: type => supportedBackends.includes(type) }, + list: { cond: type => !supportedBackends.includes(type) }, + }, + }, + }, + details: { + onEntry: [ + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + { type: 'render', level: 'step', component: 'wizard/secrets-details' }, + ], + on: { + CONTINUE: { + role: { + cond: type => ['pki', 'aws', 'ssh'].includes(type), + }, + secret: { + cond: type => ['cubbyhole', 'database', 'gcp', 'kv', 'nomad', 'rabbitmq', 'totp'].includes(type), + }, + encryption: { + cond: type => type === 'transit', + }, + }, + }, + }, + encryption: { + onEntry: [ + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + { type: 'render', level: 'step', component: 'wizard/secrets-encryption' }, + ], + on: { + CONTINUE: 'display', + }, + }, + credentials: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/secrets-credentials' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'display', + }, + }, + role: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/secrets-role' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'displayRole', + }, + }, + displayRole: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/secrets-display-role' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'credentials', + }, + }, + secret: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/secrets-secret' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'display', + }, + }, + display: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/secrets-display' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + REPEAT: { + role: { + cond: type => ['pki', 'aws', 'ssh'].includes(type), + actions: [{ type: 'routeTransition', params: ['vault.cluster.secrets.backend.create-root'] }], + }, + secret: { + cond: type => ['cubbyhole', 'database', 'gcp', 'kv', 'nomad', 'rabbitmq', 'totp'].includes(type), + actions: [{ type: 'routeTransition', params: ['vault.cluster.secrets.backend.create-root'] }], + }, + encryption: { + cond: type => type === 'transit', + actions: [{ type: 'routeTransition', params: ['vault.cluster.secrets.backend.create-root'] }], + }, + }, + }, + }, + list: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/secrets-list' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'display', + }, + }, + error: { + onEntry: [ + { type: 'render', level: 'step', component: 'wizard/tutorial-error' }, + { type: 'render', level: 'feature', component: 'wizard/mounts-wizard' }, + ], + on: { + CONTINUE: 'complete', + }, + }, + complete: { + onEntry: ['completeFeature'], + }, + }, +}; diff --git a/ui/app/machines/tools-machine.js b/ui/app/machines/tools-machine.js new file mode 100644 index 00000000000..bde48906985 --- /dev/null +++ b/ui/app/machines/tools-machine.js @@ -0,0 +1,61 @@ +export default { + key: 'tools', + initial: 'wrap', + states: { + wrap: { + onEntry: [ + { type: 'routeTransition', params: ['vault.cluster.tools'] }, + { type: 'render', level: 'feature', component: 'wizard/tools-wrap' }, + ], + on: { + CONTINUE: 'wrapped', + }, + }, + wrapped: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-wrapped' }], + on: { + LOOKUP: 'lookup', + }, + }, + lookup: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-lookup' }], + on: { + CONTINUE: 'info', + }, + }, + info: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-info' }], + on: { + REWRAP: 'rewrap', + }, + }, + rewrap: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-rewrap' }], + on: { + CONTINUE: 'rewrapped', + }, + }, + rewrapped: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-rewrapped' }], + on: { + UNWRAP: 'unwrap', + }, + }, + unwrap: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-unwrap' }], + on: { + CONTINUE: 'unwrapped', + }, + }, + unwrapped: { + onEntry: [{ type: 'render', level: 'feature', component: 'wizard/tools-unwrapped' }], + on: { + CONTINUE: 'complete', + }, + }, + complete: { + onEntry: ['completeFeature'], + on: { RESET: 'idle' }, + }, + }, +}; diff --git a/ui/app/machines/tutorial-machine.js b/ui/app/machines/tutorial-machine.js new file mode 100644 index 00000000000..76c32d34bc1 --- /dev/null +++ b/ui/app/machines/tutorial-machine.js @@ -0,0 +1,109 @@ +export default { + key: 'tutorial', + initial: 'idle', + on: { + DISMISS: 'dismissed', + DONE: 'complete', + PAUSE: 'paused', + }, + states: { + init: { + key: 'init', + initial: 'idle', + on: { INITDONE: 'active.select' }, + onEntry: [ + 'showTutorialAlways', + { type: 'render', level: 'tutorial', component: 'wizard/tutorial-idle' }, + { type: 'render', level: 'feature', component: null }, + ], + onExit: ['showTutorialWhenAuthenticated'], + states: { + idle: { + on: { + START: 'active.setup', + SAVE: 'active.save', + UNSEAL: 'active.unseal', + LOGIN: 'active.login', + }, + }, + active: { + onEntry: { type: 'render', level: 'tutorial', component: 'wizard/tutorial-active' }, + states: { + setup: { + on: { TOSAVE: 'save' }, + onEntry: { type: 'render', level: 'feature', component: 'wizard/init-setup' }, + }, + save: { + on: { TOUNSEAL: 'unseal' }, + onEntry: { type: 'render', level: 'feature', component: 'wizard/init-save-keys' }, + }, + unseal: { + on: { TOLOGIN: 'login' }, + onEntry: { type: 'render', level: 'feature', component: 'wizard/init-unseal' }, + }, + login: { + onEntry: { type: 'render', level: 'feature', component: 'wizard/init-login' }, + }, + }, + }, + }, + }, + active: { + key: 'feature', + initial: 'select', + onEntry: { type: 'render', level: 'tutorial', component: 'wizard/tutorial-active' }, + states: { + select: { + on: { + CONTINUE: 'feature', + }, + onEntry: { type: 'render', level: 'feature', component: 'wizard/features-selection' }, + }, + feature: {}, + }, + }, + idle: { + on: { + INIT: 'init.idle', + AUTH: 'active.select', + CONTINUE: 'active', + }, + onEntry: [ + { type: 'render', level: 'feature', component: null }, + { type: 'render', level: 'step', component: null }, + { type: 'render', level: 'detail', component: null }, + { type: 'render', level: 'tutorial', component: 'wizard/tutorial-idle' }, + ], + }, + dismissed: { + onEntry: [ + { type: 'render', level: 'tutorial', component: null }, + { type: 'render', level: 'feature', component: null }, + { type: 'render', level: 'step', component: null }, + { type: 'render', level: 'detail', component: null }, + 'handleDismissed', + ], + }, + paused: { + on: { + CONTINUE: 'active.feature', + }, + onEntry: [ + { type: 'render', level: 'feature', component: null }, + { type: 'render', level: 'step', component: null }, + { type: 'render', level: 'detail', component: null }, + { type: 'render', level: 'tutorial', component: 'wizard/tutorial-paused' }, + 'handlePaused', + ], + onExit: ['handleResume'], + }, + complete: { + onEntry: [ + { type: 'render', level: 'feature', component: null }, + { type: 'render', level: 'step', component: null }, + { type: 'render', level: 'detail', component: null }, + { type: 'render', level: 'tutorial', component: 'wizard/tutorial-complete' }, + ], + }, + }, +}; diff --git a/ui/app/mixins/policy-edit-controller.js b/ui/app/mixins/policy-edit-controller.js index 69f425f7487..a353c6d8aad 100644 --- a/ui/app/mixins/policy-edit-controller.js +++ b/ui/app/mixins/policy-edit-controller.js @@ -4,6 +4,7 @@ let { inject } = Ember; export default Ember.Mixin.create({ flashMessages: inject.service(), + wizard: inject.service(), actions: { deletePolicy(model) { let policyType = model.get('policyType'); @@ -29,6 +30,9 @@ export default Ember.Mixin.create({ let name = model.get('name'); model.save().then(m => { flash.success(`${policyType.toUpperCase()} policy "${name}" was successfully saved.`); + if (this.get('wizard.featureState') === 'create') { + this.get('wizard').transitionFeatureMachine('create', 'CONTINUE', policyType); + } return this.transitionToRoute('vault.cluster.policy.show', m.get('policyType'), m.get('name')); }); }, diff --git a/ui/app/models/auth-method.js b/ui/app/models/auth-method.js index 0dcb063e8a2..06e5768e760 100644 --- a/ui/app/models/auth-method.js +++ b/ui/app/models/auth-method.js @@ -2,7 +2,6 @@ import Ember from 'ember'; import DS from 'ember-data'; import { fragment } from 'ember-data-model-fragments/attributes'; import { queryRecord } from 'ember-computed-query'; -import { methods } from 'vault/helpers/mountable-auth-methods'; import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs'; import { memberAction } from 'ember-api-actions'; import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities'; @@ -10,8 +9,6 @@ import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities'; const { attr, hasMany } = DS; const { computed } = Ember; -const METHODS = methods(); - const configPath = function configPath(strings, key) { return function(...values) { return `${strings[0]}${values[key]}${strings[1]}`; @@ -19,15 +16,10 @@ const configPath = function configPath(strings, key) { }; export default DS.Model.extend({ authConfigs: hasMany('auth-config', { polymorphic: true, inverse: 'backend', async: false }), - path: attr('string', { - defaultValue: METHODS[0].value, - }), + path: attr('string'), accessor: attr('string'), name: attr('string'), - type: attr('string', { - defaultValue: METHODS[0].value, - possibleValues: METHODS, - }), + type: attr('string'), // namespaces introduced types with a `ns_` prefix for built-in engines // so we need to strip that to normalize the type methodType: computed('type', function() { @@ -37,8 +29,14 @@ export default DS.Model.extend({ editType: 'textarea', }), config: fragment('mount-config', { defaultValue: {} }), - local: attr('boolean'), - sealWrap: attr('boolean'), + local: attr('boolean', { + helpText: + 'When replication is enabled, a local mount will not be replicated across clusters. This can only be specified at mount time.', + }), + sealWrap: attr('boolean', { + helpText: + 'When enabled - if a seal supporting seal wrapping is specified in the configuration, all critical security parameters (CSPs) in this backend will be seal wrapped. (For K/V mounts, all values will be seal wrapped.) This can only be specified at mount time.', + }), // used when the `auth` prefix is important, // currently only when setting perf mount filtering @@ -74,7 +72,7 @@ export default DS.Model.extend({ ], formFieldGroups: [ - { default: ['type', 'path'] }, + { default: ['path'] }, { 'Method Options': [ 'description', diff --git a/ui/app/models/mount-options.js b/ui/app/models/mount-options.js index 9870456f689..ad4d70def42 100644 --- a/ui/app/models/mount-options.js +++ b/ui/app/models/mount-options.js @@ -4,5 +4,9 @@ import Fragment from 'ember-data-model-fragments/fragment'; export default Fragment.extend({ version: attr('number', { label: 'Version', + helpText: + 'The KV Secrets engine can operate in different modes. Version 1 is the original generic secrets engine the allows for storing of static key/value pairs. Version 2 added more features including data versioning, TTLs, and check and set.', + possibleValues: [2, 1], + defaultFormValue: 2, }), }); diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js index 93d2c28a3a6..f1f15b6f336 100644 --- a/ui/app/models/secret-engine.js +++ b/ui/app/models/secret-engine.js @@ -3,7 +3,7 @@ import DS from 'ember-data'; import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities'; import { fragment } from 'ember-data-model-fragments/attributes'; -import { expandAttributeMeta } from 'vault/utils/field-to-attrs'; +import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs'; const { attr } = DS; const { computed } = Ember; @@ -16,12 +16,22 @@ export default DS.Model.extend({ path: attr('string'), accessor: attr('string'), name: attr('string'), - type: attr('string'), - description: attr('string'), + type: attr('string', { + label: 'Secret engine type', + }), + description: attr('string', { + editType: 'textarea', + }), config: fragment('mount-config', { defaultValue: {} }), options: fragment('mount-options', { defaultValue: {} }), - local: attr('boolean'), - sealWrap: attr('boolean'), + local: attr('boolean', { + helpText: + 'When replication is enabled, a local mount will not be replicated across clusters. This can only be specified at mount time.', + }), + sealWrap: attr('boolean', { + helpText: + 'When enabled - if a seal supporting seal wrapping is specified in the configuration, all critical security parameters (CSPs) in this backend will be seal wrapped. (For K/V mounts, all values will be seal wrapped.) This can only be specified at mount time.', + }), modelTypeForKV: computed('engineType', 'options.version', function() { let type = this.get('engineType'); @@ -33,21 +43,51 @@ export default DS.Model.extend({ return modelType; }), - formFields: [ - 'type', - 'path', - 'description', - 'accessor', - 'local', - 'sealWrap', - 'config.{defaultLeaseTtl,maxLeaseTtl}', - 'options.{version}', - ], + formFields: computed('engineType', function() { + let type = this.get('engineType'); + let fields = [ + 'type', + 'path', + 'description', + 'accessor', + 'local', + 'sealWrap', + 'config.{defaultLeaseTtl,maxLeaseTtl,auditNonHmacRequestKeys,auditNonHmacResponseKeys,passthroughRequestHeaders}', + ]; + if (type === 'kv' || type === 'generic') { + fields.push('options.{version}'); + } + return fields; + }), + + formFieldGroups: computed('engineType', function() { + let type = this.get('engineType'); + let defaultGroup = { default: ['path'] }; + if (type === 'kv' || type === 'generic') { + defaultGroup.default.push('options.{version}'); + } + return [ + defaultGroup, + { + 'Method Options': [ + 'description', + 'config.listingVisibility', + 'local', + 'sealWrap', + 'config.{defaultLeaseTtl,maxLeaseTtl,auditNonHmacRequestKeys,auditNonHmacResponseKeys,passthroughRequestHeaders}', + ], + }, + ]; + }), attrs: computed('formFields', function() { return expandAttributeMeta(this, this.get('formFields')); }), + fieldGroups: computed('formFieldGroups', function() { + return fieldToAttrs(this, this.get('formFieldGroups')); + }), + // namespaces introduced types with a `ns_` prefix for built-in engines // so we need to strip that to normalize the type engineType: computed('type', function() { diff --git a/ui/app/routes/application.js b/ui/app/routes/application.js index 6c026e6de35..010c6f81204 100644 --- a/ui/app/routes/application.js +++ b/ui/app/routes/application.js @@ -5,6 +5,7 @@ const { inject } = Ember; export default Ember.Route.extend({ controlGroup: inject.service(), routing: inject.service('router'), + wizard: inject.service(), namespaceService: inject.service('namespace'), actions: { @@ -55,5 +56,27 @@ export default Ember.Route.extend({ return true; }, + didTransition() { + let wizard = this.get('wizard'); + + if (wizard.get('currentState') !== 'active.feature') { + return true; + } + Ember.run.next(() => { + let applicationURL = this.get('routing.currentURL'); + let activeRoute = this.get('routing.currentRouteName'); + + if (this.get('wizard.setURLAfterTransition')) { + this.set('wizard.setURLAfterTransition', false); + this.set('wizard.expectedURL', applicationURL); + this.set('wizard.expectedRouteName', activeRoute); + } + let expectedRouteName = this.get('wizard.expectedRouteName'); + if (this.get('routing').isActive(expectedRouteName) === false) { + wizard.transitionTutorialMachine(wizard.get('currentState'), 'PAUSE'); + } + }); + return true; + }, }, }); diff --git a/ui/app/routes/vault/cluster/access/control-group-accessor.js b/ui/app/routes/vault/cluster/access/control-group-accessor.js index 85481748500..3ceaa104a9a 100644 --- a/ui/app/routes/vault/cluster/access/control-group-accessor.js +++ b/ui/app/routes/vault/cluster/access/control-group-accessor.js @@ -12,7 +12,9 @@ export default Ember.Route.extend(UnloadModel, { }, model(params) { - return this.get('version.isOSS') ? null : this.store.findRecord('control-group', params.accessor); + return this.get('version').hasFeature('Control Groups') + ? this.store.findRecord('control-group', params.accessor) + : null; }, actions: { diff --git a/ui/app/routes/vault/cluster/access/control-groups.js b/ui/app/routes/vault/cluster/access/control-groups.js index 787768d89bc..26cd741c0db 100644 --- a/ui/app/routes/vault/cluster/access/control-groups.js +++ b/ui/app/routes/vault/cluster/access/control-groups.js @@ -12,6 +12,6 @@ export default Ember.Route.extend(UnloadModel, { }, model() { - return this.get('version.isOSS') ? null : this.store.createRecord('control-group'); + return this.get('version').hasFeature('Control Groups') ? this.store.createRecord('control-group') : null; }, }); diff --git a/ui/app/routes/vault/cluster/access/method/section.js b/ui/app/routes/vault/cluster/access/method/section.js index 2c94c6153b7..04edcdc71ae 100644 --- a/ui/app/routes/vault/cluster/access/method/section.js +++ b/ui/app/routes/vault/cluster/access/method/section.js @@ -2,6 +2,7 @@ import Ember from 'ember'; import DS from 'ember-data'; export default Ember.Route.extend({ + wizard: Ember.inject.service(), model(params) { const { section_name: section } = params; if (section !== 'configuration') { @@ -9,7 +10,13 @@ export default Ember.Route.extend({ Ember.set(error, 'httpStatus', 404); throw error; } - return this.modelFor('vault.cluster.access.method'); + let backend = this.modelFor('vault.cluster.access.method'); + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'DETAILS', + backend.get('type') + ); + return backend; }, setupController(controller) { diff --git a/ui/app/routes/vault/cluster/auth.js b/ui/app/routes/vault/cluster/auth.js index e28d66e7c65..978e425df84 100644 --- a/ui/app/routes/vault/cluster/auth.js +++ b/ui/app/routes/vault/cluster/auth.js @@ -7,6 +7,7 @@ const { inject } = Ember; export default ClusterRouteBase.extend({ flashMessages: inject.service(), version: inject.service(), + wizard: inject.service(), beforeModel() { return this._super().then(() => { return this.get('version').fetchFeatures(); @@ -25,4 +26,15 @@ export default ClusterRouteBase.extend({ this.get('flashMessages').stickyInfo(config.welcomeMessage); } }, + activate() { + this.get('wizard').set('initEvent', 'LOGIN'); + this.get('wizard').transitionTutorialMachine(this.get('wizard.currentState'), 'TOLOGIN'); + }, + actions: { + willTransition(transition) { + if (transition.targetName !== this.routeName) { + this.get('wizard').transitionTutorialMachine(this.get('wizard.currentState'), 'INITDONE'); + } + }, + }, }); diff --git a/ui/app/routes/vault/cluster/init.js b/ui/app/routes/vault/cluster/init.js index 875583f717c..2972d08af8f 100644 --- a/ui/app/routes/vault/cluster/init.js +++ b/ui/app/routes/vault/cluster/init.js @@ -1 +1,14 @@ -export { default } from './cluster-route-base'; +import Ember from 'ember'; +import ClusterRoute from './cluster-route-base'; + +const { inject } = Ember; + +export default ClusterRoute.extend({ + wizard: inject.service(), + + activate() { + // always start from idle instead of using the current state + this.get('wizard').transitionTutorialMachine('idle', 'INIT'); + this.get('wizard').set('initEvent', 'START'); + }, +}); diff --git a/ui/app/routes/vault/cluster/policies/create.js b/ui/app/routes/vault/cluster/policies/create.js index 8604648e1e0..a5a1f41415d 100644 --- a/ui/app/routes/vault/cluster/policies/create.js +++ b/ui/app/routes/vault/cluster/policies/create.js @@ -5,9 +5,16 @@ import UnsavedModelRoute from 'vault/mixins/unsaved-model-route'; const { inject } = Ember; export default Ember.Route.extend(UnloadModelRoute, UnsavedModelRoute, { version: inject.service(), + wizard: inject.service(), model() { let policyType = this.policyType(); - + if ( + policyType === 'acl' && + this.get('wizard.currentMachine') === 'policies' && + this.get('wizard.featureState') === 'idle' + ) { + this.get('wizard').transitionFeatureMachine(this.get('wizard.featureState'), 'CONTINUE'); + } if (!this.get('version.hasSentinel') && policyType !== 'acl') { return this.transitionTo('vault.cluster.policies', policyType); } diff --git a/ui/app/routes/vault/cluster/policies/index.js b/ui/app/routes/vault/cluster/policies/index.js index 4b310d506c9..389ab9fd186 100644 --- a/ui/app/routes/vault/cluster/policies/index.js +++ b/ui/app/routes/vault/cluster/policies/index.js @@ -5,6 +5,7 @@ const { inject } = Ember; export default Ember.Route.extend(ClusterRoute, { version: inject.service(), + wizard: inject.service(), queryParams: { page: { refreshModel: true, @@ -14,6 +15,12 @@ export default Ember.Route.extend(ClusterRoute, { }, }, + activate() { + if (this.get('wizard.featureState') === 'details') { + this.get('wizard').transitionFeatureMachine('details', 'CONTINUE', this.policyType()); + } + }, + shouldReturnEmptyModel(policyType, version) { return policyType !== 'acl' && (version.get('isOSS') || !version.get('hasSentinel')); }, diff --git a/ui/app/routes/vault/cluster/secrets/backend/configuration.js b/ui/app/routes/vault/cluster/secrets/backend/configuration.js index e18705600d6..bb0aaabb753 100644 --- a/ui/app/routes/vault/cluster/secrets/backend/configuration.js +++ b/ui/app/routes/vault/cluster/secrets/backend/configuration.js @@ -1,7 +1,16 @@ import Ember from 'ember'; export default Ember.Route.extend({ + wizard: Ember.inject.service(), model() { - return this.modelFor('vault.cluster.secrets.backend'); + let backend = this.modelFor('vault.cluster.secrets.backend'); + if (this.get('wizard.featureState') === 'list') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'CONTINUE', + backend.get('type') + ); + } + return backend; }, }); diff --git a/ui/app/routes/vault/cluster/secrets/backend/create.js b/ui/app/routes/vault/cluster/secrets/backend/create.js index 8c6aed12603..159e9ac28ec 100644 --- a/ui/app/routes/vault/cluster/secrets/backend/create.js +++ b/ui/app/routes/vault/cluster/secrets/backend/create.js @@ -20,6 +20,7 @@ var SecretProxy = Ember.Object.extend(KeyMixin, { }); export default EditBase.extend({ + wizard: Ember.inject.service(), createModel(transition, parentKey) { const { backend } = this.paramsFor('vault.cluster.secrets.backend'); const modelType = this.modelType(backend); @@ -27,6 +28,9 @@ export default EditBase.extend({ return this.store.createRecord(modelType, { keyType: 'ca' }); } if (modelType !== 'secret' && modelType !== 'secret-v2') { + if (this.get('wizard.featureState') === 'details' && this.get('wizard.componentState') === 'transit') { + this.get('wizard').transitionFeatureMachine('details', 'CONTINUE', 'transit'); + } return this.store.createRecord(modelType); } const key = transition.queryParams.initialKey || ''; diff --git a/ui/app/routes/vault/cluster/settings/auth/configure/section.js b/ui/app/routes/vault/cluster/settings/auth/configure/section.js index 1bace6d1f03..3a5c7316fe2 100644 --- a/ui/app/routes/vault/cluster/settings/auth/configure/section.js +++ b/ui/app/routes/vault/cluster/settings/auth/configure/section.js @@ -2,9 +2,10 @@ import Ember from 'ember'; import DS from 'ember-data'; import UnloadModelRoute from 'vault/mixins/unload-model-route'; -const { RSVP } = Ember; +const { RSVP, inject } = Ember; export default Ember.Route.extend(UnloadModelRoute, { modelPath: 'model.model', + wizard: inject.service(), modelType(backendType, section) { const MODELS = { 'aws-client': 'auth-config/aws/client', @@ -26,6 +27,11 @@ export default Ember.Route.extend(UnloadModelRoute, { const backend = this.modelFor('vault.cluster.settings.auth.configure'); const { section_name: section } = params; if (section === 'options') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'EDIT', + backend.get('type') + ); return RSVP.hash({ model: backend, section, @@ -39,6 +45,11 @@ export default Ember.Route.extend(UnloadModelRoute, { } const model = this.store.peekRecord(modelType, backend.id); if (model) { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'EDIT', + backend.get('type') + ); return RSVP.hash({ model, section, @@ -47,6 +58,11 @@ export default Ember.Route.extend(UnloadModelRoute, { return this.store .findRecord(modelType, backend.id) .then(config => { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + 'EDIT', + backend.get('type') + ); config.set('backend', backend); return RSVP.hash({ model: config, diff --git a/ui/app/routes/vault/cluster/settings/control-groups.js b/ui/app/routes/vault/cluster/settings/control-groups.js index 619fc249acd..f61cdb5fb19 100644 --- a/ui/app/routes/vault/cluster/settings/control-groups.js +++ b/ui/app/routes/vault/cluster/settings/control-groups.js @@ -13,9 +13,8 @@ export default Ember.Route.extend(UnloadModel, { model() { let type = 'control-group-config'; - return this.get('version.isOSS') - ? null - : this.store.findRecord(type, 'config').catch(e => { + return this.get('version').hasFeature('Control Groups') + ? this.store.findRecord(type, 'config').catch(e => { // if you haven't saved a config, the API 404s, so create one here to edit and return it if (e.httpStatus === 404) { return this.store.createRecord(type, { @@ -23,7 +22,8 @@ export default Ember.Route.extend(UnloadModel, { }); } throw e; - }); + }) + : null; }, actions: { diff --git a/ui/app/routes/vault/cluster/tools/tool.js b/ui/app/routes/vault/cluster/tools/tool.js index b031d0d0c9c..f315186b1bc 100644 --- a/ui/app/routes/vault/cluster/tools/tool.js +++ b/ui/app/routes/vault/cluster/tools/tool.js @@ -2,6 +2,8 @@ import Ember from 'ember'; import { toolsActions } from 'vault/helpers/tools-actions'; export default Ember.Route.extend({ + wizard: Ember.inject.service(), + beforeModel(transition) { const supportedActions = toolsActions(); const { selectedAction } = this.paramsFor(this.routeName); @@ -14,7 +16,14 @@ export default Ember.Route.extend({ actions: { didTransition() { const params = this.paramsFor(this.routeName); + if (this.get('wizard.currentMachine') === 'tools') { + this.get('wizard').transitionFeatureMachine( + this.get('wizard.featureState'), + params.selectedAction.toUpperCase() + ); + } this.controller.setProperties(params); + return true; }, }, }); diff --git a/ui/app/routes/vault/cluster/unseal.js b/ui/app/routes/vault/cluster/unseal.js index 875583f717c..55f4e3ee848 100644 --- a/ui/app/routes/vault/cluster/unseal.js +++ b/ui/app/routes/vault/cluster/unseal.js @@ -1 +1,13 @@ -export { default } from './cluster-route-base'; +import Ember from 'ember'; +import ClusterRoute from './cluster-route-base'; + +const { inject } = Ember; + +export default ClusterRoute.extend({ + wizard: inject.service(), + + activate() { + this.get('wizard').set('initEvent', 'UNSEAL'); + this.get('wizard').transitionTutorialMachine(this.get('wizard.currentState'), 'TOUNSEAL'); + }, +}); diff --git a/ui/app/serializers/secret-engine.js b/ui/app/serializers/secret-engine.js index e10325615c4..a903214737a 100644 --- a/ui/app/serializers/secret-engine.js +++ b/ui/app/serializers/secret-engine.js @@ -1,11 +1,7 @@ -import DS from 'ember-data'; import Ember from 'ember'; -const { decamelize } = Ember.String; +import ApplicationSerializer from './application'; -export default DS.RESTSerializer.extend({ - keyForAttribute: function(attr) { - return decamelize(attr); - }, +export default ApplicationSerializer.extend({ normalizeBackend(path, backend) { let struct = {}; for (let attribute in backend) { @@ -51,11 +47,20 @@ export default DS.RESTSerializer.extend({ } } - const transformedPayload = { [primaryModelClass.modelName]: backends }; - return this._super(store, primaryModelClass, transformedPayload, id, requestType); + return this._super(store, primaryModelClass, backends, id, requestType); }, - serialize() { - return this._super(...arguments); + serialize(snapshot) { + let type = snapshot.record.get('engineType'); + let data = this._super(...arguments); + // only KV uses options + if (type !== 'kv' && type !== 'generic') { + delete data.options; + } else if (!data.options.version) { + // if options.version isn't set for some reason + // default to 2 + data.options.version = 2; + } + return data; }, }); diff --git a/ui/app/services/version.js b/ui/app/services/version.js index 487326da001..e392ebe3cac 100644 --- a/ui/app/services/version.js +++ b/ui/app/services/version.js @@ -3,13 +3,16 @@ import { task } from 'ember-concurrency'; const { Service, inject, computed } = Ember; +const hasFeatureMethod = (context, featureKey) => { + const features = context.get('features'); + if (!features) { + return false; + } + return features.includes(featureKey); +}; const hasFeature = featureKey => { return computed('features', 'features.[]', function() { - const features = this.get('features'); - if (!features) { - return false; - } - return features.includes(featureKey); + return hasFeatureMethod(this, featureKey); }); }; export default Service.extend({ @@ -33,6 +36,10 @@ export default Service.extend({ this.set('version', resp.version); }, + hasFeature(feature) { + return hasFeatureMethod(this, feature); + }, + setFeatures(resp) { if (!resp.features) { return; diff --git a/ui/app/services/wizard.js b/ui/app/services/wizard.js new file mode 100644 index 00000000000..4cddf250a97 --- /dev/null +++ b/ui/app/services/wizard.js @@ -0,0 +1,317 @@ +import Ember from 'ember'; +import { Machine } from 'xstate'; + +const { Service, inject } = Ember; + +import getStorage from 'vault/lib/token-storage'; + +import TutorialMachineConfig from 'vault/machines/tutorial-machine'; +import SecretsMachineConfig from 'vault/machines/secrets-machine'; +import PoliciesMachineConfig from 'vault/machines/policies-machine'; +import ReplicationMachineConfig from 'vault/machines/replication-machine'; +import ToolsMachineConfig from 'vault/machines/tools-machine'; +import AuthMachineConfig from 'vault/machines/auth-machine'; + +const TutorialMachine = Machine(TutorialMachineConfig); +let FeatureMachine = null; +const TUTORIAL_STATE = 'vault:ui-tutorial-state'; +const FEATURE_LIST = 'vault:ui-feature-list'; +const FEATURE_STATE = 'vault:ui-feature-state'; +const COMPLETED_FEATURES = 'vault:ui-completed-list'; +const COMPONENT_STATE = 'vault:ui-component-state'; +const RESUME_URL = 'vault:ui-tutorial-resume-url'; +const RESUME_ROUTE = 'vault:ui-tutorial-resume-route'; +const MACHINES = { + secrets: SecretsMachineConfig, + policies: PoliciesMachineConfig, + replication: ReplicationMachineConfig, + tools: ToolsMachineConfig, + authentication: AuthMachineConfig, +}; + +const DEFAULTS = { + currentState: null, + featureList: null, + featureState: null, + currentMachine: null, + tutorialComponent: null, + featureComponent: null, + stepComponent: null, + detailsComponent: null, + componentState: null, + nextFeature: null, + nextStep: null, +}; + +export default Service.extend(DEFAULTS, { + router: inject.service(), + showWhenUnauthenticated: false, + + init() { + this._super(...arguments); + this.initializeMachines(); + }, + + initializeMachines() { + if (!this.storageHasKey(TUTORIAL_STATE)) { + let state = TutorialMachine.initialState; + this.saveState('currentState', state.value); + this.saveExtState(TUTORIAL_STATE, state.value); + } + this.saveState('currentState', this.getExtState(TUTORIAL_STATE)); + if (this.storageHasKey(COMPONENT_STATE)) { + this.set('componentState', this.getExtState(COMPONENT_STATE)); + } + let stateNodes = TutorialMachine.getStateNodes(this.get('currentState')); + this.executeActions(stateNodes.reduce((acc, node) => acc.concat(node.onEntry), []), null, 'tutorial'); + if (this.storageHasKey(FEATURE_LIST)) { + this.set('featureList', this.getExtState(FEATURE_LIST)); + if (this.storageHasKey(FEATURE_STATE)) { + this.saveState('featureState', this.getExtState(FEATURE_STATE)); + } else { + if (FeatureMachine != null) { + this.saveState('featureState', FeatureMachine.initialState); + this.saveExtState(FEATURE_STATE, this.get('featureState')); + } + } + this.buildFeatureMachine(); + } + }, + + restartGuide() { + let storage = this.storage(); + // empty storage + [ + TUTORIAL_STATE, + FEATURE_LIST, + FEATURE_STATE, + COMPLETED_FEATURES, + COMPONENT_STATE, + RESUME_URL, + RESUME_ROUTE, + ].forEach(key => storage.removeItem(key)); + // reset wizard state + this.setProperties(DEFAULTS); + // restart machines from blank state + this.initializeMachines(); + // progress machine to 'active.select' + this.transitionTutorialMachine('idle', 'AUTH'); + }, + + saveState(stateType, state) { + if (state.value) { + state = state.value; + } + let stateKey = ''; + while (Ember.typeOf(state) === 'object') { + let newState = Object.keys(state); + stateKey += newState + '.'; + state = state[newState]; + } + stateKey += state; + this.set(stateType, stateKey); + }, + + transitionTutorialMachine(currentState, event, extendedState) { + if (extendedState) { + this.set('componentState', extendedState); + this.saveExtState(COMPONENT_STATE, extendedState); + } + let { actions, value } = TutorialMachine.transition(currentState, event); + this.saveState('currentState', value); + this.saveExtState(TUTORIAL_STATE, this.get('currentState')); + this.executeActions(actions, event, 'tutorial'); + }, + + transitionFeatureMachine(currentState, event, extendedState) { + if (!FeatureMachine || !this.get('currentState').includes('active')) { + return; + } + if (extendedState) { + this.set('componentState', extendedState); + this.saveExtState(COMPONENT_STATE, extendedState); + } + + let { actions, value } = FeatureMachine.transition(currentState, event, this.get('componentState')); + this.saveState('featureState', value); + this.saveExtState(FEATURE_STATE, value); + this.executeActions(actions, event, 'feature'); + // if all features were completed, the FeatureMachine gets nulled + // out and won't exist here as there is no next step + if (FeatureMachine) { + let next; + if (this.get('currentMachine') === 'secrets' && value === 'display') { + next = FeatureMachine.transition(value, 'REPEAT', this.get('componentState')); + } else { + next = FeatureMachine.transition(value, 'CONTINUE', this.get('componentState')); + } + this.saveState('nextStep', next.value); + } + }, + + saveExtState(key, value) { + this.storage().setItem(key, value); + }, + + getExtState(key) { + return this.storage().getItem(key); + }, + + storageHasKey(key) { + return Boolean(this.getExtState(key)); + }, + + executeActions(actions, event, machineType) { + let transitionURL; + let expectedRouteName; + let router = this.get('router'); + + for (let action of actions) { + let type = action; + if (action.type) { + type = action.type; + } + switch (type) { + case 'render': + this.set(`${action.level}Component`, action.component); + break; + case 'routeTransition': + expectedRouteName = action.params[0]; + transitionURL = router.urlFor(...action.params).replace(/^\/ui/, ''); + Ember.run.next(() => { + router.transitionTo(...action.params); + }); + break; + case 'saveFeatures': + this.saveFeatures(event.features); + break; + case 'completeFeature': + this.completeFeature(); + break; + case 'handleDismissed': + this.handleDismissed(); + break; + case 'handlePaused': + this.handlePaused(); + return; + case 'handleResume': + this.handleResume(); + break; + case 'showTutorialWhenAuthenticated': + this.set('showWhenUnauthenticated', false); + break; + case 'showTutorialAlways': + this.set('showWhenUnauthenticated', true); + break; + case 'continueFeature': + this.transitionFeatureMachine(this.get('featureState'), 'CONTINUE', this.get('componentState')); + break; + default: + break; + } + } + if (machineType === 'tutorial') { + return; + } + // if we're transitioning in the actions, we want that url, + // else we want the URL we land on in didTransition in the + // application route - we'll notify the application route to + // update the route + if (transitionURL) { + this.set('expectedURL', transitionURL); + this.set('expectedRouteName', expectedRouteName); + this.set('setURLAfterTransition', false); + } else { + this.set('setURLAfterTransition', true); + } + }, + + handlePaused() { + let expected = this.get('expectedURL'); + if (expected) { + this.saveExtState(RESUME_URL, this.get('expectedURL')); + this.saveExtState(RESUME_ROUTE, this.get('expectedRouteName')); + } + }, + + handleResume() { + let resumeURL = this.storage().getItem(RESUME_URL); + if (!resumeURL) { + return; + } + this.get('router').transitionTo(resumeURL).followRedirects().then(() => { + this.set('expectedRouteName', this.storage().getItem(RESUME_ROUTE)); + this.set('expectedURL', resumeURL); + this.initializeMachines(); + this.storage().removeItem(RESUME_URL); + }); + }, + + handleDismissed() { + this.storage().removeItem(FEATURE_STATE); + this.storage().removeItem(FEATURE_LIST); + this.storage().removeItem(COMPONENT_STATE); + }, + + saveFeatures(features) { + this.set('featureList', features); + this.saveExtState(FEATURE_LIST, this.get('featureList')); + this.buildFeatureMachine(); + }, + + buildFeatureMachine() { + if (this.get('featureList') === null) { + return; + } + this.startFeature(); + if (this.storageHasKey(FEATURE_STATE)) { + this.saveState('featureState', this.getExtState(FEATURE_STATE)); + } + this.saveExtState(FEATURE_STATE, this.get('featureState')); + let nextFeature = + this.get('featureList').length > 1 ? this.get('featureList').objectAt(1).capitalize() : 'Finish'; + this.set('nextFeature', nextFeature); + let next; + if (this.get('currentMachine') === 'secrets' && this.get('featureState') === 'display') { + next = FeatureMachine.transition(this.get('featureState'), 'REPEAT', this.get('componentState')); + } else { + next = FeatureMachine.transition(this.get('featureState'), 'CONTINUE', this.get('componentState')); + } + this.saveState('nextStep', next.value); + let stateNodes = FeatureMachine.getStateNodes(this.get('featureState')); + this.executeActions(stateNodes.reduce((acc, node) => acc.concat(node.onEntry), []), null, 'feature'); + }, + + startFeature() { + const FeatureMachineConfig = MACHINES[this.get('featureList').objectAt(0)]; + FeatureMachine = Machine(FeatureMachineConfig); + this.set('currentMachine', this.get('featureList').objectAt(0)); + this.saveState('featureState', FeatureMachine.initialState); + }, + + completeFeature() { + let features = this.get('featureList'); + let done = features.shift(); + if (!this.getExtState(COMPLETED_FEATURES)) { + let completed = []; + completed.push(done); + this.saveExtState(COMPLETED_FEATURES, completed); + } else { + this.saveExtState(COMPLETED_FEATURES, this.getExtState(COMPLETED_FEATURES).toArray().addObject(done)); + } + + this.saveExtState(FEATURE_LIST, features.length ? features : null); + this.storage().removeItem(FEATURE_STATE); + if (features.length > 0) { + this.buildFeatureMachine(); + } else { + this.storage().removeItem(FEATURE_LIST); + FeatureMachine = null; + this.transitionTutorialMachine(this.get('currentState'), 'DONE'); + } + }, + + storage() { + return getStorage(); + }, +}); diff --git a/ui/app/styles/components/box-radio.scss b/ui/app/styles/components/box-radio.scss new file mode 100644 index 00000000000..41079d7bf6d --- /dev/null +++ b/ui/app/styles/components/box-radio.scss @@ -0,0 +1,61 @@ +.box-radio-container { + display: flex; + flex-wrap: wrap; +} +.title.box-radio-header { + font-size: $size-6; + color: $grey; + margin: $size-7 0 0 0; +} +.box-radio { + box-sizing: border-box; + flex-basis: 7rem; + width: 7rem; + height: 7.5rem; + padding: $size-10 $size-6 $size-10; + flex-direction: column; + justify-content: space-between; + align-items: center; + display: flex; + border-radius: $radius; + box-shadow: $box-shadow; + text-align: center; + color: $grey; + font-weight: $font-weight-semibold; + line-height: 1; + margin: $size-6 $size-3 $size-6 0; + font-size: 12px; + transition: box-shadow ease-in-out $speed; + will-change: box-shadow; + + &.is-selected { + box-shadow: 0 0 0 1px $grey-light, $box-shadow-middle; + } + + input[type=radio].radio { + position: absolute; + z-index: 1; + opacity: 0; + } + + input[type=radio].radio + label { + border: 1px solid $grey-light; + border-radius: 50%; + cursor: pointer; + display: block; + margin: 1rem auto 0; + height: 1rem; + width: 1rem; + flex-shrink: 0; + flex-grow: 0; + } + + input[type=radio].radio:checked + label { + background: $blue; + border: 1px solid $blue; + box-shadow: inset 0 0 0 0.15rem $white; + } + input[type=radio].radio:focus + label { + box-shadow: 0 0 10px 1px rgba($blue, 0.4), inset 0 0 0 0.15rem $white; + } +} diff --git a/ui/app/styles/components/doc-link.scss b/ui/app/styles/components/doc-link.scss new file mode 100644 index 00000000000..8d97c0d2c93 --- /dev/null +++ b/ui/app/styles/components/doc-link.scss @@ -0,0 +1,5 @@ +.doc-link { + color: $link; + text-decoration: none; + font-weight: $font-weight-semibold; +} diff --git a/ui/app/styles/components/features-selection.scss b/ui/app/styles/components/features-selection.scss new file mode 100644 index 00000000000..dd4bb3195e2 --- /dev/null +++ b/ui/app/styles/components/features-selection.scss @@ -0,0 +1,44 @@ +.feature-header { + font-size: $size-6; + font-weight: $font-weight-semibold; + color: $grey; +} + +.feature-box { + box-shadow: $box-shadow; + border-radius: $radius; + padding: $size-8; + margin: $size-8 0; + + &.is-active { + box-shadow: 0 0 0 1px $grey-light; + } +} + +.feature-box label { + font-weight: $font-weight-semibold; + padding-left: $size-10; + + &::before { + top: 3px; + } + + &::after { + top: 5px; + } +} + +.feature-steps { + font-size: $size-8; + color: $grey; + line-height: 1.5; + margin-left: $size-3; + margin-top: $size-10; + + li::before { + // bullet + content: '\2022'; + position: relative; + right: $size-11; + } +} diff --git a/ui/app/styles/components/page-header.scss b/ui/app/styles/components/page-header.scss index 5557130a201..13d7977a366 100644 --- a/ui/app/styles/components/page-header.scss +++ b/ui/app/styles/components/page-header.scss @@ -21,4 +21,8 @@ .breadcrumb + .level .title { margin-top: $size-4; } + .title .icon { + height: auto; + width: auto; + } } diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss new file mode 100644 index 00000000000..8ab26f25605 --- /dev/null +++ b/ui/app/styles/components/ui-wizard.scss @@ -0,0 +1,144 @@ +.ui-wizard-container { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.ui-wizard-container .app-content { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.ui-wizard-container .app-content.wizard-open { + padding-right: 324px; + + @include until($tablet) { + padding-right: 0; + padding-bottom: 50vh; + } +} + +.ui-wizard { + z-index: 300; + padding: $size-5; + width: 300px; + background: $white; + box-shadow: $box-shadow, $box-shadow-highest; + position: fixed; + right: $size-8; + bottom: $size-8; + top: calc(3.5rem + #{$size-8}); + overflow: auto; + + p { + line-height: 1.2; + } + + .dismiss-collapsed { + position: absolute; + top: $size-8; + right: $size-8; + color: $grey; + z-index: 30; + } + + @include until($tablet) { + box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24); + bottom: 0; + left: 0; + right: 0; + top: 50%; + width: auto; + } + + .doc-link { + margin-top: $size-5; + display: block; + } + + pre code { + background: $ui-gray-050; + margin: $size-8 0; + } +} + +.wizard-header { + margin-bottom: $size-5; + position: relative; + + .icon { + margin-right: $size-11; + vertical-align: -0.33rem; + } +} + +.wizard-dismiss-menu { + position: absolute; + right: $size-6; + top: $size-6; + z-index: 10; +} + +.ui-wizard.collapsed { + color: $white; + background: $black; + bottom: auto; + box-shadow: $box-shadow-middle; + height: auto; + min-height: 0; + padding-bottom: $size-11; + position: fixed; + right: $size-8; + top: calc(3.5rem + #{$size-8}); + + @include until($tablet) { + box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24); + bottom: 0; + left: 0; + right: 0; + top: auto; + width: auto; + } + + .title { + color: $white; + } + + .wizard-header { + margin-bottom: $size-10; + } +} + +.wizard-divider-box { + background: none; + box-shadow: none; + margin: $size-8 0 0; + padding: 0 $size-8; + border-top: solid 1px $white; + border-image: $dark-vault-gradient 1; + button { + font-size: $size-7; + font-weight: $font-weight-semibold; + } +} + +.wizard-section .title .icon { + height: auto; + margin-right: $size-11; + width: auto; +} + +.wizard-section:last-of-type { + margin-bottom: $size-5; +} + +.wizard-section button:not(:last-of-type) { + margin-bottom: $size-10; +} + +.wizard-details { + padding-top: $size-4; + margin-top: $size-4; + border-top: 1px solid $grey-light; +} diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 0b8b08739b8..eb5bfa831bf 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -44,11 +44,14 @@ @import "./components/auth-form"; @import "./components/b64-toggle"; @import "./components/box-label"; +@import "./components/box-radio"; @import "./components/codemirror"; @import "./components/confirm"; @import "./components/console-ui-panel"; @import "./components/control-group"; +@import "./components/doc-link"; @import "./components/env-banner"; +@import "./components/features-selection"; @import "./components/form-section"; @import "./components/global-flash"; @import "./components/hover-copy-button"; @@ -77,4 +80,5 @@ @import "./components/tool-tip"; @import "./components/unseal-warning"; @import "./components/upgrade-overlay"; +@import "./components/ui-wizard"; @import "./components/vault-loading"; diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 69be8d52d41..4a823f49268 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -184,6 +184,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12); &, &:first-child:last-child { margin-left: -$size-10; + margin-right: $size-11; } } } @@ -214,3 +215,16 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12); width: auto; margin: 0 !important; } + +.button.next-feature-step { + width: 100%; + text-align: left; + background: $white; + color: $blue; + box-shadow: none; + display: block; + border: 1px solid $grey-light; + border-radius: $radius; + height: auto; + padding: $size-8; +} diff --git a/ui/app/styles/core/forms.scss b/ui/app/styles/core/forms.scss index e9210ec3aaf..57fcacb68da 100644 --- a/ui/app/styles/core/forms.scss +++ b/ui/app/styles/core/forms.scss @@ -184,7 +184,8 @@ label { } } -.select:not(.is-multiple)::after { +.select:not(.is-multiple)::after, +.select:not(.is-multiple)::before { border-color: $black; border-width: 2px; margin-top: 0; @@ -192,7 +193,6 @@ label { } .select:not(.is-multiple)::before { - @extend .select:not(.is-multiple)::after; transform: translateY(-75%) rotate(135deg); z-index: 5; } diff --git a/ui/app/styles/core/generic.scss b/ui/app/styles/core/generic.scss index 1325a1fc82b..21bab9841b6 100644 --- a/ui/app/styles/core/generic.scss +++ b/ui/app/styles/core/generic.scss @@ -46,3 +46,7 @@ input::-webkit-inner-spin-button { -ms-user-select: text; /* IE 10+ */ user-select: text; } + +.link-plain { + text-decoration: none; +} diff --git a/ui/app/styles/core/gradients.scss b/ui/app/styles/core/gradients.scss index 7cd9111dfdd..dd137335ee2 100644 --- a/ui/app/styles/core/gradients.scss +++ b/ui/app/styles/core/gradients.scss @@ -1,3 +1,4 @@ +$dark-vault-gradient: linear-gradient(to right, $vault-gray-dark, $vault-gray); .has-dark-vault-gradient { - background: linear-gradient(to right, $vault-gray-dark, $vault-gray); + background: $dark-vault-gradient; } diff --git a/ui/app/templates/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs index d69b8e54ada..726754e8670 100644 --- a/ui/app/templates/components/auth-info.hbs +++ b/ui/app/templates/components/auth-info.hbs @@ -46,6 +46,11 @@ {{/if}} {{/if}} +
  • + +
  • {{#link-to "vault.cluster.logout" activeClusterName id="logout"}} Sign out diff --git a/ui/app/templates/components/form-field.hbs b/ui/app/templates/components/form-field.hbs index e3d37dc88a8..a29e84e6f5b 100644 --- a/ui/app/templates/components/form-field.hbs +++ b/ui/app/templates/components/form-field.hbs @@ -73,6 +73,7 @@ }} {{else if (eq attr.options.editType 'ttl')}} {{ttl-picker + data-test-input=attr.name initialValue=(or (get model valuePath) attr.options.defaultValue) labelText=labelString warning=attr.options.warning diff --git a/ui/app/templates/components/mount-backend-form.hbs b/ui/app/templates/components/mount-backend-form.hbs index 04b3e22b70b..550272a14e4 100644 --- a/ui/app/templates/components/mount-backend-form.hbs +++ b/ui/app/templates/components/mount-backend-form.hbs @@ -1,10 +1,21 @@

    - {{#if (eq mountType "auth")}} - Enable an authentication method + {{#if showConfig}} + {{#with (find-by 'type' mountModel.type mountTypes) as |typeInfo|}} + + {{#if (eq mountType "auth")}} + Enable {{typeInfo.displayName}} authentication method + {{else}} + Enable {{typeInfo.displayName}} secrets engine + {{/if}} + {{/with}} {{else}} - Enable a secrets engine + {{#if (eq mountType "auth")}} + Enable an authentication method + {{else}} + Enable a secrets engine + {{/if}} {{/if}}

    @@ -13,19 +24,73 @@
    {{message-error model=mountModel}} - {{form-field-groups model=mountModel onChange=(action "onTypeChange") renderGroup="default"}} - {{#if mountModel.authConfigs.firstObject}} - {{form-field-groups model=mountModel.authConfigs.firstObject}} + {{#if showConfig}} + {{form-field-groups model=mountModel onChange=(action "onTypeChange") renderGroup="default"}} + {{#if mountModel.authConfigs.firstObject}} + {{form-field-groups model=mountModel.authConfigs.firstObject}} + {{/if}} + {{form-field-groups model=mountModel onChange=(action "onTypeChange") renderGroup="Method Options"}} + {{else}} + {{#each (array "generic" "cloud" "infra") as |category|}} +

    + {{capitalize category}} +

    +
    + {{#each (filter-by "category" category mountTypes) as |type|}} + + {{/each}} +
    + {{/each}} {{/if}} - {{form-field-groups model=mountModel onChange=(action "onTypeChange") renderGroup="Method Options"}}
    - + {{#if showConfig}} +
    + +
    +
    + +
    + {{else}} + + {{/if}}
    diff --git a/ui/app/templates/components/splash-page.hbs b/ui/app/templates/components/splash-page.hbs index 48883e26330..6f1e85dc8f8 100644 --- a/ui/app/templates/components/splash-page.hbs +++ b/ui/app/templates/components/splash-page.hbs @@ -12,19 +12,21 @@ {{/if}} -
    -
    -
    -
    - {{yield (hash header=(component 'splash-page/splash-header'))}} + +
    +
    +
    +
    + {{yield (hash header=(component 'splash-page/splash-header'))}} +
    +
    + {{yield (hash sub-header=(component 'splash-page/splash-header'))}} +
    + + {{yield (hash footer=(component 'splash-page/splash-content')) }}
    -
    - {{yield (hash sub-header=(component 'splash-page/splash-header'))}} -
    - - {{yield (hash footer=(component 'splash-page/splash-content')) }}
    -
    + diff --git a/ui/app/templates/components/ui-wizard.hbs b/ui/app/templates/components/ui-wizard.hbs new file mode 100644 index 00000000000..73f676d3e87 --- /dev/null +++ b/ui/app/templates/components/ui-wizard.hbs @@ -0,0 +1,19 @@ +
    + {{yield}} +
    +{{#component + (if shouldRender tutorialComponent) + onAdvance=(action "advanceWizard") + onDismiss=(action "dismissWizard") +}} + {{component + featureComponent + componentState=componentState + nextFeature=nextFeature + nextStep=nextStep + onDone=(action "finishFeature") + onRepeat=(action "repeatStep") + onReset=(action "resetFeature") + onAdvance=(action "advanceFeature") + }} +{{/component}} diff --git a/ui/app/templates/components/wizard-content.hbs b/ui/app/templates/components/wizard-content.hbs new file mode 100644 index 00000000000..f3ba03d5c6f --- /dev/null +++ b/ui/app/templates/components/wizard-content.hbs @@ -0,0 +1,17 @@ + + + +
    +

    + {{headerText}} +

    +
    +{{yield}} diff --git a/ui/app/templates/components/wizard-section.hbs b/ui/app/templates/components/wizard-section.hbs new file mode 100644 index 00000000000..1cc42ed0a26 --- /dev/null +++ b/ui/app/templates/components/wizard-section.hbs @@ -0,0 +1,14 @@ +
    +

    + {{#if headerIcon}} + + {{/if}} + {{headerText}} +

    + {{yield}} + {{#if docText}} + + {{docText}} + + {{/if}} +
    diff --git a/ui/app/templates/components/wizard/ad-engine.hbs b/ui/app/templates/components/wizard/ad-engine.hbs new file mode 100644 index 00000000000..57af4b80ae4 --- /dev/null +++ b/ui/app/templates/components/wizard/ad-engine.hbs @@ -0,0 +1,11 @@ + +

    + The AD secrets engine rotates AD passwords dynamically, and is designed for + a high-load environment where many instances may be accessing a shared password simultaneously. +

    +     diff --git a/ui/app/templates/components/wizard/approle-method.hbs b/ui/app/templates/components/wizard/approle-method.hbs new file mode 100644 index 00000000000..77d97b18d6a --- /dev/null +++ b/ui/app/templates/components/wizard/approle-method.hbs @@ -0,0 +1,10 @@ + +

    + The approle auth method allows machines or apps to authenticate with Vault-defined roles. The open design of AppRole enables a varied set of workflows and configurations to handle large numbers of apps. This auth method is oriented to automated workflows (machines and services), and is less useful for human operators. +

    +     diff --git a/ui/app/templates/components/wizard/auth-details.hbs b/ui/app/templates/components/wizard/auth-details.hbs new file mode 100644 index 00000000000..ae5f06cd9ef --- /dev/null +++ b/ui/app/templates/components/wizard/auth-details.hbs @@ -0,0 +1,20 @@ + +

    + Fantastic! Now you're ready to use your new {{mountName}} auth method! +

    +     + + + + \ 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 new file mode 100644 index 00000000000..27147d5cc51 --- /dev/null +++ b/ui/app/templates/components/wizard/auth-edit.hbs @@ -0,0 +1,9 @@ + +

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

    +     \ 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 new file mode 100644 index 00000000000..0bc2143f1f0 --- /dev/null +++ b/ui/app/templates/components/wizard/auth-enable.hbs @@ -0,0 +1,9 @@ + +

    + 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 new file mode 100644 index 00000000000..5ca00017e38 --- /dev/null +++ b/ui/app/templates/components/wizard/auth-idle.hbs @@ -0,0 +1,9 @@ + +

    + 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. +

    +     diff --git a/ui/app/templates/components/wizard/auth-list.hbs b/ui/app/templates/components/wizard/auth-list.hbs new file mode 100644 index 00000000000..5af42e5dbba --- /dev/null +++ b/ui/app/templates/components/wizard/auth-list.hbs @@ -0,0 +1,9 @@ + +

    + 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. +

    +     \ No newline at end of file diff --git a/ui/app/templates/components/wizard/aws-engine.hbs b/ui/app/templates/components/wizard/aws-engine.hbs new file mode 100644 index 00000000000..b016b7695e7 --- /dev/null +++ b/ui/app/templates/components/wizard/aws-engine.hbs @@ -0,0 +1,10 @@ + +

    + The AWS secrets engine generates AWS access credentials dynamically based on IAM policies. This generally makes working with AWS IAM easier, since it does not involve clicking in the web UI. Additionally, the process is codified and mapped to internal auth methods (such as LDAP). The AWS IAM credentials are time-based and are automatically revoked when the Vault lease expires. +

    +     diff --git a/ui/app/templates/components/wizard/aws-method.hbs b/ui/app/templates/components/wizard/aws-method.hbs new file mode 100644 index 00000000000..1d05b7ffdbb --- /dev/null +++ b/ui/app/templates/components/wizard/aws-method.hbs @@ -0,0 +1,10 @@ + +

    + The AWS auth method provides an automated mechanism to retrieve a Vault token for AWS EC2 instances and IAM principals. Unlike most Vault auth methods, this method does not require manual first-deploying, or provisioning security-sensitive credentials (tokens, username/password, client certificates, etc), by operators under many circumstances. +

    +     diff --git a/ui/app/templates/components/wizard/azure-method.hbs b/ui/app/templates/components/wizard/azure-method.hbs new file mode 100644 index 00000000000..c67a7493eb5 --- /dev/null +++ b/ui/app/templates/components/wizard/azure-method.hbs @@ -0,0 +1,10 @@ + +

    + The Azure auth method allows authentication against Vault using Azure Active Directory credentials. +

    +     diff --git a/ui/app/templates/components/wizard/cert-method.hbs b/ui/app/templates/components/wizard/cert-method.hbs new file mode 100644 index 00000000000..ecc793d6a11 --- /dev/null +++ b/ui/app/templates/components/wizard/cert-method.hbs @@ -0,0 +1,10 @@ + +

    + The TLS Certificates auth method allows authentication using SSL/TLS client certificates which are either signed by a CA or self-signed. CA certificates are associated with a role. +

    +     diff --git a/ui/app/templates/components/wizard/ch-engine.hbs b/ui/app/templates/components/wizard/ch-engine.hbs new file mode 100644 index 00000000000..aeeb966bc7d --- /dev/null +++ b/ui/app/templates/components/wizard/ch-engine.hbs @@ -0,0 +1,9 @@ + +

    + The cubbyhole secrets engine is used to store arbitrary secrets within the configured physical storage for Vault namespaced to a token. In cubbyhole, paths are scoped per token. No token can access another token's cubbyhole. When the token expires, its cubbyhole is destroyed. +

    +     \ No newline at end of file diff --git a/ui/app/templates/components/wizard/consul-engine.hbs b/ui/app/templates/components/wizard/consul-engine.hbs new file mode 100644 index 00000000000..4831f5d17fe --- /dev/null +++ b/ui/app/templates/components/wizard/consul-engine.hbs @@ -0,0 +1,10 @@ + +

    + The Consul secrets engine generates Consul API tokens dynamically based on Consul ACL policies. +

    +     diff --git a/ui/app/templates/components/wizard/database-engine.hbs b/ui/app/templates/components/wizard/database-engine.hbs new file mode 100644 index 00000000000..6406006971e --- /dev/null +++ b/ui/app/templates/components/wizard/database-engine.hbs @@ -0,0 +1,10 @@ + +

    + The database secrets engine generates database credentials dynamically based on configured roles. +

    +     diff --git a/ui/app/templates/components/wizard/features-selection.hbs b/ui/app/templates/components/wizard/features-selection.hbs new file mode 100644 index 00000000000..db99f44b367 --- /dev/null +++ b/ui/app/templates/components/wizard/features-selection.hbs @@ -0,0 +1,41 @@ + +

    + Choosing where to go +

    +

    You did it! You now have access to your Vault and can start entering your data. We can help you get started with any of the options below

    + {{#if (or (has-feature "Performance Replication") (has-feature "DR Replication")) }} + {{/if}} +

    Walk me through setting up:

    +
    + {{#each allFeatures as |feature|}} + {{#if feature.show}} +
    +
    + + + +
    + {{#if (get this (concat feature.key "-isOpen"))}} +
      + {{#each feature.steps as |step|}} +
    • {{step}}
      • + {{/each}} +
    + {{/if}} +
    + {{/if}} + {{/each}} + +
    +     diff --git a/ui/app/templates/components/wizard/gcp-engine.hbs b/ui/app/templates/components/wizard/gcp-engine.hbs new file mode 100644 index 00000000000..081dfbd09ad --- /dev/null +++ b/ui/app/templates/components/wizard/gcp-engine.hbs @@ -0,0 +1,10 @@ + +

    + The Google Cloud Vault secrets engine dynamically generates Google Cloud service account keys and OAuth tokens based on IAM policies. This enables users to gain access to Google Cloud resources without needing to create or manage a dedicated service account. +

    +     diff --git a/ui/app/templates/components/wizard/gcp-method.hbs b/ui/app/templates/components/wizard/gcp-method.hbs new file mode 100644 index 00000000000..418ad51f4d6 --- /dev/null +++ b/ui/app/templates/components/wizard/gcp-method.hbs @@ -0,0 +1,10 @@ + +

    + The GCP auth method allows authentication against Vault using Google credentials. +

    +     diff --git a/ui/app/templates/components/wizard/github-method.hbs b/ui/app/templates/components/wizard/github-method.hbs new file mode 100644 index 00000000000..a5903d057fc --- /dev/null +++ b/ui/app/templates/components/wizard/github-method.hbs @@ -0,0 +1,10 @@ + +

    + The Github auth method can be used to authenticate with Vault using a GitHub personal access token. +

    +     diff --git a/ui/app/templates/components/wizard/init-login.hbs b/ui/app/templates/components/wizard/init-login.hbs new file mode 100644 index 00000000000..f14a39567bd --- /dev/null +++ b/ui/app/templates/components/wizard/init-login.hbs @@ -0,0 +1,15 @@ + + +

    + Vault is unsealed, but we still need to authenticate using the Initial + Root Token that was generated. We recommend setting up an Authentication + Method such as Username & Password for regular use, and only using a root + token for initial setup or for emergencies. +

    +     +     + diff --git a/ui/app/templates/components/wizard/init-save-keys.hbs b/ui/app/templates/components/wizard/init-save-keys.hbs new file mode 100644 index 00000000000..ce62cd365b2 --- /dev/null +++ b/ui/app/templates/components/wizard/init-save-keys.hbs @@ -0,0 +1,11 @@ + + +

    Now that Vault is initialized, you'll want to save your root token and + master key portions in a safe place. Distribute your keys to responsible + people on your team. If these keys are lost, you may not be able to access + your data again. Keep them safe!

    +     +     diff --git a/ui/app/templates/components/wizard/init-setup.hbs b/ui/app/templates/components/wizard/init-setup.hbs new file mode 100644 index 00000000000..d00491b5c6e --- /dev/null +++ b/ui/app/templates/components/wizard/init-setup.hbs @@ -0,0 +1,18 @@ + + +

    + This is the very first step of setting + a Vault server. Vault comes with an important + security feature called "seal", which lets you + shut down and secure your Vault installation if + there is a security breach. This is the default + state of Vault, so it is currently sealed since + it was just installed. To unseal the vault, you will + need to provide the key(s) that you generate here. +

    +     +     diff --git a/ui/app/templates/components/wizard/init-unseal.hbs b/ui/app/templates/components/wizard/init-unseal.hbs new file mode 100644 index 00000000000..1ea1950ad85 --- /dev/null +++ b/ui/app/templates/components/wizard/init-unseal.hbs @@ -0,0 +1,21 @@ + + +

    + Now we will provide the {{pluralize componentState.threshold 'key'}} that + you copied or downloaded to unseal the vault so that we can get started + using it. You'll need {{pluralize componentState.threshold 'key'}} total, + and {{#with (pluralize componentState.progress 'key' without-count=true) as |word|}} + {{if (eq word 'key') + (concat componentState.progress " " word " has ") + (concat componentState.progress " " word " have ") + }} + {{/with}} already been provided. + Please provide + {{pluralize (dec componentState.progress componentState.threshold) 'more key'}} to unseal. +

    +     +     diff --git a/ui/app/templates/components/wizard/kubernetes-method.hbs b/ui/app/templates/components/wizard/kubernetes-method.hbs new file mode 100644 index 00000000000..a7c685a9f6a --- /dev/null +++ b/ui/app/templates/components/wizard/kubernetes-method.hbs @@ -0,0 +1,10 @@ + +

    + The Kubernetes auth method can be used to authenticate with Vault using a Kubernetes Service Account Token. This method of authentication makes it easy to introduce a Vault token into a Kubernetes Pod. +

    +     diff --git a/ui/app/templates/components/wizard/kv-engine.hbs b/ui/app/templates/components/wizard/kv-engine.hbs new file mode 100644 index 00000000000..793b30c7476 --- /dev/null +++ b/ui/app/templates/components/wizard/kv-engine.hbs @@ -0,0 +1,10 @@ + +

    + The kv secrets engine is used to store arbitrary secrets within the configured physical storage for Vault. This backend can be run in one of two modes. It can be a generic Key-Value store that stores one value for a key. Versioning can be enabled and a configurable number of versions for each key will be stored. +

    +     diff --git a/ui/app/templates/components/wizard/ldap-method.hbs b/ui/app/templates/components/wizard/ldap-method.hbs new file mode 100644 index 00000000000..50ad45de672 --- /dev/null +++ b/ui/app/templates/components/wizard/ldap-method.hbs @@ -0,0 +1,10 @@ + +

    + The LDAP auth method allows authentication using an existing LDAP server and user/password credentials. This allows Vault to be integrated into environments using LDAP without duplicating the user/pass configuration in multiple places. +

    +     diff --git a/ui/app/templates/components/wizard/mounts-wizard.hbs b/ui/app/templates/components/wizard/mounts-wizard.hbs new file mode 100644 index 00000000000..74229973d81 --- /dev/null +++ b/ui/app/templates/components/wizard/mounts-wizard.hbs @@ -0,0 +1,23 @@ + +{{component + stepComponent + mountSubtype=mountSubtype + mountName=mountName + actionText=actionText + nextFeature=nextFeature + nextStep=nextStep + needsEncryption=needsEncryption + isSupported=isSupported + onDone=onDone + onAdvance=onAdvance + onRepeat=onRepeat + onReset=onReset + class="wizard-step" +}} +{{component + detailsComponent + onAdvance=onAdvance + onRepeat=onRepeat + class="wizard-details" +}} + diff --git a/ui/app/templates/components/wizard/nomad-engine.hbs b/ui/app/templates/components/wizard/nomad-engine.hbs new file mode 100644 index 00000000000..f5580a8674a --- /dev/null +++ b/ui/app/templates/components/wizard/nomad-engine.hbs @@ -0,0 +1,10 @@ + +

    + The Nomad secret backend for Vault generates Nomad API tokens dynamically based on pre-existing Nomad ACL policies. +

    +     diff --git a/ui/app/templates/components/wizard/okta-method.hbs b/ui/app/templates/components/wizard/okta-method.hbs new file mode 100644 index 00000000000..262167b910a --- /dev/null +++ b/ui/app/templates/components/wizard/okta-method.hbs @@ -0,0 +1,10 @@ + +

    + The Okta auth method allows authentication using Okta and user/password credentials. This allows Vault to be integrated into environments using Okta. +

    +     diff --git a/ui/app/templates/components/wizard/pki-engine.hbs b/ui/app/templates/components/wizard/pki-engine.hbs new file mode 100644 index 00000000000..e3add82703f --- /dev/null +++ b/ui/app/templates/components/wizard/pki-engine.hbs @@ -0,0 +1,10 @@ + +

    + The PKI secrets engine generates dynamic X.509 certificates. With this secrets engine, services can get certificates without going through the usual manual process of generating a private key and CSR, submitting to a CA, and waiting for a verification and signing process to complete. +

    +     diff --git a/ui/app/templates/components/wizard/policies-create.hbs b/ui/app/templates/components/wizard/policies-create.hbs new file mode 100644 index 00000000000..1b5c27d87a0 --- /dev/null +++ b/ui/app/templates/components/wizard/policies-create.hbs @@ -0,0 +1,14 @@ + + +

    + Let's use "my-new-policy" for your policy name. Copy the policy below to try it out: +

    +
    path "secret/foo" {
+  capabilities = ["read"]
+}
    +     +     diff --git a/ui/app/templates/components/wizard/policies-delete.hbs b/ui/app/templates/components/wizard/policies-delete.hbs new file mode 100644 index 00000000000..720db0f82f4 --- /dev/null +++ b/ui/app/templates/components/wizard/policies-delete.hbs @@ -0,0 +1,11 @@ + + +

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

    +     +     \ 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 new file mode 100644 index 00000000000..89ee539d8e9 --- /dev/null +++ b/ui/app/templates/components/wizard/policies-details.hbs @@ -0,0 +1,11 @@ + + +

    + 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. +

    +     +     \ 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 new file mode 100644 index 00000000000..35d3fce1e19 --- /dev/null +++ b/ui/app/templates/components/wizard/policies-intro.hbs @@ -0,0 +1,11 @@ + + +

    + 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" +

    +     +     \ No newline at end of file diff --git a/ui/app/templates/components/wizard/policies-others.hbs b/ui/app/templates/components/wizard/policies-others.hbs new file mode 100644 index 00000000000..25eac944504 --- /dev/null +++ b/ui/app/templates/components/wizard/policies-others.hbs @@ -0,0 +1,19 @@ + + +

    + Good! Now you're ready to go writing your own policies. We only explored ACL policies, but there are two other types of policies available to Enterprise customers that might be what you need. RGP (Role Governing Policies) are policies tied to particular tokens, entities, or groups. EGP (Endpoint Governing Policies) are tied to specific paths instead of tokens. +

    +     + + + +     diff --git a/ui/app/templates/components/wizard/rabbitmq-engine.hbs b/ui/app/templates/components/wizard/rabbitmq-engine.hbs new file mode 100644 index 00000000000..6e1e231f18d --- /dev/null +++ b/ui/app/templates/components/wizard/rabbitmq-engine.hbs @@ -0,0 +1,10 @@ + +

    + The RabbitMQ secrets engine generates user credentials dynamically based on configured permissions and virtual hosts. This means that services that need to access a virtual host no longer need to hardcode credentials. +

    +     diff --git a/ui/app/templates/components/wizard/radius-method.hbs b/ui/app/templates/components/wizard/radius-method.hbs new file mode 100644 index 00000000000..8a492f54bb9 --- /dev/null +++ b/ui/app/templates/components/wizard/radius-method.hbs @@ -0,0 +1,10 @@ + +

    + The RADIUS auth method allows users to authenticate with Vault using an existing RADIUS server that accepts the PAP authentication scheme. +

    +     diff --git a/ui/app/templates/components/wizard/replication-details.hbs b/ui/app/templates/components/wizard/replication-details.hbs new file mode 100644 index 00000000000..10d1d466e02 --- /dev/null +++ b/ui/app/templates/components/wizard/replication-details.hbs @@ -0,0 +1,19 @@ + + +

    + 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. +

    +     +
    +

    + Ready to move on? +

    + +
    +     diff --git a/ui/app/templates/components/wizard/replication-setup.hbs b/ui/app/templates/components/wizard/replication-setup.hbs new file mode 100644 index 00000000000..628f9e101bc --- /dev/null +++ b/ui/app/templates/components/wizard/replication-setup.hbs @@ -0,0 +1,16 @@ + + +

    + 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. +

    +     + +

    + A cluster is set as either a primary or secondary. The primary cluster is authoritative, and is the only cluster allowed to perform actions that write to the underlying data storage, such as modifying policies or secrets. Secondary clusters can service all other operations and forward any writes to the primary cluster. +

    +     +     diff --git a/ui/app/templates/components/wizard/secrets-credentials.hbs b/ui/app/templates/components/wizard/secrets-credentials.hbs new file mode 100644 index 00000000000..99ab2eb59c4 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-credentials.hbs @@ -0,0 +1,7 @@ + +

    + Enter details and generate your credential. +

    +     \ No newline at end of file diff --git a/ui/app/templates/components/wizard/secrets-details.hbs b/ui/app/templates/components/wizard/secrets-details.hbs new file mode 100644 index 00000000000..0c3d93fb030 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-details.hbs @@ -0,0 +1,11 @@ + +

    + {{#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. + {{/if}} +

    +     diff --git a/ui/app/templates/components/wizard/secrets-display-role.hbs b/ui/app/templates/components/wizard/secrets-display-role.hbs new file mode 100644 index 00000000000..5d7386bcc47 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-display-role.hbs @@ -0,0 +1,7 @@ + +

    + With our new role, we can generate a credential that has the same permissions as that role. Click on "Generate Credentials" links at the top of the page. +

    +     diff --git a/ui/app/templates/components/wizard/secrets-display.hbs b/ui/app/templates/components/wizard/secrets-display.hbs new file mode 100644 index 00000000000..c69c7cc309b --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-display.hbs @@ -0,0 +1,38 @@ +{{#if isSupported}} + +

    + {{#if actionText}} + Here is your generated credential. As you can see, we can only show the credential once, so you'll want to be sure to save it. If you need another credential in the future, just come back and generate a new one. + {{else}} + Well done! + {{/if}} + You're now ready to start using your new {{mountName}} secrets engine. +

    +     +{{else}} + +

    + Here you can see all the details of your new engine. This can be useful to get information for things like TTL or Seal Wrap settings. +

    +     +{{/if}} + + {{#if isSupported}} + + {{/if}} + + + \ No newline at end of file diff --git a/ui/app/templates/components/wizard/secrets-enable.hbs b/ui/app/templates/components/wizard/secrets-enable.hbs new file mode 100644 index 00000000000..6a9d5551f86 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-enable.hbs @@ -0,0 +1,9 @@ + +

    + 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-encryption.hbs b/ui/app/templates/components/wizard/secrets-encryption.hbs new file mode 100644 index 00000000000..423f8fc12d5 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-encryption.hbs @@ -0,0 +1,7 @@ + +

    + Enter the details about your encryption key and save it. +

    +     \ 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 new file mode 100644 index 00000000000..9d2dc3a6655 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-idle.hbs @@ -0,0 +1,9 @@ + +

    + 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 new file mode 100644 index 00000000000..84043b06e56 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-list.hbs @@ -0,0 +1,7 @@ + +

    + 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. +

    +     \ 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 new file mode 100644 index 00000000000..7d5a9c842b9 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-role.hbs @@ -0,0 +1,7 @@ + +

    + 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. +

    +     diff --git a/ui/app/templates/components/wizard/secrets-secret.hbs b/ui/app/templates/components/wizard/secrets-secret.hbs new file mode 100644 index 00000000000..9a64708ba41 --- /dev/null +++ b/ui/app/templates/components/wizard/secrets-secret.hbs @@ -0,0 +1,7 @@ + +

    + Enter the details of your secret and save it. +

    +     \ No newline at end of file diff --git a/ui/app/templates/components/wizard/ssh-engine.hbs b/ui/app/templates/components/wizard/ssh-engine.hbs new file mode 100644 index 00000000000..814ae8d18dd --- /dev/null +++ b/ui/app/templates/components/wizard/ssh-engine.hbs @@ -0,0 +1,10 @@ + +

    + The Vault SSH secrets engine provides secure authentication and authorization for access to machines via the SSH protocol. The Vault SSH secrets engine helps manage access to machine infrastructure, providing several ways to issue SSH credentials. +

    +     diff --git a/ui/app/templates/components/wizard/tools-info.hbs b/ui/app/templates/components/wizard/tools-info.hbs new file mode 100644 index 00000000000..3f76323210a --- /dev/null +++ b/ui/app/templates/components/wizard/tools-info.hbs @@ -0,0 +1,11 @@ + + +

    + 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. +

    +     +     \ 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 new file mode 100644 index 00000000000..59b8849c587 --- /dev/null +++ b/ui/app/templates/components/wizard/tools-lookup.hbs @@ -0,0 +1,11 @@ + + +

    + 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 new file mode 100644 index 00000000000..4343f450bfe --- /dev/null +++ b/ui/app/templates/components/wizard/tools-rewrap.hbs @@ -0,0 +1,11 @@ + + +

    + 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. +

    +     +     \ 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 new file mode 100644 index 00000000000..3f7ea86088c --- /dev/null +++ b/ui/app/templates/components/wizard/tools-rewrapped.hbs @@ -0,0 +1,11 @@ + + +

    + 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. +

    +     +     \ 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 new file mode 100644 index 00000000000..2333fce3c53 --- /dev/null +++ b/ui/app/templates/components/wizard/tools-unwrap.hbs @@ -0,0 +1,11 @@ + + +

    + 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" +

    +     +     \ 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 new file mode 100644 index 00000000000..f7db9a75ccd --- /dev/null +++ b/ui/app/templates/components/wizard/tools-unwrapped.hbs @@ -0,0 +1,14 @@ + + +

    + Here you can see that your data survived intact. These tools are mostly handy for applications to use, but if you ever do need to wrap data or handle the wrapping token, now you know how. +

    +     + +     \ 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 new file mode 100644 index 00000000000..bbcadf5f6e1 --- /dev/null +++ b/ui/app/templates/components/wizard/tools-wrap.hbs @@ -0,0 +1,11 @@ + + +

    + 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 new file mode 100644 index 00000000000..65b7f60d06a --- /dev/null +++ b/ui/app/templates/components/wizard/tools-wrapped.hbs @@ -0,0 +1,11 @@ + + +

    + 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. +

    +     +     \ No newline at end of file diff --git a/ui/app/templates/components/wizard/totp-engine.hbs b/ui/app/templates/components/wizard/totp-engine.hbs new file mode 100644 index 00000000000..e7ed49cac4e --- /dev/null +++ b/ui/app/templates/components/wizard/totp-engine.hbs @@ -0,0 +1,10 @@ + +

    + The TOTP secrets engine generates time-based credentials according to the TOTP standard. +

    +     diff --git a/ui/app/templates/components/wizard/transit-engine.hbs b/ui/app/templates/components/wizard/transit-engine.hbs new file mode 100644 index 00000000000..6e1f32e79bf --- /dev/null +++ b/ui/app/templates/components/wizard/transit-engine.hbs @@ -0,0 +1,10 @@ + +

    + The transit secrets engine handles cryptographic functions on data in-transit. Vault doesn't store the data sent to the secrets engine. It can also be viewed as "cryptography as a service" or "encryption as a service". +

    +     diff --git a/ui/app/templates/components/wizard/tutorial-active.hbs b/ui/app/templates/components/wizard/tutorial-active.hbs new file mode 100644 index 00000000000..809424bf717 --- /dev/null +++ b/ui/app/templates/components/wizard/tutorial-active.hbs @@ -0,0 +1 @@ + {{yield}} diff --git a/ui/app/templates/components/wizard/tutorial-complete.hbs b/ui/app/templates/components/wizard/tutorial-complete.hbs new file mode 100644 index 00000000000..1d2ae526bed --- /dev/null +++ b/ui/app/templates/components/wizard/tutorial-complete.hbs @@ -0,0 +1,11 @@ + +

    + We hope you enjoyed using Vault. You can get back to the guide in the user menu in the upper right. +

    +
    + +
    +     diff --git a/ui/app/templates/components/wizard/tutorial-error.hbs b/ui/app/templates/components/wizard/tutorial-error.hbs new file mode 100644 index 00000000000..5e76e9c249d --- /dev/null +++ b/ui/app/templates/components/wizard/tutorial-error.hbs @@ -0,0 +1,15 @@ + +

    + Something went wrong and you can't complete this step. +

    +     + + + + diff --git a/ui/app/templates/components/wizard/tutorial-idle.hbs b/ui/app/templates/components/wizard/tutorial-idle.hbs new file mode 100644 index 00000000000..6b15faa6c37 --- /dev/null +++ b/ui/app/templates/components/wizard/tutorial-idle.hbs @@ -0,0 +1,9 @@ + +

    Want a tour? Our helpful guide will introduce you to the Vault Web UI.

    +
    + +
    +     diff --git a/ui/app/templates/components/wizard/tutorial-paused.hbs b/ui/app/templates/components/wizard/tutorial-paused.hbs new file mode 100644 index 00000000000..bfcba36796c --- /dev/null +++ b/ui/app/templates/components/wizard/tutorial-paused.hbs @@ -0,0 +1,13 @@ + + + +

    Feel free to explore Vault. Click below to get back to the guide or close this window.

    +
    + +
    +     diff --git a/ui/app/templates/components/wizard/userpass-method.hbs b/ui/app/templates/components/wizard/userpass-method.hbs new file mode 100644 index 00000000000..4e14a8cd78b --- /dev/null +++ b/ui/app/templates/components/wizard/userpass-method.hbs @@ -0,0 +1,10 @@ + +

    + The Username & Password auth method allows users to authenticate with Vault using a username and password combination. +

    +     diff --git a/ui/app/templates/partials/replication/mode-summary.hbs b/ui/app/templates/partials/replication/mode-summary.hbs index f5d2486b901..555d31426c5 100644 --- a/ui/app/templates/partials/replication/mode-summary.hbs +++ b/ui/app/templates/partials/replication/mode-summary.hbs @@ -10,20 +10,48 @@ {{i-con class="has-text-grey is-medium" glyph="replication" size=20}} Disaster Recovery (DR) - {{replication-mode-summary - mode="dr" - cluster=cluster - tagName=(if cluster.dr.replicationEnabled 'a' 'div') - }} + {{#if cluster.dr.replicationEnabled}} + {{#link-to + "vault.cluster.replication.mode.index" + "dr" + class="link-plain" + }} + {{replication-mode-summary + mode="dr" + cluster=cluster + tagName="span" + }} + {{/link-to}} + {{else}} + {{replication-mode-summary + mode="dr" + cluster=cluster + tagName="div" + }} + {{/if}}

    {{i-con class="has-text-grey is-medium" glyph="perf-replication" size=20}} Performance

    - {{replication-mode-summary - mode="performance" - cluster=cluster - tagName=(if cluster.performance.replicationEnabled 'a' 'div') - }} + {{#if cluster.dr.replicationEnabled}} + {{#link-to + "vault.cluster.replication.mode.index" + "performance" + class="link-plain" + }} + {{replication-mode-summary + mode="performance" + cluster=cluster + tagName="span" + }} + {{/link-to}} + {{else}} + {{replication-mode-summary + mode="performance" + cluster=cluster + tagName="div" + }} + {{/if}}
    diff --git a/ui/app/templates/partials/status/replication.hbs b/ui/app/templates/partials/status/replication.hbs index 592c77f9fa4..13985407775 100644 --- a/ui/app/templates/partials/status/replication.hbs +++ b/ui/app/templates/partials/status/replication.hbs @@ -23,8 +23,8 @@
  • {{#if (has-feature "Performance Replication")}} {{#link-to - "vault.cluster.replication.mode.index" - "performance" + "vault.cluster.replication.mode.index" + "performance" }} {{replication-mode-summary mode="performance" diff --git a/ui/app/templates/svg/icons/enable/approle.hbs b/ui/app/templates/svg/icons/enable/approle.hbs new file mode 100644 index 00000000000..a385c40c1d5 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/approle.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/auth.hbs b/ui/app/templates/svg/icons/enable/auth.hbs new file mode 100644 index 00000000000..5661048e501 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/auth.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/aws.hbs b/ui/app/templates/svg/icons/enable/aws.hbs new file mode 100644 index 00000000000..7f9922d10ba --- /dev/null +++ b/ui/app/templates/svg/icons/enable/aws.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/azure.hbs b/ui/app/templates/svg/icons/enable/azure.hbs new file mode 100644 index 00000000000..a02af5698cf --- /dev/null +++ b/ui/app/templates/svg/icons/enable/azure.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/cert.hbs b/ui/app/templates/svg/icons/enable/cert.hbs new file mode 100644 index 00000000000..396bf9d8347 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/cert.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/consul.hbs b/ui/app/templates/svg/icons/enable/consul.hbs new file mode 100644 index 00000000000..37ef4bbdcd1 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/consul.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/database.hbs b/ui/app/templates/svg/icons/enable/database.hbs new file mode 100644 index 00000000000..1790f7991bb --- /dev/null +++ b/ui/app/templates/svg/icons/enable/database.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/gcp.hbs b/ui/app/templates/svg/icons/enable/gcp.hbs new file mode 100644 index 00000000000..78dc96cf643 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/gcp.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/github.hbs b/ui/app/templates/svg/icons/enable/github.hbs new file mode 100644 index 00000000000..98c72715863 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/github.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/kubernetes.hbs b/ui/app/templates/svg/icons/enable/kubernetes.hbs new file mode 100644 index 00000000000..b922eca3f4b --- /dev/null +++ b/ui/app/templates/svg/icons/enable/kubernetes.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/kv.hbs b/ui/app/templates/svg/icons/enable/kv.hbs new file mode 100644 index 00000000000..da14bee0576 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/kv.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/nomad.hbs b/ui/app/templates/svg/icons/enable/nomad.hbs new file mode 100644 index 00000000000..adf3e6c5be6 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/nomad.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/okta.hbs b/ui/app/templates/svg/icons/enable/okta.hbs new file mode 100644 index 00000000000..00447d45700 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/okta.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/pki.hbs b/ui/app/templates/svg/icons/enable/pki.hbs new file mode 100644 index 00000000000..809dc7c2a02 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/pki.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/rabbitmq.hbs b/ui/app/templates/svg/icons/enable/rabbitmq.hbs new file mode 100644 index 00000000000..89972a63d03 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/rabbitmq.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/ssh.hbs b/ui/app/templates/svg/icons/enable/ssh.hbs new file mode 100644 index 00000000000..1d097fcf573 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/ssh.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/token.hbs b/ui/app/templates/svg/icons/enable/token.hbs new file mode 100644 index 00000000000..dab3c6d8a94 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/token.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/totp.hbs b/ui/app/templates/svg/icons/enable/totp.hbs new file mode 100644 index 00000000000..4d40a5c5259 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/totp.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/transit.hbs b/ui/app/templates/svg/icons/enable/transit.hbs new file mode 100644 index 00000000000..a9395d3a677 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/transit.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/enable/userpass.hbs b/ui/app/templates/svg/icons/enable/userpass.hbs new file mode 100644 index 00000000000..2e0759ef4a1 --- /dev/null +++ b/ui/app/templates/svg/icons/enable/userpass.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/svg/icons/learn.hbs b/ui/app/templates/svg/icons/learn.hbs new file mode 100644 index 00000000000..8ab48f31390 --- /dev/null +++ b/ui/app/templates/svg/icons/learn.hbs @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/templates/svg/icons/stopwatch.hbs b/ui/app/templates/svg/icons/stopwatch.hbs new file mode 100644 index 00000000000..c7e33e22def --- /dev/null +++ b/ui/app/templates/svg/icons/stopwatch.hbs @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/templates/svg/icons/tour.hbs b/ui/app/templates/svg/icons/tour.hbs new file mode 100644 index 00000000000..141f867d793 --- /dev/null +++ b/ui/app/templates/svg/icons/tour.hbs @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/templates/svg/icons/video.hbs b/ui/app/templates/svg/icons/video.hbs new file mode 100644 index 00000000000..a3332ad3871 --- /dev/null +++ b/ui/app/templates/svg/icons/video.hbs @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/templates/vault/cluster.hbs b/ui/app/templates/vault/cluster.hbs index 699cd4d3486..fff0f9f0a90 100644 --- a/ui/app/templates/vault/cluster.hbs +++ b/ui/app/templates/vault/cluster.hbs @@ -1,42 +1,42 @@ - {{#if showNav}} - - - {{#if (has-feature "Namespaces")}} - {{#if media.isMobile}} - - {{partial 'svg/vault-logo'}} - - {{/if}} - {{else}} - +{{#if showNav}} + + + {{#if (has-feature "Namespaces")}} + {{#if media.isMobile}} + {{partial 'svg/vault-logo'}} - - {{/if}} - - -
    - -
    - {{#if namespaceService.inRootNamespace}} -
    - {{status-menu}} -
    + {{/if}} + {{else}} + + {{partial 'svg/vault-logo'}} + + {{/if}} + + +
    + +
    + {{#if namespaceService.inRootNamespace}}
    - {{status-menu type="user"}} + {{status-menu}}
    -     + {{/if}} +
    + {{status-menu type="user"}} +
    +
      {{#if (and (has-feature "Namespaces") media.isTablet) }} @@ -113,28 +113,30 @@ {{/each}} {{#if showNav}} -
      -
      - {{component - (if - (or + +
      +
      + {{component + (if + (or + (is-after (now interval=1000) auth.tokenExpirationDate) + (and activeClusterName auth.currentToken) + ) + 'token-expire-warning' + null + ) + }} + {{#unless (and + activeClusterName + auth.currentToken (is-after (now interval=1000) auth.tokenExpirationDate) - (and activeClusterName auth.currentToken) ) - 'token-expire-warning' - null - ) - }} - {{#unless (and - activeClusterName - auth.currentToken - (is-after (now interval=1000) auth.tokenExpirationDate) - ) - }} - {{outlet}} - {{/unless}} -
      -
      + }} + {{outlet}} + {{/unless}} +
      +
      + {{else}} {{outlet}} {{/if}} diff --git a/ui/app/templates/vault/cluster/settings/auth/enable.hbs b/ui/app/templates/vault/cluster/settings/auth/enable.hbs index 3ec71759e67..4f459ae7789 100644 --- a/ui/app/templates/vault/cluster/settings/auth/enable.hbs +++ b/ui/app/templates/vault/cluster/settings/auth/enable.hbs @@ -1,4 +1,4 @@ -{{mount-backend-form - onMountSuccess=(action "onMountSuccess") - onConfigError=(action "onConfigError") -}} + diff --git a/ui/app/templates/vault/cluster/settings/mount-secret-backend.hbs b/ui/app/templates/vault/cluster/settings/mount-secret-backend.hbs index 616b593c53c..b89ba3ae614 100644 --- a/ui/app/templates/vault/cluster/settings/mount-secret-backend.hbs +++ b/ui/app/templates/vault/cluster/settings/mount-secret-backend.hbs @@ -1,114 +1,5 @@ - - -

      - Enable a secrets engine -

      -       -       -
      -
      - {{message-error model=model}} - -
      - -
      -
      - -
      -
      -
      - {{#if selection.deprecated}} -
      -
      - The {{selection.label}} backend is deprecated! If you are using a SQL database backend, use the general purpose {{#doc-link path="/secrets/databases/index.html"}}Databases{{/doc-link}} backend instead. -
      -
      - {{/if}} -
      - -
      - {{input value=selectedPath class="input" id="backend-path" data-test-secret-backend-path=true}} -
      -
      -
      - -
      - {{textarea class="editor" value=description id="backend-description" class="textarea"}} -
      -
      - {{#if (eq selectedType "kv")}} -
      - -
      -
      - -
      -
      -

      - The KV Secrets engine can operate in different modes. Version 1 is the original generic secrets engine the allows for storing of static key/value pairs. Version 2 added more features including data versioning, TTLs, and check and set. -

      -
      - {{/if}} -
      -
      - {{input type="checkbox" id="local" name="local" checked=local}} - -

      - When replication is enabled, a local mount will not be replicated across clusters. This can only be specified at mount time. -

      -
      -
      - -
      -
      - {{input type="checkbox" id="sealWrap" name="sealWrap" checked=sealWrap}} - -

      - When enabled - if a seal supporting seal wrapping is specified in the configuration, all critical security parameters (CSPs) in this backend will be seal wrapped. (For K/V mounts, all values will be seal wrapped.) This can only be specified at mount time. -

      -
      -
      -
      - {{toggle-button toggleTarget=this toggleAttr="showConfig" data-test-secret-backend-options=true}} - {{#if showConfig}} -
      - {{ttl-picker data-test-secret-backend-default-ttl=true labelText='Default lease TTL' onChange=(action (mut default_lease_ttl))}} - {{ttl-picker data-test-secret-backend-max-ttl labelText='Maximum lease TTL' onChange=(action (mut max_lease_ttl))}} -
      - {{/if}} -
      -
      -
      - -
      -
      + diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs index 422d0641d78..88a8cdd3324 100644 --- a/ui/app/templates/vault/cluster/unseal.hbs +++ b/ui/app/templates/vault/cluster/unseal.hbs @@ -10,6 +10,7 @@ { + mountSecrets.selectType('kv').next().path(enginePath).version(1).submit(); + }); listPage.create(); editPage.createSecret(secretPath, 'foo', 'bar'); diff --git a/ui/tests/acceptance/settings-test.js b/ui/tests/acceptance/settings-test.js index 182d1a16830..5f95af32aa2 100644 --- a/ui/tests/acceptance/settings-test.js +++ b/ui/tests/acceptance/settings-test.js @@ -1,6 +1,7 @@ import { test } from 'qunit'; import moduleForAcceptance from 'vault/tests/helpers/module-for-acceptance'; import backendListPage from 'vault/tests/pages/secrets/backends'; +import mountSecrets from 'vault/tests/pages/settings/mount-secret-backend'; moduleForAcceptance('Acceptance | settings', { beforeEach() { @@ -20,17 +21,17 @@ test('settings', function(assert) { visit('/vault/settings/mount-secret-backend'); andThen(function() { assert.equal(currentURL(), '/vault/settings/mount-secret-backend'); - }); - - fillIn('[data-test-secret-backend-type]', type); - fillIn('[data-test-secret-backend-path]', path); - click('[data-test-secret-backend-options]'); - // set a ttl of 100s - fillIn('[data-test-secret-backend-default-ttl] input', 100); - fillIn('[data-test-secret-backend-default-ttl] select', 's'); + mountSecrets + .selectType(type) + .next() + .path(path) + .toggleOptions() + .defaultTTLVal(100) + .defaultTTLUnit('s') + .submit(); + }); - click('[data-test-secret-backend-submit]'); andThen(() => { assert.equal(currentURL(), `/vault/secrets`, 'redirects to secrets page'); assert.ok( diff --git a/ui/tests/acceptance/settings/auth/configure/index-test.js b/ui/tests/acceptance/settings/auth/configure/index-test.js index 3c110180535..f8310e51f1b 100644 --- a/ui/tests/acceptance/settings/auth/configure/index-test.js +++ b/ui/tests/acceptance/settings/auth/configure/index-test.js @@ -12,7 +12,10 @@ moduleForAcceptance('Acceptance | settings/auth/configure', { test('it redirects to section options when there are no other sections', function(assert) { const path = `approle-${new Date().getTime()}`; const type = 'approle'; - enablePage.visit().enableAuth(type, path); + enablePage.visit(); + andThen(() => { + enablePage.form.mount(type, path); + }); page.visit({ path }); andThen(() => { assert.equal(currentRouteName(), 'vault.cluster.settings.auth.configure.section'); @@ -23,9 +26,11 @@ test('it redirects to section options when there are no other sections', functio test('it redirects to the first section', function(assert) { const path = `aws-${new Date().getTime()}`; const type = 'aws'; - enablePage.visit().enableAuth(type, path); + enablePage.visit(); + andThen(() => { + enablePage.form.mount(type, path); + }); page.visit({ path }); - andThen(() => { assert.equal(currentRouteName(), 'vault.cluster.settings.auth.configure.section'); assert.equal( diff --git a/ui/tests/acceptance/settings/auth/configure/section-test.js b/ui/tests/acceptance/settings/auth/configure/section-test.js index b40fa48c6f8..f2ac4ae4236 100644 --- a/ui/tests/acceptance/settings/auth/configure/section-test.js +++ b/ui/tests/acceptance/settings/auth/configure/section-test.js @@ -23,7 +23,10 @@ test('it can save options', function(assert) { const path = `approle-${new Date().getTime()}`; const type = 'approle'; const section = 'options'; - enablePage.visit().enableAuth(type, path); + enablePage.visit(); + andThen(() => { + enablePage.form.mount(type, path); + }); page.visit({ path, section }); andThen(() => { page.fields().findByName('description').textarea('This is AppRole!'); diff --git a/ui/tests/acceptance/settings/auth/enable-test.js b/ui/tests/acceptance/settings/auth/enable-test.js index 9cfe80ecfca..86931210837 100644 --- a/ui/tests/acceptance/settings/auth/enable-test.js +++ b/ui/tests/acceptance/settings/auth/enable-test.js @@ -10,14 +10,14 @@ moduleForAcceptance('Acceptance | settings/auth/enable', { }); test('it mounts and redirects', function(assert) { + // always force the new mount to the top of the list + const path = `approle-${new Date().getTime()}`; + const type = 'approle'; page.visit(); andThen(() => { assert.equal(currentRouteName(), 'vault.cluster.settings.auth.enable'); + page.form.mount(type, path); }); - // always force the new mount to the top of the list - const path = `approle-${new Date().getTime()}`; - const type = 'approle'; - page.enableAuth(type, path); andThen(() => { assert.equal( page.flash.latestMessage, diff --git a/ui/tests/acceptance/settings/mount-secret-backend-test.js b/ui/tests/acceptance/settings/mount-secret-backend-test.js index 6708f091f2f..04af1522374 100644 --- a/ui/tests/acceptance/settings/mount-secret-backend-test.js +++ b/ui/tests/acceptance/settings/mount-secret-backend-test.js @@ -10,27 +10,30 @@ moduleForAcceptance('Acceptance | settings/mount-secret-backend', { }); test('it sets the ttl corrects when mounting', function(assert) { - page.visit(); - andThen(() => { - assert.equal(currentRouteName(), 'vault.cluster.settings.mount-secret-backend'); - }); // always force the new mount to the top of the list const path = `kv-${new Date().getTime()}`; const defaultTTLHours = 100; const maxTTLHours = 300; const defaultTTLSeconds = defaultTTLHours * 60 * 60; const maxTTLSeconds = maxTTLHours * 60 * 60; - page - .type('kv') - .path(path) - .toggleOptions() - .defaultTTLVal(defaultTTLHours) - .defaultTTLUnit('h') - .maxTTLVal(maxTTLHours) - .maxTTLUnit('h') - .submit(); - configPage.visit({ backend: path }); + page.visit(); + andThen(() => { + assert.equal(currentRouteName(), 'vault.cluster.settings.mount-secret-backend'); + page + .selectType('kv') + .next() + .path(path) + .toggleOptions() + .defaultTTLVal(defaultTTLHours) + .defaultTTLUnit('h') + .maxTTLVal(maxTTLHours) + .maxTTLUnit('h') + .submit(); + }); + andThen(() => { + configPage.visit({ backend: path }); + }); andThen(() => { assert.equal(configPage.defaultTTL, defaultTTLSeconds, 'shows the proper TTL'); assert.equal(configPage.maxTTL, maxTTLSeconds, 'shows the proper max TTL'); diff --git a/ui/tests/acceptance/transit-test.js b/ui/tests/acceptance/transit-test.js index ee3905be91c..dd3cdad3f5c 100644 --- a/ui/tests/acceptance/transit-test.js +++ b/ui/tests/acceptance/transit-test.js @@ -231,7 +231,7 @@ const testEncryption = (assert, keyName) => { }); }; test('transit backend', function(assert) { - assert.expect(50); + assert.expect(49); const now = new Date().getTime(); const transitPath = `transit-${now}`; diff --git a/ui/tests/helpers/mount-secret-backend.js b/ui/tests/helpers/mount-secret-backend.js index 84661ff87be..47593466a8c 100644 --- a/ui/tests/helpers/mount-secret-backend.js +++ b/ui/tests/helpers/mount-secret-backend.js @@ -1,14 +1,11 @@ import Ember from 'ember'; +import mountSecrets from 'vault/tests/pages/settings/mount-secret-backend'; export default Ember.Test.registerAsyncHelper('mountSupportedSecretBackend', function(_, assert, type, path) { - visit('/vault/settings/mount-secret-backend'); - andThen(function() { - assert.equal(currentURL(), '/vault/settings/mount-secret-backend'); + mountSecrets.visit(); + andThen(() => { + return mountSecrets.mount(type, path); }); - - fillIn('[data-test-secret-backend-type]', type); - fillIn('[data-test-secret-backend-path]', path); - click('[data-test-secret-backend-submit]'); return andThen(() => { assert.equal(currentURL(), `/vault/secrets/${path}/list`, `redirects to ${path} index`); assert.ok( diff --git a/ui/tests/integration/components/mount-backend-form-test.js b/ui/tests/integration/components/mount-backend-form-test.js index 90b047b0f48..db790ac1e5b 100644 --- a/ui/tests/integration/components/mount-backend-form-test.js +++ b/ui/tests/integration/components/mount-backend-form-test.js @@ -28,21 +28,23 @@ moduleForComponent('mount-backend-form', 'Integration | Component | mount backen test('it renders', function(assert) { this.render(hbs`{{mount-backend-form}}`); assert.equal(component.header, 'Enable an authentication method', 'renders auth header in default state'); - assert.equal(component.fields().count, 2, 'renders 2 fields'); + assert.ok(component.types.length > 0, 'renders type picker'); }); test('it changes path when type is changed', function(assert) { this.render(hbs`{{mount-backend-form}}`); - assert.equal(component.pathValue, 'approle', 'defaults to approle (first in the list)'); - component.type('aws'); - assert.equal(component.pathValue, 'aws', 'updates to the value of the type'); + component.selectType('aws').next(); + assert.equal(component.pathValue, 'aws', 'sets the value of the type'); + component.back().selectType('approle').next(); + assert.equal(component.pathValue, 'approle', 'updates the value of the type'); }); test('it keeps path value if the user has changed it', function(assert) { this.render(hbs`{{mount-backend-form}}`); + component.selectType('approle').next(); assert.equal(component.pathValue, 'approle', 'defaults to approle (first in the list)'); component.path('newpath'); - component.type('aws'); + component.back().selectType('aws').next(); assert.equal(component.pathValue, 'newpath', 'updates to the value of the type'); }); @@ -51,7 +53,7 @@ test('it calls mount success', function(assert) { this.set('onMountSuccess', spy); this.render(hbs`{{mount-backend-form onMountSuccess=onMountSuccess}}`); - component.path('foo').type('approle').submit(); + component.mount('approle', 'foo').submit(); return wait().then(() => { assert.equal(this.server.db.authMethods.length, 1, 'it enables an auth method'); assert.ok(spy.calledOnce, 'calls the passed success method'); @@ -65,7 +67,7 @@ test('it calls mount mount config error', function(assert) { this.set('onConfigError', spy2); this.render(hbs`{{mount-backend-form onMountSuccess=onMountSuccess onConfigError=onConfigError}}`); - component.path('bar').type('kubernetes'); + component.selectType('kubernetes').next().path('bar'); // kubernetes requires a host + a cert / pem, so only filling the host will error component.fields().fillIn('kubernetesHost', 'host'); component.submit(); diff --git a/ui/tests/integration/utils/field-to-attrs-test.js b/ui/tests/integration/utils/field-to-attrs-test.js index dbae80b9080..be5d9e9c769 100644 --- a/ui/tests/integration/utils/field-to-attrs-test.js +++ b/ui/tests/integration/utils/field-to-attrs-test.js @@ -1,14 +1,12 @@ import Ember from 'ember'; import { moduleForModel, test } from 'ember-qunit'; -import { methods } from 'vault/helpers/mountable-auth-methods'; import fieldToAttrs, { expandAttributeMeta } from 'vault/utils/field-to-attrs'; -const METHODS = methods(); moduleForModel('test-form-model', 'Integration | Util | field to attrs', { needs: ['model:auth-config', 'model:mount-config'], }); -const PATH_ATTR = { type: 'string', name: 'path', options: { defaultValue: METHODS[0].value } }; +const PATH_ATTR = { type: 'string', name: 'path', options: {} }; const DESCRIPTION_ATTR = { type: 'string', name: 'description', options: { editType: 'textarea' } }; const DEFAULT_LEASE_ATTR = { type: undefined, diff --git a/ui/tests/pages/components/mount-backend-form.js b/ui/tests/pages/components/mount-backend-form.js index 3c0a1d1934f..5482b9495f8 100644 --- a/ui/tests/pages/components/mount-backend-form.js +++ b/ui/tests/pages/components/mount-backend-form.js @@ -1,4 +1,4 @@ -import { clickable, fillable, text, value } from 'ember-cli-page-object'; +import { clickable, collection, fillable, text, value } from 'ember-cli-page-object'; import fields from './form-field'; import errorText from './message-in-page'; @@ -7,8 +7,26 @@ export default { ...errorText, header: text('[data-test-mount-form-header]'), submit: clickable('[data-test-mount-submit]'), + next: clickable('[data-test-mount-next]'), + back: clickable('[data-test-mount-back]'), path: fillable('[data-test-input="path"]'), + toggleOptions: clickable('[data-test-toggle-group="Method Options"]'), pathValue: value('[data-test-input="path"]'), - type: fillable('[data-test-input="type"]'), - typeValue: value('[data-test-input="type"]'), + types: collection('[data-test-mount-type-radio] input', { + select: clickable(), + mountType: value(), + }), + type: fillable('[name="mount-type"]'), + selectType(type) { + let types = this.types; + let thing = types.filterBy('mountType', type)[0]; + thing.select(); + return this; + }, + mount(type, path) { + if (path) { + return this.selectType(type).next().path(path).submit(); + } + return this.selectType(type).next().submit(); + }, }; diff --git a/ui/tests/pages/settings/auth/enable.js b/ui/tests/pages/settings/auth/enable.js index db36c41a09c..2a744b54580 100644 --- a/ui/tests/pages/settings/auth/enable.js +++ b/ui/tests/pages/settings/auth/enable.js @@ -6,10 +6,4 @@ export default create({ visit: visitable('/vault/settings/auth/enable'), form: backendForm, flash: flashMessages, - enableAuth(type, path) { - if (path) { - return this.form.path(path).type(type).submit(); - } - return this.form.type(type).submit(); - }, }); diff --git a/ui/tests/pages/settings/mount-secret-backend.js b/ui/tests/pages/settings/mount-secret-backend.js index 54d489e6bc4..b5bd14200b9 100644 --- a/ui/tests/pages/settings/mount-secret-backend.js +++ b/ui/tests/pages/settings/mount-secret-backend.js @@ -1,14 +1,12 @@ -import { create, visitable, fillable, clickable } from 'ember-cli-page-object'; +import { create, visitable, fillable } from 'ember-cli-page-object'; +import mountForm from 'vault/tests/pages/components/mount-backend-form'; export default create({ visit: visitable('/vault/settings/mount-secret-backend'), - type: fillable('[data-test-secret-backend-type]'), - path: fillable('[data-test-secret-backend-path]'), - submit: clickable('[data-test-secret-backend-submit]'), - toggleOptions: clickable('[data-test-secret-backend-options]'), - version: fillable('[data-test-secret-backend-version]'), - maxTTLVal: fillable('[data-test-ttl-value]', { scope: '[data-test-secret-backend-max-ttl]' }), - maxTTLUnit: fillable('[data-test-ttl-unit]', { scope: '[data-test-secret-backend-max-ttl]' }), - defaultTTLVal: fillable('[data-test-ttl-value]', { scope: '[data-test-secret-backend-default-ttl]' }), - defaultTTLUnit: fillable('[data-test-ttl-unit]', { scope: '[data-test-secret-backend-default-ttl]' }), + ...mountForm, + version: fillable('[data-test-input="options.version"]'), + maxTTLVal: fillable('[data-test-input="config.maxLeaseTtl"] [data-test-ttl-value]'), + maxTTLUnit: fillable('[data-test-input="config.maxLeaseTtl"] [data-test-ttl-unit]'), + defaultTTLVal: fillable('[data-test-input="config.defaultLeaseTtl"] [data-test-ttl-value]'), + defaultTTLUnit: fillable('[data-test-input="config.defaultLeaseTtl"] [data-test-ttl-unit]'), }); diff --git a/ui/yarn.lock b/ui/yarn.lock index 1114633ae34..73b621ae69e 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -10139,6 +10139,10 @@ xmlhttprequest-ssl@1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d" +xstate@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/xstate/-/xstate-3.3.3.tgz#64177cd4473d4c2424b3df7d2434d835404b09a9" + xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"