From 4cc74c74d124082900e7145725a4b3d17f19b1b4 Mon Sep 17 00:00:00 2001
From: "fryorcraken.eth" <git@fryorcraken.xyz>
Date: Mon, 26 Sep 2022 15:01:33 +1000
Subject: [PATCH] feat: disable buttons using HTML

---
 light-js/index.html | 14 ++++----------
 relay-js/index.html |  8 ++------
 rln-js/index.html   | 13 ++++---------
 3 files changed, 10 insertions(+), 25 deletions(-)
diff --git a/light-js/index.html b/light-js/index.html
index 519a009..58d6aea 100644
--- a/light-js/index.html
+++ b/light-js/index.html
@@ -22,14 +22,14 @@
 <input id='remote-multiaddr'
        type='text'
        value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm">
-<button id='dial' type='button'>Dial</button>
+<button id='dial' type='button' disabled>Dial</button>
 <br/>
-<button id='subscribe' type='button'>Subscribe with Filter</button>
-<button id='unsubscribe' type='button'>Unsubscribe with Filter</button>
+<button id='subscribe' type='button' disabled>Subscribe with Filter</button>
+<button id='unsubscribe' type='button' disabled>Unsubscribe with Filter</button>
 <br/>
 <label for='textInput'>Message text</label>
 <input id='textInput' placeholder='Type your message here' type='text'>
-<button id='sendButton' type='button'>Send message using Light Push</button>
+<button id='sendButton' type='button' disabled>Send message using Light Push</button>
 <br/>
 <div id="messages"></div>
 
@@ -64,12 +64,6 @@
     let messages = [];
     let unsubscribe;
 
-    dialButton.disabled = true;
-    subscribeButton.disabled = true;
-    textInput.disabled = true;
-    sendButton.disabled = true;
-    unsubscribeButton.disabled = true;
-
     const updateMessages = (msgs, div) => {
         div.innerHTML = "<ul>"
         messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")
diff --git a/relay-js/index.html b/relay-js/index.html
index 8ec8633..4f15a91 100644
--- a/relay-js/index.html
+++ b/relay-js/index.html
@@ -13,8 +13,8 @@
 <div id='status'></div>
 
 <label for='textInput'>Message text</label>
-<input id='textInput' placeholder='Type your message here' type='text'>
-<button id='sendButton' type='button'>Send Message using Relay</button>
+<input id='textInput' placeholder='Type your message here' type='text' disabled>
+<button id='sendButton' type='button' disabled>Send Message using Relay</button>
 
 <div><h1>Messages</h1></div>
 <div id='messages'></div>
@@ -36,10 +36,6 @@
     const textInput = document.getElementById('textInput');
     const sendButton = document.getElementById('sendButton');
 
-    // Keep it disabled until Waku node is ready
-    textInput.disabled = true;
-    sendButton.disabled = true;
-
     // Every Waku Message has a content topic that categorizes it.
     // It is always encoded in clear text.
     // Recommendation: `/dapp-name/version/functionality/codec`
diff --git a/rln-js/index.html b/rln-js/index.html
index c6048e9..8908b7d 100644
--- a/rln-js/index.html
+++ b/rln-js/index.html
@@ -10,7 +10,7 @@
 <body>
 
 <div><h1>RLN</h1>
-    <button id='generate-credentials' type='button'>Generate RLN Credentials</button>
+    <button id='generate-credentials' type='button' disabled>Generate RLN Credentials</button>
     <div><h2>Credentials</h2>
         <div><h3>Key</h3>
             <div id="key"></div>
@@ -34,11 +34,11 @@
     <input id='remote-multiaddr'
            type='text'
            value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm">
-    <button id='dial' type='button'>Dial</button>
+    <button id='dial' type='button' disabled>Dial</button>
     <br/>
     <label for='textInput'>Message text</label>
-    <input id='textInput' placeholder='Type your message here' type='text'>
-    <button id='sendButton' type='button'>Send message using Light Push</button>
+    <input id='textInput' placeholder='Type your message here' type='text' disabled>
+    <button id='sendButton' type='button' disabled>Send message using Light Push</button>
     <br/>
     <div id="messages"></div>
 </div>
@@ -63,7 +63,6 @@
     const keyDiv = document.getElementById('key');
     const commitmentDiv = document.getElementById('commitment');
 
-    generateCredsButton.disabled = true;
     const rlnInstance = await create();
     generateCredsButton.disabled = false;
 
@@ -89,10 +88,6 @@
     const encoder = new EncoderV0(ContentTopic);
     let messages = [];
 
-    dialButton.disabled = true;
-    textInput.disabled = true;
-    sendButton.disabled = true;
-
     const updateMessages = (msgs, div) => {
         div.innerHTML = "<ul>"
         messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")
