From 425b6ae6dda6076522b58c2d59d67321e58bf97d Mon Sep 17 00:00:00 2001
From: ProMate04 <ProMate04@users.noreply.github.com>
Date: Wed, 7 Dec 2022 00:36:25 +0100
Subject: [PATCH] Integrated MetaMask into the UI elements

---
 CCTF_Solutions_main/frontend/leaderboard.html | 27 ++++++++++++++++-
 CCTF_Solutions_main/frontend/sendflag.html    | 30 +++++++++++++++++--
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/CCTF_Solutions_main/frontend/leaderboard.html b/CCTF_Solutions_main/frontend/leaderboard.html
index 366c429..b4902c7 100644
--- a/CCTF_Solutions_main/frontend/leaderboard.html
+++ b/CCTF_Solutions_main/frontend/leaderboard.html
@@ -20,7 +20,7 @@
       <li><a href="sendflag.html">Send Flag</a></li>
     </ul>
     <ul class="nav navbar-nav navbar-right">
-      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</a></li>
+      <li><button class="btn btn-default navbar-btn" id="metamask-login" type="button" style="margin-right:20px"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</button></li>
       <!--<button class="btn btn-danger navbar-btn">Button</button>-->
     </ul>
   </div>
@@ -56,5 +56,30 @@
   </table>
 </div>
 
+<script type='module'>
+  window.addEventListener("load", function () {
+    let loginbutton = document.getElementById('metamask-login');
+    let accounts;
+      ethereum.request({method: 'eth_requestAccounts'}).then(accounts => {
+        console.log(accounts);
+        if (accounts.length > 0) {
+          loginbutton.textContent = accounts[0];
+          loginbutton.disabled = true;
+        }
+      });
+    });
+
+  loginbutton.addEventListener('click', event => {
+  let account;
+  ethereum.request({method: 'eth_requestAccounts'}).then(accounts =>{
+    account = accounts[0];
+    //alert(account);
+    console.log(account);
+    loginbutton.textContent = account;
+    loginbutton.disabled = true;
+  })
+})
+</script>
+
 </body>
 </html>
diff --git a/CCTF_Solutions_main/frontend/sendflag.html b/CCTF_Solutions_main/frontend/sendflag.html
index f40316f..e9be996 100644
--- a/CCTF_Solutions_main/frontend/sendflag.html
+++ b/CCTF_Solutions_main/frontend/sendflag.html
@@ -22,7 +22,7 @@
     </ul>
     <ul class="nav navbar-nav navbar-right">
       
-      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</a></li>
+      <li><button class="btn btn-default navbar-btn" id="metamask-login" type="button" style="margin-right:20px"><span class="glyphicon glyphicon-log-in"></span> Connect Wallet</button></li>
       <!--<button class="btn btn-danger navbar-btn">Button</button>-->
     </ul>
   </div>
@@ -30,16 +30,40 @@
   
 <div class="container" style="margin-top:50px">
   <h1>Send the flag</h1>
-  <form class="form-inline">
+  <form class="form-inline" id="flag-form" style="display:none">
     <div class="form-group">
       <label for="flagbox">Flag:</label>
       <input type="text" class="form-control" id="flagbox">
     </div>
-    <button type="button" class="btn btn-default" id="submitFlagBtn">Submit Flag</button>
+    <button id="submitFlagBtn" type="button" class="btn btn-default">Submit Flag</button>
 </form>
 </div>
 
+<script type='module'>
+  window.addEventListener("load", function () {
+    let loginbutton = document.getElementById('metamask-login');
+    let accounts;
+      ethereum.request({method: 'eth_requestAccounts'}).then(accounts => {
+        console.log(accounts);
+        if (accounts.length > 0) {
+          document.getElementById('flag-form').style.display = "block";
+          loginbutton.textContent = accounts[0];
+          loginbutton.disabled = true;
+        }
+      });
+    });
 
+  let loginbutton = document.getElementById('metamask-login');
+  loginbutton.addEventListener('click', event => {
+    let account;
+    ethereum.request({method: 'eth_requestAccounts'}).then(accounts =>{
+      account = accounts[0];
+      document.getElementById('flag-form').style.display = "block";
+      loginbutton.textContent = account;
+      loginbutton.disabled = true;
+    })
+  })
+</script>
 
 </body>
 </html>