Fix home screen bug, add account switcher (close #19, close #20)

www/img/accounticons/business.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -540.36)"><rect y="540.36" width="512" height="512" rx="50" ry="50" fill="#fff"/><g transform="translate(.61385 9.1477)"><g><rect x="145.69" y="726.61" width="100.27" height="296.34" rx="15" ry="15" fill="#1976d2"/><rect x="263.58" y="797.95" width="100.27" height="225" rx="15" ry="15" fill="#9e9e9e"/><rect x="30.27" y="858.02" width="100.27" height="164.93" rx="15" ry="15" fill="#9e9e9e"/><rect x="380.23" y="551.48" width="100.27" height="471.47" rx="15" ry="15" fill="#64b5f6"/></g><path transform="translate(0 540.36)" d="m195.89 55.102a24.749 24.749 0 0 0-24.816 24.682 24.749 24.749 0 0 0 3.0234 11.867l-97.42 243.43a24.749 24.749 0 0 0-21.021 24.383 24.749 24.749 0 0 0 24.68 24.816 24.749 24.749 0 0 0 24.816-24.682 24.749 24.749 0 0 0-5.2422-15.287l94.438-235.97 100.25 303.25a24.749 24.749 0 0 0-5.6309 15.625 24.749 24.749 0 0 0 24.68 24.816 24.749 24.749 0 0 0 24.816-24.68 24.749 24.749 0 0 0-7.8633-18.119l101.57-228.59a24.749 24.749 0 0 0 22.949-24.609 24.749 24.749 0 0 0-24.682-24.816 24.749 24.749 0 0 0-24.816 24.68 24.749 24.749 0 0 0 4.1055 13.689l-96.789 217.83-96.938-293.25a24.749 24.749 0 0 0 4.5781-14.248 24.749 24.749 0 0 0-24.682-24.816z" fill="#2196f3" stroke="#fff" stroke-width="7"/></g></g></svg>

www/img/accounticons/selfhosted.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 135.47 135.47" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -161.53)"><g transform="translate(1.7769 -4.861)"><rect x="13.04" y="181.84" width="105.83" height="19.844" rx="5" ry="5" fill="#9e9e9e"/><circle cx="27.253" cy="191.77" r="4.8315" fill="#4caf50" stroke="#fff" stroke-width=".86719"/></g><g transform="translate(3.9123 -4.861)"><rect x="63.821" y="207.04" width="52.917" height="79.375" rx="5" ry="5" fill="#9e9e9e"/><circle cx="90.279" cy="254.57" r="4.8315" fill="#4caf50" stroke="#fff" stroke-width=".86719"/><path d="m77.311 224.06c9.4913 0.0175 18.983-0.0368 28.474 0.03 0.59908 0.13588-1.5556 0.0589-2.076 0.0891-9.0779 0.0278-18.156 0.0138-27.234 2e-3 -0.39246-0.0403-2.0443 0.0493-1.7494-0.0873 0.86063-0.0421 1.7242-0.0232 2.5851-0.0342zm0-9.2876h25.937c1.662 0 3 1.338 3 3v12.708c0 1.662-1.338 3-3 3h-25.937c-1.662 0-3-1.338-3-3v-12.708c0-1.662 1.338-3 3-3z" fill="none" stroke="#fff" stroke-width="1.1361"/><rect x="63.821" y="207.04" width="52.917" height="79.375" rx="5" ry="5" fill="#9e9e9e"/><circle cx="90.279" cy="254.57" r="4.8315" fill="#4caf50" stroke="#fff" stroke-width=".86719"/><path d="m77.311 224.06c9.4913 0.0175 18.983-0.0368 28.474 0.03 0.59908 0.13588-1.5556 0.0589-2.076 0.0891-9.0779 0.0278-18.156 0.0138-27.234 2e-3 -0.39246-0.0403-2.0443 0.0493-1.7494-0.0873 0.86063-0.0421 1.7242-0.0232 2.5851-0.0342zm0-9.2876h25.937c1.662 0 3 1.338 3 3v12.708c0 1.662-1.338 3-3 3h-25.937c-1.662 0-3-1.338-3-3v-12.708c0-1.662 1.338-3 3-3z" fill="none" stroke="#fff" stroke-width="1.1361"/></g><g><rect x="14.817" y="202.18" width="46.302" height="26.458" rx="5" ry="5" fill="#9e9e9e"/><circle cx="22.225" cy="221.06" r="2.3746" fill="#4caf50" stroke="#fff" stroke-width=".86719"/></g><g><rect x="14.817" y="233.68" width="46.302" height="47.869" rx="5" ry="5" fill="#9e9e9e"/><g transform="translate(-.0063038 -7.6294e-6)" fill="#4caf50" stroke="#fff" stroke-width=".86719"><circle cx="50.321" cy="257.62" r="2.3746"/><circle cx="37.974" cy="257.62" r="2.3746"/><circle cx="25.627" cy="257.62" r="2.3746"/></g></g></g></svg>

