Add welcome page to prompt for account setup, adjust account page

www/assets/js/account.js

@@ -101,7 +101,7 @@ function displayAccountInfo() {
                 textxalign: 'center', // Always good to set this
                 eclevel: 'M'
             });
-            $("#accountnumberspan").text("Account number: " + success.phone);
+            $("#accountnumberspan").text(success.phone);
             document.getElementById("loyaltyBarcodeImg").src = canvas.toDataURL('image/png');
 
             if (success.payments_setup === false) {

www/assets/js/main.js

@@ -158,6 +158,14 @@ function setAnimations(enabled) {
 applyColorTheme();
 setAnimations();
 
-router.navigate("/home");
-
+var setup = (inStorage("phonenumber") && inStorage("accountkey")) || inStorage("setupskipped");
+
+if (setup) {
+    router.navigate("/home", {});
+} else {
+    router.navigate("/welcome", {
+        history: false,
+        pushState: false
+    });
+}
 document.title = SETTINGS.branding.apptitle;

www/pages/account.html

@@ -8,7 +8,7 @@
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a class="link back hapticbtn" href="#">
+                <a class="link hapticbtn" href="/home">
                     <i class="icon icon-back"></i>
                     <span class="if-not-md">Back</span>
                 </a>
@@ -36,18 +36,20 @@
                                 <div class="button hapticbtn button-fill margin" onclick="openCheckoutWindowToSaveCard()"><i class="fas fa-credit-card"></i> Add Card</div>
                                 <hr />
                             </div>
+                            <div class="card-content-padding">
+                                Your Account Number:
+                                <h2><span id="accountnumberspan">Loading...</span></h2>
+                            </div>
                             <div id="loyaltyBalanceBox" class="card-content-padding">
                                 <div>You have earned a total of</div>
-                                <h1 id="loyaltyCreditBalanceHeading">...</h1>
+                                <h2 id="loyaltyCreditBalanceHeading">...</h2>
                                 <img id="loyaltyBarcodeImg" style="width: 90%; max-width: 300px; padding: 1.2em; background: white;" />
-                                <br />
-                                <span id="accountnumberspan"></span>
                             </div>
                             <div class="block">
-                                <div class="button hapticbtn popup-open" data-popup="#accountUpdatePopup"><i class="fas fa-edit"></i> Update account details</div>
+                                <div class="button hapticbtn popup-open button-outline" data-popup="#accountUpdatePopup"><i class="fas fa-edit"></i> Update account details</div>
                             </div>
                             <div id="loyaltyErrorMessage"></div>
-                            <div class="block">
+                            <div class="block margin-top">
                                 Loyalty points have no cash value. All points and associated discounts
                                 are offered as a courtesy by and at the discretion of Helena Express
                                 and may be revoked, canceled, or modified at any time for any reason.
@@ -127,7 +129,10 @@
     </div>
 
     <div class="popup text-color-black" id="accountUpdatePopup">
-        <div class="list">
+        <div class="block">
+            <h3>Update Account</h3>
+        </div>
+        <div class="list no-hairlines">
             <ul id="accountupdateform">
                 <li class="item-content item-input item-input-outline">
                     <div class="item-inner">

www/pages/welcome.html

@@ -0,0 +1,36 @@
+<!-- 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="welcome">
+
+    <div class="page-content noselect">
+        <div class="row justify-content-center margin-top">
+            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+                <div class="row justify-content-center">
+                    <div class="col-100 no-margin-vertical text-align-center">
+                        <img src="assets/images/companylogo-dropshadow.png" style="width: 20em; max-width: 50vw;" />
+                    </div>
+                    <div class="col-100 text-align-center">
+                        <h3>Welcome! Let's get you set up.</h3>
+                        <p>You need to setup an account if you want to use our Drop and Send package boxes or earn rewards.
+                    </div>
+
+                    <div class="col-100 small-50 large-33 no-margin-vertical">
+                        <div class="card">
+                            <a class="button button-large" href="/account"><i class="fad fa-user-check"></i> Create Account or Log In</a>
+                        </div>
+                        <div class="card margin-top">
+                            <a class="button button-large" href="/home" onclick="setStorage('setupskipped', true);"><i class="far fa-times"></i> Skip Setup</a>
+                        </div>
+                    </div>
+                    <div class="col-100 text-align-center">
+                        <p>Privacy Info: This app doesn't track you or sell your data. We only know
+                            what you actually tell us, and we only use that data to provide and
+                            improve the services we offer you.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

www/routes.js

@@ -5,6 +5,16 @@
  */
 
 var routes = [
+        {
+        path: '/welcome',
+        templateUrl: './pages/welcome.html',
+        name: 'welcome',
+        on: {
+            pageAfterIn: function () {
+
+            }
+        }
+    },
     {
         path: '/home',
         name: 'home',