From 21b7f8021bfafa86f0d1b941e30252cb57818fbc Mon Sep 17 00:00:00 2001
From: Vivek Teega <vivek.teega@gmail.com>
Date: Wed, 2 Sep 2020 18:11:17 +0530
Subject: [PATCH] Added settings page, changed modal

---
 index.html | 325 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 174 insertions(+), 151 deletions(-)
diff --git a/index.html b/index.html
index d3cb976..940e602 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
         }
 
         .hide {
-            display: none;
+            display: none !important;
         }
 
         body {
@@ -25,6 +25,10 @@
             font-size: 16px;
             color: #2f2f2f;
             background-color: #f9f7f1;
+            --accent-color: teal;
+            --text-color: 24, 24, 24;
+            --foreground-color: 255, 255, 255;
+            --error-color: #E53935;
         }
 
         header {
@@ -281,6 +285,9 @@
 
         .topnav {
             overflow: hidden;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
 
         /* Style the links inside the navigation bar */
@@ -327,21 +334,20 @@
 
 <body translate="no" onload="onLoadStartUp()">
 
-    <div class="topnav">
+    <sm-notifications id="sm-notifications"></sm-notifications>
+
+    <nav class="topnav">
         <a href="https://ranchimall.github.io/articles"><img id='ranchimalltimes-icon'
                 src="data:image/png;base64,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"></a>
 
-        <div id='login-button' style="float: right; font-family: 'Roboto'; margin:1rem; cursor:pointer">
-            <span
-                style="padding-right: 0.5rem; font-weight:bold; font-size:larger">Login</span>
-            <i class="fa fa-sign-in fa-2x" aria-hidden="true"></i>
-        </div>
-        <div id='user-button' style="float: right; font-family: 'Roboto'; margin:1rem; cursor:pointer; display: none;">
-            <span style="padding-right: 0.5rem; font-weight:bold"><i class="fa fa-user-circle-o fa-2x"
+        <sm-button id='login-button' variant='outlined' class='round'>Login</sm-button>
+        <div id='settings-button'
+            style="float: right; font-family: 'Roboto'; margin:1rem; cursor:pointer; display: none;">
+            <span style="padding-right: 0.5rem; font-weight:bold"><i class="fa fa-cog fa-2x"
                     aria-hidden="true"></i></span>
         </div>
 
-    </div>
+    </nav>
 
     <div id='homepage'>
         <meta name="viewport" content="width=device-width">
@@ -351,29 +357,30 @@
             </div>
             <div id='current_date' class="subhead"></div>
         </div>
-        <sm-popup id="login-popup" style='z-index: 9999'>
+        <sm-popup id="login-popup">
             <div id='main-login'>
-                <h3>Enter Private Key</h3>
-                <input id='privateKey-input'></input>
-                <div style="background-color: #f9f7f1;">
-                    <button id='signin-button'>Login</button>
-                    <button id='guest-login-button'>Guest</button>
+                <h2 style="margin-bottom: 2rem;">Sign In</h2>
+                <sm-input id='privateKey-input' placeholder="Private Key" animate></sm-input>
+                <p>Don't have a private key yet?<br>Try Guest login</p>
+                <div style="margin-top: 1rem;">
+                    <sm-button id='signin-button'>Login</sm-button>
+                    <sm-button id='guest-login-button'>Guest</sm-button>
                 </div>
             </div>
-            <div id='guest-login' style='display:none'>
-                <h2>FLO ID</h2>
-                <input id='gen-floid' disabled="disabled"></input>
-                <h2>Private Key</h2>
-                <input id='gen-privateKey' disabled="disabled"></input>
-                <p><strong>SAVE</strong> the private key securely now before leaving<br>
-                    <strong>NEVER</strong> lose your Private Key<br>
-                    <strong>NEVER</strong> share your Private Key with anyone<br><br>
+            <!--<div id='guest-login' style='display:none'>
+                <h2 style="margin-bottom: 0.5rem;">Guest Sign In</h2>
+                <p style='max-width:50ch; line-height: 1.7; margin-bottom:2rem'>
                     Losing your Private Key means losing all the data &amp; money attached to your
                     FLO ID. Private Key once lost can <strong>NEVER</strong> be recovered. Please store
                     it safely.
                 </p>
-                <button id='continue-login-button'>Continue</button>
-            </div>
+                <sm-input id='gen-floid' disabled placeholder="Blockchain ID" animate readonly
+                    style="margin-bottom: 1rem;"></sm-input>
+                <sm-input id='gen-privateKey' disabled placeholder="Private Key" animate readonly
+                    style="margin-bottom: 1rem;"></sm-input>
+
+                <sm-button id='continue-login-button'>Continue</sm-button>
+            </div>-->
         </sm-popup>
         <div class="content">
             <div class="columns" id='columnsmain'>
@@ -493,6 +500,23 @@
         </div>
     </div>
 
+    <div id="settings-page" class='hide' style='margin:2rem'>
+        <h2>Settings</h2>
+        <p style='max-width:50ch; line-height: 1.7; margin-bottom:2rem'>
+            Losing your Private Key means losing all the data &amp; money attached to your
+            FLO ID. Private Key once lost can <strong>NEVER</strong> be recovered. Please store
+            it safely.
+        </p>
+        <div style="display:flex; flex-direction: column; max-width: 37rem">
+            <sm-input id='gen-floid' disabled placeholder="Blockchain ID" animate readonly
+                style="margin-bottom: 1rem; display:flex"></sm-input>
+            <sm-input id='gen-privateKey' disabled placeholder="Private Key" animate readonly
+                style="margin-bottom: 1rem; display:flex">
+            </sm-input>
+        </div>
+        <sm-button id='logout-button' style="margin-top:2rem">Logout</sm-button>
+    </div>
+
     <div id="display_page_main" class="hide">
         <div id="go_back" style="color:#DC143C">
             <i class="fa fa-angle-double-left" aria-hidden="true" style="color:#DC143C"></i>
@@ -694,7 +718,7 @@
                     for (var bytes = [], i = 0, imod4 = 0; i < base64.length; imod4 = ++i % 4) {
                         if (imod4 == 0) continue;
                         bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & (Math.pow(2, -2 * imod4 +
-                            8) - 1)) << (imod4 * 2)) |
+                                8) - 1)) << (imod4 * 2)) |
                             (base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2)));
                     }
 
