login and auth flow / UX

master
rob 2 years ago
parent 2136e74169
commit 42283c2005

@ -159,7 +159,6 @@ class AuthController extends SiteController {
// scrub login return URL from session
delete req.session.loginReturnTo;
await this.saveSession(req);
// redirect to whatever was wanted
return res.redirect(redirectUri);
@ -201,6 +200,7 @@ class AuthController extends SiteController {
async getCoreHome (req, res, next) {
const { coreNode: coreNodeService } = this.dtp.services;
try {
res.locals.currentView = 'welcome';
res.locals.pagination = this.getPaginationParameters(req, 20);
res.locals.connectedCores = await coreNodeService.getConnectedCores(res.locals.pagination);
res.render('welcome/core-home');

@ -26,7 +26,10 @@ class WelcomeController extends SiteController {
captcha.loadFont(path.join(this.dtp.config.root, 'client', 'fonts', 'Dirty Sweb.ttf'));
const router = express.Router();
this.dtp.app.use('/welcome', welcomeLimiter, router);
this.dtp.app.use('/welcome', welcomeLimiter, async (req, res, next) => {
res.locals.currentView = 'welcome';
return next();
}, router);
router.get('/core-member', this.getWelcomeCoreMember.bind(this));
router.get('/signup/captcha', this.getSignupCaptcha.bind(this));

@ -1,21 +1,28 @@
extends ../layouts/main
extends ../layouts/focused
block content
section.uk-section.uk-section-default
.uk-container
.uk-margin-large
h1.uk-text-center Select Community
p.uk-text-center #{site.name} is connected with the following Core Communities.
div(uk-grid).uk-flex-center
each core in connectedCores
div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l")
//- pre= JSON.stringify(connectedCores, null, 2)
a(href=`/auth/core/${core._id}`).uk-display-block.uk-link-text
.uk-tile.uk-tile-default.uk-padding-small.uk-border-small
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-auto
img(src=`http://${core.meta.domain}/img/icon/dtp-core.svg`, style="width: 48px; height: auto;")
.uk-width-expand
h4.uk-margin-remove= core.meta.name
.uk-text-small.uk-text-muted= core.meta.description
.uk-card.uk-card-default
.uk-card-header
h1.uk-card-title Select Community
.uk-card-body
div(uk-grid).uk-grid-small
each core in connectedCores
div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl")
//- pre= JSON.stringify(connectedCores, null, 2)
a(href=`/auth/core/${core._id}`).uk-display-block.uk-link-reset
.dtp-core-list-item.uk-border-rounded
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-auto
img(src=`http://${core.meta.domain}/img/icon/dtp-core.svg`, style="width: 48px; height: auto;")
.uk-width-expand
.core-name= core.meta.name
.core-description= core.meta.description
.uk-card-footer
div(uk-grid).uk-grid-small
.uk-width-expand
+renderBackButton()

@ -1,7 +1,7 @@
extends ../layouts/main
extends ../layouts/focused
block content
section.uk-section.uk-section-secondary
section.uk-section.uk-section-default
.uk-container.uk-text-center
.uk-width-auto.uk-margin-auto
img(src=`/img/icon/${site.domainKey}/icon-256x256.png`).uk-border-rounded
@ -13,13 +13,13 @@ block content
div(uk-grid).uk-flex-center
div(class="uk-width-1-1 uk-width-1-3@m")
.uk-margin-small
a(href="/auth/core").uk-button.dtp-button-primary.uk-border-rounded DTP Connect
a(href="/auth/core").uk-button.uk-button-primary.uk-border-rounded DTP Connect
.uk-text-small Connect using DTP Core
div(class="uk-width-1-1 uk-width-1-3@m")
.uk-margin-small
a(href="/welcome/signup").uk-button.dtp-button-secondary.uk-border-rounded Create Account
a(href="/welcome/signup").uk-button.uk-button-secondary.uk-border-rounded Create Account
.uk-text-small Create a local account
div(class="uk-width-1-1 uk-width-1-3@m")
.uk-margin-small
a(href="/welcome/login").uk-button.dtp-button-secondary.uk-border-rounded Sign In
a(href="/welcome/login").uk-button.uk-button-default.uk-border-rounded Sign In
.uk-text-small Log in with your local account

@ -1,12 +1,13 @@
extends ../layouts/main
extends ../layouts/focused
block content
form(method="POST", action="/auth/login").uk-form
section.uk-section.uk-section-default
.uk-container
.uk-card.uk-card-secondary.uk-card-small.uk-width-xlarge.uk-margin-auto.uk-border-rounded
section.uk-section.uk-section-default.uk-section-xsmall
.uk-container.uk-container-small
form(method="POST", action="/auth/login").uk-form
.uk-card.uk-card-default.uk-card-small.uk-width-xlarge.uk-margin-auto.uk-border-rounded
.uk-card-header
+renderSectionTitle('Member Login')
h1.uk-card-title Member Login
.uk-card-body
fieldset.uk-fieldset
.uk-margin-small
@ -25,8 +26,10 @@ block content
input(id="password", name="password", type="password", placeholder="Enter password").uk-input
.uk-card-footer
.uk-flex.uk-flex-right.uk-flex-middle
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-expand
+renderBackButton()
.uk-width-auto
a(href="/").uk-text-muted Forgot password
.uk-width-auto
button(type="submit").uk-button.dtp-button-primary Login

@ -1,48 +1,54 @@
extends ../layouts/main
extends ../layouts/focused
block content
form(method="POST", action="/user").uk-form
section.uk-section.uk-section-default.uk-section-xsmall
.uk-container.uk-container-small
p You are creating a new member account on #[+renderSiteLink()]. If you have an account, please #[a(href="/welcome/login") log in here]. An account is required to comment on posts and use other site features.
.uk-margin
label(for="email").uk-form-label Email
input(id="email", name="email", type="email", autocomplete="off", placeholder="Enter your email address").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") I'm throwing your email address away after the demo, and I'm not verifying it. You won't receive email.
.uk-margin
label(for="username").uk-form-label Username
input(id="username", name="username", type="text", autocomplete="off", placeholder="Enter a username").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") 40 characters max. No spaces. A-Z, a-z, 0-9, - (dash) and _ (underscore).
.uk-margin
label(for="display-name").uk-form-label Display Name
input(id="display-name", name="displayName", type="text", autocomplete="off", placeholder="Enter a display name").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") 40 characters max, and can include most printable characters including emojis, spaces, whatever you're into within reason.
.uk-margin
div(uk-grid)
.uk-width-1-2
.uk-margin
label(for="password").uk-form-label Password
input(id="password", name="password", type="password", placeholder="Enter password").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Don't forget your password. There is no reset (yet).
.uk-width-1-2
.uk-margin
label(for="passwordv").uk-form-label Verify password
input(id="passwordv", name="passwordv", type="password", placeholder="Verify password").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Please enter your password again to prove you're not an idiot.
section.uk-section.uk-section-secondary.uk-section
.uk-container.uk-container-small
.uk-margin-large
.uk-text-center
section.uk-section.uk-section-default.uk-section-xsmall
.uk-container.uk-container-small
form(method="POST", action="/user").uk-form
.uk-card.uk-card-default.uk-card-small.uk-width-xlarge.uk-margin-auto.uk-border-rounded
.uk-card-header
h1.uk-card-title Create New Account
.uk-card-body
p You are creating a new member account on #[+renderSiteLink()]. If you have an account, please #[a(href="/welcome/login") log in here]. An account is required to comment on posts and use other site features.
.uk-margin
label(for="email").uk-form-label Email
input(id="email", name="email", type="email", autocomplete="off", placeholder="Enter your email address").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") I'm throwing your email address away after the demo, and I'm not verifying it. You won't receive email.
.uk-margin
label(for="username").uk-form-label Username
input(id="username", name="username", type="text", autocomplete="off", placeholder="Enter a username").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") 40 characters max. No spaces. A-Z, a-z, 0-9, - (dash) and _ (underscore).
.uk-margin
label(for="display-name").uk-form-label Display Name
input(id="display-name", name="displayName", type="text", autocomplete="off", placeholder="Enter a display name").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") 40 characters max, and can include most printable characters including emojis, spaces, whatever you're into within reason.
.uk-margin
div(uk-grid)
.uk-width-1-2
.uk-margin
label(for="password").uk-form-label Password
input(id="password", name="password", type="password", placeholder="Enter password").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Don't forget your password. There is no reset (yet).
.uk-width-1-2
.uk-margin
label(for="passwordv").uk-form-label Verify password
input(id="passwordv", name="passwordv", type="password", placeholder="Verify password").uk-input
.uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Please enter your password again to prove you're not an idiot.
.uk-text-center.uk-margin
.uk-width-medium.uk-margin-auto
div(style="background: white;")
img(src='/welcome/signup/captcha', style="padding: 8px 0;").uk-display-block.uk-margin-auto
input(id="captcha", name="captcha", type="text", placeholder="Enter captcha text").uk-input.uk-text-center
.uk-margin-small
button(type="submit").uk-button.dtp-button-primary Create Account
.uk-card-footer
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-expand
+renderBackButton()
.uk-width-auto
button(type="submit").uk-button.uk-button-primary Create Account

@ -39,9 +39,9 @@
inkscape:window-height="1019"
id="namedview218"
showgrid="false"
inkscape:zoom="0.178797"
inkscape:cx="-105.42657"
inkscape:cy="572.35887"
inkscape:zoom="1.0114286"
inkscape:cx="288.51293"
inkscape:cy="296.52704"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
@ -354,22 +354,22 @@
d="m 448.56,281.75 c 0,9.3125 7.5781,16.891 16.891,16.891 9.3086,0 16.891,-7.5781 16.891,-16.891 0,-9.3008 -7.582,-16.891 -16.891,-16.891 -9.3164,0.008 -16.891,7.5898 -16.891,16.891 z"
id="path120"
inkscape:connector-curvature="0"
style="fill:#ffaaaa" />
style="fill:#000000" />
<path
d="m 364.41,399.67 c 0,-9.3125 -7.582,-16.891 -16.891,-16.891 -9.3086,0 -16.879,7.5781 -16.879,16.891 0,9.3129 7.5664,16.891 16.879,16.891 9.3125,-0.004 16.891,-7.5781 16.891,-16.891 z"
id="path122"
inkscape:connector-curvature="0"
style="fill:#ffaaaa" />
style="fill:#000000" />
<path
d="m 247.22,282.48 c 0,-9.3125 -7.5664,-16.891 -16.891,-16.891 -9.3008,0 -16.867,7.5781 -16.867,16.891 0,9.3242 7.5664,16.879 16.867,16.879 9.3242,0 16.891,-7.5547 16.891,-16.879 z"
id="path124"
inkscape:connector-curvature="0"
style="fill:#ffaaaa" />
style="fill:#000000" />
<path
d="m 331.38,164.56 c 0,9.3125 7.582,16.891 16.891,16.891 9.3008,0 16.879,-7.5781 16.879,-16.891 0,-9.3008 -7.582,-16.879 -16.879,-16.879 -9.3086,0.004 -16.891,7.5781 -16.891,16.879 z"
id="path126"
inkscape:connector-curvature="0"
style="fill:#ffaaaa" />
style="fill:#000000" />
<path
d="m 492.02,275.46 30.359,-0.14453 c -0.29297,-10.668 -1.5391,-21.309 -3.7852,-31.719 l -132.19,-132.18 c -10.484,-2.25 -21.219,-3.5234 -31.965,-3.7852 l -0.21875,30.277 c 12.195,2.7227 21.352,13.637 21.352,26.652 0,15.055 -12.242,27.301 -27.301,27.301 -15.055,0 -27.301,-12.254 -27.301,-27.301 0,-13.539 9.9023,-24.797 22.832,-26.938 l 0.21094,-29.949 c -10.219,0.35156 -20.418,1.5898 -30.406,3.7344 l -132.19,132.19 c -2.207,10.242 -3.457,20.703 -3.7695,31.199 h 26.492 c 3.3281,-11.328 13.816,-19.629 26.191,-19.629 15.062,0 27.312,12.258 27.312,27.312 0,15.059 -12.254,27.301 -27.312,27.301 -14.125,0 -25.781,-10.797 -27.156,-24.555 h -25.531 c 0.3125,10.484 1.5625,20.945 3.7695,31.191 l 132.19,132.17 c 9.2344,1.9883 18.652,3.2031 28.125,3.6523 l -0.76172,-26.062 c -11.906,-2.9453 -20.742,-13.727 -20.742,-26.512 0,-15.055 12.242,-27.289 27.301,-27.289 15.055,0 27.312,12.242 27.312,27.289 0,13.742 -10.207,25.145 -23.441,27.035 l 0.75,25.715 c 11.52,-0.13281 23.023,-1.4062 34.242,-3.832 l 132.19,-132.17 c 2.168,-10.074 3.4141,-20.363 3.7461,-30.684 l -29.887,0.14453 c -2.0117,13.098 -13.355,23.172 -26.996,23.172 -15.055,0 -27.316,-12.258 -27.316,-27.312 0,-15.059 12.258,-27.301 27.316,-27.301 12.91,0.008 23.727,8.9922 26.578,21.027 z m -78.227,-27.07 c -7.0117,0 -13.469,-2.2461 -18.766,-6.0547 l -19.641,19.656 c 3.7852,5.2812 6.0469,11.754 6.0469,18.742 0,7 -2.2617,13.461 -6.0469,18.75 l 19.641,19.641 c 5.293,-3.7852 11.754,-6.0312 18.766,-6.0312 17.723,0 32.148,14.43 32.148,32.156 0,17.746 -14.426,32.172 -32.148,32.172 -17.746,0 -32.172,-14.426 -32.172,-32.172 0,-6.9883 2.2383,-13.469 6.0469,-18.742 l -19.66,-19.66 c -5.2656,3.8086 -11.754,6.0547 -18.738,6.0547 -7,0 -13.473,-2.2461 -18.754,-6.0547 l -19.652,19.66 c 3.8086,5.2695 6.0547,11.754 6.0547,18.742 0,17.746 -14.426,32.172 -32.168,32.172 -17.734,0 -32.172,-14.426 -32.172,-32.172 0,-17.723 14.438,-32.156 32.172,-32.156 6.9883,0 13.461,2.2461 18.742,6.0312 l 19.652,-19.641 c -3.8086,-5.2852 -6.043,-11.754 -6.043,-18.75 0,-6.9961 2.2344,-13.461 6.043,-18.742 l -19.652,-19.656 c -5.2812,3.8086 -11.754,6.0547 -18.742,6.0547 -17.734,0 -32.172,-14.426 -32.172,-32.168 0,-17.746 14.438,-32.168 32.172,-32.168 17.734,0 32.168,14.422 32.168,32.168 0,6.9883 -2.2578,13.461 -6.0547,18.742 l 19.652,19.66 c 5.2812,-3.8086 11.754,-6.0547 18.754,-6.0547 6.9883,0 13.473,2.2461 18.738,6.0547 l 19.66,-19.66 c -3.8086,-5.2812 -6.0469,-11.754 -6.0469,-18.742 0,-17.746 14.426,-32.168 32.172,-32.168 17.723,0 32.148,14.422 32.148,32.168 0,17.742 -14.426,32.168 -32.148,32.168 z"
id="path128"

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

@ -0,0 +1,25 @@
.dtp-core-list-item {
padding: 16px;
border: solid 1px @global-color;
transition: background 0.3s;
&:hover {
background: rgb(178, 238, 178);
.core-name, .core-description {
color: @global-color;
}
}
.core-name {
color: @global-color;
font-size: 1.1em;
font-weight: bold;
}
.core-description {
color: @global-muted-color;
font-size: 0.85em;
}
}

@ -7,7 +7,8 @@ html, body {
body {
padding-top: @site-navbar-height;
&[data-current-view="oauth2-authorize-dialog"] {
&[data-current-view="oauth2-authorize-dialog"],
&[data-current-view="welcome"] {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;

@ -8,6 +8,7 @@
@import "site/app-menu.less";
@import "site/nav.less";
@import "site/core-node.less";
@import "site/dashboard.less";
@import "site/site.less";
@import "site/form.less";

Loading…
Cancel
Save