rewrite auth and apps

author: Peter Grassberger <petertheone@gmail.com> 2016-04-20 15:58:14 (GMT)
committer: Peter Grassberger <petertheone@gmail.com> 2016-04-20 15:58:14 (GMT)
commit: 16b507e9ab3b7d9bfbe72319d2197cea98905294 (patch)
tree: acc475be6eda15d098b166f7f37ebd6d0b75a572 /www
parent: aff9aaaa27bfb989432e23c768b2ec52fc8e70f7 (diff)
5 files changed, 188 insertions, 115 deletions
diff --git a/www/index.html b/www/index.html
index 68b2d36..9bc89ec 100644
--- a/www/index.html
+++ b/www/index.html
@@ -15,20 +15,6 @@
   <link href="/styles/jingles.css" rel="stylesheet">
   <link href="/styles/musicpools.css" rel="stylesheet">
   <link href="/styles/musicgrid.css" rel="stylesheet">
-  <script src="/javascript/jquery/jquery.min.js"></script>
-  <script src="/javascript/bootstrap/js/bootstrap.min.js"></script>
-  <script src="/js/dropzone.js"></script>
-  <script src="/js/rdxport.js"></script>
-  <script src="/js/rdxport.rh.js"></script>
-  <script src="/js/utils.js"></script>
-  <script src="/js/clock.js"></script>
-  <script src="/js/importer.js"></script>
-  <script src="/js/auth.js"></script>
-  <script src="/js/apps.js"></script>
-  <script src="/js/shows.js"></script>
-  <script src="/js/jingles.js"></script>
-  <script src="/js/musicpools.js"></script>
-  <script src="/js/musicgrid.js"></script>
  </head>
  <body>
 
@@ -40,7 +26,7 @@
         <img class="visible-xs-block" src="/img/helsinki-small.png" alt="radio helsinki logo" />
         <div class="loginspacer hidden-xs">&nbsp;</div>
         <div class="loginspacer hidden-xs hidden-sm">&nbsp;</div>
-        <img class="hidden-xs" src="/img/helsinki.png" alt="radio helsinki logo" />
+        <img class="hidden-xs" src="/img/helsinki.png" alt="radio helsinki logo" width="176" height="176" />
         <h1 class="form-auth-heading">Radio Helsinki - Import</h1>
         <input id="username" type="text" class="form-control" placeholder="Benutzername" required autofocus>
         <input id="password" type="password" class="form-control" placeholder="Passwort" required>
@@ -76,7 +62,7 @@
 
             <div class="navbar-right">
               <p class="navbar-text">angemeldet als <strong id="username-field">UNKNOWN</strong></p>
-              <button type="button" class="btn btn-danger navbar-btn" onclick="auth_logout()">
+              <button type="button" class="btn btn-danger navbar-btn logout">
                 <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp;&nbsp;Abmelden
               </button>
             </div>
@@ -430,11 +416,21 @@
 
   </div>
 
-  <script type="text/javascript">
-    auth_init();
-    apps_init();
-    clock_init();
-  </script>
+  <script src="/javascript/jquery/jquery.min.js"></script>
+  <script src="/javascript/bootstrap/js/bootstrap.min.js"></script>
+  <script src="/js/dropzone.js"></script>
+  <script src="/js/rdxport.js"></script>
+  <script src="/js/rdxport.rh.js"></script>
+  <script src="/js/utils.js"></script>
+  <script src="/js/clock.js"></script>
+  <script src="/js/importer.js"></script>
+  <script src="/js/auth.js"></script>
+  <script src="/js/apps.js"></script>
+  <script src="/js/shows.js"></script>
+  <script src="/js/jingles.js"></script>
+  <script src="/js/musicpools.js"></script>
+  <script src="/js/musicgrid.js"></script>
+  <script src="/js/router.js"></script>
 
  </body>
 </html>
diff --git a/www/js/auth.js b/www/js/auth.js
index d01b70d..c533219 100644
--- a/www/js/auth.js
+++ b/www/js/auth.js
@@ -24,94 +24,89 @@
 
 var Rdxport = Rdxport || {};
 
