Web panel improvements.

- Don't return a redirect to the login page if an authentication failed
  over a JSON endpoint - instead, return a JSON payload with the error.

- Added support for additional fonts.

- Re-designed the login/registration page.

- Updated caniuse database.

platypush/backend/http/app/routes/execute.py

@@ -1,6 +1,7 @@
 import json
 
-from flask import Blueprint, abort, request, Response
+from flask import Blueprint, abort, request
+from flask.wrappers import Response
 
 from platypush.backend.http.app import template_folder
 from platypush.backend.http.app.utils import authenticate, logger, send_message
@@ -14,8 +15,8 @@ __routes__ = [
 
 
 @execute.route('/execute', methods=['POST'])
-@authenticate()
+@authenticate(json=True)
-def execute():
+def execute_route():
     """Endpoint to execute commands"""
     try:
         msg = json.loads(request.data.decode('utf-8'))

platypush/backend/http/app/routes/resources.py

@@ -8,16 +8,21 @@ from platypush.backend.http.app import template_folder
 
 
 img_folder = os.path.join(template_folder, 'img')
+fonts_folder = os.path.join(template_folder, 'fonts')
 icons_folder = os.path.join(template_folder, 'icons')
 resources = Blueprint('resources', __name__, template_folder=template_folder)
 favicon = Blueprint('favicon', __name__, template_folder=template_folder)
 img = Blueprint('img', __name__, template_folder=template_folder)
+icons = Blueprint('icons', __name__, template_folder=template_folder)
+fonts = Blueprint('fonts', __name__, template_folder=template_folder)
 
 # Declare routes list
 __routes__ = [
     resources,
     favicon,
     img,
+    icons,
+    fonts,
 ]
 
 
@@ -42,9 +47,11 @@ def resources_path(path):
     real_path = real_base_path
 
     file_path = [
-        s for s in re.sub(
+        s
+        for s in re.sub(
             r'^{}(.*)$'.format(base_path), '\\1', path  # lgtm [py/regex-injection]
-        ).split('/') if s
+        ).split('/')
+        if s
     ]
 
     for p in file_path[:-1]:
@@ -71,10 +78,16 @@ def imgpath(path):
     return send_from_directory(img_folder, path)
 
 
-@img.route('/icons/<path:path>', methods=['GET'])
+@icons.route('/icons/<path:path>', methods=['GET'])
 def iconpath(path):
     """Default static icons"""
     return send_from_directory(icons_folder, path)
 
 
+@fonts.route('/fonts/<path:path>', methods=['GET'])
+def fontpath(path):
+    """Default fonts"""
+    return send_from_directory(fonts_folder, path)
+
+
 # vim:sw=4:ts=4:et:

platypush/backend/http/app/utils.py

@@ -3,7 +3,8 @@ import logging
 import os
 
 from functools import wraps
-from flask import abort, request, redirect, Response, current_app
+from flask import abort, request, redirect, jsonify, current_app
+from flask.wrappers import Response
 from redis import Redis
 
 # NOTE: The HTTP service will *only* work on top of a Redis bus. The default
@@ -184,7 +185,25 @@ def _authenticate_csrf_token():
     )
 
 
-def authenticate(redirect_page='', skip_auth_methods=None, check_csrf_token=False):
+def authenticate(
+    redirect_page='',
+    skip_auth_methods=None,
+    check_csrf_token=False,
+    json=False,
+):
+    def on_auth_fail():
+        if json:
+            return (
+                jsonify(
+                    {
+                        'message': 'Not logged in',
+                    }
+                ),
+                401,
+            )
+
+        return redirect('/login?redirect=' + (redirect_page or request.url), 307)
+
     def decorator(f):
         @wraps(f)
         def wrapper(*args, **kwargs):
