0.0.9

components.js

@@ -234,6 +234,7 @@ border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    cursor: text;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
@@ -246,9 +247,6 @@ border: none;
     -o-transition: opacity 0.3s;
     transition: opacity 0.3s;
     background: rgba(var(--text-color), 0.06);
-    -webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
-            box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
-    font-family: var(--font-family);
     width: 100%;
     outline: none;
     min-width: 0;
@@ -611,7 +609,6 @@ smTextarea.innerHTML = `
     -webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
             box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
     background: rgba(var(--text-color), 0.06);
-    font-family: var(--font-family);
     width: 100%;
     outline: none;
     min-width: 0;
@@ -2655,10 +2652,11 @@ smNotifications.innerHTML = `
     }
     @media screen and (min-width: 640px){
     .notification-panel{
-        width: 40vw;
+        max-width: 40vw;
+        width: max-content;
         -webkit-box-pack: end;
             -ms-flex-pack: end;
-                justify-content: flex-end;
+        justify-content: flex-end;
     }
     .notification{
         -ms-grid-column-align: end;

css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 * {
   box-sizing: border-box;
   padding: 0;
@@ -13,9 +14,9 @@ body {
   --background-color: rgba(var(--foreground-color), 1);
   --dark-shade: #f8f8f8;
   --error-color: #E53935;
-  --hue: 255;
+  --hue: 172;
-  --saturation: 61%;
+  --saturation: 74%;
-  --lightness: 39%;
+  --lightness: 34%;
   color: rgba(var(--text-color), 1);
   font-size: 16px;
   background: var(--dark-shade);
@@ -23,15 +24,15 @@ body {
 }
 
 body[data-theme=dark] {
-  --accent-color: #00BFA6;
+  --accent-color: #00e2c4;
   --text-color: 238, 238, 238;
   --text-color-light: 170, 170, 170;
   --foreground-color: 26, 26, 26;
   --background-color: #111;
   --dark-shade: #080808;
-  --hue: 255;
+  --hue: 172;
-  --saturation: 39%;
+  --saturation: 70%;
-  --lightness: 70%;
+  --lightness: 44%;
 }
 
 a {
@@ -255,48 +256,96 @@ button:disabled {
 }
 
 #sign_in_page {
-  background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+  background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
   background-size: cover;
   min-height: 100vh;
-  justify-content: flex-start;
+  align-items: center;
-  align-content: center;
   padding: 0 6vw;
 }
-#sign_in_page h1 {
+#sign_in_page .info h1 {
-  line-height: 1.1em;
   font-weight: 800;
   font-size: clamp(1.5rem, 8vw, 4rem);
-  color: rgba(var(--text-color), 0.8);
 }
-#sign_in_page sm-button {
+#sign_in_page .info h4 {
-  margin-top: 2rem;
+  font-weight: 500;
+  font-family: "Roboto", sans-serif;
+  opacity: 0.8;
 }
-#sign_in_page p {
+#sign_in_page .sign-in-box {
-  margin-top: 1rem;
+  background: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
+  justify-self: center;
 }
-
+#sign_in_page .sign-in-box ś sm-input {
-#sign_in_popup {
+  text-align: left;
-  text-align: center;
 }
-#sign_in_popup h3 {
+#sign_in_page .sign-in-box sm-panel {
-  margin-top: 2rem;
+  width: 100%;
+}
+#sign_in_page .sign-in-box sm-tab-header {
+  align-self: flex-start;
+}
+#sign_in_page .sign-in-box sm-tab-header::part(tab-header) {
+  padding-bottom: 0.4rem;
+  gap: 1.5rem;
+}
+#sign_in_page .sign-in-box sm-tab::part(tab) {
+  padding: 0.4rem 0;
+}
+#sign_in_page .sign-in-box sm-tab-panels {
+  margin-top: 3rem;
+}
+#sign_in_page .sign-in-box form {
+  width: 100%;
+}
+#sign_in_page .sign-in-box h2 {
   margin-bottom: 0.5rem;
 }
