From 91b7f3980cc37b9a64e7b6716e7cd551795fff62 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Mon, 14 Aug 2023 22:48:30 +0100
Subject: [PATCH] Change account icons

---
 src/main/resources/static/images/eye-slash.svg |  5 +++++
 src/main/resources/static/images/eye.svg       |  4 ++++
 src/main/resources/templates/account.html      | 14 +++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/main/resources/static/images/eye-slash.svg
 create mode 100644 src/main/resources/static/images/eye.svg

diff --git a/src/main/resources/static/images/eye-slash.svg b/src/main/resources/static/images/eye-slash.svg
new file mode 100644
index 000000000..c5208375a
--- /dev/null
+++ b/src/main/resources/static/images/eye-slash.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
+  <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+  <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+  <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/images/eye.svg b/src/main/resources/static/images/eye.svg
new file mode 100644
index 000000000..412ff6928
--- /dev/null
+++ b/src/main/resources/static/images/eye.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
+  <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+</svg>
\ No newline at end of file
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html
index 78d5bdddb..96421b5e8 100644
--- a/src/main/resources/templates/account.html
+++ b/src/main/resources/templates/account.html
@@ -71,9 +71,14 @@
 					                	<button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()"> 
 					                    	<img src="images/clipboard.svg" alt="Copy" style="height:20px;">
 					                	</button>
-					                    <button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">👁️ Show</button>
-					                    <button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">🔄 Refresh</button>
-					                    
+					                    <button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">
+										    <img id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
+										</button>
+										<button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
+										    <img id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
+										</button>
+										
+					                  
 					                </div>
 					            </div>
 					        </div>
@@ -90,11 +95,14 @@
 					    function showApiKey() {
 					        const apiKeyElement = document.getElementById("apiKey");
 					        const copyBtn = document.getElementById("copyBtn");
+					        const eyeIcon = document.getElementById("eyeIcon");
 					        if (apiKeyElement.type === "password") {
 					        	apiKeyElement.type = "text";
+					        	eyeIcon.src = "images/eye-slash.svg";
 					        	copyBtn.disabled = false;  // Enable copy button when API key is visible
 					        } else {
 					            apiKeyElement.type = "password";
+					            eyeIcon.src = "images/eye.svg";
 					            copyBtn.disabled = true;  // Disable copy button when API key is hidden
 					        }
 					    }