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
hashicorp · Apr 17, 2018 · f7e886f · f7e886f
1 parent 81af0f6
commit f7e886f
Show file tree

Hide file tree

Showing 19 changed files with 218 additions and 169 deletions.
diff --git a/ui/app/components/auth-form.js b/ui/app/components/auth-form.js
@@ -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;
       }

diff --git a/ui/app/components/download-button.js b/ui/app/components/download-button.js
@@ -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');

diff --git a/ui/app/styles/components/shamir-progress.scss b/ui/app/styles/components/shamir-progress.scss
@@ -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;
   }
 }
diff --git a/ui/app/templates/components/auth-form.hbs b/ui/app/templates/components/auth-form.hbs
@@ -1,49 +1,54 @@
 <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>
       </li>
     {{/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>
diff --git a/ui/app/templates/components/auth-form/git-hub.hbs b/ui/app/templates/components/auth-form/git-hub.hbs
diff --git a/ui/app/templates/components/auth-form/token.hbs b/ui/app/templates/components/auth-form/token.hbs
diff --git a/ui/app/templates/components/shamir-flow.hbs b/ui/app/templates/components/shamir-flow.hbs
@@ -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}}
diff --git a/ui/app/templates/components/shamir-progress.hbs b/ui/app/templates/components/shamir-progress.hbs
@@ -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>
diff --git a/ui/app/templates/partials/auth-form/git-hub.hbs b/ui/app/templates/partials/auth-form/git-hub.hbs
@@ -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>
diff --git a/...p/templates/components/auth-form/ldap.hbs → ui/app/templates/partials/auth-form/ldap.hbs b/...p/templates/components/auth-form/ldap.hbs → ui/app/templates/partials/auth-form/ldap.hbs
diff --git a/...p/templates/components/auth-form/okta.hbs → ui/app/templates/partials/auth-form/okta.hbs b/...p/templates/components/auth-form/okta.hbs → ui/app/templates/partials/auth-form/okta.hbs
diff --git a/ui/app/templates/partials/auth-form/token.hbs b/ui/app/templates/partials/auth-form/token.hbs
@@ -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>
diff --git a/...mplates/components/auth-form/userpass.hbs → ...templates/partials/auth-form/userpass.hbs b/...mplates/components/auth-form/userpass.hbs → ...templates/partials/auth-form/userpass.hbs
diff --git a/ui/app/templates/partials/userpass-form.hbs b/ui/app/templates/partials/userpass-form.hbs
@@ -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>