UI: Implement `Auth::FormTemplate` #30521

hellobontempo · 2025-05-05T18:24:47Z

Description

🎉 Finally 🎉 implements new accessible auth form components.

✅ enterprise pass

before	after
no settings configured	no settings configured

`listing_visibility="unauth"` used to set visible mounts paths as tabs	new they are grouped by type

mount path input used to be hidden behind "More options" toggle	Now it is behind "Advanced settings" toggle

TODO only if you're a HashiCorp employee

Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch. Note that in the CE repo, the latest release branch will look like backport/x.x.x, but older release branches will be backport/ent/x.x.x+ent.
- LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
ENT Breakage: If this PR either 1) removes a public function OR 2) changes the signature
of a public function, even if that change is in a CE file, double check that
applying the patch for this PR to the ENT repo and running tests doesn't
break any tests. Sometimes ENT only tests rely on public functions in CE
files.
Jira: If this change has an associated Jira, it's referenced either
in the PR description, commit message, or branch name.
RFC: If this change has an associated RFC, please link it in the description.
ENT PR: If this change has an associated ENT PR, please link it in the
description. Also, make sure the changelog is in this PR, not in your ENT PR.

github-actions · 2025-05-05T18:29:39Z

Build Results:
All builds succeeded! ✅

github-actions · 2025-05-05T18:36:20Z

CI Results:
All Go tests succeeded! ✅

hellobontempo · 2025-05-05T21:42:21Z

ui/app/templates/vault/cluster/mfa-setup.hbs

@@ -8,28 +8,26 @@
    <h1 class="title is-4">MFA setup</h1>
  </:header>
  <:content>
-    <div class="auth-form" data-test-mfa-form>


hellobontempo · 2025-05-05T22:07:52Z

ui/app/templates/vault/cluster/mfa-setup.hbs

-          />
-        {{/if}}
-      </div>
+    <div class="has-padding-l" data-test-mfa-form>


hellobontempo · 2025-05-05T22:09:16Z

ui/app/templates/components/okta-number-challenge.hbs

@@ -2,9 +2,9 @@
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
 }}
-{{! todo move to auth/ folder? }}
-<div class="auth-form" data-test-okta-number-challenge>


hellobontempo · 2025-05-05T22:09:22Z

ui/app/templates/components/okta-number-challenge.hbs

-<div class="auth-form" data-test-okta-number-challenge>
-  <div class="box is-marginless is-shadowless">
+
+<Hds::Card::Container @level="high" @hasBorder={{true}} class="overflow-auto" data-test-okta-number-challenge>


ui/app/components/auth/form/oidc-jwt.ts

make comment make more sense

zofskeez

Getting close! Few questions/comments and noticed some commented out code but nothing blocking.

zofskeez · 2025-05-05T22:49:40Z

ui/app/components/splash-page.hbs

-      <div class="splash-page-sub-header" data-test-splash-page-sub-header>
-        {{yield to="subHeader"}}
-      </div>
-      <div class="login-form box is-paddingless is-relative" data-test-splash-page-content>


If I recall this was to accomodate something with MFA? Did it move to the component?

Good question! The subHeader is where the namespace input rendered, which now renders in the Auth::FormTemplate

vault/ui/app/components/auth/form-template.hbs

Lines 18 to 23 in e77f206

<Auth::NamespaceInput

@disabled={{@oidcProviderQueryParam}}

@hvdManagedNamespace={{this.flags.hvdManagedNamespaceRoot}}

@namespaceValue={{this.namespaceInput}}

@updateNamespace={{this.handleNamespaceUpdate}}

/>

And then the content divon 15 is just replaced with the Hds::Card::Container to update the css with the rounded edges. This removes the need for the login-form css class and replaces it with overflow-auto class.

Ahh yes that's right. I must have been thinking of something else related to MFA. Nice to remove that block since it was only used for the one case!

There's also the mfa setup steps here - I wonder if that's what you were thinking of 🤔 Hopefully I didn't miss anything 😅

ui/tests/acceptance/oidc-auth-method-test.js

zofskeez · 2025-05-05T22:55:29Z

ui/tests/acceptance/reset-password-test.js

-  test('allows password reset for userpass users logged in via tab', async function (assert) {
-    await login();
-    await runCmd([
-      mountAuthCmd('userpass', this.userpass),
-      `write sys/auth/${this.userpass}/tune listing_visibility="unauth"`,
-      createPolicyCmd(this.userpass, this.policy),
-      `write auth/${this.userpass}/users/reset-me password=password token_policies=${this.userpass}`,
-    ]);
-    await logout();
-    await click(`[data-test-auth-method="${this.userpass}"] a`);
-    await fillIn(GENERAL.inputByAttr('username'), 'reset-me');
-    await fillIn(GENERAL.inputByAttr('password'), 'password');
-    await click(AUTH_FORM.login);
-
-    await click('[data-test-user-menu-trigger]');
-    await click('[data-test-user-menu-item="reset-password"]');
-
-    assert.strictEqual(currenturl(""), '/vault/access/reset-password', 'links to password reset');
-    assert
-      .dom('[data-test-current-user-banner]')
-      .hasText(
-        `You are updating the password for reset-me on the ${this.userpass} auth mount.`,
-        'shows correct banner text'
-      );
-
-    assert.dom('[data-test-title]').hasText('Reset password', 'page title');
-    await fillIn('[data-test-input="reset-password"]', 'newpassword');
-    await click('[data-test-reset-password-save]');
-    await waitFor('[data-test-flash-message]');
-    assert.dom('[data-test-flash-message]').hasText(`Success ${SUCCESS_MESSAGE}`);
-    assert.dom('[data-test-input="reset-password"]').hasValue('', 'Resets input after save');
-  });


Is this no longer relevant?

