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 2 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
23 changes: 23 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,23 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}

{{yield to="altContent"}}
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved

<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">
{{yield to="pageHeader"}}
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div class="splash-page-sub-header">
{{yield to="pageSubHeader"}}
</div>
<div class="login-form box is-paddingless is-relative">
{{yield to="pageContent"}}
</div>
{{yield to="pageFooter"}}
</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.

60 changes: 33 additions & 27 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,22 +3,25 @@
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>
<SplashPage>
<:altContent>
{{#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>
{{/if}}
</:altContent>

<:pageHeader>
{{#if this.oidcProvider}}
<div class="box is-shadowless is-flex-v-centered" data-test-auth-logo>
<LogoEdition aria-label="Sign in with Hashicorp Vault" />
Expand Down Expand Up @@ -52,10 +55,11 @@
</h1>
</div>
{{/if}}
</Page.header>
{{#unless this.mfaAuthData}}
</:pageHeader>

<:pageSubHeader>
{{#if (has-feature "Namespaces")}}
<Page.sub-header>
{{#unless this.mfaAuthData}}
<Toolbar class="toolbar-namespace-picker">
<div class="field is-horizontal" data-test-namespace-toolbar>
<div class="field-label is-normal">
Expand All @@ -73,7 +77,7 @@
data-test-auth-form-ns-input
value={{this.namespaceInput}}
placeholder={{if this.managedNamespaceRoot "/ (Default)" "/ (Root)"}}
oninput={{perform this.updateNamespace value="target.value"}}
{{on "input" (perform this.updateNamespace value="target.value")}}
autocomplete="off"
spellcheck="false"
name="namespace"
Expand All @@ -87,10 +91,11 @@
</div>
</div>
</Toolbar>
</Page.sub-header>
{{/unless}}
{{/if}}
{{/unless}}
<Page.content>
</:pageSubHeader>

<:pageContent>
{{#if this.mfaAuthData}}
<Mfa::MfaForm
@clusterId={{this.model.id}}
Expand All @@ -112,17 +117,18 @@
@cancelAuthForOktaNumberChallenge={{this.cancelAuth}}
/>
{{/if}}
</Page.content>
<Page.footer>
</:pageContent>

<:pageFooter>
<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
Contact your administrator for login credentials.
{{/if}}
</p>
</div>
</Page.footer>
</:pageFooter>
</SplashPage>
38 changes: 17 additions & 21 deletions ui/app/templates/vault/cluster/init.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,13 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<SplashPage as |Page|>
{{#if (and this.model.usingRaft (not this.prefersInit))}}
<Page.header>
<SplashPage>
<:pageHeader>
{{#if (and this.model.usingRaft (not this.prefersInit))}}
<h1 class="title is-4">
Raft Storage
</h1>
</Page.header>
<Page.content>
<RaftJoin @onDismiss={{action (mut this.prefersInit) true}} />
</Page.content>
{{else if this.keyData}}
<Page.header>
{{else if this.keyData}}
{{#let (or this.keyData.recovery_keys this.keyData.keys) as |keyArray|}}
<h1 class="title is-4">
Vault has been initialized!
Expand All @@ -26,8 +21,16 @@
{{/if}}
</h1>
{{/let}}
</Page.header>
<Page.content>
{{else}}
<h1 class="title h5">
Let's set up the initial set of root keys that you will need in case of an emergency.
</h1>
{{/if}}
</:pageHeader>
<:pageContent>
{{#if (and this.model.usingRaft (not this.prefersInit))}}
<RaftJoin @onDismiss={{action (mut this.prefersInit) true}} />
{{else if this.keyData}}
<div class="box is-marginless is-shadowless">
<div class="content">
<p>
Expand Down Expand Up @@ -104,14 +107,7 @@
/>
</div>
</div>
</Page.content>
{{else}}
<Page.header>
<h1 class="title h5">
Let's set up the initial set of root keys that you’ll need in case of an emergency
</h1>
</Page.header>
<Page.content>
{{else}}
<form
{{action
"initCluster"
Expand Down Expand Up @@ -217,6 +213,6 @@
</div>
</div>
</form>
</Page.content>
{{/if}}
{{/if}}
</:pageContent>
</SplashPage>
10 changes: 5 additions & 5 deletions ui/app/templates/vault/cluster/mfa-setup.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<SplashPage @showTruncatedNavBar={{false}} as |Page|>
<Page.header>
<SplashPage>
<:pageHeader>
<h1 class="title is-4">MFA setup</h1>
</Page.header>
<Page.content>
</:pageHeader>
<:pageContent>
<div class="auth-form" data-test-mfa-form>
<div class="box">
{{#if (eq this.onStep 1)}}
Expand All @@ -31,5 +31,5 @@
{{/if}}
</div>
</div>
</Page.content>
</:pageContent>
</SplashPage>
16 changes: 9 additions & 7 deletions ui/app/templates/vault/cluster/unseal.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,14 @@
</div>
</div>
{{else}}
<SplashPage as |Page|>
<Page.header>
<SplashPage>
<:pageHeader>
<h1 class="title is-3">
Unseal Vault
</h1>
</Page.header>
<Page.content>
</:pageHeader>

<:pageContent>
<div class="box is-borderless is-shadowless is-marginless">
<p class="title is-5">
{{capitalize this.model.name}}
Expand Down Expand Up @@ -57,15 +58,16 @@
/>
{{/if}}
</div>
</Page.content>
<Page.footer>
</:pageContent>

<:pageFooter>
<div class="box is-borderless is-shadowless">
<p>
<ExternalLink @href="https://developer.hashicorp.com/vault/docs/concepts/seal">
Seal/unseal documentation
</ExternalLink>
</p>
</div>
</Page.footer>
</:pageFooter>
</SplashPage>
{{/if}}
Loading