www/js/accounts.js

@@ -35,6 +35,10 @@ function saveaccounts(accounts) {
 
 function recoveraccounts(callback) {
     NativeStorage.getItem("accounts", function (data) {
+        if (data == null || data == "" || data == "[]") {
+            callback(false);
+            return;
+        }
         localStorage.setItem("accounts", data);
         callback(true);
     }, function () {
@@ -63,6 +67,9 @@ function switchaccount(account) {
     localStorage.setItem("syncurl", accountinfo['syncurl']);
     localStorage.setItem("key", accountinfo['key']);
     accountid = account;
+
+    restartApplication();
+    navigator.notification.alert("Successfully switched accounts.", null, "Switched", 'OK');
 }
 
 /**
@@ -137,3 +144,50 @@ function passwd(newpass) {
     accounts[accountid]["password"] = newpass;
     saveaccounts(accounts);
 }
+
+function openAccountSwitcher(reload) {
+    if (typeof reload == 'undefined') {
+        reload = false;
+    }
+    var accounts = getaccounts();
+    var noaccounts = (accounts.length == 0);
+    for (var i = 0; i < accounts.length; i++) {
+        accounts[i]["id"] = i;
+        // Escape HTML characters
+        accounts[i]["username"] = $('<div/>').html(accounts[i]["username"]).html();
+        var synckey = accounts[i]["key"];
+        var stars = "";
+        for (var j = 0; j < synckey.length - 6; j++) {
+            stars += "*";
+        }
+        accounts[i]["synckey"] = $('<div/>').html(synckey.slice(0, 3) + stars + synckey.slice(-3)).html();
+
+        accounts[i]["syncurl"] = $('<div/>').html(accounts[i]["syncurl"].replace("/mobile/index.php", "")).html();
+        accounts[i]["showsyncurl"] = false;
+        accounts[i]["showtypestring"] = true;
+
+        if (accounts[i]["syncurl"].includes(".netsyms.biz")) {
+            accounts[i]["type"] = "Business";
+            accounts[i]["icon"] = "business";
+        } else if (accounts[i]["syncurl"].includes(".netsyms.com")) {
+            accounts[i]["type"] = "Personal";
+            accounts[i]["icon"] = "personal";
+        } else {
+            accounts[i]["type"] = "Self-hosted";
+            accounts[i]["icon"] = "selfhosted";
+            accounts[i]["showsyncurl"] = true;
+            accounts[i]["showtypestring"] = false;
+        }
+
+        if (localStorage.getItem("username") == accounts[i]['username']) {
+            accounts[i]["active"] = true;
+        }
+    }
+    router.navigate("/settings/accounts", {
+        context: {
+            accounts: accounts,
+            noaccounts: noaccounts
+        },
+        reloadCurrent: reload
+    });
+}

www/js/home.js

@@ -62,7 +62,8 @@ function loadHomePage(reload) {
                             context: {
                                 appcards: appcards,
                                 notifications: notifications,
-                                unreadnotifications: (notifications != false && notifications != [])
+                                unreadnotifications: (notifications != false && notifications != []),
+                                homeloaded: true
                             },
                             reloadCurrent: true
                         });
@@ -74,7 +75,8 @@ function loadHomePage(reload) {
                         context: {
                             appcards: appcards,
                             notifications: notifications,
-                            unreadnotifications: (notifications != false && notifications != [])
+                            unreadnotifications: (notifications != false && notifications != []),
+                            homeloaded: true
                         }
                     });
                     $(".view-main").on("click", "#applist .applist-item", function () {

www/js/settings.js

@@ -93,7 +93,7 @@ function getSettingsTemplateData() {
         {
             setting: "accounts",
             title: "Manage and switch accounts",
-            onclick: "openAccountPicker()"
+            onclick: "openAccountSwitcher(false)"
         },
         {
             setting: "updatepassword",

www/js/setup2.js

@@ -0,0 +1,28 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+function savePassword() {
+    $.post(setupsyncurl, {
+        username: setupusername,
+        key: setupsynckey,
+        password: $('#passbox').val(),
+        action: "check_password"
+    }, function (data) {
+        if (data.status === 'OK') {
+            setuppassword = $('#passbox').val();
+            var accid = addaccount(setupusername, setuppassword, setupsyncurl, setupsynckey);
+            switchaccount(accid);
+            localStorage.setItem("firstrun", "1");
+            navigator.notification.alert("Account connected!", null, "Success", 'Continue');
+            restartApplication();
+        } else {
+            navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
+        }
+    }, "json").fail(function () {
+        navigator.notification.alert("Could not connect to the server.  Try again later.", null, "Error", 'Dismiss');
+    });
+}

www/pages/accounts.html

@@ -0,0 +1,81 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<div class="page" data-name="accounts">
+
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only back">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">Accounts</div>
+        </div>
+    </div>
+
+    <div class="page-content">
+
+        {{#unless noaccounts}}
+        <div class="list media-list">
+            <ul id="accountlist">
+                {{#each accounts}}
+                <li class="swipeout accountlist-item" data-id="{{id}}">
+                    <div class="item-content swipeout-content">
+                        <div class="item-media"><img src="img/accounticons/{{icon}}.svg" width="44"/></div>
+                        <div class="item-inner">
+                            <div class="item-title-row">
+                                <div class="item-title">
+                                    <i class="fas fa-user"></i> {{username}}
+                                </div>
+                                
+                                {{#if active}}
+                                <div class="item-after">
+                                    <span class="badge color-green"><i class="fas fa-check"></i></span>
+                                </div>
+                                {{/if}}
+                            </div>
+                            {{#if showtypestring}}
+                            <div class="item-text">{{type}} account</div>
+                            {{/if}}
+                            {{#if showsyncurl}}
+                            <div class="item-text"><i class="fas fa-link"></i> {{syncurl}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                    <div class="swipeout-actions-right">
+                        <a href="#" data-confirm="Really delete account?  You'll need to re-add the account to use it on this device again." class="swipeout-delete">Delete</a>
+                    </div>
+                </li>
+                {{/each}}
+            </ul>
+        </div>
+        {{else}}
+        <div class="card">
+            <div class="card-content">
+                You haven't added any accounts yet.  Press <i class="material-icons">add</i> to add one.
+            </div>
+        </div>
+        {{/unless}}
+    </div>
+
+    <div class="fab fab-right-bottom">
+        <a href="/setup/1">
+            <i class="material-icons">add</i>
+        </a>
+    </div>
+
+    <script>
+        $(".view-main").on("swipeout:deleted", ".accountlist-item", function () {
+            var id = $(this).data("id");
+            rmaccount(id);
+            openAccountSwitcher(true);
+        });
+
+        $(".view-main").on("click", ".accountlist-item", function () {
+            var id = $(this).data("id");
+            switchaccount(id);
+        });
+    </script>
+
+</div>

www/pages/home.html

@@ -77,6 +77,13 @@
                 </div>
             </div>
         </div>
+
+        <!-- Reload the home page if it doesn't have valid context  -->
+        {{#unless homeloaded}}
+        <script>
+            loadHomePage(true);
+        </script>
+        {{/unless}}
     </div>
 
 </div>

www/pages/setup2.html

@@ -35,27 +35,5 @@
 
     </div>
 
-    <script>
+    <script src="js/setup2.js"></script>
-        function savePassword() {
-            $.post(setupsyncurl, {
-                username: setupusername,
-                key: setupsynckey,
-                password: $('#passbox').val(),
-                action: "check_password"
-            }, function (data) {
-                if (data.status === 'OK') {
-                    setuppassword = $('#passbox').val();
-                    var accid = addaccount(setupusername, setuppassword, setupsyncurl, setupsynckey);
-                    switchaccount(accid);
-                    localStorage.setItem("firstrun", "1");
-                    navigator.notification.alert("Account connected!", null, "Success", 'Continue');
-                    restartApplication();
-                } else {
-                    navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
-                }
-            }, "json").fail(function () {
-                navigator.notification.alert("Could not connect to the server.  Try again later.", null, "Error", 'Dismiss');
-            });
-        }
-    </script>
 </div>

www/routes.js

@@ -41,6 +41,11 @@ var routes = [
             }
         }
     },
+    {
+        path: '/settings/accounts',
+        templateUrl: './pages/accounts.html',
+        name: 'accounts'
+    },
     {
         path: '/credits',
         url: './pages/credits.html',