feat: login page UI

2017-09-10 01:41:22 -04:00
parent dd73b036d2
commit 52630127cd
21 changed files with 940 additions and 869 deletions
--- a/server/master.js
+++ b/server/master.js
@@ -136,10 +136,10 @@ module.exports = Promise.join(
  // ----------------------------------------

  app.locals._ = require('lodash')
-  app.locals.t = wiki.lang.t.bind(wiki.config.site.lang)
+  app.locals.t = wiki.lang.t.bind(wiki.lang)
  app.locals.moment = require('moment')
  app.locals.moment.locale(wiki.config.site.lang)
-  app.locals.appconfig = wiki.config
+  app.locals.config = wiki.config
  app.use(mw.flash)

  // ----------------------------------------
--- a/server/modules/config.js
+++ b/server/modules/config.js
@@ -47,11 +47,11 @@ module.exports = {
      appconfig.port = process.env.PORT || 80
    }

-  // Convert booleans
+    // Convert booleans

-  appconfig.public = (appconfig.public === true || _.toLower(appconfig.public) === 'true')
+    appconfig.public = (appconfig.public === true || _.toLower(appconfig.public) === 'true')

-  // List authentication strategies
+    // List authentication strategies
    wiki.config = appconfig
    wiki.data = appdata
  },
--- a/server/views/auth/login.pug
+++ b/server/views/auth/login.pug
@@ -1,75 +1,54 @@
-doctype html
-html(data-logic='login')
-  head
-    meta(http-equiv='X-UA-Compatible', content='IE=edge')
-    meta(charset='UTF-8')
-    meta(name='viewport', content='width=device-width, initial-scale=1')
-    meta(name='theme-color', content='#009688')
-    meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
-    title= appconfig.title
-
-    // Favicon
-    each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
-    each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href='/manifest.json')
-
-    // JS / CSS
-    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
-    script(type='text/javascript', src=appconfig.host + '/js/app.js')
+extends ../master.pug

+block body
  body
-    #bg
-      each bg in _.sampleSize([1, 2, 3],3)
-        div(style='background-image:url(/images/bg_' + bg + '.jpg);')
-    #root
-      h1= appconfig.title
-      h2= t('auth:loginrequired')
-      if appflash.length > 0
-        h3
-          i.icon-warning-outline
-          = appflash[0].title
-        h4= appflash[0].message
-      if appconfig.auth.local.enabled
-        form(method='post', action='/login')
-          input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser'))
-          input#login-pass(type='password', name='password', placeholder=t('auth:fields.password'))
-          button(type='submit')= t('auth:actions.login')
-      if appconfig.authStrategies.socialEnabled
-        #social
-          if appconfig.auth.local.enabled
-            span= t('auth:loginusingalt')
-          else
-            span= t('auth:loginusing')
-          if appconfig.auth.microsoft && appconfig.auth.microsoft.enabled
-            button.ms(onclick='window.location.assign("/login/ms")')
-              i.icon-windows2
-              span= t('auth:providers.windowslive')
-          if appconfig.auth.azure && appconfig.auth.azure.enabled
-            button.ms(onclick='window.location.assign("/login/azure")')
-              i.icon-windows2
-              span= t('auth:providers.azure')
-          if appconfig.auth.google && appconfig.auth.google.enabled
-            button.google(onclick='window.location.assign("/login/google")')
-              i.icon-google
-              span= t('auth:providers.google')
-          if appconfig.auth.facebook && appconfig.auth.facebook.enabled
-            button.facebook(onclick='window.location.assign("/login/facebook")')
-              i.icon-facebook
-              span= t('auth:providers.facebook')
-          if appconfig.auth.github && appconfig.auth.github.enabled
-            button.github(onclick='window.location.assign("/login/github")')
-              i.icon-github
-              span= t('auth:providers.github')
-          if appconfig.auth.slack && appconfig.auth.slack.enabled
-            button.slack(onclick='window.location.assign("/login/slack")')
-              i.icon-slack
-              span= t('auth:providers.slack')
-    #copyright
-      = t('footer.poweredby') + ' '
-      a.icon(href='https://github.com/Requarks/wiki')
-        i.icon-github
-      a(href='https://wiki.requarks.io/') Wiki.js
+    .login#root
+      .login-container
+        if config.authStrategies.socialEnabled
+          .login-providers
+            button.is-active(onclick='window.location.assign("/login/ms")')
+              i.nc-icon-outline.ui-1_database
+              span= t('auth:providers.local')
+            if config.auth.microsoft && config.auth.microsoft.enabled
+              button(onclick='window.location.assign("/login/ms")')
+                i.icon-windows2
+                span= t('auth:providers.windowslive')
+            if config.auth.azure && config.auth.azure.enabled
+              button(onclick='window.location.assign("/login/azure")')
+                i.icon-windows2
+                span= t('auth:providers.azure')
+            if config.auth.google && config.auth.google.enabled
+              button(onclick='window.location.assign("/login/google")')
+                i.icon-google
+                span= t('auth:providers.google')
+            if config.auth.facebook && config.auth.facebook.enabled
+              button(onclick='window.location.assign("/login/facebook")')
+                i.icon-facebook
+                span= t('auth:providers.facebook')
+            if config.auth.github && config.auth.github.enabled
+              button(onclick='window.location.assign("/login/github")')
+                i.icon-github
+                span= t('auth:providers.github')
+            if config.auth.slack && config.auth.slack.enabled
+              button(onclick='window.location.assign("/login/slack")')
+                i.icon-slack
+                span= t('auth:providers.slack')
+        .login-frame
+          h1= config.site.title
+          h2= t('auth:loginrequired')
+          if appflash.length > 0
+            h3
+              i.icon-warning-outline
+              = appflash[0].title
+            h4= appflash[0].message
+          if config.auth.local.enabled
+            form(method='post', action='/login')
+              input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser'))
+              input#login-pass(type='password', name='password', placeholder=t('auth:fields.password'))
+              button.button.is-light-green.is-fullwidth(type='submit')
+                span= t('auth:actions.login')
+      .login-copyright
+        = t('footer.poweredby') + ' '
+        a.icon(href='https://github.com/Requarks/wiki')
+          i.icon-github
+        a(href='https://wiki.requarks.io/') Wiki.js
--- a/server/views/error.pug
+++ b/server/views/error.pug
@@ -1,32 +1,12 @@
-doctype html
-html(data-logic='error')
-  head
-    meta(http-equiv='X-UA-Compatible', content='IE=edge')
-    meta(charset='UTF-8')
-    meta(name='viewport', content='width=device-width, initial-scale=1')
-    meta(name='theme-color', content='#009688')
-    meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content=appconfig.host + '/favicons/ms-icon-144x144.png')
-    title= appconfig.title
-
-    // Favicon
-    each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href=appconfig.host + '/favicons/android-icon-192x192.png')
-    each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href=appconfig.host + '/manifest.json')
-
-    // JS / CSS
-    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
-    script(type='text/javascript', src=appconfig.host + '/js/app.js')
+extends ./master.pug