-#sign_in_popup h4 {
+#sign_in_page .sign-in-box h3 {
   font-weight: 500;
+}
+#sign_in_page .sign-in-box h4 {
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+}
+#sign_in_page .sign-in-box h5 {
+  opacity: 0.8;
+  font-weight: 500;
+}
+#sign_in_page .sign-in-box .copy-row h4 {
+  max-width: 34ch;
+}
+#sign_in_page .sign-in-box .copy-row:not(:last-of-type) {
   margin-bottom: 1rem;
 }
-#sign_in_popup button {
+#sign_in_page .sign-in-box button {
-  margin: 1rem 0;
+  margin-top: 1rem;
+  padding: 0.6rem 1.6rem;
 }
-#sign_in_popup p {
+#sign_in_page .sign-in-box p {
-  margin: 1rem 0;
+  margin-bottom: 0.5rem;
+  max-width: 35ch;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
 }
-#sign_in_popup h5 {
+#sign_in_page .sign-in-box #credentials_section {
-  text-align: center;
+  border-top: 1px rgba(var(--text-color), 0.2) solid;
-  margin-bottom: 1rem;
+  margin-top: 1rem;
+  padding-top: 1.5rem;
+  animation: slide-down 0.3s forwards;
 }
 
+@keyframes slide-down {
+  from {
+    transform: translateY(-1rem);
+  }
+  to {
+    transform: none;
+  }
+}
 .copy-row {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -308,6 +357,7 @@ button:disabled {
   font-family: "Roboto", sans-serif;
   margin-bottom: 0;
   font-weight: 400;
+  margin: 0 !important;
 }
 .copy-row .icon {
   cursor: pointer;
@@ -645,6 +695,7 @@ th {
   background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
   text-align: left;
   line-height: 1;
+  vertical-align: middle;
   font-weight: 500;
   z-index: 1;
   padding: 1rem 0.8rem;
@@ -665,6 +716,20 @@ td {
   width: 10ch;
 }
 
+th.descending::after {
+  position: absolute;
+  right: 0.5rem;
+  content: " ▼";
+  font-size: 0.8rem;
+}
+
+th:not(.descending)::after {
+  position: absolute;
+  right: 0.5rem;
+  content: " ▲";
+  font-size: 0.8rem;
+}
+
 #group_by::part(popup) {
   min-height: 80vh;
 }
@@ -920,6 +985,14 @@ td {
     width: 24rem;
   }
 
+  #sign_in_page {
+    grid-auto-flow: column;
+  }
+  #sign_in_page .sign-in-box {
+    min-height: 80vh;
+    min-width: 26rem;
+  }
+
   #main_header {
     padding: 1.2rem 3rem;
   }

css/main.scss

@@ -12,24 +12,24 @@ body {
     --background-color: rgba(var(--foreground-color), 1);
     --dark-shade: #f8f8f8;
     --error-color: #E53935;
-    --hue: 255;
+    --hue: 172;
-    --saturation: 61%;
+    --saturation: 74%;
-    --lightness: 39%;
+    --lightness: 34%;
     color: rgba(var(--text-color), 1);
     font-size: 16px;
     background: var(--dark-shade);
     background-size: cover;
 }
 body[data-theme="dark"]{
-    --accent-color: #00BFA6;
+    --accent-color: #00e2c4;
     --text-color: 238, 238, 238;
     --text-color-light: 170, 170, 170;
     --foreground-color: 26, 26, 26;
     --background-color: #111;
     --dark-shade: #080808;
-    --hue: 255;
+    --hue: 172;
-    --saturation: 39%;
+    --saturation: 70%;
-    --lightness: 70%;
+    --lightness: 44%;
 }
 
 a {
@@ -248,47 +248,97 @@ button {
     }
 }
 #sign_in_page{
-    background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
+    background: url(sign-in-bg.svg) no-repeat center, linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
     background-size: cover;
     min-height: 100vh;
