Feat: check and fix FLO data when sending FLO

css/main.css

@@ -22,7 +22,7 @@ body {
   --background-color: #efefef;
   --error-color: red;
   color: rgba(var(--text-color), 1);
-  background: url(lighthouse.svg) no-repeat;
+  background: url(lighthouse.svg) no-repeat center;
   background-size: cover;
 }
 
@@ -378,7 +378,12 @@ sm-textarea {
 }
 
 .contact-card__more {
-  padding: 0.2rem;
+  padding: 0.4rem;
+}
+
+.more-icon {
+  height: 1.2rem;
+  width: 1.2rem;
 }
 
 #add_contact_button {

css/main.scss

@@ -20,7 +20,7 @@ body{
     --background-color: #efefef;
     --error-color: red;
     color: rgba(var(--text-color), 1);
-    background: url(lighthouse.svg) no-repeat;
+    background: url(lighthouse.svg) no-repeat center;
     background-size: cover;
 }
 body[data-theme='dark']{
@@ -333,7 +333,11 @@ sm-textarea{
     grid-template-columns: 1fr auto;
 }
 .contact-card__more{
-    padding: 0.2rem;
+    padding: 0.4rem;
+}
+.more-icon{
+    height: 1.2rem;
+    width: 1.2rem;
 }
 
 #add_contact_button{

index.html

@@ -81,10 +81,27 @@
             border: 1px transparent solid;
         }
 
+        .flex{
+            display: flex;
+        }
+        .grid{
+            display: grid;
+        }
+        .column-grid{
+            grid-auto-flow: column;
+        }
+        .align-center{
+            align-items: center;
+        }
+        .gap-1{
+            gap: 1rem;
+        }
+
         .primaryButton {
             background: var(--accent-color) !important;
             color: white !important;
             border: 1px solid var(--accent-color);
+            width: 100%;
         }
 
         .primaryButton:hover {
@@ -205,6 +222,11 @@
             margin: 0.4rem 0.8rem;
         }
 
+        #flo_data_status:not(:empty){
+            color: red;
+            padding: 0.5rem 0;
+        }
+
         #overlay {
             opacity: 0;
             pointer-events: none;
@@ -542,6 +564,9 @@
             opacity: 0;
             pointer-events: none;
         }
+        .hide-completely{
+            display: none;
+        }
 
         #menu {
             display: none;
@@ -1989,6 +2014,11 @@
                         <label>FLO data</label>
                         <div id="show_character_count">1040/1040</div>
                     </div>
+                    <p id="flo_data_status"></p>
+                    <div id="flo_data_options" class="grid column-grid gap-1 hide-completely">
+                        <button class="primaryButton" id="remove_invalid_button" onclick="removeInvalid()">Fix</button>
+                        <button class="primaryButton" id="check_flo_data_button" onclick="checkFloData()">Check FLO data</button>
+                    </div>
                     <button class="primaryButton" id="sendBtn" onclick="showPrivKeyPage()" disabled>Send</button>
                 </div>
             </div>
@@ -2146,7 +2176,6 @@
             mode = setInterval(() => {
                 let d = new Date(),
                     t = d.getHours();
-                console.log(t);
                 if (t > 6 && t < 18) {
                     daylight();
                 } else {
@@ -2761,6 +2790,7 @@
             floWebWallet.sendTransaction(sender, receiver, amount, floData, privKey).then((transactionid) => {
                 document.getElementById('transactionId').textContent = `transaction ID : ${transactionid}`;
                 showInnerPage('transaction-complete');
+                document.getElementById('sdright').querySelectorAll('input, textarea').forEach(field => field.value = '')
             }).catch((error) => {
                 alert(error)
             })
@@ -2796,15 +2826,58 @@
         }
 
         let showCharacterCount = document.getElementById('show_character_count') 
-        document.getElementById('flotextdata').addEventListener('input', function(e){
+        let isFloDataChanged = false
+        const floDataOptions = document.getElementById('flo_data_options')
+        const checkFloDataButton = document.getElementById('check_flo_data_button')
+        const sendFloDataButton = document.getElementById('sendBtn')
+        const sentFloData = document.getElementById('flotextdata')
+        const floDataStaus = document.getElementById('flo_data_status')
+        sentFloData.addEventListener('keydown', function(e){
             if(this.value.length > 1040)
                 e.preventDefault()
+        })
+            
+        sentFloData.addEventListener('input', function(e){
+                isFloDataChanged = true
+            if(this.value.trim() !== ''){
+                sendFloDataButton.classList.add('hide-completely')
+                floDataOptions.classList.remove('hide-completely')
+            }
+            else{
+                sendFloDataButton.classList.remove('hide-completely')
+                floDataOptions.classList.add('hide-completely')
+            }
             if(1040 - this.value.length){
                 showCharacterCount.textContent = `${1040 - this.value.length}/1040` 
             }
             else
                 showCharacterCount.textContent = `You can only add FLO data upto 1040 characters.`
         })
+        function checkFloData(){
+            isFloDataChanged = false
+            const floDataText = sentFloData.value.trim()
+            let isValid = true
+            for(char of floDataText){
+                // if(/^[a-z0-9\s!"#$%&'()*+,.\/:;<=>?@\[\]^_`{|}~-]*$/i.test(char)){
+                if(!/^[\x20-\x7E\s]+/.test(char)){
+                    isValid = false
+                    break;
+                }
+            }
+            if(isValid){
+                sendFloDataButton.classList.remove('hide-completely')
+                floDataOptions.classList.add('hide-completely')
+                floDataStaus.textContent = ''
+            }
+            else{
+                floDataStaus.textContent = 'FLO data contains invalid characters. Use "Fix" to remove invalid characters.'
+            }
+        }
+        function removeInvalid(){
+            const floDataText = sentFloData.value.trim()
+            sentFloData.value = floDataText.replace(/[^\x20-\x7E]*/gm, '')
+            checkFloData()
+        }
     </script>
 
     <script>

new.html

@@ -152,7 +152,7 @@
                         <div class="grid contact__grid align-center">
                             <h4 class="contact-card__name">Sairaj</h4>
                             <button class="contact-card__more">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
+                                <svg class="icon more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
                             </button>
                         </div>
                     </li>

script/components.js

@@ -866,7 +866,7 @@ smCheckbox.innerHTML = `
         pointer-events: none;
     }
 </style>
-<label class="checkbox">
+<label class="checkbox" tabindex="0">
     <input type="checkbox">
     <svg class="icon" viewBox="0 0 64 64">
         <title>checkbox</title>
@@ -4085,12 +4085,15 @@ customElements.define('pin-input',
 		}
 
 		handleKeydown = (e) => {
-			const activeInput = e.target.closest('input')
+            const activeInput = e.target.closest('input')
 			if (/[0-9]/.test(e.key)) {
-				if (activeInput.value.trim().length > 2) {
+                if (activeInput.value.trim().length > 2) {
-					e.preventDefault();
+                    e.preventDefault();
 				}
 				else {
+                    if (activeInput.value.trim().length === 1) {
+                        activeInput.value = e.key
+                    }
 					if (activeInput.nextElementSibling) {
 						setTimeout(() => {
 							activeInput.nextElementSibling.focus();