Good question! I meant to leave a comment. Now tabs vs dropdown are just a stylistic difference but functionally work the same, so there's no need to test logging in from a tab.

Plus configuring an auth method with listing_visibility="unauth" messes up the test server state since any tests that run after fail to login() since the tab view shows instead of the default login form. It felt more reliable to remove any logic that actually configured methods with that setting than having to check the login form state for each test or make sure that the appropriate cleanup (deleting the mount) happened

Sounds good thanks for the context!

ui/tests/integration/components/auth/form/oidc-jwt-test.js

* UI: Move `wrapped_token` login functionality to route (#30465) * move token unwrap functionality to page component * update mfa test * remove wrapped_token logic from page component * more cleanup to relocate unwrap logic * move wrapped_token to route * move unwrap tests to acceptance * move mfa form back * add some padding * update mfa-form tests * get param from params * wait for auth form on back * run rests * UI: Add MFA support for SSO methods (#30489) * initial implementation of mfa validation for sso methods * update typescript interfaces * add stopgap changes to auth service * switch order backend is defined * update login form for tests even though it will be deleted * attempt to stabilize wrapped_query test * =update login form test why not * Update ui/app/components/auth/form/saml.ts Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com> --------- Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com> * Move CSP error to page component (#30492) * initial implementation of mfa validation for sso methods * update typescript interfaces * add stopgap changes to auth service * switch order backend is defined * update login form for tests even though it will be deleted * attempt to stabilize wrapped_query test * =update login form test why not * move csp error to page component * move csp error to page component * Move fetching unauthenticated mounts to the route (#30509) * rename namespace arg to namespaceQueryParam * move fetch mounts to route * add margin to sign in button spacing * update selectors for oidc provider test * add todo delete comments * fix arg typo in test * change method name * fix args handling tab click * remove tests that no longer relate to components functionality * add tests for preselectedAuthType functionality * move typescript interfaces, fix selector * add await * oops * move format method down, make private * move tab formatting to the route * move to page object * fix token unwrap aborting transition * not sure what that is doing there.. * add comments * rename to presetAuthType * use did-insert instead * UI: Implement `Auth::FormTemplate` (#30521) * replace Auth::LoginForm with Auth::FormTemplate * first round of test updates * return null if mounts object is empty * add comment and test for empty sys/internal/mounts data * more test updates * delete listing_visibility test, delete login-form component test * update divs to Hds::Card::Container * add overflow class * remove unused getters * move requesting stored auth type to page component * fix typo * Update ui/app/components/auth/form/oidc-jwt.ts make comment make more sense * small cleanup items, update imports * Delete old auth components (#30527) * delete old components * update codeowners * Update `with` query param functionality (#30537) * update path input to type=hidden * add test coverage * update page test * update auth route * delete login form * update ent test * consolidate logic in getter * add more comments * more comments.. * rename selector * refresh model as well * redirect for invalid query params * move unwrap to redirect * only redirect on invalid query params * add tests for query param * test selector updates * remove todos, update relevant ones with initials * add changelog --------- Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com>

replace Auth::LoginForm with Auth::FormTemplate

76010d7

hellobontempo added this to the 1.20.0-rc milestone May 5, 2025

hellobontempo added the pr/no-changelog label May 5, 2025

hellobontempo requested a review from a team as a code owner May 5, 2025 18:24

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 5, 2025

hellobontempo added 6 commits May 5, 2025 12:01

first round of test updates

076fe01

return null if mounts object is empty

0ecfa1a

add comment and test for empty sys/internal/mounts data

b187f4d

more test updates

79308c2

delete listing_visibility test, delete login-form component test

0e38525

update divs to Hds::Card::Container

3ae1b75

hellobontempo commented May 5, 2025

View reviewed changes

hellobontempo added 4 commits May 5, 2025 14:53

add overflow class

1435c99

remove unused getters

02e666d

move requesting stored auth type to page component

55d736a

fix typo

3502ee5

hellobontempo commented May 5, 2025

View reviewed changes

ui/app/templates/vault/cluster/mfa-setup.hbs

/>

{{/if}}

</div>

<div class="has-padding-l" data-test-mfa-form>

Copy link

Contributor Author

hellobontempo May 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hellobontempo commented May 5, 2025

View reviewed changes

ui/app/components/auth/form/oidc-jwt.ts Outdated Show resolved Hide resolved

Update ui/app/components/auth/form/oidc-jwt.ts

ccd2584

make comment make more sense

zofskeez approved these changes May 5, 2025

View reviewed changes

small cleanup items, update imports

5cb3d9f

hellobontempo merged commit 83ab135 into VAULT-35470/wire-up-accessible-auth-components May 5, 2025
25 checks passed

hellobontempo deleted the implement-auth-form-template branch May 5, 2025 23:57

This was referenced May 12, 2025

Auth Components POC #29892

Closed

UI: Make single method views consistent, add max width #30660

Merged

	<Auth::NamespaceInput
	@disabled={{@oidcProviderQueryParam}}
	@hvdManagedNamespace={{this.flags.hvdManagedNamespaceRoot}}
	@namespaceValue={{this.namespaceInput}}
	@updateNamespace={{this.handleNamespaceUpdate}}
	/>

UI: Implement Auth::FormTemplate #30521

UI: Implement Auth::FormTemplate #30521

Uh oh!

Conversation

hellobontempo commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

TODO only if you're a HashiCorp employee

Uh oh!

github-actions bot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

zofskeez left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

UI: Implement `Auth::FormTemplate` #30521

UI: Implement `Auth::FormTemplate` #30521

hellobontempo commented May 5, 2025 •

edited

Loading

github-actions bot commented May 5, 2025 •

edited

Loading

github-actions bot commented May 5, 2025 •

edited

Loading