feat: disable buttons using HTML

This commit is contained in:
fryorcraken.eth 2022-09-26 15:01:33 +10:00
parent efd0a47bd4
commit 4cc74c74d1
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
3 changed files with 10 additions and 25 deletions

View File

@ -22,14 +22,14 @@
<input id='remote-multiaddr' <input id='remote-multiaddr'
type='text' type='text'
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"> 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/> <br/>
<button id='subscribe' type='button'>Subscribe with Filter</button> <button id='subscribe' type='button' disabled>Subscribe with Filter</button>
<button id='unsubscribe' type='button'>Unsubscribe with Filter</button> <button id='unsubscribe' type='button' disabled>Unsubscribe with Filter</button>
<br/> <br/>
<label for='textInput'>Message text</label> <label for='textInput'>Message text</label>
<input id='textInput' placeholder='Type your message here' type='text'> <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/> <br/>
<div id="messages"></div> <div id="messages"></div>
@ -64,12 +64,6 @@
let messages = []; let messages = [];
let unsubscribe; let unsubscribe;
dialButton.disabled = true;
subscribeButton.disabled = true;
textInput.disabled = true;
sendButton.disabled = true;
unsubscribeButton.disabled = true;
const updateMessages = (msgs, div) => { const updateMessages = (msgs, div) => {
div.innerHTML = "<ul>" div.innerHTML = "<ul>"
messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>") messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")

View File

@ -13,8 +13,8 @@
<div id='status'></div> <div id='status'></div>
<label for='textInput'>Message text</label> <label for='textInput'>Message text</label>
<input id='textInput' placeholder='Type your message here' type='text'> <input id='textInput' placeholder='Type your message here' type='text' disabled>
<button id='sendButton' type='button'>Send Message using Relay</button> <button id='sendButton' type='button' disabled>Send Message using Relay</button>
<div><h1>Messages</h1></div> <div><h1>Messages</h1></div>
<div id='messages'></div> <div id='messages'></div>
@ -36,10 +36,6 @@
const textInput = document.getElementById('textInput'); const textInput = document.getElementById('textInput');
const sendButton = document.getElementById('sendButton'); 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. // Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text. // It is always encoded in clear text.
// Recommendation: `/dapp-name/version/functionality/codec` // Recommendation: `/dapp-name/version/functionality/codec`

View File

@ -10,7 +10,7 @@
<body> <body>
<div><h1>RLN</h1> <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><h2>Credentials</h2>
<div><h3>Key</h3> <div><h3>Key</h3>
<div id="key"></div> <div id="key"></div>
@ -34,11 +34,11 @@
<input id='remote-multiaddr' <input id='remote-multiaddr'
type='text' type='text'
value="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"> 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/> <br/>
<label for='textInput'>Message text</label> <label for='textInput'>Message text</label>
<input id='textInput' placeholder='Type your message here' type='text'> <input id='textInput' placeholder='Type your message here' type='text' disabled>
<button id='sendButton' type='button'>Send message using Light Push</button> <button id='sendButton' type='button' disabled>Send message using Light Push</button>
<br/> <br/>
<div id="messages"></div> <div id="messages"></div>
</div> </div>
@ -63,7 +63,6 @@
const keyDiv = document.getElementById('key'); const keyDiv = document.getElementById('key');
const commitmentDiv = document.getElementById('commitment'); const commitmentDiv = document.getElementById('commitment');
generateCredsButton.disabled = true;
const rlnInstance = await create(); const rlnInstance = await create();
generateCredsButton.disabled = false; generateCredsButton.disabled = false;
@ -89,10 +88,6 @@
const encoder = new EncoderV0(ContentTopic); const encoder = new EncoderV0(ContentTopic);
let messages = []; let messages = [];
dialButton.disabled = true;
textInput.disabled = true;
sendButton.disabled = true;
const updateMessages = (msgs, div) => { const updateMessages = (msgs, div) => {
div.innerHTML = "<ul>" div.innerHTML = "<ul>"
messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>") messages.forEach(msg => div.innerHTML += "<li>" + msg + "</li>")