@@ -766,7 +790,7 @@
             var digestbytes = util.wordsToBytes(SHA1._sha1(message));
             return options && options.asBytes ? digestbytes :
                 options && options.asString ? Binary.bytesToString(digestbytes) :
-                    util.bytesToHex(digestbytes);
+                util.bytesToHex(digestbytes);
         };
 
         // The core
@@ -807,9 +831,9 @@
 
                     var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
                         j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
-                            j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
-                                j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
-                                    (H1 ^ H2 ^ H3) - 899497514);
+                        j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
+                        j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
+                        (H1 ^ H2 ^ H3) - 899497514);
 
                     H4 = H3;
                     H3 = H2;
@@ -883,7 +907,7 @@
 
             return options && options.asBytes ? hmacbytes :
                 options && options.asString ? Binary.bytesToString(hmacbytes) :
-                    util.bytesToHex(hmacbytes);
+                util.bytesToHex(hmacbytes);
 
         };
 
@@ -956,8 +980,8 @@
                     for (var b = b.replace(/[^A-Z0-9+\/]/ig, ""), a = [], c = 0, e = 0; c < b.length; e = ++c %
                         4) e != 0 && a.push(("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
                             .indexOf(b.charAt(c - 1)) & Math.pow(2, -2 * e + 8) - 1) << e * 2 |
-                            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".indexOf(b.charAt(
-                                c)) >>> 6 - e * 2);
+                        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".indexOf(b.charAt(
+                            c)) >>> 6 - e * 2);
                     return a
                 }
             },
