From d5b910bfa5e146986638c6e8dffe8fa3f40b41ff Mon Sep 17 00:00:00 2001
From: Ernesto Castellotti <ernesto@castellotti.net>
Date: Fri, 7 Jun 2024 19:35:23 +0200
Subject: [PATCH] Improved UI to make it clear that the browser is not
 supported

Some users do not understand that the browser does not support WebSerial because on the page https://hack-gpon.org/ont-huawei-ma5671a-ymodem/ pressing the button opens the flash window, with this PR the button is deactivated if the browser is not supported and the the strikethrough out character is applied to button text
---
 _includes/root_lantiq.html                 | 2 ++
 _includes/ymodem_lantiq.html               | 4 +++-
 _ont/ont-fs-com-gpon-onu-stick-with-mac.md | 3 +--
 _ont/ont-huawei-ma5671a-root-web.md        | 3 +--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/_includes/root_lantiq.html b/_includes/root_lantiq.html
index fd8912c7..4a0bd13a 100644
--- a/_includes/root_lantiq.html
+++ b/_includes/root_lantiq.html
@@ -46,6 +46,8 @@ <h2>Root status</h2>
         document.getElementById('start-button').disabled = false;
     } else {
         document.getElementById('browser-error').style.display = 'block';
+        document.getElementById('start-button').disabled = true;
+        document.getElementById('start-button').innerHTML=document.getElementById('start-button').innerText.strike();
     }
     const acontroller = new AbortController();
     const cs = acontroller.signal;
diff --git a/_includes/ymodem_lantiq.html b/_includes/ymodem_lantiq.html
index dffbc32a..d8ee215a 100644
--- a/_includes/ymodem_lantiq.html
+++ b/_includes/ymodem_lantiq.html
@@ -44,6 +44,8 @@ <h2>Flash firmware</h2>
         document.getElementById('flash-start-button').disabled = false;
     } else {
         document.getElementById('flash-browser-error').style.display = 'block';
+        document.getElementById('flash-start-button').disabled = true;
+        document.getElementById('flash-start-button').innerHTML=document.getElementById('flash-start-button').innerText.strike()
     }
     const acontroller = new AbortController();
     const cs = acontroller.signal;
@@ -202,4 +204,4 @@ <h2>Flash firmware</h2>
             }
         });
     };
-</script>
\ No newline at end of file
+</script>
diff --git a/_ont/ont-fs-com-gpon-onu-stick-with-mac.md b/_ont/ont-fs-com-gpon-onu-stick-with-mac.md
index 9e4b5c58..9894bac6 100644
--- a/_ont/ont-fs-com-gpon-onu-stick-with-mac.md
+++ b/_ont/ont-fs-com-gpon-onu-stick-with-mac.md
@@ -147,9 +147,8 @@ When you are ready with everything plugged in you need to press the button below
 
 {: .text-center .fs-6 }
 <button id="start-button" class="btn btn-blue" data-jtd-toggle="modal" data-jtd-target="#root-modal" disabled>Start emergency unlock!</button>
-{% include root_lantiq.html modelName="FS GPON ONU Stick" unlockHuaweiShell=false %}
-
 <div id="browser-error" style="display:none">{% include alert.html content="This browser is not compatible with the emergency unlock procedure. See the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility'>Browser compatibility</a>" alert="Note"  icon="svg-warning" color="red" %}</div>
+{% include root_lantiq.html modelName="FS GPON ONU Stick" unlockHuaweiShell=false %}
 <noscript>
 {% include alert.html content="Your browser does not support JavaScript!" alert="Note"  icon="svg-warning" color="red" %}
 </noscript>
diff --git a/_ont/ont-huawei-ma5671a-root-web.md b/_ont/ont-huawei-ma5671a-root-web.md
index 99e640d3..6a17090a 100644
--- a/_ont/ont-huawei-ma5671a-root-web.md
+++ b/_ont/ont-huawei-ma5671a-root-web.md
@@ -28,9 +28,8 @@ Connect the TTL adapter to the computer, once done press the following button. A
 
 {: .text-center .fs-6 }
 <button id="start-button" class="btn btn-blue" data-jtd-toggle="modal" data-jtd-target="#root-modal" disabled>Start root!</button>
-{% include root_lantiq.html modelName="Huawei MA5671A" unlockHuaweiShell=true %}
-
 <div id="browser-error" style="display:none">{% include alert.html content="This browser is not compatible with the web-root procedure. See the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility'>Browser compatibility</a>" alert="Note"  icon="svg-warning" color="red" %}</div>
+{% include root_lantiq.html modelName="Huawei MA5671A" unlockHuaweiShell=true %}
 <noscript>
 {% include alert.html content="Your browser does not support JavaScript!" alert="Note"  icon="svg-warning" color="red" %}
 </noscript>