@@ -213,9 +232,7 @@ def authenticate(redirect_page='', skip_auth_methods=None, check_csrf_token=Fals
                 if session_auth_ok:
                     return f(*args, **kwargs)
 
-                return redirect(
+                return on_auth_fail()
-                    '/login?redirect=' + (redirect_page or request.url), 307
-                )
 
             # CSRF token check
             if check_csrf_token:
@@ -224,9 +241,7 @@ def authenticate(redirect_page='', skip_auth_methods=None, check_csrf_token=Fals
                     return abort(403, 'Invalid or missing csrf_token')
 
             if n_users == 0 and 'session' not in skip_methods:
-                return redirect(
+                return on_auth_fail()
-                    '/register?redirect=' + (redirect_page or request.url), 307
-                )
 
             if (
                 ('http' not in skip_methods and http_auth_ok)

platypush/backend/http/webapp/package-lock.json

@@ -3705,9 +3705,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001320",
+      "version": "1.0.30001416",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001416.tgz",
-      "integrity": "sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==",
+      "integrity": "sha512-06wzzdAkCPZO+Qm4e/eNghZBDfVNDsCgw33T27OwBH9unE9S478OYw//Q2L7Npf/zBzs7rjZOszIFQkwQKAEqA==",
       "funding": [
         {
           "type": "opencollective",
@@ -14544,9 +14544,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001320",
+      "version": "1.0.30001416",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001416.tgz",
-      "integrity": "sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA=="
+      "integrity": "sha512-06wzzdAkCPZO+Qm4e/eNghZBDfVNDsCgw33T27OwBH9unE9S478OYw//Q2L7Npf/zBzs7rjZOszIFQkwQKAEqA=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",

platypush/backend/http/webapp/public/fonts/poppins.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./Poppins.ttf) format('truetype');
+}

platypush/backend/http/webapp/public/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="/fonts/poppins.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

platypush/backend/http/webapp/src/App.vue

@@ -59,7 +59,7 @@ export default {
     },
 
     async initConfig() {
-      this.config = await this.request('config.get')
+      this.config = await this.request('config.get', {}, 60000, false)
       this.userAuthenticated = true
     },
   },

platypush/backend/http/webapp/src/utils/Api.vue

@@ -4,7 +4,7 @@ import axios from 'axios'
 export default {
   name: "Api",
   methods: {
-    execute(request, timeout=60000) {
+    execute(request, timeout=60000, showError=true) {
       const opts = {};
 
       if (!('target' in request) || !request['target']) {
@@ -36,6 +36,7 @@ export default {
               }
             })
             .catch((error) => {
+              if (showError)
                 this.notify({
                   text: error,
                   error: true,
@@ -46,12 +47,12 @@ export default {
       })
     },
 
-    request(action, args={}, timeout=60000) {
+    request(action, args={}, timeout=60000, showError=true) {
       return this.execute({
         type: 'request',
         action: action,
         args: args,
-      }, timeout);
+      }, timeout, showError);
     }
   },
 }

platypush/backend/http/webapp/src/views/Login.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="login-container">
     <form class="login" method="POST">
-      <div class="description">
+      <div class="header">
-        {{ _register ? 'Welcome' : 'Authenticate' }} to platypush
+        <span class="logo" />
+        <span class="text">Platypush</span>
       </div>
 
       <div class="row">
@@ -23,7 +24,7 @@
         </label>
       </div>
 
-      <div class="row pull-right">
+      <div class="row buttons">
         <input type="submit" class="btn btn-primary" :value="_register ? 'Register' : 'Login'">
       </div>
 
@@ -60,7 +61,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 body {
   width: 100vw;
   height: 100vh;
@@ -75,9 +76,25 @@ body {
   background: $default-bg-6;
 }
 
-.description {
+.header {
+  font-size: 1.2em;
   margin-bottom: 2em;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .logo {
+    width: 3em;
+    height: 3em;
+    display: inline-flex;
+    background-image: url('@/assets/img/logo.png');
+    background-size: cover;
+  }
+
+  .text {
+    font-family: Poppins, sans-serif;
+    margin-left: .5em;
+  }
 }
 
 form {
@@ -111,6 +128,14 @@ form {
     display: flex;
     font-size: 0.8em;
   }
+
+  .buttons {
+    text-align: center;
+
+    input[type=submit] {
+      padding: .5em .75em;
+    }
+  }
 }
 
 a {