login and auth flow / UX

app/controllers/auth.js

@@ -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');

app/controllers/welcome.js

@@ -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));

app/views/welcome/core-home.pug

@@ -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
+      .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@l")
+              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-text
+                a(href=`/auth/core/${core._id}`).uk-display-block.uk-link-reset
-              .uk-tile.uk-tile-default.uk-padding-small.uk-border-small
+                  .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
-                    h4.uk-margin-remove= core.meta.name
+                        .core-name= core.meta.name
-                    .uk-text-small.uk-text-muted= core.meta.description
+                        .core-description= core.meta.description
+
+        .uk-card-footer
+          div(uk-grid).uk-grid-small
+            .uk-width-expand
+              +renderBackButton()

app/views/welcome/index.pug

@@ -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

app/views/welcome/login.pug

@@ -1,12 +1,13 @@
-extends ../layouts/main
+extends ../layouts/focused
 block content
 
+  section.uk-section.uk-section-default.uk-section-xsmall
+    .uk-container.uk-container-small
       form(method="POST", action="/auth/login").uk-form
-    section.uk-section.uk-section-default
+        .uk-card.uk-card-default.uk-card-small.uk-width-xlarge.uk-margin-auto.uk-border-rounded
-      .uk-container
-        .uk-card.uk-card-secondary.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

app/views/welcome/signup.pug

@@ -1,9 +1,14 @@
-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
+      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
@@ -35,14 +40,15 @@ block content
                     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-text-center.uk-margin
-      .uk-container.uk-container-small
-        .uk-margin-large
-          .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

client/img/icon/dtp-core.svg

@@ -39,9 +39,9 @@
      inkscape:window-height="1019"
      id="namedview218"
      showgrid="false"
-     inkscape:zoom="0.178797"
+     inkscape:zoom="1.0114286"
-     inkscape:cx="-105.42657"
+     inkscape:cx="288.51293"
-     inkscape:cy="572.35887"
+     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"

client/less/site/core-node.less

@@ -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;
+  }
+}

client/less/site/main.less

@@ -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;
 

client/less/style.common.less

@@ -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";