Improve settings, add OTP countdown

www/js/main.js

@@ -14,12 +14,12 @@ var app = new Framework7({
     }
 });
 
-var router = app.router;
-
 var mainView = app.views.create('.view-main', {
     url: "/"
 });
 
+var router = mainView.router;
+
 var loadingProgressDialog;
 
 /**
@@ -124,3 +124,16 @@ document.addEventListener("deviceready", function () {
     }
     setTimeout(navigator.splashscreen.hide, 500);
 }, false);
+
+router.on("pageBeforeIn", function (pagedata) {
+    app.progressbar.hide();
+});
+
+router.on("pageInit", function (pagedata) {
+    app.progressbar.hide();
+    switch (pagedata.name) {
+        case "settings":
+            updateSettingsData();
+            break;
+    }
+});

www/js/otp.js

@@ -42,6 +42,14 @@ function parseOTP(jsontext, reload) {
     }
 }
 
+function setProgressBar(percent) {
+    if (mainView.router.currentRoute.name == "otp") {
+        app.progressbar.show(percent, app.theme === 'md' ? 'yellow' : 'blue');
+    } else {
+        app.progressbar.hide();
+    }
+}
+
 function loadOTPPage(reload) {
     var ls_text = localStorage.getItem("otp");
     if (ls_text === null || ls_text == "") {
@@ -59,7 +67,7 @@ function loadOTPPage(reload) {
 
 function refreshCountdown() {
     var percent = ((30 - ((new Date).getSeconds() % 30)) / 30) * 100;
-    $("#countdown").css("width", percent + "%");
+    setProgressBar(percent);
 }
 
 function refreshCodes() {

www/js/settings.js

@@ -84,6 +84,17 @@ function updateSettingsData() {
 
 function getSettingsTemplateData() {
     return [
+        {
+            setting: "userinfo",
+            title: '<i class="fa fa-user"></i> <span id="username">Not logged in</span>',
+            text: '<i class="fa fa-key"></i> Pairing Code: <span id="pairingkey">None</span><br /><i class="fa fa-server"></i> Server: <span id="syncurl">None</span>',
+            onclick: ""
+        },
+        {
+            setting: "accounts",
+            title: "Manage and switch accounts",
+            onclick: "openAccountPicker()"
+        },
         {
             setting: "updatepassword",
             title: "Update Password",
@@ -116,3 +127,12 @@ function getSettingsTemplateData() {
         }
     ];
 }
+
+function loadSettingsPage() {
+    router.navigate("/settings", {
+        context: {
+            settings: getSettingsTemplateData()
+        },
+    });
+    updateSettingsData();
+}

www/pages/settings.html

@@ -15,7 +15,7 @@
     </div>
 
     <div class="page-content">
-        <div class="list media-list no-hairlines">
+        <div class="list media-list">
             <ul>
                 {{#each settings}}
                 <li class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">