@@ -1024,7 +1048,7 @@
                 for (h = 0; h < 64; h++) {
                     h < 16 ? d[h] = e[h + t] : (l = d[h - 15], j = d[h - 2], d[h] = ((l << 25 | l >>> 7) ^
                         (l << 14 | l >>> 18) ^ l >>> 3) + (d[h - 7] >>> 0) + ((j << 15 | j >>> 17) ^
-                            (j << 13 | j >>> 19) ^ j >>> 10) + (d[h - 16] >>> 0));
+                        (j << 13 | j >>> 19) ^ j >>> 10) + (d[h - 16] >>> 0));
                     j = f & g ^ f & m ^ g & m;
                     var u = (f << 30 | f >>> 2) ^ (f << 19 | f >>> 13) ^ (f << 10 | f >>> 22);
                     l = (s >>> 0) + ((i << 26 | i >>> 6) ^ (i << 21 | i >>> 11) ^ (i << 7 | i >>> 25)) +
@@ -1090,7 +1114,7 @@
     (function () {
 
         // Constructor function of Global SecureRandom object
-        var sr = window.SecureRandom = function () { };
+        var sr = window.SecureRandom = function () {};
 
         // Properties
         sr.state;
@@ -1500,7 +1524,7 @@
             if (a != null)
                 if ("number" == typeof a) this.fromNumber(a, b, c);
                 else if (b == null && "string" != typeof a) this.fromString(a, 256);
-                else this.fromString(a, b);
+            else this.fromString(a, b);
         };
 
         // Bits per digit
@@ -2966,7 +2990,7 @@
 
 
         // A "null" reducer
-        var NullExp = window.NullExp = function NullExp() { }
+        var NullExp = window.NullExp = function NullExp() {}
         NullExp.prototype.convert = function (x) {
             return x;
         };
@@ -3057,7 +3081,7 @@
     (function () {
 
         // Constructor function of Global EllipticCurve object
-        var ec = window.EllipticCurve = function () { };
+        var ec = window.EllipticCurve = function () {};
 
         // ----------------
         // ECFieldElementFp constructor
@@ -3143,7 +3167,7 @@
                     P = new BigInteger(this.q.bitLength(), rand);
                 }
                 while (P.compareTo(this.q) >= 0 || !(P.multiply(P).subtract(fourQ).modPow(legendreExponent,
-                    this.q).equals(qMinusOne)));
+                        this.q).equals(qMinusOne)));
 
                 var result = ec.FieldElementFp.fastLucasSequence(this.q, P, Q, k);
 
@@ -3204,8 +3228,8 @@
 
             // No-operation padding, used for stream ciphers
             C_pad.NoPadding = {
-                pad: function (cipher, message) { },
-                unpad: function (cipher, message) { }
+                pad: function (cipher, message) {},
+                unpad: function (cipher, message) {}
             };
 
             // Zero Padding.
@@ -3627,7 +3651,7 @@
 
                 return options && options.asBytes ? derivedKeyBytes :
                     options && options.asString ? Binary.bytesToString(derivedKeyBytes) :
-                        util.bytesToHex(derivedKeyBytes);
+                    util.bytesToHex(derivedKeyBytes);
 
             };
 
@@ -4094,11 +4118,11 @@
 
             // Inner state
             var state = [
-                [],
-                [],
-                [],
-                []
-            ],
+                    [],
+                    [],
+                    [],
+                    []
+                ],
                 keylength,
                 nrounds,
                 keyschedule;
@@ -4124,8 +4148,8 @@
                         // Convert to bytes if message is a string
                         m = (
                             message.constructor == String ?
-                                UTF8.stringToBytes(message) :
-                                message
+                            UTF8.stringToBytes(message) :
+                            message
                         ),
 
                         // Generate random IV
@@ -4134,12 +4158,12 @@
                         // Generate key
                         k = (
                             password.constructor == String ?
-                                // Derive key from pass-phrase
-                                C.PBKDF2(password, iv, 32, {
-                                    asBytes: true
-                                }) :
-                                // else, assume byte array representing cryptographic key
-                                password
+                            // Derive key from pass-phrase
+                            C.PBKDF2(password, iv, 32, {
+                                asBytes: true
+                            }) :
+                            // else, assume byte array representing cryptographic key
+                            password
                         );
 
                     // Encrypt