-var auth_username = null;
-var auth_fullname = null;
-var auth_token = null;
-
-function auth_loginSuccess(data) {
-   if (data.status == 'OK') {
-     auth_username = data.username;
-     auth_fullname = data.fullname;
-     auth_token = data.token;
-
-     sessionStorage.setItem("auth_username", auth_username);
-     sessionStorage.setItem("auth_fullname", auth_fullname);
-     sessionStorage.setItem("auth_token", auth_token);
-
-     // todo: do this at a central place
-     rdxport = new Rdxport.Rdxport(auth_username, auth_token, '/rd-bin/rdxport.cgi');
-     rdxport.setListDropboxesEndpoint('/rh-bin/listdropboxes.cgi');
-     rdxport.setMusicgridEndpoint('/rh-bin/musicgrid.cgi');
-
-     apps_select(apps_current);
-
-     $('#username-field').html(auth_fullname + ' (' + auth_username + ')');
-     $('#loginbox').slideUp();
-     $('#mainwindow').fadeIn();
-   } else {
-     alertbox.error('loginbox', "Fehler beim Login", data.errorstring);
-     auth_cleanup();
-   }
-}
-
-function auth_loginError(req, status, error) {
-   var message = req.status + ': ' + error;
-   if(req.status == 401) {
-     message = "Benutzer und/oder Passwort sind falsch!";
-   }
-   alertbox.error('loginbox', "Fehler beim Login", message);
-   $("#password").val('');
-}
-
-function auth_logout() {
-  if (importer && importer.isUploading()) {
-    alert('Achtung: Es laufen noch imports.');
-    return;
-  }
-
-  auth_cleanup();
-  apps_cleanup();
+Rdxport.Auth = function() {
+  console.log('auth');
+  this.username = sessionStorage.getItem('auth_username');
+  this.fullname = sessionStorage.getItem('auth_fullname');
+  this.token = sessionStorage.getItem('auth_token');
+};
+
+Rdxport.Auth.prototype.isLoggedIn = function() {
+  console.log('isLoggedIn');
+  return this.username && this.fullname && this.token;
+};
+
+Rdxport.Auth.prototype.set = function(username, fullname, token) {
+  console.log('set');
+  this.username = username;
+  this.fullname = fullname;
+  this.token = token;
+
+  sessionStorage.setItem('auth_username', this.username);
+  sessionStorage.setItem('auth_fullname', this.fullname);
+  sessionStorage.setItem('auth_token', this.token);
+};
+
+Rdxport.Auth.prototype.cleanup = function() {
+  console.log('cleanup');
+  sessionStorage.removeItem('auth_username');
+  sessionStorage.removeItem('auth_fullname');
+  sessionStorage.removeItem('auth_token');
+
+  this.username = null;
+  this.fullname = null;
+  this.token = null;
+};
+
+Rdxport.AuthView = function(model) {
+  console.log('AuthView');
+  this.model = model;
+};
+
+Rdxport.AuthView.prototype.renderLoggedIn = function() {
+  $('#loginbox').slideUp();
+  $('#mainwindow').fadeIn();
+  $('#username-field').html(this.model.fullname + ' (' + this.model.username + ')');
+
+  $('button.logout').off().on('click', function() {
+    router.logout();
+  });
+};
 
-  $(".alert").alert('close');
-  $("#username").val('');
-  $("#password").val('');
-  $("#mainwindow").fadeOut();
-  $('#username-field').html('');
+Rdxport.AuthView.prototype.renderLoginForm = function() {
+  $('.alert').alert('close');
   $('#loginbox').slideDown();
-}
+  $('#mainwindow').fadeOut();
+  $('#username-field').empty();
 
-function auth_init() {
-  auth_username = sessionStorage.getItem("auth_username");
-  auth_fullname = sessionStorage.getItem("auth_fullname");
-  auth_token = sessionStorage.getItem("auth_token");
-
-  if(auth_token && auth_username && auth_fullname) {
-    $("#loginbox").hide();
-    $('#username-field').html(auth_fullname + ' (' + auth_username + ')');
-  } else {
-    $("#mainwindow").hide();
-  }
-  $("#loginform").submit(function(event) {
+  var self = this;
+  $('#loginform').on('submit', function(event) {
     event.preventDefault();
-
     Rdxport.Rdxport.authLogin(
-        '/rh-bin/authtoken.json',
-        $("#username").val(),
-        $("#password").val(),
-        auth_loginSuccess
-    ).fail(auth_loginError);
+      '/rh-bin/authtoken.json',
+      $("#username").val(),
+      $("#password").val(),
+      function(data) {
+        if (data.status == 'OK') {
+          self.model.set(
+            data.username,
+            data.fullname,
+            data.token
+          );
+
+          router.route();
+        } else {
+          alertbox.error('loginbox', "Fehler beim Login", data.errorstring);
+          self.model.cleanup();
+        }
+      }
+    ).fail(function(req, status, error) {
+        var message = req.status + ': ' + error;
+        if(req.status == 401) {
+          message = "Benutzer und/oder Passwort sind falsch!";
+        }
+        alertbox.error('loginbox', "Fehler beim Login", message);
+        $("#password").val('');
+      });
   });
-}
-
-function auth_cleanup() {
-  sessionStorage.removeItem("auth_username");
-  sessionStorage.removeItem("auth_fullname");
-  sessionStorage.removeItem("auth_token");
-
-  auth_username = null;
-  auth_fullname = null;
-  auth_token = null;
-
-  $("#username").val('').focus();
-  $("#password").val('');
-}
+};
diff --git a/www/js/clock.js b/www/js/clock.js
index 96ec9e4..eb04eed 100644
--- a/www/js/clock.js
+++ b/www/js/clock.js
@@ -44,11 +44,11 @@ function Clock() {
     time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds();
 
     this.draw_callbacks.fireWith(window, [date_str, time_str, get_rd_week(rdtime_ms)]);
-  }
+  };
 
   this.addCallback = function(cb) {
     this.draw_callbacks.add(cb);
-  }
+  };
 
   this.ntp_update = function(event) {
     var t4 = (+new Date());
@@ -59,18 +59,18 @@ function Clock() {
     this.clock_offset = ((msg.t2 - msg.t1) + (msg.t3 - msg.t4)) / 2;
     this.clock_rtt = (msg.t4 - msg.t1) - (msg.t3 - msg.t2);
 //    console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms');
-  }
+  };
 
   this.ntp_request = function() {
     this.sock.send(JSON.stringify({ t1: (+new Date()), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 }));
-  }
+  };
 
   this.sock_onopen = function() {
 //    console.log('clock websocket connection established');
     this.state = 'CONNECTED';
     this.ntp_request();
     this.interval_request = setInterval(this.ntp_request.bind(this), 2000);
-  }
+  };
 
   this.sock_onclose = function(event) {
     if(this.state == 'STOPPED') {
@@ -84,7 +84,7 @@ function Clock() {
       setTimeout(this.connect.bind(this), 1000);
       this.state = 'RECONNECTING';
     }
-  }
+  };
 
   this.connect = function() {
     this.sock = new WebSocket('wss://' + window.location.host + '/ntp');
@@ -92,12 +92,12 @@ function Clock() {
     this.sock.onopen = this.sock_onopen.bind(this);
     this.sock.onclose = this.sock_onclose.bind(this);
     this.state = 'CONNECTING';
-  }
+  };
 
   this.start = function() {
     this.connect();
     this.interval_redraw = setInterval(this.redraw.bind(this), 200);
-  }
+  };
 
   this.stop = function() {
     this.state = 'STOPPED';
@@ -106,7 +106,7 @@ function Clock() {
     clearInterval(this.interval_request);
     delete this.interval_request;
     this.sock.close();
-  }
+  };
 }
 
 var clock = new Clock();
