Add buttons to account page for updating data and password.

Add styling to the account page.

views/dashboardPage/bundle.js

@@ -185,6 +185,7 @@ class Merchant{
     constructor(oldMerchant, transactions, modules){
         this._modules = modules;
         this._name = oldMerchant.name;
+        this._email = oldMerchant.email;
         this._pos = oldMerchant.pos;
         this._ingredients = [];
         this._recipes = [];
@@ -259,6 +260,10 @@ class Merchant{
         this._name = name;
     }
 
+    get email(){
+        return this._email;
+    }
+
     get pos(){
         return this._pos;
     }
@@ -2946,23 +2951,34 @@ module.exports = transactionFilter;
 let account = {
     display: function(){
         document.getElementById("accountStrandTitle").innerText = merchant.name;
-        document.getElementById("accountShowPassword").onclick = ()=>{this.togglePassword()};
-    },
+        document.getElementById("accountEmail").placeholder = merchant.email;
 
-    togglePassword: function(){
-        let passBox = document.getElementById("changePasswordBox");
-        let button = document.getElementById("accountShowPassword");
+        document.getElementById("accountUpdate").onclick = ()=>{this.updateData()};
 
-        if(passBox.style.display === "none"){
+        let passButton = document.getElementById("accountShowPassword");
+        let passBox = document.getElementById("changePasswordBox");
+        passButton.onclick = ()=>{
+            passButton.style.display = "none";
             passBox.style.display = "flex";
-            button.innerText = "HIDE PASSWORD";
-        }else{
+        };
+
+        document.getElementById("cancelPasswordChange").onclick = ()=>{
+            passButton.style.display = "block";
             passBox.style.display = "none";
-            button.innerText = "CHANGE PASSWORD";
             document.getElementById("accountCurrentPassword").value = "";
             document.getElementById("accountNewPassword").value = "";
             document.getElementById("accountConfirmPassword").value = "";
-        }
+        };
+
+        document.getElementById("changePasswordButton").onclick = ()=>{this.updatePassword()};
+    },
+
+    updateData: function(){
+        console.log("updating data");
+    },
+
+    updatePassword: function(){
+        console.log("updating password");
     }
 }
 

views/dashboardPage/dashboard.css

@@ -567,6 +567,51 @@ Transactions Strand
         margin-top: 50px;
     }
 
+/*
+ACCOUNT STRAND
+*/
+#accountStrand{
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+    .horizontal{
+        display: flex;
+        justify-content: space-around;
+    }
+
+    .vertical{
+        display: flex;
+        flex-direction: column;
+    }
+
+    #accountUpdate{
+        max-width: 500px;
+    }
+
+    #accountShowPassword{
+        max-width: 300px;
+    }
+
+    #changePasswordBox{
+        flex-direction: column;
+        padding: 25px;
+        background: rgb(240, 252, 255);
+        border: 2px solid black;
+        border-radius: 10px;
+    }
+
+        #changePasswordBox label{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 5px;
+        }
+
+        #accountButtonBox{
+            margin: 0;
+        }
+
 /*
 Modal
 */

views/dashboardPage/ejs/strands/account.ejs

@@ -3,23 +3,35 @@
         <h1 id="accountStrandTitle" class="strandTitle"></h1>
     </div>
 
-    <label>EMAIL
-        <input id="accountEmail" type="email">
-    </label>
+    <div class="horizontal">
+        <div class="vertical">
+            <label>EMAIL
+                <input id="accountEmail" type="email">
+            </label>
 
-    <button id="accountShowPassword" class="button">CHANGE PASSWORD</button>
+            <button id="accountUpdate" class="button">UPDATE</button>
+        </div>
 
-    <div id="changePasswordBox" style="display:none;">
-        <label>CURRENT PASSWORD
-            <input id="accountCurrentPassword" type="password">
-        </label>
+        <button id="accountShowPassword" class="button">CHANGE PASSWORD</button>
 
-        <label>NEW PASSWORD
-            <input id="accountNewPassword" type="password">
-        </label>
+        <div id="changePasswordBox" style="display:none;">
+            <label>CURRENT PASSWORD
+                <input id="accountCurrentPassword" type="password">
+            </label>
 
-        <label>CONFIRM NEW PASSWORD
-            <input id="accountConfirmPassword" type="password">
-        </label>
+            <label>NEW PASSWORD
+                <input id="accountNewPassword" type="password">
+            </label>
+
+            <label>CONFIRM NEW PASSWORD
+                <input id="accountConfirmPassword" type="password">
+            </label>
+
+            <div id="accountButtonBox" class="buttonBox">
+                <button id="cancelPasswordChange" class="button">CANCEL</button>
+
+                <button id="changePasswordButton" class="button">CHANGE PASSWORD</button>
+            </div>
+        </div>
     </div>
 </div>

views/dashboardPage/js/classes/Merchant.js

@@ -69,6 +69,7 @@ class Merchant{
     constructor(oldMerchant, transactions, modules){
         this._modules = modules;
         this._name = oldMerchant.name;
+        this._email = oldMerchant.email;
         this._pos = oldMerchant.pos;
         this._ingredients = [];
         this._recipes = [];
@@ -143,6 +144,10 @@ class Merchant{
         this._name = name;
     }
 
+    get email(){
+        return this._email;
+    }
+
     get pos(){
         return this._pos;
     }

views/dashboardPage/js/strands/account.js

@@ -1,23 +1,34 @@
 let account = {
     display: function(){
         document.getElementById("accountStrandTitle").innerText = merchant.name;
-        document.getElementById("accountShowPassword").onclick = ()=>{this.togglePassword()};
-    },
+        document.getElementById("accountEmail").placeholder = merchant.email;
 
-    togglePassword: function(){
-        let passBox = document.getElementById("changePasswordBox");
-        let button = document.getElementById("accountShowPassword");
+        document.getElementById("accountUpdate").onclick = ()=>{this.updateData()};
 
-        if(passBox.style.display === "none"){
+        let passButton = document.getElementById("accountShowPassword");
+        let passBox = document.getElementById("changePasswordBox");
+        passButton.onclick = ()=>{
+            passButton.style.display = "none";
             passBox.style.display = "flex";
-            button.innerText = "HIDE PASSWORD";
-        }else{
+        };
+
+        document.getElementById("cancelPasswordChange").onclick = ()=>{
+            passButton.style.display = "block";
             passBox.style.display = "none";
-            button.innerText = "CHANGE PASSWORD";
             document.getElementById("accountCurrentPassword").value = "";
             document.getElementById("accountNewPassword").value = "";
             document.getElementById("accountConfirmPassword").value = "";
-        }
+        };
+
+        document.getElementById("changePasswordButton").onclick = ()=>{this.updatePassword()};
+    },
+
+    updateData: function(){
+        console.log("updating data");
+    },
+
+    updatePassword: function(){
+        console.log("updating password");
     }
 }
 

views/shared/shared.css

@@ -194,6 +194,7 @@ button::-moz-focus-inner{
     font-weight: bold;
     min-width: 100px;
     margin: 5px;
+    max-height: 52px;
 } 
 
     .buttonWithBorder {