CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 💄 place auth flow in branded card

Browse Source
This commit is contained in:
Randall Morey committed 2020-11-25 15:18:17 -05:00
1 parent 1da3800c08
commit c5082ffa6e
6 files changed
+72 -121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/desktop/app/components/centered/index.hbs
-3
View File
@@ -1,3 +0,0 @@
<div class="centered">
{{yield}}
</div>
ui/desktop/app/styles/app.scss
+7 -8
View File
@@ -198,17 +198,16 @@
white-space: nowrap;
}
.centered {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 0 auto;
.rose-layout-global .rose-layout-global-body {
main {
flex-grow: 1;
}
}
.branded-card {
position: relative;
max-width: sizing.rems(l) * 16;
width: sizing.rems(l) * 16;
margin: 0 auto;
padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2) (sizing.rems(l) * 3);
border: 1px solid var(--ui-border-subtler-1);
border-radius: sizing.rems(xxxs);
@@ -230,7 +229,7 @@
}
.branded-card-description {
margin-bottom: sizing.rems(xl);
margin-bottom: sizing.rems(l);
}
.rose-form-actions {
ui/desktop/app/templates/origin.hbs
+22 -24
View File
@@ -1,25 +1,23 @@
<Centered>
<BrandedCard
@title={{t 'titles.welcome-to-boundary'}}
@description={{t 'descriptions.origin-initialization'}}
>
<Rose::Form
class="full-width"
@onSubmit={{route-action "setOrigin" this.origin}}
@cancel={{false}}
as |form|
<main>
<BrandedCard
@title={{t 'titles.welcome-to-boundary'}}
@description={{t 'descriptions.origin-initialization'}}
>
<form.input
@name="host"
@type="text"
@value={{this.origin}}
@label={{t "form.origin.label"}}
@helperText={{t "form.origin.description"}} />
<form.actions
@submitText={{t "actions.submit"}}
@showCancel={{false}} />
</Rose::Form>
</BrandedCard>
</Centered>
<Rose::Form
class="full-width"
@onSubmit={{route-action "setOrigin" this.origin}}
@cancel={{false}}
as |form|
>
<form.input
@name="host"
@type="text"
@value={{this.origin}}
@label={{t "form.origin.label"}}
@helperText={{t "form.origin.description"}} />
<form.actions
@submitText={{t "actions.submit"}}
@showCancel={{false}} />
</Rose::Form>
</BrandedCard>
</main>
ui/desktop/app/templates/scopes.hbs
+3 -9
View File
@@ -1,11 +1,5 @@
{{page-title (t 'resources.scope.title_plural')}}
<Rose::Layout::Sidebar as |sidebarLayout|>
<sidebarLayout.body>
<main>
{{outlet}}
</main>
</sidebarLayout.body>
</Rose::Layout::Sidebar>
<main>
{{outlet}}
</main>
ui/desktop/app/templates/scopes/scope/authenticate.hbs
+40 -51
View File
@@ -1,57 +1,46 @@
{{page-title (t "actions.authenticate")}}
<Rose::Layout::Centered>
<Rose::Layout::Page as |page|>
<BrandedCard
@title={{t 'actions.authenticate'}}
@description={{t 'auth.descriptions.authenticating-with-org' name=@model.scope.displayName}}
>
<page.header>
<h2>{{t "actions.authenticate"}}</h2>
<p>{{t "auth.descriptions.authenticating-with-org" name=@model.scope.displayName}}</p>
</page.header>
<Rose::Dropdown
@text={{t "actions.choose-different-org"}}
@icon="user-organization"
as |dropdown|>
<dropdown.link @route="scopes.scope.authenticate" @model="global">
{{t "titles.global"}}
</dropdown.link>
{{#each this.sortedScopes as |scope|}}
<dropdown.link @route="scopes.scope.authenticate" @model={{scope.id}}>
{{scope.displayName}}
</dropdown.link>
{{/each}}
</Rose::Dropdown>
<page.navigation>
<Rose::Nav::Tabs as |nav|>
{{#each @model.authMethods as |authMethod|}}
<nav.link @route="scopes.scope.authenticate.method" @model={{authMethod.id}}>
{{t (concat "resources.auth-method.types." authMethod.type)}}
</nav.link>
{{/each}}
</Rose::Nav::Tabs>
<Rose::Dropdown
@text={{t "actions.choose-different-org"}}
@icon="user-organization"
as |dropdown|>
<dropdown.link @route="scopes.scope.authenticate" @model="global">
{{t "titles.global"}}
</dropdown.link>
{{#each this.sortedScopes as |scope|}}
<dropdown.link @route="scopes.scope.authenticate" @model={{scope.id}}>
{{scope.displayName}}
</dropdown.link>
{{/each}}
</Rose::Dropdown>
{{#if @model.authMethods}}
{{outlet}}
{{/if}}
{{#unless @model.authMethods}}
<Rose::Layout::Centered>
<Rose::Message
@title={{t "resources.auth-method.messages.none.title"}}
@icon="alert-circle-outline"
as |message|>
<message.description>
{{t "resources.auth-method.messages.none.description"}}
</message.description>
</Rose::Message>
</Rose::Layout::Centered>
{{/unless}}
<Rose::Separator />
<Rose::Nav::Tabs as |nav|>
{{#each @model.authMethods as |authMethod|}}
<nav.link @route="scopes.scope.authenticate.method" @model={{authMethod.id}}>
{{t (concat "resources.auth-method.types." authMethod.type)}}
</nav.link>
{{/each}}
</Rose::Nav::Tabs>
</page.navigation>
<page.body>
{{#if @model.authMethods}}
{{outlet}}
{{/if}}
{{#unless @model.authMethods}}
<Rose::Layout::Centered>
<Rose::Message
@title={{t "resources.auth-method.messages.none.title"}}
@icon="alert-circle-outline"
as |message|>
<message.description>
{{t "resources.auth-method.messages.none.description"}}
</message.description>
</Rose::Message>
</Rose::Layout::Centered>
{{/unless}}
</page.body>
</Rose::Layout::Page>
</Rose::Layout::Centered>
</BrandedCard>
ui/desktop/tests/integration/components/centered-test.js
-26
View File
@@ -1,26 +0,0 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | centered', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });
await render(hbs`<Centered />`);
assert.equal(this.element.textContent.trim(), '');
// Template block usage:
await render(hbs`
<Centered>
template block text
</Centered>
`);
assert.equal(this.element.textContent.trim(), 'template block text');
});
});