diff --git a/www/js/router.js b/www/js/router.js
new file mode 100644
index 0000000..ce84950
--- /dev/null
+++ b/www/js/router.js
@@ -0,0 +1,74 @@
+/*
+ *  rhwebimport
+ *
+ *  Copyright (C) 2014-2016 Christian Pointner <equinox@helsinki.at>
+ *  Copyright (C) 2015-2016 Peter Grassberger <petertheone@gmail.com>
+ *
+ *  This file is part of rhwebimport.
+ *
+ *  rhwebimport is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  any later version.
+ *
+ *  rhwebimport is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with rhwebimport. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+'use strict';
+
+var auth = null;
+var router = null;
+
+$(document).ready(function() {
+  auth = new Rdxport.Auth();
+  router = new Rdxport.Router(auth);
+  router.route();
+});
+
+Rdxport.Router = function(auth) {
+  console.log('Router');
+  this.auth = auth;
+  this.authView = new Rdxport.AuthView(this.auth);
+};
+
+Rdxport.Router.prototype.route = function(page, subpage) {
+  console.log('route');
+  if (!this.auth.isLoggedIn()) {
+    this.login();
+    return;
+  }
+
+  this.authView.renderLoggedIn();
+
+  // todo: if previously login form
+  //$('#username-field').html(auth_fullname + ' (' + auth_username + ')');
+  //$('#loginbox').slideUp();
+  //$('#mainwindow').fadeIn();
+
+  // todo: route..
+};
+
+Rdxport.Router.prototype.login = function() {
+  console.log('login');
+  this.authView.renderLoginForm();
+};
+
+Rdxport.Router.prototype.logout = function() {
+  console.log('logout');
+  if (importer && importer.isUploading()) {
+    alert('Achtung: Es laufen noch imports.');
+    return;
+  }
+
+  this.auth.cleanup();
+  // todo: more cleanup?
+  //apps_cleanup();
+
+  this.login();
+};
diff --git a/www/styles/main-style.css b/www/styles/main-style.css
index fc7e357..969dcc6 100644
--- a/www/styles/main-style.css
+++ b/www/styles/main-style.css
@@ -32,6 +32,14 @@ body {
     width: 100% !important;
 }
 
+#loginbox, #mainwindow {
+    display: none;
+}
+
+#app-shows, #app-jingles, #app-musicpools, #app-musicgrid {
+    display: none;
+}
+
 .progress {
     margin-bottom: 0;
 }
author	Peter Grassberger <petertheone@gmail.com>	2016-04-20 15:58:14 (GMT)
committer	Peter Grassberger <petertheone@gmail.com>	2016-04-20 15:58:14 (GMT)
commit	16b507e9ab3b7d9bfbe72319d2197cea98905294 (patch)
tree	acc475be6eda15d098b166f7f37ebd6d0b75a572 /www
parent	aff9aaaa27bfb989432e23c768b2ec52fc8e70f7 (diff)