fix: legacy login errors + logout button

client/scss/legacy.scss

@@ -42,20 +42,28 @@ body {
     top: 0;
     left: 0;
     width: 100%;
-    background-color: mc('red', '700');
+    background-color: mc('grey', '800');
     text-align: center;
-    color: mc('red', '50');
+    color: mc('grey', '50');
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: center;
 
     a {
-      color: #FFF;
+      color: mc('red', '200');
       margin-left: 5px;
     }
   }
 
+  &-error {
+    background-color: mc('red', '500');
+    color: #FFF;
+    padding: 5px;
+    border-radius: 5px;
+    margin-bottom: 2rem;
+  }
+
   &-dialog {
     width: 650px;
     background-color: mc('grey', '100');
@@ -171,6 +179,13 @@ body {
       text-decoration: none;
       color: #FFF;
       transition: color .3s ease;
+      border-radius: 50%;
+      background-color: mc('grey', '900');
+      display: flex;
+      width: 40px;
+      height: 40px;
+      justify-content: center;
+      align-items: center;
 
       &:hover {
         color: mc('blue', '500');

server/controllers/auth.js

@@ -6,8 +6,6 @@ const BruteKnex = require('brute-knex')
 const router = express.Router()
 const moment = require('moment')
 const _ = require('lodash')
-const fs = require('fs-extra')
-const path = require('path')
 
 const bruteforce = new ExpressBrute(new BruteKnex({
   createTable: true,
@@ -28,32 +26,9 @@ router.get('/login', async (req, res, next) => {
   _.set(res.locals, 'pageMeta.title', 'Login')
 
   if (req.query.legacy || req.get('user-agent').indexOf('Trident') >= 0) {
-    const strategies = await WIKI.models.authentication.query().select('key', 'selfRegistration').where({ isEnabled: true })
-    let formStrategies = []
-    let socialStrategies = []
-
-    // TODO: Let's refactor that at some point...
-    for (let stg of strategies) {
-      const stgInfo = _.find(WIKI.data.authentication, ['key', stg.key]) || {}
-      if (stgInfo.useForm) {
-        formStrategies.push({
-          key: stg.key,
-          title: stgInfo.title
-        })
-      } else {
-        socialStrategies.push({
-          ...stgInfo,
-          ...stg,
-          icon: await fs.readFile(path.join(WIKI.ROOTPATH, `assets/svg/auth-icon-${stg.key}.svg`), 'utf8').catch(err => {
-            if (err.code === 'ENOENT') {
-              return null
-            }
-            throw err
-          })
-        })
-      }
-    }
+    const { formStrategies, socialStrategies } = await WIKI.models.authentication.getStrategiesForLegacyClient()
     res.render('legacy/login', {
+      err: false,
       formStrategies,
       socialStrategies
     })
@@ -109,7 +84,12 @@ router.post('/login', bruteforce.prevent, async (req, res, next) => {
       res.cookie('jwt', authResult.jwt, { expires: moment().add(1, 'y').toDate() })
       res.redirect('/')
     } catch (err) {
-      res.render('legacy/login')
+      const { formStrategies, socialStrategies } = await WIKI.models.authentication.getStrategiesForLegacyClient()
+      res.render('legacy/login', {
+        err,
+        formStrategies,
+        socialStrategies
+      })
     }
   } else {
     res.redirect('/login')
@@ -121,6 +101,7 @@ router.post('/login', bruteforce.prevent, async (req, res, next) => {
  */
 router.get('/logout', function (req, res) {
   req.logout()
+  res.clearCookie('jwt')
   res.redirect('/')
 })
 

server/controllers/common.js

@@ -200,7 +200,7 @@ router.get('/*', async (req, res, next) => {
           if (_.isString(page.toc)) {
             page.toc = JSON.parse(page.toc)
           }
-          res.render('legacy/page', { page, sidebar, injectCode })
+          res.render('legacy/page', { page, sidebar, injectCode, isAuthenticated: req.user && req.user.id !== 2 })
         } else {
           res.render('page', { page, sidebar, injectCode })
         }

server/models/authentication.js

@@ -44,6 +44,38 @@ module.exports = class Authentication extends Model {
     })), ['key'])
   }
 
+  static async getStrategiesForLegacyClient() {
+    const strategies = await WIKI.models.authentication.query().select('key', 'selfRegistration').where({ isEnabled: true })
+    let formStrategies = []
+    let socialStrategies = []
+
+    for (let stg of strategies) {
+      const stgInfo = _.find(WIKI.data.authentication, ['key', stg.key]) || {}
+      if (stgInfo.useForm) {
+        formStrategies.push({
+          key: stg.key,
+          title: stgInfo.title
+        })
+      } else {
+        socialStrategies.push({
+          ...stgInfo,
+          ...stg,
+          icon: await fs.readFile(path.join(WIKI.ROOTPATH, `assets/svg/auth-icon-${stg.key}.svg`), 'utf8').catch(err => {
+            if (err.code === 'ENOENT') {
+              return null
+            }
+            throw err
+          })
+        })
+      }
+    }
+
+    return {
+      formStrategies,
+      socialStrategies
+    }
+  }
+
   static async refreshStrategiesFromDisk() {
     let trx
     try {

server/views/legacy/login.pug

@@ -5,6 +5,8 @@ block body
     .login-deprecated Your browser is outdated. Upgrade to a #[a(href='https://bestvpn.org/outdatedbrowser/en', rel='nofollow') modern browser].
     .login
       .login-dialog
+        if err
+          .login-error= err.message
         form(method='post', action='/login')
           h1= config.title
           select(name='strategy')

server/views/legacy/page.pug

@@ -12,8 +12,12 @@ block body
       span.header-title= siteConfig.title
       span.header-deprecated Your browser is outdated. Upgrade to a #[a(href='https://bestvpn.org/outdatedbrowser/en', rel='nofollow') modern browser].
       span.header-login
-        a(href='/login')
+        if !isAuthenticated
+          a(href='/login', title='Login')
             i.material-icons account_circle
+        else
+          a(href='/logout', title='Logout')
+            i.material-icons logout
     .main
       .sidebar
         each navItem in sidebar
@@ -30,10 +34,10 @@ block body
           .page-header-left
             h1= page.title
             h2= page.description
-          .page-header-right
-            .page-header-right-title Last edited by
-            .page-header-right-author= page.authorName
-            .page-header-right-updated= page.updatedAt
+          //- .page-header-right
+          //-   .page-header-right-title Last edited by
+          //-   .page-header-right-author= page.authorName
+          //-   .page-header-right-updated= page.updatedAt
         .page-contents
           .contents
             div!= page.render