+block body
  body(class='is-error')
    .container
-      a(href='/'): img(src=appconfig.host + '/images/logo.png')
+      a(href='/'): img(src=config.site.path + '/images/logo.png')
      h1= message
      h2= t('errors:generic')
-      a.button.is-amber.is-inverted.is-featured(href=appconfig.host + '/')= t('errors:actions.gohome')
+      a.button.is-amber.is-inverted.is-featured(href=config.site.path+ '/')= t('errors:actions.gohome')

      if error.stack
        h3= t('errors:debugmsg')
--- a/server/views/layout.pug
+++ b/server/views/layout.pug
@@ -1,33 +1,6 @@
-doctype html
-html
-  head
-    meta(http-equiv='X-UA-Compatible', content='IE=edge')
-    meta(charset='UTF-8')
-    meta(name='viewport', content='width=device-width, initial-scale=1')
-    meta(name='theme-color', content='#009688')
-    meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content=appconfig.host + '/favicons/ms-icon-144x144.png')
-    title= appconfig.title
-
-    //- Favicon
-    each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href=appconfig.host + '/favicons/android-icon-192x192.png')
-    each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href=appconfig.host + '/manifest.json')
-
-    //- Site Lang
-    script.
-      var siteLang = '!{appconfig.lang}';
-      var siteRoot = '!{appconfig.host}';
-
-    //- JS / CSS
-    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
-    script(type='text/javascript', src=appconfig.host + '/js/app.js')
-
-    block head
+extends ./master.pug

+block body
  body
    #root.has-stickynav(class=['is-primary-' + appconfig.theme.primary, 'is-alternate-' + appconfig.theme.alt])
      include ./common/header.pug
--- a/server/views/master.pug
+++ b/server/views/master.pug
@@ -0,0 +1,30 @@
+doctype html
+html
+  head
+    meta(http-equiv='X-UA-Compatible', content='IE=edge')
+    meta(charset='UTF-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    meta(name='theme-color', content='#009688')
+    meta(name='msapplication-TileColor', content='#009688')
+    meta(name='msapplication-TileImage', content=config.site.path + '/favicons/ms-icon-144x144.png')
+    title= config.title
+
+    //- Favicon
+    each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
+      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=config.site.path + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
+    link(rel='icon', type='image/png', sizes='192x192', href=config.site.path + '/favicons/android-icon-192x192.png')
+    each favsize in [32, 96, 16]
+      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=config.site.path + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
+    link(rel='manifest', href=config.site.path + '/manifest.json')
+
+    //- Site Lang
+    script.
+      var siteConfig = !{JSON.stringify(config.site)}
+
+    //- JS / CSS
+    script(type='text/javascript', src=config.site.path + '/js/vendor.js')
+    script(type='text/javascript', src=config.site.path + '/js/app.js')
+
+    block head
+
+  block body