webserver/site: use border color to show if address is valid or invalid

Signed-off-by: Philemon Ukane <[email protected]>
ukane-philemon · Oct 23, 2024 · a309c17 · a309c17
1 parent 92d27f2
commit a309c17
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss
@@ -70,6 +70,14 @@ select {
   }
 }
 
+.border-danger {
+  border-color: red;
+}
+
+.border-success {
+  border-color: #009931;
+}
+
 #confirmRegForm {
   width: 425px;
 

diff --git a/client/webserver/site/src/html/wallets.tmpl b/client/webserver/site/src/html/wallets.tmpl
@@ -526,10 +526,7 @@
       </div>
       <div>
         <label for="sendAddr">[[[Address]]]</label>
-        <div class="d-flex">
-          <input type="text" class="col-1" id="sendAddr" spellcheck="false">
-          <span id="validAddr" class="ico-check mx-2 pt-2 d-hide"></span>
-        </div>
+          <input type="text" id="sendAddr" spellcheck="false">
       </div>
       <div class="d-flex align-items-stretch">
         <div class="flex-grow-1 pe-3">

diff --git a/client/webserver/site/src/js/wallets.ts b/client/webserver/site/src/js/wallets.ts
@@ -382,13 +382,12 @@ export default class WalletsPage extends BasePage {
     // Validate send address on input.
     Doc.bind(page.sendAddr, 'input', async () => {
       const asset = app().assets[this.selectedAssetID]
-      Doc.hide(page.validAddr)
-      page.sendAddr.classList.remove('is-invalid')
+      page.sendAddr.classList.remove('border-danger', 'border-success')
       const addr = page.sendAddr.value || ''
       if (!asset || addr === '') return
       const valid = await this.validateSendAddress(addr, asset.id)
-      if (valid) Doc.show(page.validAddr)
-      else page.sendAddr.classList.add('is-invalid')
+      if (valid) page.sendAddr.classList.add('border-success')
+      else page.sendAddr.classList.add('border-danger')
     })
 
     // A link on the wallet reconfiguration form to show/hide the password field.
@@ -2161,8 +2160,8 @@ export default class WalletsPage extends BasePage {
       Doc.show(page.toggleSubtract)
     }
 
-    Doc.hide(page.validAddr, page.sendErr, page.maxSendDisplay, page.sendTokenMsgBox)
-    page.sendAddr.classList.remove('invalid')
+    Doc.hide(page.sendErr, page.maxSendDisplay, page.sendTokenMsgBox)
+    page.sendAddr.classList.remove('border-danger', 'border-success')
     page.sendAddr.value = ''
     page.sendAmt.value = ''
     const xcRate = app().fiatRatesMap[assetID]