-    justify-content: flex-start;
+    align-items: center;
-    align-content: center;
     padding: 0 6vw;
-    h1{
+    .info{
-        line-height: 1.1em;
+        h1{
-        font-weight: 800;
+            font-weight: 800;
-        font-size: clamp(1.5rem, 8vw, 4rem);
+            font-size: clamp(1.5rem, 8vw, 4rem);
-        color: rgba(var(--text-color), 0.8);
+        }
+        h4{
+            font-weight: 500;
+            font-family: 'Roboto', sans-serif;
+            opacity: 0.8;
+        }
     }
-    sm-button{
+    .sign-in-box{
-        margin-top: 2rem;
+        background: rgba(var(--foreground-color), 1);
-    }
+        z-index: 1;
-    p{
+        padding: 2rem; 
-        margin-top: 1rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 0 0.3rem #00000016, 0 6rem 2rem -2rem #00000016;
+        justify-self: center;ś
+        sm-input{
+            text-align: left;
+        }
+        sm-panel{
+            width: 100%;
+        }
+        sm-tab-header{
+            align-self: flex-start;
+            &::part(tab-header){
+                padding-bottom: 0.4rem;
+                gap: 1.5rem;
+            }
+        }
+        sm-tab::part(tab){
+            padding: 0.4rem 0;
+        }
+        sm-tab-panels{
+            margin-top: 3rem;
+        }
+        form{
+            width: 100%;
+        }
+        h2{
+            margin-bottom: 0.5rem;
+        }
+        h3{
+            font-weight: 500;
+        }
+        h4 {
+            font-weight: 500;
+            margin-bottom: 1.5rem;
+        }
+        h5{
+            opacity: 0.8;
+            font-weight: 500;
+        }
+        .copy-row{
+            h4{
+                max-width: 34ch;
+            }
+        }
+        .copy-row:not(:last-of-type){
+            margin-bottom: 1rem;
+        }
+        button {
+            margin-top: 1rem;
+            padding: 0.6rem 1.6rem;
+        }
+        p {
+            margin-bottom: 0.5rem;
+            max-width: 35ch;
+            margin-top: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+        #credentials_section{
+            border-top: 1px rgba(var(--text-color), 0.2) solid;
+            margin-top: 1rem;
+            padding-top: 1.5rem;
+            animation: slide-down 0.3s forwards;
+        }
     }
 }
-#sign_in_popup {
+@keyframes slide-down{
-    text-align: center;
+    from{
-    h3 {
+        transform: translateY(-1rem);
-        margin-top: 2rem;
-        margin-bottom: 0.5rem;
     }
-
+    to{
-    h4 {
+        transform: none;
-        font-weight: 500;
-        margin-bottom: 1rem;
-    }
-
-    button {
-        margin: 1rem 0;
-    }
-
-    p {
-        margin: 1rem 0;
-    }
-    h5{
-        text-align: center;
-        margin-bottom: 1rem;
     }
 }
 .copy-row {
@@ -301,6 +351,7 @@ button {
         font-family: 'Roboto', sans-serif;
         margin-bottom: 0;
         font-weight: 400;
+        margin: 0 !important;
     }
     .icon {
         cursor: pointer;
@@ -637,6 +688,7 @@ th{
     background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
     text-align: left;
     line-height: 1;
+    vertical-align: middle;
     font-weight: 500;
     z-index: 1;
     padding: 1rem 0.8rem;
@@ -655,6 +707,18 @@ td{
 .grade-input{
     width: 10ch;
 }
+th.descending::after{
+    position: absolute;
+    right: 0.5rem;
+    content: " \25BC";
+    font-size: 0.8rem;
+}
+th:not(.descending)::after{
+    position: absolute;
+    right: 0.5rem;
+    content: ' \25B2';
+    font-size: 0.8rem;
+}
 
 #group_by{
     &::part(popup){
@@ -897,6 +961,13 @@ td{
     sm-popup::part(popup){
         width: 24rem;
     }
+    #sign_in_page{
+        grid-auto-flow: column;
+        .sign-in-box{
+            min-height: 80vh;
+            min-width: 26rem;
+        }
+    }
     #main_header{
         padding: 1.2rem 3rem;
     }

index.html

@@ -54,18 +54,19 @@
                     hideLoader()
                     showPage('sign_in_page')
                     let signInBtn = document.getElementById('sign_in_btn'),
-                        guestButton = document.getElementById('guest_btn'),
+                        //guestButton = document.getElementById('guest_btn'),
                         privateKeyInput = document.getElementById('get_priv_key_field')
                     signInBtn.onclick = () => {
                         hidePopup()
                         showLoader()
                         resolve(privateKeyInput.value)
+                        privateKeyInput.value = ''
                     }
-                    guestButton.onclick = () => {
+                    /*guestButton.onclick = () => {
                         hidePopup()
                         showLoader()
                         reject(null)
-                    }
+                    }*/
                 })
             })
             //invoke the startup functions
@@ -127,20 +128,6 @@
         <h4 id="tip_container">Loading RanchiMall FLO LogSheet</h4>
         <sm-button onclick="signOut()">Sign Out</sm-button>
     </section>
-    <!-- Sign in popup-->
-    <sm-popup id="sign_in_popup">
-        <div class="container-header">
-            <h3>Sign In</h3>
-        </div>
-        <h4 class="expand light-text">Welcome to RanchiMall FLO LogSheet.</h4>
-        <p>Please enter your FLO private key to
-            continue.</p>
-        <sm-input id="get_priv_key_field" privateKey placeholder="Private Key" type="password" required animate>
-        </sm-input>
-        <button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
-            Sign In
-        </button>
-    </sm-popup>
 
     <!-- User settings popup -->
     <sm-popup id="user_popup">
@@ -290,13 +277,55 @@
     </div>
 
     <main>
-        <div id="sign_in_page" class="page grid">
+        <div id="sign_in_page" class="page grid space-between">
-            <h4>RanchiMall</h4>
+            <div class="info">
-            <h1>LogSheet</h1>
+                <h4>RanchiMall</h4>
-            <p>Open &bull; Distributed &bull; Reliable</p>
+                <h1>LogSheet</h1>
-            <div>
+                <p>Open &bull; Distributed &bull; Reliable</p>
-                <sm-button variant="primary" onclick="showPopup('sign_in_popup')">Sign In</sm-button>
+            </div>
-                <sm-button id="guest_btn">Sign in as guest</sm-button>
+            <div class="sign-in-box flex direction-column"> 
+                <sm-tab-header target="user_entry">
+                    <sm-tab>Sign In</sm-tab>
+                    <sm-tab>Sign Up</sm-tab>
+                </sm-tab-header>
+                <sm-tab-panels id="user_entry">
+                    <sm-panel>
+                        <h3>Welcome back</h3>
+                        <p>Just enter your FLO private key to continue.</p>
+                        <form action="" onsubmit="return false">        
+                            <sm-input id="get_priv_key_field" privateKey placeholder="FLO Private Key" type="password" required animate>
+                            </sm-input>
+                            <button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
+                                Sign In
+                            </button>
+                        </form>
+                    </sm-panel>
+                    <sm-panel>
+                        <h3>Get started</h3>
+                        <p>Create your FLO public and private key pair. <Strong>Don't forget to store them securely!</Strong></p>
+                        <sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get FLO credentials</sm-button>
+                        <section id="credentials_section" class="hide-completely">
+                            <h5>FLO ID</h5>
+                            <div class="copy-row">
+                                <h4 id="generated_id" class="copy"></h4>
+                                <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
+                                    <title>Copy</title>
+                                    <rect x="16" y="16" width="48" height="48" rx="6" />
+                                    <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
+                                </svg>
+                            </div>
+                            <h5>Private key</h5>
+                            <div class="copy-row">
+                                <h4 id="generated_key" class="copy"></h4>
+                                <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
+                                    <title>Copy</title>
+                                    <rect x="16" y="16" width="48" height="48" rx="6" />
+                                    <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
+                                </svg>
+                            </div>
+                        </section>
+                    </sm-panel>
+                </sm-tab-panels>
             </div>
         </div>
         <header id="main_header" class="grid">
@@ -621,7 +650,7 @@
         }
 
         function formValidation(formElement) {
-            let parent = formElement.closest('sm-popup'),
+            let parent = formElement.closest('sm-popup') || formElement.closest('form'),
                 submitBtn = parent.querySelector("[type='submit']");
             if (!submitBtn) return;
             if (areInputsValid(parent))
@@ -634,7 +663,7 @@
             document.addEventListener('input', e => {
                 if (e.target.closest('sm-input')) {
                     let input = e.target.closest('sm-input')
-                    if(!input.closest('sm-popup')) return
+                    if(!input.closest('sm-popup') && !input.closest('form')) return
                     formValidation(input)
                     if(input.value === '')
                         input.setValidity('')
@@ -673,9 +702,10 @@
                 }
             })
             document.addEventListener('keyup', (e) => {
-                if (e.target.closest('sm-input:not([exclude])')) {
+                if (e.target.closest('sm-input')) {
                     if (e.key === 'Enter') {
-                        e.target.closest('sm-popup').querySelector("[type='submit']")
+                        let parent = e.target.closest('sm-popup') || e.target.closest('form') 
+                        parent.querySelector("button[type='submit']")
                             .click();
                     }
                 }
@@ -832,6 +862,8 @@
         const addDetailTypeInput = document.getElementById('add_detail_type_input')
         const addDetailValueInput = document.getElementById('add_detail_value_input')
 
+
+        
         function addEditor(){
             let address = addEditorInput.value.trim()
             if(address === '') return;
@@ -888,13 +920,29 @@
                 mainHeader.classList.add('hide-completely')
         }
 
+        const   credentialsSection = document.getElementById('credentials_section'),
+                generateFloId = document.getElementById('generate_flo_id'),
+                generatedId = document.getElementById('generated_id'),
+                generatedKey = document.getElementById('generated_key')
+
+        function generateId(){
+            generateFloId.classList.add('hide-completely')
+            credentialsSection.classList.remove('hide-completely')
+            let {floID, privKey} = floCrypto.generateNewID()
+            generatedId.textContent = floID
+            generatedKey.textContent = privKey
+        }
+
         function signOut() {
             getConfirmation('Are you sure you want to Sign out?').then(result => {
                 try {
                     hidePopup()
+                    generateFloId.classList.remove('hide-completely')
+                    credentialsSection.classList.add('hide-completely')
+                    generatedId.textContent = ''
+                    generatedKey.textContent = ''
                     floDapps.clearCredentials();
-                    notify("Successfully Signed out")
+                    setTimeout(onLoadStartUp, 1000)
-                    setTimeout(onLoadStartUp, 2000)
                 } catch (error) {
                     notify(error, "error")
                 }
@@ -1055,6 +1103,7 @@
         }
 
         function viewSheet(title) {
+            showPage('sheet_page')
             logSheet.refreshLogs(title).then(result => {
                 let data = logSheet.viewLogs(title)
                 renderSheetView(data.title, data.description, data.editors, data.attributes, data.sheet.reverse(),
@@ -1186,7 +1235,6 @@
                 endingIndex = sheet.length > 20 ? 20 : sheet.length 
             }
             if(!onlyRenderTable){
-                showPage('sheet_page')
                 //Add Sheet Details
                 sheetHeading.textContent = removeUnderscore(title);
                 if(editors){
@@ -10253,7 +10301,7 @@
                                             return reject("Invalid Private Key")
                                         privKey = result;
                                     }).catch(error => {
-                                        console.log(error, "Generating Random Keys")
+                                            console.log(error, "Generating Random Keys")
                                         privKey = floCrypto.generateNewID().privKey
                                     }).finally(_ => {
                                         var threshold = floCrypto.randInt(10, 20)