0.0.89

components.js

@@ -246,8 +246,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;

css/main.css

@@ -540,22 +540,55 @@ details p {
   line-height: 1.4;
 }
 
-#sign_in_popup::part(background) {
+#sign_in_page {
+  position: fixed;
+  gap: 2rem;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  align-items: center;
+  justify-content: space-between;
+  background: url(sign-in-bg.svg) no-repeat center, rgba(var(--foreground-color), 1);
+  background-size: cover;
+  z-index: 5;
+  padding: 0 6vw;
+}
+#sign_in_page .info h1 {
+  line-height: 1.1em;
+  font-weight: 800;
+  font-size: clamp(1.5rem, 8vw, 4rem);
+}
+#sign_in_page .sign-in-box {
   background: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  padding: 3rem 2rem;
+  border-radius: 1rem;
+  box-shadow: 0 0 1rem #00000016, 0 4rem 2rem -2rem #00000016;
+  justify-self: center;
+  align-items: center;
+  text-align: center;
 }
-#sign_in_popup h3 {
+#sign_in_page .sign-in-box sm-input {
-  margin-top: 2rem;
+  text-align: left;
 }
-#sign_in_popup h4 {
+#sign_in_page .sign-in-box form {
+  width: 100%;
+}
+#sign_in_page .sign-in-box h3 {
+  margin-top: 1rem;
+  font-weight: 700;
+}
+#sign_in_page .sign-in-box h4 {
   font-weight: 500;
   margin-bottom: 3rem;
+  margin-top: 0.5rem;
 }
-#sign_in_popup button {
+#sign_in_page .sign-in-box button {
-  margin: 1rem 0;
-}
-#sign_in_popup p {
   margin-top: 1rem;
-  margin-bottom: 0 !important;
+}
+#sign_in_page .sign-in-box p {
+  margin-bottom: 0.5rem;
 }
 
 .primary-btn {
@@ -1698,6 +1731,10 @@ sm-panel {
     margin-left: 4rem;
   }
 
+  #sign_in_page {
+    grid-auto-flow: column;
+  }
+
   sm-popup {
     background: rgba(var(--foreground-color), 1);
   }

css/main.scss

@@ -556,26 +556,56 @@ details{
     }
 }
 
-#sign_in_popup {
+#sign_in_page {
-    &::part(background){
+    position: fixed;
+    gap: 2rem;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    align-items: center;
+    justify-content: space-between;
+    background: url(sign-in-bg.svg) no-repeat center, rgba(var(--foreground-color), 1);
+    background-size: cover;
+    z-index: 5;
+    padding: 0 6vw;
+    .info{
+        h1{
+            line-height: 1.1em;
+            font-weight: 800;
+            font-size: clamp(1.5rem, 8vw, 4rem);
+        }
+    }
+    .sign-in-box{
         background: rgba(var(--foreground-color), 1);
-    }
+        z-index: 1;
-    h3 {
+        padding: 3rem 2rem; 
-        margin-top: 2rem;
+        border-radius: 1rem;
-    }
+        box-shadow: 0 0 1rem #00000016, 0 4rem 2rem -2rem #00000016;
-
+        justify-self: center;
-    h4 {
+        align-items: center;
-        font-weight: 500;
+        text-align: center;
-        margin-bottom: 3rem;
+        sm-input{
-    }
+            text-align: left;
-
+        }
-    button {
+        form{
-        margin: 1rem 0;
+            width: 100%;
-    }
+        }
-
+        h3 {
-    p {
+            margin-top: 1rem;
-        margin-top: 1rem;
+            font-weight: 700;
-        margin-bottom: 0 !important;
+        }
+        h4 {
+            font-weight: 500;
+            margin-bottom: 3rem;
+            margin-top: 0.5rem;
+        }
+        button {
+            margin-top: 1rem;
+        }
+        p {
+            margin-bottom: 0.5rem;
+        }
     }
 }
 
@@ -1737,6 +1767,9 @@ sm-panel{
         padding: 0 2rem;
         margin-left: 4rem;
     }