@@ -4167,8 +4191,8 @@
                         // Convert to bytes if ciphertext is a string
                         c = (
                             ciphertext.constructor == String ?
-                                util.base64ToBytes(ciphertext) :
-                                ciphertext
+                            util.base64ToBytes(ciphertext) :
+                            ciphertext
                         ),
 
                         // Separate IV and message
@@ -4177,12 +4201,12 @@
                         // Generate key
                         k = (
                             password.constructor == String ?
-                                // Derive key from pass-phrase
-                                C.PBKDF2(password, iv, 32, {
-                                    asBytes: true
-                                }) :
-                                // else, assume byte array representing cryptographic key
-                                password
+                            // Derive key from pass-phrase
+                            C.PBKDF2(password, iv, 32, {
+                                asBytes: true
+                            }) :
+                            // else, assume byte array representing cryptographic key
+                            password
                         );
 
                     // Decrypt
@@ -5003,7 +5027,7 @@
     //bitTrx.js
     (function () {
 
-        var bitjs = window.bitjs = function () { };
+        var bitjs = window.bitjs = function () {};
 
         /* public vars */
         bitjs.pub = 0x23; // flochange - changed the prefix to FLO Mainnet PublicKey Prefix 0x23
@@ -6025,7 +6049,7 @@
                         if (pubkey.getBitcoinAddress().toString() == address) {
                             return i;
                         }
-                    } catch (e) { }
+                    } catch (e) {}
                 }
                 throw "Unable to find valid recovery factor";
             }
@@ -6131,8 +6155,8 @@
 
                     // This part is edited for FLO. FLO WIF are always compressed WIF. FLO WIF (private key) starts with R for mainnet and c for testnet.
                     if (((floGlobals.blockchain == "FLO") &&
-                        /^R[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(
-                            input)) ||
+                            /^R[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(
+                                input)) ||
                         ((floGlobals.blockchain == "FLO_TEST") &&
                             /^c[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(
                                 input))) {
@@ -6562,7 +6586,7 @@
             });
         },
         // duck typing method
-        hasMethods: function (obj /*, method list as strings */) {
+        hasMethods: function (obj /*, method list as strings */ ) {
             var i = 1,
                 methodName;
             while ((methodName = arguments[i++])) {
@@ -6578,7 +6602,7 @@
     (function (ellipticCurveType) {
 
         //Defining Elliptic Encryption Object  
-        var ellipticEncryption = window.ellipticCurveEncryption = function () { };
+        var ellipticEncryption = window.ellipticCurveEncryption = function () {};
 
         ellipticEncryption.rng = new SecureRandom();
 
@@ -6753,7 +6777,7 @@
 
         function init(bits) {
             if (bits && (typeof bits !== 'number' || bits % 1 !== 0 || bits < defaults.minBits || bits >
-                defaults.maxBits)) {
+                    defaults.maxBits)) {
                 throw new Error('Number of bits must be an integer between ' + defaults.minBits + ' and ' +
                     defaults.maxBits + ', inclusive.')
             }
@@ -6817,7 +6841,7 @@
 
             // node.js crypto.randomBytes()
             if (typeof require === 'function' && (crypto = require('crypto')) && (randomBits = crypto[
-                'randomBytes'])) {
+                    'randomBytes'])) {
                 return function (bits) {
                     var bytes = Math.ceil(bits / 8),
                         str = null;
@@ -6831,7 +6855,7 @@
 
             // browsers with window.crypto.getRandomValues()
             if (global['crypto'] && typeof global['crypto']['getRandomValues'] === 'function' && typeof global[
-                'Uint32Array'] === 'function') {
+                    'Uint32Array'] === 'function') {
                 crypto = global['crypto'];
                 return function (bits) {
                     var elems = Math.ceil(bits / 32),
@@ -6888,7 +6912,7 @@
 
             // test the RNG (5 times)
             if (typeof rng !== 'function' || typeof rng(config.bits) !== 'string' || !parseInt(rng(config.bits),
-                2) || rng(config.bits).length > config.bits || rng(config.bits).length < config.bits) {
+                    2) || rng(config.bits).length > config.bits || rng(config.bits).length < config.bits) {
                 throw new Error(
                     "Random number generator is invalid. Supply an RNG of the form function(bits){} that returns a string containing 'bits' number of random 1's and 0's."
                 )
@@ -7045,7 +7069,7 @@
 
             var bits = parseInt(share[0], 36);
             if (bits && (typeof bits !== 'number' || bits % 1 !== 0 || bits < defaults.minBits || bits >
-                defaults.maxBits)) {
+                    defaults.maxBits)) {
                 throw new Error('Number of bits must be an integer between ' + defaults.minBits + ' and ' +
                     defaults.maxBits + ', inclusive.')
             }
@@ -7163,13 +7187,13 @@
                         continue;
                     }
                     if (at === x[
-                        j]) { // happens when computing a share that is in the list of shares used to compute it
+                            j]) { // happens when computing a share that is in the list of shares used to compute it
                         product = -
                             1; // fix for a zero product term, after which the sum should be sum^0 = sum, not sum^1
                         break;
                     }
                     product = (product + config.logs[at ^ x[j]] - config.logs[x[i] ^ x[j]] + config
-                        .max /* to make sure it's not negative */) %
+                            .max /* to make sure it's not negative */ ) %
                         config.max;
                 }
 
@@ -7770,7 +7794,7 @@
 
             var receiverDerivedKey = this.util.deriveReceiverSharedKey(data.senderPublicKeyString,
                 receiverECKeyData
-                    .privateKey);
+                .privateKey);
 
             let receiverKey = receiverDerivedKey.XValue + receiverDerivedKey.YValue;
             let decryptMsg = Crypto.AES.decrypt(data.secret, receiverKey);
@@ -8131,7 +8155,7 @@
                                     invalids.InvalidSenderPrivKeys.push(key);
                                 else {
                                     if (typeof senderPrivKeys[key] !== 'number' || senderPrivKeys[
-                                        key] <= 0)
+                                            key] <= 0)
                                         invalids.InvalidSenderAmountFor.push(key)
                                     else
                                         inputVal += senderPrivKeys[key];
@@ -8186,7 +8210,7 @@
                     for (let floID in senders) {
                         balance[floID] = parseFloat(results.shift());
                         if (isNaN(balance[floID]) || (preserveRatio && balance[floID] <=
-                            totalFee) || (!preserveRatio && balance[floID] < senders[floID]
+                                totalFee) || (!preserveRatio && balance[floID] < senders[floID]
                                 .coins + dividedFee))
                             insufficient.push(floID)
                         totalBalance += balance[floID];
@@ -8319,13 +8343,13 @@
                                     continue;
                                 if (options.pattern && !response.items[i].floData
                                     .startsWith(options.pattern, 0) && !response.items[i]
-                                        .floData.startsWith(options.pattern, 2))
+                                    .floData.startsWith(options.pattern, 2))
                                     continue;
                                 if (options.contains && !response.items[i].floData.includes(
-                                    options.contains))
+                                        options.contains))
                                     continue;
                                 if (options.filter && !options.filter(response.items[i]
-                                    .floData))
+                                        .floData))
                                     continue;
                                 filteredData.push(response.items[i].floData);
                             }
@@ -8334,8 +8358,8 @@
                                 data: filteredData
                             });
                         }).catch(error => {
-                            reject(error);
-                        });
+                        reject(error);
+                    });
                 }).catch(error => {
                     reject(error);
                 });
@@ -9009,7 +9033,7 @@
                     var db = event.target.result;
                     for (let obs in objectStores) {
                         var objectStore = db.createObjectStore(obs, objectStores[obs].options ||
-                            {});
+                        {});
                         if (objectStores[obs].indexes && typeof objectStores[obs].indexes ===
                             'object')
                             for (let i in objectStores[obs].indexes)
@@ -9435,8 +9459,8 @@
                                     floGlobals.supernodes = result;
 
                                     floSupernode.kBucket.launch(Object.keys(
-                                        floGlobals.supernodes),
-                                        floGlobals.SNStorageID)
+                                                floGlobals.supernodes),
+                                            floGlobals.SNStorageID)
                                         .then(result => resolve(
                                             "Loaded Supernode list\n" +
                                             result))
@@ -9565,23 +9589,23 @@
                                     var threshold = floCrypto.randInt(10, 20)
                                     writeSharesToIDB(floCrypto.createShamirsSecretShares(
                                         privKey, threshold, threshold)).then(
-                                            resultIndexes => {
-                                                //store index keys in localStorage
-                                                localStorage.setItem(
-                                                    `${floGlobals.application}#privKey`,
-                                                    JSON.stringify(resultIndexes))
-                                                //also add a dummy privatekey to the IDB
-                                                var randomPrivKey = floCrypto
-                                                    .generateNewID().privKey
-                                                var randomThreshold = floCrypto.randInt(10,
-                                                    20)
-                                                writeSharesToIDB(floCrypto
-                                                    .createShamirsSecretShares(
-                                                        randomPrivKey, randomThreshold,
-                                                        randomThreshold))
-                                                //resolve private Key
-                                                resolve(privKey)
-                                            }).catch(error => reject(error))
+                                        resultIndexes => {
+                                            //store index keys in localStorage
+                                            localStorage.setItem(
+                                                `${floGlobals.application}#privKey`,
+                                                JSON.stringify(resultIndexes))
+                                            //also add a dummy privatekey to the IDB
+                                            var randomPrivKey = floCrypto
+                                                .generateNewID().privKey
+                                            var randomThreshold = floCrypto.randInt(10,
+                                                20)
+                                            writeSharesToIDB(floCrypto
+                                                .createShamirsSecretShares(
+                                                    randomPrivKey, randomThreshold,
+                                                    randomThreshold))
+                                            //resolve private Key
+                                            resolve(privKey)
+                                        }).catch(error => reject(error))
                                 })
                             }
                         })
@@ -9697,8 +9721,8 @@
                     reject('Access Denied for Admin privilege')
                 else
                     floBlockchainAPI.writeData(floID, JSON.stringify(floData), adminPrivKey)
-                        .then(result => resolve(['Updated SubAdmin List', result]))
-                        .catch(error => reject(error))
+                    .then(result => resolve(['Updated SubAdmin List', result]))
+                    .catch(error => reject(error))
             })
         },
 
@@ -9827,30 +9851,19 @@
 </script>
 
 <script id="onLoadStartUp">
+    let notifications = document.getElementById("sm-notifications"),
+        genblockchainID = document.getElementById('gen-floid'),
+        genPrivateKey = document.getElementById('gen-privateKey'),
+        settings_page = document.getElementById('settings-page'),
+        homepage = document.getElementById('homepage') 
+
 
     async function updateDate() {
-        var month = new Array();
-        month[0] = "January";
-        month[1] = "February";
-        month[2] = "March";
-        month[3] = "April";
-        month[4] = "May";
-        month[5] = "June";
-        month[6] = "July";
-        month[7] = "August";
-        month[8] = "September";
-        month[9] = "October";
-        month[10] = "November";
-        month[11] = "December";
+        var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
+            "October", "November", "December"
+        ];
 
-        var weekday = new Array(7);
-        weekday[0] = "Sunday";
-        weekday[1] = "Monday";
-        weekday[2] = "Tuesday";
-        weekday[3] = "Wednesday";
-        weekday[4] = "Thursday";
-        weekday[5] = "Friday";
-        weekday[6] = "Saturday";
+        var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
         var d = new Date();
         var weekday = weekday[d.getDay()];
