Ui ie11 button form attr (#4378)
* move submit buttons in auth-form into a form tag because IE11 is sad * add acceptance test for auth-method clearing * update ember-cli-page-object * actually remove the form attr on the auth-form component * remove form attribute on init form * remove form attribute from shamir-flow component * stringify not strigify
This commit is contained in:
Matthew Irish
GitHub
parent
43cb70c7bf
commit
1f4f2b2f0f
|
|
@ -3,7 +3,21 @@ import { supportedAuthBackends } from 'vault/helpers/supported-auth-backends';
|
|||
const BACKENDS = supportedAuthBackends();
|
||||
const { computed, inject } = Ember;
|
||||
|
||||
export default Ember.Component.extend({
|
||||
const attributesForSelectedAuthBackend = {
|
||||
token: ['token'],
|
||||
userpass: ['username', 'password'],
|
||||
ldap: ['username', 'password'],
|
||||
github: ['username', 'password'],
|
||||
okta: ['username', 'password'],
|
||||
};
|
||||
|
||||
const DEFAULTS = {
|
||||
token: null,
|
||||
username: null,
|
||||
password: null,
|
||||
};
|
||||
|
||||
export default Ember.Component.extend(DEFAULTS, {
|
||||
classNames: ['auth-form'],
|
||||
routing: inject.service('-routing'),
|
||||
auth: inject.service(),
|
||||
|
|
@ -14,6 +28,21 @@ export default Ember.Component.extend({
|
|||
this.$('li.is-active').get(0).scrollIntoView();
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
let newMethod = this.get('selectedAuthType');
|
||||
let oldMethod = this.get('oldSelectedAuthType');
|
||||
|
||||
if (oldMethod && oldMethod !== newMethod) {
|
||||
this.resetDefaults();
|
||||
}
|
||||
this.set('oldSelectedAuthType', newMethod);
|
||||
},
|
||||
|
||||
resetDefaults() {
|
||||
this.setProperties(DEFAULTS);
|
||||
},
|
||||
|
||||
cluster: null,
|
||||
redirectTo: null,
|
||||
|
||||
|
|
@ -22,9 +51,9 @@ export default Ember.Component.extend({
|
|||
return BACKENDS.findBy('type', this.get('selectedAuthType'));
|
||||
}),
|
||||
|
||||
providerComponentName: Ember.computed('selectedAuthBackend.type', function() {
|
||||
const type = Ember.String.dasherize(this.get('selectedAuthBackend.type'));
|
||||
return `auth-form/${type}`;
|
||||
providerPartialName: Ember.computed('selectedAuthType', function() {
|
||||
const type = Ember.String.dasherize(this.get('selectedAuthType'));
|
||||
return `partials/auth-form/${type}`;
|
||||
}),
|
||||
|
||||
hasCSPError: computed.alias('csp.connectionViolations.firstObject'),
|
||||
|
|
@ -45,15 +74,18 @@ export default Ember.Component.extend({
|
|||
},
|
||||
|
||||
actions: {
|
||||
doSubmit(data) {
|
||||
doSubmit() {
|
||||
let data = {};
|
||||
this.setProperties({
|
||||
loading: true,
|
||||
error: null,
|
||||
});
|
||||
const targetRoute = this.get('redirectTo') || 'vault.cluster';
|
||||
//const {password, token, username} = data;
|
||||
const backend = this.get('selectedAuthBackend.type');
|
||||
const path = this.get('customPath');
|
||||
let targetRoute = this.get('redirectTo') || 'vault.cluster';
|
||||
let backend = this.get('selectedAuthBackend.type');
|
||||
let path = this.get('customPath');
|
||||
let attributes = attributesForSelectedAuthBackend[backend];
|
||||
|
||||
data = Ember.assign(data, this.getProperties(...attributes));
|
||||
if (this.get('useCustomPath') && path) {
|
||||
data.path = path;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default Ember.Component.extend({
|
|||
return `${this.get('filename')}-${new Date().toISOString()}.${this.get('extension')}`;
|
||||
}),
|
||||
|
||||
fileLike: computed('data', 'mime', 'strigify', 'download', function() {
|
||||
fileLike: computed('data', 'mime', 'stringify', 'download', function() {
|
||||
let file;
|
||||
let data = this.get('data');
|
||||
let filename = this.get('download');
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
.shamir-progress {
|
||||
.shamir-progress-progress {
|
||||
display: inline-block;
|
||||
margin-top: $size-10;
|
||||
margin-right: $size-8;
|
||||
}
|
||||
.progress {
|
||||
box-shadow: 0 0 0 4px $progress-bar-background-color;
|
||||
display: inline;
|
||||
width: 150px;
|
||||
margin-top: $size-10;
|
||||
min-width: 90px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<nav class="tabs sub-nav is-marginless">
|
||||
<ul>
|
||||
{{#each (supported-auth-backends) as |backend|}}
|
||||
<li class="{{if (eq selectedAuthBackend.type backend.type) 'is-active' ''}}">
|
||||
<li class="{{if (eq selectedAuthBackend.type backend.type) 'is-active' ''}}" data-test-auth-method>
|
||||
<a href="{{href-to 'vault.cluster.auth' cluster.name (query-params with=backend.type)}}" data-test-auth-method-link={{backend.type}}>
|
||||
{{capitalize backend.type}}
|
||||
</a>
|
||||
|
|
@ -9,41 +9,46 @@
|
|||
{{/each}}
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="box is-marginless is-shadowless">
|
||||
{{#if (and cluster.standby hasCSPError)}}
|
||||
{{message-error errorMessage=cspErrorText data-test-auth-error=true}}
|
||||
{{else}}
|
||||
{{message-error errorMessage=error data-test-auth-error=true}}
|
||||
{{/if}}
|
||||
{{component providerComponentName onSubmit=(action 'doSubmit') }}
|
||||
<div class="box has-slim-padding is-shadowless">
|
||||
{{#unless (eq selectedAuthBackend.type "token")}}
|
||||
{{toggle-button toggleTarget=this toggleAttr="useCustomPath"}}
|
||||
<div class="field">
|
||||
{{#if useCustomPath}}
|
||||
<label for="custom-path" class="is-label">
|
||||
Mount path
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="text"
|
||||
name="custom-path"
|
||||
id="custom-path"
|
||||
class="input"
|
||||
value={{customPath}}
|
||||
oninput={{action (mut customPath) value="target.value"}}
|
||||
/>
|
||||
</div>
|
||||
<p class="help has-text-grey-dark">
|
||||
If this backend was mounted using a non-default path, enter it here.
|
||||
</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
<form
|
||||
id="auth-form"
|
||||
{{action (action "doSubmit") on="submit"}}
|
||||
>
|
||||
<div class="box is-marginless is-shadowless">
|
||||
{{#if (and cluster.standby hasCSPError)}}
|
||||
{{message-error errorMessage=cspErrorText data-test-auth-error=true}}
|
||||
{{else}}
|
||||
{{message-error errorMessage=error data-test-auth-error=true}}
|
||||
{{/if}}
|
||||
{{partial providerPartialName}}
|
||||
<div class="box has-slim-padding is-shadowless">
|
||||
{{#unless (eq selectedAuthBackend.type "token")}}
|
||||
{{toggle-button toggleTarget=this toggleAttr="useCustomPath"}}
|
||||
<div class="field">
|
||||
{{#if useCustomPath}}
|
||||
<label for="custom-path" class="is-label">
|
||||
Mount path
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
type="text"
|
||||
name="custom-path"
|
||||
id="custom-path"
|
||||
class="input"
|
||||
value={{customPath}}
|
||||
oninput={{action (mut customPath) value="target.value"}}
|
||||
/>
|
||||
</div>
|
||||
<p class="help has-text-grey-dark">
|
||||
If this backend was mounted using a non-default path, enter it here.
|
||||
</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless has-background-white-bis">
|
||||
<button data-test-auth-submit=true type="submit" disabled={{loading}} form="auth-form" class="button is-primary {{if loading 'is-loading'}}" id="auth-submit">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless has-background-white-bis">
|
||||
<button data-test-auth-submit=true type="submit" disabled={{loading}} class="button is-primary {{if loading 'is-loading'}}" id="auth-submit">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<form
|
||||
id="auth-form"
|
||||
{{action (action onSubmit (hash token=token)) on="submit"}}
|
||||
>
|
||||
<div class="field">
|
||||
<label for="token" class="is-label">GitHub Token</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
type="password"
|
||||
value=token
|
||||
name="token"
|
||||
id="token"
|
||||
class="input"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<form
|
||||
id="auth-form"
|
||||
{{action (action onSubmit (hash token=token)) on="submit"}}
|
||||
>
|
||||
<div class="field">
|
||||
<label for="token" class="is-label">Token</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
type="password"
|
||||
value=token
|
||||
name="token"
|
||||
class="input"
|
||||
data-test-token=true
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -114,9 +114,9 @@
|
|||
</div>
|
||||
</form>
|
||||
{{else}}
|
||||
<div class="box is-marginless is-shadowless">
|
||||
{{message-error errors=errors}}
|
||||
<form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">
|
||||
<form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">
|
||||
<div class="box is-marginless is-shadowless">
|
||||
{{message-error errors=errors}}
|
||||
<div class="box has-slim-padding is-shadowless is-marginless">
|
||||
{{#if hasBlock}}
|
||||
{{yield}}
|
||||
|
|
@ -132,29 +132,28 @@
|
|||
{{input class="input"type="password" name="key" value=key data-test-shamir-input=true}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless has-background-white-bis">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-narrow">
|
||||
<button
|
||||
form="shamir"
|
||||
type="submit"
|
||||
class="button is-primary"
|
||||
disabled={{loading}}
|
||||
data-test-shamir-submit=true
|
||||
>
|
||||
{{if generateAction "Generate Token" buttonText}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-offset-2 is-flex-v-centered">
|
||||
{{#if (or started hasProgress)}}
|
||||
{{shamir-progress
|
||||
threshold=threshold
|
||||
progress=progress
|
||||
}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless has-background-white-bis">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-narrow">
|
||||
<button
|
||||
type="submit"
|
||||
class="button is-primary"
|
||||
disabled={{loading}}
|
||||
data-test-shamir-submit=true
|
||||
>
|
||||
{{if generateAction "Generate Token" buttonText}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-flex-v-centered is-flex-end">
|
||||
{{#if (or started hasProgress)}}
|
||||
{{shamir-progress
|
||||
threshold=threshold
|
||||
progress=progress
|
||||
}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="level-left">
|
||||
<span class="has-text-grey is-size-8 shamir-progress-progress">
|
||||
{{progress}} / {{threshold}} keys provided
|
||||
</span>
|
||||
</div>
|
||||
<div class="level-right is-marginless">
|
||||
<progress max="100" value="{{progressPercent}}" class="progress is-success is-rounded"></progress>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<div class="field">
|
||||
<label for="token" class="is-label">GitHub Token</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
type="password"
|
||||
value=token
|
||||
name="token"
|
||||
id="token"
|
||||
class="input"
|
||||
data-test-token=true
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div class="field">
|
||||
<label for="token" class="is-label">Token</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
type="password"
|
||||
value=token
|
||||
name="token"
|
||||
class="input"
|
||||
data-test-token=true
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,28 +1,25 @@
|
|||
<form
|
||||
id="auth-form"
|
||||
{{action (action onSubmit (hash username=username password=password)) on="submit"}}
|
||||
>
|
||||
<div class="field">
|
||||
<label for="username" class="is-label">Username</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
value=username
|
||||
name="username"
|
||||
id="username"
|
||||
class="input"
|
||||
}}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="username" class="is-label">Username</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
value=username
|
||||
name="username"
|
||||
id="username"
|
||||
class="input"
|
||||
data-test-username=true
|
||||
}}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password" class="is-label">Password</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
value=password
|
||||
name="password"
|
||||
id="password"
|
||||
type="password"
|
||||
class="input"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password" class="is-label">Password</label>
|
||||
<div class="control">
|
||||
{{input
|
||||
value=password
|
||||
name="password"
|
||||
id="password"
|
||||
type="password"
|
||||
class="input"
|
||||
data-test-password=true
|
||||
}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,19 +71,19 @@
|
|||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="box is-marginless is-shadowless">
|
||||
<form {{action 'initCluster' (hash
|
||||
secret_shares=secret_shares
|
||||
secret_threshold=secret_threshold
|
||||
pgp_keys=pgp_keys
|
||||
use_pgp=use_pgp
|
||||
use_pgp_for_root=use_pgp_for_root
|
||||
root_token_pgp_key=root_token_pgp_key
|
||||
)
|
||||
on="submit"
|
||||
}}
|
||||
id="init"
|
||||
>
|
||||
<form {{action 'initCluster' (hash
|
||||
secret_shares=secret_shares
|
||||
secret_threshold=secret_threshold
|
||||
pgp_keys=pgp_keys
|
||||
use_pgp=use_pgp
|
||||
use_pgp_for_root=use_pgp_for_root
|
||||
root_token_pgp_key=root_token_pgp_key
|
||||
)
|
||||
on="submit"
|
||||
}}
|
||||
id="init"
|
||||
>
|
||||
<div class="box is-marginless is-shadowless">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half">
|
||||
<h1 class="title is-5">
|
||||
|
|
@ -156,18 +156,17 @@
|
|||
{{pgp-list listLength=1 onDataUpdate=(action 'setRootKey')}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</form>
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless has-background-white-bis">
|
||||
<button
|
||||
type="submit"
|
||||
class="button is-primary {{if loading 'is-loading'}}"
|
||||
disabled={{loading}}
|
||||
form="init"
|
||||
>
|
||||
Initialize
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless has-background-white-bis">
|
||||
<button
|
||||
type="submit"
|
||||
class="button is-primary {{if loading 'is-loading'}}"
|
||||
disabled={{loading}}
|
||||
>
|
||||
Initialize
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{{/if}}
|
||||
{{/s.content}}
|
||||
{{/splash-page}}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
"ember-cli-inject-live-reload": "^1.4.1",
|
||||
"ember-cli-mirage": "^0.4.1",
|
||||
"ember-cli-moment-shim": "2.2.1",
|
||||
"ember-cli-page-object": "^1.13.0",
|
||||
"ember-cli-page-object": "1.14",
|
||||
"ember-cli-pretender": "0.7.0",
|
||||
"ember-cli-qunit": "^4.0.0",
|
||||
"ember-cli-sass": "6.0.0",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import { test } from 'qunit';
|
||||
import moduleForAcceptance from 'vault/tests/helpers/module-for-acceptance';
|
||||
import { supportedAuthBackends } from 'vault/helpers/supported-auth-backends';
|
||||
import authForm from '../pages/components/auth-form';
|
||||
import { create } from 'ember-cli-page-object';
|
||||
|
||||
const component = create(authForm);
|
||||
|
||||
moduleForAcceptance('Acceptance | auth', {
|
||||
afterEach() {
|
||||
beforeEach() {
|
||||
return authLogout();
|
||||
},
|
||||
});
|
||||
|
|
@ -25,3 +29,15 @@ test('auth query params', function(assert) {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('it clears token when changing selected auth method', function(assert) {
|
||||
visit('/vault/auth');
|
||||
andThen(function() {
|
||||
assert.equal(currentURL(), '/vault/auth');
|
||||
});
|
||||
component.token('token').tabs.filterBy('name', 'GitHub')[0].link();
|
||||
component.tabs.filterBy('name', 'Token')[0].link();
|
||||
andThen(function() {
|
||||
assert.equal(component.tokenValue, '', 'it clears the token value when toggling methods');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
import { clickable, text } from 'ember-cli-page-object';
|
||||
import { collection, clickable, fillable, text, value } from 'ember-cli-page-object';
|
||||
|
||||
export default {
|
||||
tabs: collection('[data-test-auth-method]', {
|
||||
name: text(),
|
||||
link: clickable('[data-test-auth-method-link]'),
|
||||
}),
|
||||
username: fillable('[data-test-username]'),
|
||||
token: fillable('[data-test-token]'),
|
||||
tokenValue: value('[data-test-token]'),
|
||||
password: fillable('[data-test-password]'),
|
||||
errorText: text('[data-test-auth-error]'),
|
||||
login: clickable('[data-test-auth-submit]'),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2756,15 +2756,14 @@ ember-cli-normalize-entity-name@^1.0.0:
|
|||
dependencies:
|
||||
silent-error "^1.0.0"
|
||||
|
||||
ember-cli-page-object@^1.13.0:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-page-object/-/ember-cli-page-object-1.13.0.tgz#9ac9342d9f90a363c429fbb14f3ad5c0be11827a"
|
||||
ember-cli-page-object@1.14:
|
||||
version "1.14.1"
|
||||
resolved "https://registry.yarnpkg.com/ember-cli-page-object/-/ember-cli-page-object-1.14.1.tgz#2e3599c204c56440c6c8154fc686c603816f877a"
|
||||
dependencies:
|
||||
ceibo "~2.0.0"
|
||||
ember-cli-babel "^6.6.0"
|
||||
ember-cli-node-assets "^0.2.2"
|
||||
ember-native-dom-helpers "^0.5.3"
|
||||
ember-test-helpers "^0.6.3"
|
||||
jquery "^3.2.1"
|
||||
rsvp "^4.7.0"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue