Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI secondary dr recovery token fix #5818

Merged
merged 3 commits into from
Nov 19, 2018
Merged

UI secondary dr recovery token fix #5818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72758a3
use the OTP that the server provides instead of generating one in the…
meirish Nov 19, 2018
8fd62f4
fix button styling
meirish Nov 19, 2018
068511a
differentiate between OTP and encoded token and encrypted token in th…
meirish Nov 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/app/adapters/cluster.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default ApplicationAdapter.extend({
generateDrOperationToken(data, options) {
const verb = options && options.checkStatus ? 'GET' : 'PUT';
let url = `${this.buildURL()}/replication/dr/secondary/generate-operation-token/`;
if (!data || data.pgp_key || data.otp) {
if (!data || data.pgp_key || data.attempt) {
// start the generation
url = url + 'attempt';
} else {
Expand Down
39 changes: 14 additions & 25 deletions ui/app/components/shamir-flow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { gt } from '@ember/object/computed';
import { camelize } from '@ember/string';
import Component from '@ember/component';
import { get, computed } from '@ember/object';
import base64js from 'base64-js';

const DEFAULTS = {
key: null,
Expand Down Expand Up @@ -62,18 +61,18 @@ export default Component.extend(DEFAULTS, {
hasProgress: gt('progress', 0),

actionSuccess(resp) {
let { onUpdate, isComplete, onShamirSuccess, thresholdPath } = this.getProperties(
'onUpdate',
'isComplete',
'onShamirSuccess',
'thresholdPath'
);
let { onUpdate, isComplete, onShamirSuccess, thresholdPath } = this;
let threshold = get(resp, thresholdPath);
let props = {
...resp,
threshold,
};
this.stopLoading();
// if we have an OTP, but update doesn't include one,
// we don't want to null it out
if (this.otp && !props.otp) {
delete props.otp;
}
this.setProperties(props);
onUpdate(props);
if (isComplete(props)) {
Expand All @@ -91,19 +90,11 @@ export default Component.extend(DEFAULTS, {
}
},

generateStep: computed('generateWithPGP', 'haveSavedPGPKey', 'otp', 'pgp_key', function() {
let { generateWithPGP, otp, pgp_key, haveSavedPGPKey } = this.getProperties(
'generateWithPGP',
'otp',
'pgp_key',
'haveSavedPGPKey'
);
if (!generateWithPGP && !pgp_key && !otp) {
generateStep: computed('generateWithPGP', 'haveSavedPGPKey', 'pgp_key', function() {
let { generateWithPGP, pgp_key, haveSavedPGPKey } = this;
if (!generateWithPGP && !pgp_key) {
return 'chooseMethod';
}
if (otp) {
return 'beginGenerationWithOTP';
}
if (generateWithPGP) {
if (pgp_key && haveSavedPGPKey) {
return 'beginGenerationWithPGP';
Expand Down Expand Up @@ -133,7 +124,7 @@ export default Component.extend(DEFAULTS, {
}

return {
otp: data.otp,
attempt: data.attempt,
};
},

Expand All @@ -144,6 +135,7 @@ export default Component.extend(DEFAULTS, {
this.set('loading', true);
const adapter = this.get('store').adapterFor('cluster');
const method = adapter[action];

method
.call(adapter, data, { checkStatus })
.then(resp => this.actionSuccess(resp), (...args) => this.actionError(...args));
Expand All @@ -164,15 +156,12 @@ export default Component.extend(DEFAULTS, {
},

startGenerate(data) {
if (this.generateAction) {
data.attempt = true;
}
this.attemptProgress(this.extractData(data));
},

generateOTP() {
const bytes = new window.Uint8Array(16);
window.crypto.getRandomValues(bytes);
this.set('otp', base64js.fromByteArray(bytes));
},

setKey(_, keyFile) {
this.set('pgp_key', keyFile.value);
this.set('pgpKeyFile', keyFile);
Expand Down
7 changes: 4 additions & 3 deletions ui/app/styles/core/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
min-width: 6rem;
padding: $size-10 $size-8;
text-decoration: none;
transition: background-color $speed, border-color $speed, box-shadow $speed,
color $speed;
transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
vertical-align: middle;

&.is-icon {
Expand Down Expand Up @@ -45,7 +44,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);

@each $name, $pair in $colors {
$color: nth($pair, 1);
@if $name == "primary" {
@if $name == 'primary' {
$color: $blue;
}
$color-invert: nth($pair, 2);
Expand Down Expand Up @@ -211,8 +210,10 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
}
}

.button.auto-width,
.button .icon.auto-width {
width: auto;
min-width: auto;
margin: 0 !important;
}

Expand Down
203 changes: 89 additions & 114 deletions ui/app/templates/components/shamir-flow.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,148 +4,123 @@
<HoverCopyButton @copyValue={{encoded_token}} />
<div class="message-body">
<h4 class="title is-7 is-marginless">
Encoded Operation Token
{{#if otp}}
Encoded Operation Token
{{else}}
Encrypted Operation Token
{{/if}}
</h4>
<code class="is-word-break">{{encoded_token}}</code>
</div>
</div>
<p>
If you entered a One Time Password, you can use the Vault CLI to decode the Token:
</p>
<div class="message is-list has-copy-button" tabindex="-1">
{{#with (if otp
(concat 'vault operator generate-root -otp="' otp '" -decode="' encoded_token '"')
(concat 'vault operator generate-root -otp="<enter your otp here>" -decode="' encoded_token '"')
) as |cmd|}}
<HoverCopyButton @copyValue={{cmd}} />
{{#if otp}}
<div class="message is-list has-copy-button" tabindex="-1">
<HoverCopyButton @copyValue={{otp}} />
<div class="message-body">
<h4 class="title is-7 is-marginless">
DR Operation Token Command
One Time Password (otp)
</h4>
<code class="is-word-break">{{cmd}}</code>
<code class="is-word-break">{{otp}}</code>
</div>
{{/with}}
</div>
</div>
<div class="message is-list has-copy-button" tabindex="-1">
{{#let
(concat 'vault operator generate-root -otp="' otp '" -decode="' encoded_token '"')
as |cmd|}}
<HoverCopyButton @copyValue={{cmd}} />
<div class="message-body">
<h4 class="title is-7 is-marginless">
DR Operation Token Command
</h4>
<code class="is-word-break">{{cmd}}</code>
</div>
{{/let}}
</div>
{{/if}}
</div>
<div class="box is-marginless is-shadowless">
<button type="button" class="button" {{action 'reset'}}>
Clear Token
</button>
</div>
{{else if (and generateAction (not started))}}
<form {{action 'startGenerate' (hash otp=otp pgp_key=pgp_key) on="submit"}} id="shamir">
{{message-error errors=errors}}
{{#if (eq generateStep 'chooseMethod')}}
<div class="box is-marginless is-shadowless">
<p>
Updating or promoting this cluster requires an operation token. Let's generate one by
inputting the master key shares. To get started you'll need to generate a One Time Password
(OTP) or provide a PGP Key to encrypt the resultant operation token.
</p>
<form {{action 'startGenerate' (hash pgp_key=pgp_key) on="submit"}} id="shamir">
{{message-error errors=errors}}
{{#if (eq generateStep 'chooseMethod')}}
<div class="box is-marginless is-shadowless">
<p>
Updating or promoting this cluster requires an operation token. Let's generate one by
inputting the master key shares. If you'd like to encrypt the token with a PGP Key, please click "Provide PGP Key" below, otherwise we can begin generation of the Operation Token.
</p>
</div>
<div class="box is-shadowless field is-grouped is-grouped-centered">
<div class="control">
<button type="button" class="button is-primary" {{action (mut generateWithPGP) true}}>
Provide PGP Key
</button>
</div>
<div class="box is-shadowless field is-grouped is-grouped-centered">
<div class="control">
<button type="button" class="button is-primary" {{action (mut generateWithPGP) true}}>
Provide PGP Key
</button>
</div>
<div class="control">
<span class="button is-white is-static">
or
</span>
</div>
<div class="control">
<button type="button" class="button is-primary" {{action "generateOTP"}}>
Generate OTP
</button>
</div>
<div class="control">
<span class="button auto-width is-white is-static">
or
</span>
</div>
{{/if}}

{{#if (eq generateStep 'providePGPKey')}}

<div class="box is-marginless is-shadowless">
<div class="control">
<button type="submit" class="button is-primary">
Generate Operation Token
</button>
</div>
</div>
{{/if}}
{{#if (eq generateStep 'providePGPKey')}}
<div class="box is-marginless is-shadowless">
<p>
Choose a PGP Key from your computer or paste the contents of one in the form below.
This key will be used to Encrypt the generated Operation Token.
</p>
{{pgp-file index='' key=pgpKeyFile onChange=(action 'setKey')}}
</div>
<div class="field is-grouped box is-marginless is-shadowless">
<div class="control">
<button type="button" class="button" {{action "reset"}}>
Back
</button>
</div>

<div class="field is-grouped box is-marginless is-shadowless">
<div class="control">
<button type="button" class="button" {{action "reset"}}>
Back
</button>
</div>
<div class="control">
<button type="button" disabled={{not pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
Use PGP Key
</button>
</div>
</div>
{{/if}}
{{#if (eq generateStep 'beginGenerationWithPGP')}}
<div class="box is-marginless is-shadowless">
<p>
Below is the base-64 encoded PGP Key that will be used to encrypt the generated Operation Token.
Next we'll enter portions of the master key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
</p>
<div class="message is-list has-copy-button" tabindex="-1">
<HoverCopyButton @copyValue={{pgp_key}} />
<div class="message-body">
<h4 class="title is-7 is-marginless">
PGP Key {{pgpKeyFile.fileName}}
</h4>
<code class="is-word-break">{{pgp_key}}</code>
</div>
</div>
<div class="control">
<button type="button" disabled={{not pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
Use PGP Key
</button>
</div>
<div class="field is-grouped box is-marginless is-shadowless">
<div class="control">
<button type="button" class="button" {{action "reset"}}>
Back
</button>
</div>
<div class="control">
<button type="submit" disabled={{and (not pgp_key) (not otp)}} class="button is-primary">
Generate Operation Token
</button>
</div>
{{/if}}
{{#if (eq generateStep 'beginGenerationWithPGP')}}
<div class="box is-marginless is-shadowless">
<p>
Below is the base-64 encoded PGP Key that will be used to encrypt the generated Operation Token.
Next we'll enter portions of the master key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
</p>
<div class="message is-list has-copy-button" tabindex="-1">
<HoverCopyButton @copyValue={{pgp_key}} />
<div class="message-body">
<h4 class="title is-7 is-marginless">
PGP Key {{pgpKeyFile.fileName}}
</h4>
<code class="is-word-break">{{pgp_key}}</code>
</div>
</div>
{{/if}}
{{#if (eq generateStep 'beginGenerationWithOTP')}}
<div class="box is-marginless is-shadowless">
<p>
Below is the generated OTP. This will be used to encrypt the generated Operation Token.
<em class="has-text-danger has-text-weight-semibold">
Make sure to save this, as you will need it later to decrypt the Operation Token.
</em>
Next we'll enter portions of the master key to generate an Operation Token. Click the "Generate Operation Token" button to proceed.
</p>
<div class="message is-list has-copy-button" tabindex="-1">
<HoverCopyButton @copyValue={{otp}} />
<div class="message-body">
<h4 class="title is-7 is-marginless">
One Time Password
</h4>
<code class="is-word-break">{{otp}}</code>
</div>
</div>
</div>
<div class="field is-grouped box is-marginless is-shadowless">
<div class="control">
<button type="button" class="button" {{action "reset"}}>
Back
</button>
</div>
<div class="field is-grouped box is-marginless is-shadowless">
<div class="control">
<button type="button" class="button" {{action "reset"}}>
Back
</button>
</div>
<div class="control">
<button type="submit" disabled={{and (not pgp_key) (not otp)}} class="button is-primary">
Generate Operation Token
</button>
</div>
<div class="control">
<button type="submit" disabled={{and (not pgp_key)}} class="button is-primary">
Generate Operation Token
</button>
</div>
{{/if}}
</div>
{{/if}}
</form>
{{else}}
<form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">
Expand Down