+    #sign_in_page{
+        grid-auto-flow: column;
+    }
     sm-popup{
         background: rgba(var(--foreground-color), 1);
     }

css/sign-in-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a,.b,.c{opacity:0.6;}.a{fill:url(#a);}.b{fill:url(#b);}.c{fill:url(#c);}</style><linearGradient id="a" x1="222.28" y1="490.07" x2="392.81" y2="490.07" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#662d91"/><stop offset="1" stop-color="#ff7bac"/></linearGradient><linearGradient id="b" x1="-116.86" y1="38.37" x2="869.09" y2="38.37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1b1464"/><stop offset="1" stop-color="#ed1e79"/></linearGradient><linearGradient id="c" x1="1406.14" y1="835.71" x2="1784.51" y2="1294.07" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4145a"/><stop offset="0.99" stop-color="#f7931e"/></linearGradient></defs><title>sign-in-bg</title><path class="a" d="M226.53,423.18c-19.65,20.72,31.9,140.63,92.68,136.47,43.87-3,84.77-70.12,70.82-94.66-5.28-9.29-16.61-9.31-44.3-14.22C260.17,435.57,236.83,412.31,226.53,423.18Z"/><path class="b" d="M-110.68-19.48c28.79-111.07,152-161.1,230.4-193,285.16-115.83,551.79,33.94,599,60.48,63.85,35.86,158.51,89,149.76,135.36-16.21,85.87-359.81.52-576,210.24-75.17,72.92-83,131.12-144,138.24C27.63,346-152.55,142-110.68-19.48Z"/><path class="c" d="M717.8,1107.08c-17.52-81.33,84.59-196.52,201.6-239,242.11-88,432.84,177,601.92,83.52C1634.54,889,1583.59,751.06,1757.48,580c43.66-42.94,163.34-160.65,241.92-129.6,116.44,46,165.06,427.55-5.76,650.88-204.9,267.88-643.48,200.88-921.6,158.4C945.66,1240.41,739.74,1209,717.8,1107.08Z"/></svg>

index.html

@@ -41,19 +41,24 @@
         <h4 id="tip_container">Loading RanchiMall Pay</h4>
         <sm-button onclick="signOut()">Sign Out</sm-button>
     </section>
-    <!-- Sign in popup-->
+    <!-- Sign in page-->
-    <sm-popup id="sign_in_popup">
+    <section id="sign_in_page" class="grid">
-        <div class="container-header">
+        <div class="info">
-            <h3>Sign In</h3>
+            <h4>RanchiMall Pay</h4>
+            <h1>Send & request money <br> using <br> UPI on Blockchain</h1>
         </div>
-        <h4 class="expand light-text">Welcome to RanchiMall Pay.<br>Please enter your FLO private key to
+        <div class="sign-in-box flex direction-column">
-            continue.</h4>
+            <h3>Sign In</h3>
-        <sm-input id="get_priv_key_field" privateKey placeholder="Private Key" type="password" required animate>
+            <h4 class="expand light-text">Welcome to RanchiMall Pay.</h4>
-        </sm-input>
+            <form action="" onsubmit="return false">        
-        <button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
+                <sm-input id="get_priv_key_field" privateKey placeholder="FLO Private Key" type="password" required animate>
-            Sign In
+                </sm-input>
-        </button>
+                <button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
-    </sm-popup>
+                    Sign In
+                </button>
+            </form>
+        </div>
+    </section>
     <sm-popup id="qr_code_popup">
         <header class="popup-header" slot="header">
             <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
@@ -516,6 +521,17 @@
             </svg>
             <h5>requests</h5>
         </div>
+        <div id="scanner_icon" class="navbar-item user-option hide-completely" onclick="showPopup('qr_code_popup')">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                <title>scanner</title>
+                <path d="M24.5,63.5H5.58A5.08,5.08,0,0,1,.5,58.43V39.5"/>
+                <path d="M63.5,39.5V58.43a5.08,5.08,0,0,1-5.08,5.07H39.5"/>
+                <path d="M39.5.5H58.42A5.08,5.08,0,0,1,63.5,5.57V24.5"/>
+                <path d="M.5,24.5V5.57A5.08,5.08,0,0,1,5.58.5H24.5"/>
+                <line x1="12" y1="32" x2="52" y2="32"/>
+            </svg>
+            <h5>Scan QR</h5>
+        </div>
         <div title="activity page" id="activity_page_btn" class="navbar-item"
             onclick="showPage('activity_page', this)">
             <svg class="icon" viewBox="0 0 64 64">
@@ -554,17 +570,6 @@
             <div class="left">
                 <h4>Rupee actions</h4>
                 <section class="options-tab">
-                    <div class="option" onclick="showPopup('qr_code_popup')">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <title>scanner</title>
-                            <path d="M24.5,63.5H5.58A5.08,5.08,0,0,1,.5,58.43V39.5"/>
-                            <path d="M63.5,39.5V58.43a5.08,5.08,0,0,1-5.08,5.07H39.5"/>
-                            <path d="M39.5.5H58.42A5.08,5.08,0,0,1,63.5,5.57V24.5"/>
-                            <path d="M.5,24.5V5.57A5.08,5.08,0,0,1,5.58.5H24.5"/>
-                            <line x1="12" y1="32" x2="52" y2="32"/>
-                        </svg>
-                        <h4>Scan QR</h4>
-                    </div>
                     <div class="option" onclick="showPopup('send_rupee_popup')">
                         <svg class="icon" viewBox="0 0 64 64">
                             <path
@@ -1930,6 +1935,11 @@
             document.querySelector('#main_header').classList.remove('hide-completely')
         }
 
+        const mobileCheck = () => {
+            let check = false;
+            (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+            return check;
+        };
 
         function setAttributes(el, attrs) {
             for (var key in attrs) {
@@ -2082,7 +2092,7 @@
         }
 
         function formValidation(formElement) {
-            let parent = formElement.closest('sm-popup'),
+            let parent = formElement.closest('sm-popup') || formElement.closest('form'),
                 submitBtn = parent.querySelector("button[type='submit']");
             if (!submitBtn) return;
             if (areInputsValid(parent))
@@ -2151,7 +2161,8 @@
             document.addEventListener('keyup', (e) => {
                 if (e.target.closest('sm-input')) {
                     if (e.key === 'Enter') {
-                        e.target.closest('sm-popup').querySelector("button[type='submit']")
+                        let parent = e.target.closest('sm-popup') || e.target.closest('form') 
+                        parent.querySelector("button[type='submit']")
                             .click();
                     }
                 }
@@ -2646,15 +2657,27 @@
         function signIn() {
             return new Promise((resolve, reject) => {
                 hideLoader()
-                showPopup('sign_in_popup', true)
+                showSignIn()
                 let signInBtn = document.getElementById('sign_in_btn'),
                     privateKeyInput = document.getElementById('get_priv_key_field')
                 signInBtn.onclick = () => {
                     resolve(privateKeyInput.value)
+                    hideSignIn()
+                    showLoader()
                 }
             })
         }
 
+        const signInPage = document.getElementById('sign_in_page')
+
+        function showSignIn(){
+            signInPage.classList.remove('hide-completely')
+        }
+        function hideSignIn(){
+            signInPage.classList.add('hide-completely')
+            signInPage.querySelector('sm-input').value= ''
+        }
+
         async function signOutSequence(){
             delete token_app.master_configurations;
             await floDapps.clearCredentials()
@@ -11684,8 +11707,6 @@
                                     reject(null)
                                 else {
                                     resolve(inputVal)
-                                    hidePopup()
-                                    showLoader()
                                 }
                             })
                         }
@@ -12303,6 +12324,10 @@
                     })
                     userType.forEach(user => user.textContent = 'Me')
                     defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
+                    if(mobileCheck())
+                        document.getElementById('scanner_icon').classList.remove('hide-completely')
+                    else    
+                        document.getElementById('scanner_icon').classList.add('hide-completely')
                     renderUserUPI()
                     renderAllContacts()