@@ -9937,7 +9950,6 @@
     }
 
     function clickProcess(element) {
-        console.log('woohooo I just clicked')
         let columnName = element.id.split('_')[0]
 
         if (typeof myFloID !== 'undefined') {
@@ -9954,18 +9966,17 @@
                     if (document.getElementById(`${columnName}_count`).innerText == '') {
                         document.getElementById(`${columnName}_count`).innerText = '1'
                     } else {
-                        document.getElementById(`${columnName}_count`).innerText = parseInt(document.getElementById(
-                            `${columnName}_count`).innerText) + 1
+                        document.getElementById(`${columnName}_count`).innerText = parseInt(document
+                            .getElementById(
+                                `${columnName}_count`).innerText) + 1
                     }
                 })
             }
-        }
-        else {
+        } else {
             alert("Please login to vote")
         }
     }
 
-    let homepage = document.getElementById("homepage");
     document.getElementById("go_back").addEventListener("click", function () {
         console.log("Registered a click")
         if (homepage.classList.contains('hide')) {
@@ -10009,7 +10020,8 @@
 
         for (let i = 0; i < repocontent.length; i++) {
             articlehtml = await (await fetch(repocontent[i]["download_url"])).text()
-            if (repocontent[i]['name'].slice(-5, repocontent[i]['name'].length) == '.html' && repocontent[i]['name'].slice(0, -5) != 'index') {
+            if (repocontent[i]['name'].slice(-5, repocontent[i]['name'].length) == '.html' && repocontent[i]
+                ['name'].slice(0, -5) != 'index') {
                 articles[repocontent[i]['name'].slice(0, repocontent[i]['name'].length - 5)] = articlehtml
             }
         }
@@ -10051,27 +10063,34 @@
             });
 
             document.getElementById("guest-login-button").addEventListener("click", function () {
-                document.getElementById('main-login').style.display = 'none'
-                document.getElementById('guest-login').style.display = 'initial'
-                let newFloid = floCrypto.generateNewID()
-                document.getElementById('gen-floid').value = newFloid.floID
-                document.getElementById('gen-privateKey').value = newFloid.privKey
-            });
-
-            document.getElementById("continue-login-button").addEventListener("click", function () {
-                let userprivatekey = document.getElementById('gen-privateKey').value.trim()
-                alert('Please save your Private Key! We do not store it and it cannot be recovered')
+                notifications.push('Please save your Private Key!', '', true)
                 document.getElementById('login-popup').hide()
-                resolve(userprivatekey)
+                homepage.classList.toggle('hide')
+                settings_page.classList.toggle('hide')
+                reject()
             });
 
+            genblockchainID.addEventListener("click", function () {
+                navigator.clipboard.writeText(this.value).then(notifications.push(
+                    'Blockchain ID copied!'))
+            })
+
+            genPrivateKey.addEventListener("click", function () {
+                navigator.clipboard.writeText(this.value).then(notifications.push(
+                    'Private Key copied!'))
+            })
         })
     }
 
-    document.getElementById("user-button").addEventListener("click", function () {
+
+    document.getElementById('logout-button').addEventListener("click", function () {
         floDapps.clearCredentials()
-        alert('Successfully cleared credentials')
-        //location.reload()
+        alert('Private Key Credentials deleted!')
+    });
+
+    document.getElementById('settings-button').addEventListener("click", function () {
+        homepage.classList.toggle('hide')
+        settings_page.classList.toggle('hide')
     });
 
     function onLoadStartUp() {
@@ -10083,10 +10102,15 @@
         floDapps.launchStartUp().then(result => {
 
             document.getElementById("login-button").style.display = 'none'
-            document.getElementById("user-button").style.display = 'initial'
+            document.getElementById("settings-button").style.display = 'initial'
             console.log(result)
             console.log(`Welcome FLO_ID: ${myFloID}`)
 
+            // fill settings page 
+            genblockchainID.value = myFloID
+            genPrivateKey.value = myPrivKey
+            
+
             //App functions....
             let articledata = floCloudAPI.requestGeneralData('test')
 
@@ -10130,7 +10154,6 @@
 
         }).catch(error => console.error(error))
     }
-
 </script>
 
 </html>
\ No newline at end of file
