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

Glimmerize Splash Page #24104

Merged
merged 9 commits into from
Nov 27, 2023
Merged

Glimmerize Splash Page #24104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
35af597
make splash page view only block content
Monkeychip Nov 12, 2023
21f3c5a
change invocation of component
Monkeychip Nov 12, 2023
c82f04a
address some of the pr comments
Monkeychip Nov 18, 2023
7889bd9
add test coverage
Monkeychip Nov 18, 2023
4cc8b06
Merge branch 'main' into ui/glimmerize-splash-page
Monkeychip Nov 18, 2023
7ffe87a
remove conditional because of issue with it always showing
Monkeychip Nov 20, 2023
1f7ba62
solve for mfa errors
Monkeychip Nov 20, 2023
e09d374
move altcontent outside
Monkeychip Nov 20, 2023
5e92fc1
Merge branch 'main' into ui/glimmerize-splash-page
Monkeychip Nov 22, 2023
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
21 changes: 21 additions & 0 deletions ui/app/components/splash-page.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}

<div class="splash-page-container section is-flex-v-centered-tablet is-flex-grow-1 is-fullwidth">
Copy link
Contributor

Choose a reason for hiding this comment

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

So much cleaner without altContent! 👏

<div class="columns is-centered is-gapless is-fullwidth">
<div class="column is-4-desktop is-6-tablet">
<div class="splash-page-header" data-test-splash-page-header>
{{yield to="header"}}
</div>
<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>
{{yield to="content"}}
</div>
{{yield to="footer"}}
</div>
</div>
</div>
34 changes: 0 additions & 34 deletions ui/app/components/splash-page.js
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions ui/app/components/splash-page/splash-content.js
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions ui/app/components/splash-page/splash-footer.js
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions ui/app/components/splash-page/splash-header.js
View file
Open in desktop

This file was deleted.

26 changes: 0 additions & 26 deletions ui/app/templates/components/splash-page.hbs
View file
Open in desktop

This file was deleted.

240 changes: 122 additions & 118 deletions ui/app/templates/vault/cluster/auth.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,126 +3,130 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<SplashPage @hasAltContent={{this.mfaErrors}} as |Page|>
<Page.altContent>
<div class="has-top-margin-xxl" data-test-mfa-error>
<EmptyState
@title="Unauthorized"
@message="Multi-factor authentication is required, but failed. Go back and try again, or contact your administrator."
@icon="alert-circle"
@bottomBorder={{true}}
@subTitle={{join ". " this.mfaErrors}}
class="is-shadowless"
>
<Hds::Button @text="Go back" @icon="chevron-left" @color="tertiary" {{on "click" (action "onMfaErrorDismiss")}} />
</EmptyState>
</div>
</Page.altContent>
<Page.header>
{{#if this.oidcProvider}}
<div class="box is-shadowless is-flex-v-centered" data-test-auth-logo>
<LogoEdition aria-label="Sign in with Hashicorp Vault" />
</div>
{{else}}
<div class="is-flex-v-centered has-bottom-margin-xxl">
<div class="brand-icon-large">
<Icon @name="vault" @size="24" @stretched={{true}} />
{{#if this.mfaErrors}}
<div class="has-top-margin-xxl" data-test-mfa-error>
<EmptyState
@title="Unauthorized"
@message="Multi-factor authentication is required, but failed. Go back and try again, or contact your administrator."
@icon="alert-circle"
@bottomBorder={{true}}
@subTitle={{join ". " this.mfaErrors}}
class="is-shadowless"
>
<Hds::Button @text="Go back" @icon="chevron-left" @color="tertiary" {{on "click" (action "onMfaErrorDismiss")}} />
</EmptyState>
</div>
{{else}}
<SplashPage>
<:header>
{{#if this.oidcProvider}}
<div class="box is-shadowless is-flex-v-centered" data-test-auth-logo>
<LogoEdition aria-label="Sign in with Hashicorp Vault" />
</div>
</div>
<div class="is-flex-row">
{{#if this.mfaAuthData}}
<Hds::Button
@text="Back to login"
@icon="arrow-left"
@isIconOnly={{true}}
@color="tertiary"
{{on "click" (fn (mut this.mfaAuthData) null)}}
/>
{{else if this.waitingForOktaNumberChallenge}}
<Hds::Button
@text="Back to login"
@icon="arrow-left"
@isIconOnly={{true}}
@color="tertiary"
{{on "click" (action "cancelAuthentication")}}
/>
{{/if}}
<h1 class="title is-3">
{{if (or this.mfaAuthData this.waitingForOktaNumberChallenge) "Authenticate" "Sign in to Vault"}}
</h1>
</div>
{{/if}}
</Page.header>
{{#unless this.mfaAuthData}}
{{#if (has-feature "Namespaces")}}
<Page.sub-header>
<Toolbar class="toolbar-namespace-picker">
<div class="field is-horizontal" data-test-namespace-toolbar>
<div class="field-label is-normal">
<label class="is-label" for="namespace">Namespace</label>
</div>
{{#if this.managedNamespaceRoot}}
<div class="field-label">
<span class="has-text-grey" data-test-managed-namespace-root>/{{this.managedNamespaceRoot}}</span>
{{else}}
<div class="is-flex-v-centered has-bottom-margin-xxl">
<div class="brand-icon-large">
<Icon @name="vault" @size="24" @stretched={{true}} />
</div>
</div>
<div class="is-flex-row">
{{#if this.mfaAuthData}}
<Hds::Button
@text="Back to login"
@icon="arrow-left"
@isIconOnly={{true}}
@color="tertiary"
{{on "click" (fn (mut this.mfaAuthData) null)}}
/>
{{else if this.waitingForOktaNumberChallenge}}
<Hds::Button
@text="Back to login"
@icon="arrow-left"
@isIconOnly={{true}}
@color="tertiary"
{{on "click" (action "cancelAuthentication")}}
/>
{{/if}}
<h1 class="title is-3">
{{if (or this.mfaAuthData this.waitingForOktaNumberChallenge) "Authenticate" "Sign in to Vault"}}
</h1>
</div>
{{/if}}
</:header>

<:subHeader>
{{#if (has-feature "Namespaces")}}
{{#unless this.mfaAuthData}}
<Toolbar class="toolbar-namespace-picker">
<div class="field is-horizontal" data-test-namespace-toolbar>
<div class="field-label is-normal">
<label class="is-label" for="namespace">Namespace</label>
</div>
{{/if}}
<div class="field-body">
<div class="field">
<div class="control">
<input
data-test-auth-form-ns-input
value={{this.namespaceInput}}
placeholder={{if this.managedNamespaceRoot "/ (Default)" "/ (Root)"}}
oninput={{perform this.updateNamespace value="target.value"}}
autocomplete="off"
spellcheck="false"
name="namespace"
id="namespace"
class="input"
type="text"
disabled={{this.oidcProvider}}
/>
{{#if this.managedNamespaceRoot}}
<div class="field-label">
<span class="has-text-grey" data-test-managed-namespace-root>/{{this.managedNamespaceRoot}}</span>
</div>
{{/if}}
<div class="field-body">
<div class="field">
<div class="control">
<input
data-test-auth-form-ns-input
value={{this.namespaceInput}}
placeholder={{if this.managedNamespaceRoot "/ (Default)" "/ (Root)"}}
{{on "input" (perform this.updateNamespace value="target.value")}}
autocomplete="off"
spellcheck="false"
name="namespace"
id="namespace"
class="input"
type="text"
disabled={{this.oidcProvider}}
/>
</div>
</div>
</div>
</div>
</div>
</Toolbar>
</Page.sub-header>
{{/if}}
{{/unless}}
<Page.content>
{{#if this.mfaAuthData}}
<Mfa::MfaForm
@clusterId={{this.model.id}}
@authData={{this.mfaAuthData}}
@onSuccess={{action "onMfaSuccess"}}
@onError={{fn (mut this.mfaErrors)}}
/>
{{else}}
<AuthForm
@wrappedToken={{this.wrappedToken}}
@cluster={{this.model}}
@namespace={{this.namespaceQueryParam}}
@redirectTo={{this.redirectTo}}
@selectedAuth={{this.authMethod}}
@onSuccess={{action "onAuthResponse"}}
@setOktaNumberChallenge={{fn (mut this.waitingForOktaNumberChallenge)}}
@waitingForOktaNumberChallenge={{this.waitingForOktaNumberChallenge}}
@setCancellingAuth={{fn (mut this.cancelAuth)}}
@cancelAuthForOktaNumberChallenge={{this.cancelAuth}}
/>
{{/if}}
</Page.content>
<Page.footer>
<div class="has-short-padding">
<p class="help has-text-grey-dark" data-test-auth-helptext>
{{#if this.oidcProvider}}
Once you log in, you will be redirected back to your application. If you require login credentials, contact your
administrator.
{{else}}
Contact your administrator for login credentials
{{/if}}
</p>
</div>
</Page.footer>
</SplashPage>
</Toolbar>
{{/unless}}
{{/if}}
</:subHeader>

<:content>
{{#if this.mfaAuthData}}
<Mfa::MfaForm
@clusterId={{this.model.id}}
@authData={{this.mfaAuthData}}
@onSuccess={{action "onMfaSuccess"}}
@onError={{fn (mut this.mfaErrors)}}
/>
{{else}}
<AuthForm
@wrappedToken={{this.wrappedToken}}
@cluster={{this.model}}
@namespace={{this.namespaceQueryParam}}
@redirectTo={{this.redirectTo}}
@selectedAuth={{this.authMethod}}
@onSuccess={{action "onAuthResponse"}}
@setOktaNumberChallenge={{fn (mut this.waitingForOktaNumberChallenge)}}
@waitingForOktaNumberChallenge={{this.waitingForOktaNumberChallenge}}
@setCancellingAuth={{fn (mut this.cancelAuth)}}
@cancelAuthForOktaNumberChallenge={{this.cancelAuth}}
/>
{{/if}}
</:content>

<:footer>
<div class="has-short-padding">
<p class="help has-text-grey-dark" data-test-auth-helptext>
{{#if this.oidcProvider}}
Once you log in, you will be redirected back to your application. If you require login credentials, contact your
administrator.
{{else}}
Contact your administrator for login credentials.
{{/if}}
</p>
</div>
</:footer>
</SplashPage>
{{/if}}
Loading
Loading