From c76fe88b2dbef817381f586e9b6a82e7a61435d9 Mon Sep 17 00:00:00 2001 From: Anirban Singha Date: Sat, 21 Dec 2024 17:35:20 +0530 Subject: [PATCH 1/2] feat: add password visibility toggle feature in API development portal --- packages/api/playground/index.html | 24 +++++++++++++ packages/api/playground/playground.js | 52 +++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/packages/api/playground/index.html b/packages/api/playground/index.html index 609135019..5e68bdca3 100644 --- a/packages/api/playground/index.html +++ b/packages/api/playground/index.html @@ -24,6 +24,13 @@ .playground-output #output{ white-space: pre-wrap; } + #togglePassword { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + vertical-align: middle; + } @@ -43,6 +50,23 @@
+ + + + +
diff --git a/packages/api/playground/playground.js b/packages/api/playground/playground.js index e280d9a4c..20dbe7731 100644 --- a/packages/api/playground/playground.js +++ b/packages/api/playground/playground.js @@ -1,4 +1,5 @@ import EmbeddedChatApi from '../src/EmbeddedChatApi'; + let messages = []; async function saveToken(token) { localStorage.setItem("ec_token", token); @@ -96,6 +97,7 @@ const callApi = async (e) => { const result = await api[fn].apply(api, params); printResult(result); } + window.addEventListener('DOMContentLoaded', () => { console.log('Ready') document.getElementById("loginWithPassword").addEventListener("click", loginWithPassword) @@ -113,8 +115,58 @@ window.addEventListener('DOMContentLoaded', () => { document.getElementById("logoutBtn").addEventListener("click", () => api.auth.logout()) document.getElementById("call-api").addEventListener("click", callApi) + const passwordField = document.getElementById('password') + const togglePassword = document.getElementById('togglePassword') + togglePassword.addEventListener('click',() => toggle(passwordField, togglePassword)) }) +let isPasswordVisible = false + +const toggle = (passwordField, togglePassword) => { + isPasswordVisible = !isPasswordVisible + + if(isPasswordVisible){ + passwordField.type = "text" + togglePassword.innerHTML = ` + + + + `; + } else { + passwordField.type = "password"; + + togglePassword.innerHTML = ` + + + + `; + } +} + function escapeHTML(str) { return str.replace( /[&<>'"]/g, From eb9451e16f82293156ba39a981e6e7396fb3a64d Mon Sep 17 00:00:00 2001 From: Anirban Singha Date: Sat, 28 Dec 2024 16:15:44 +0530 Subject: [PATCH 2/2] Simplify changes --- packages/api/playground/index.html | 23 ++++------------- packages/api/playground/playground.js | 37 ++------------------------- 2 files changed, 7 insertions(+), 53 deletions(-) diff --git a/packages/api/playground/index.html b/packages/api/playground/index.html index 5e68bdca3..d850068e9 100644 --- a/packages/api/playground/index.html +++ b/packages/api/playground/index.html @@ -28,8 +28,9 @@ display: inline-flex; align-items: center; justify-content: center; - cursor: pointer; + cursor: pointer; vertical-align: middle; + width: 50px; } @@ -50,23 +51,9 @@
- - - - - +
diff --git a/packages/api/playground/playground.js b/packages/api/playground/playground.js index 20dbe7731..d57201842 100644 --- a/packages/api/playground/playground.js +++ b/packages/api/playground/playground.js @@ -127,43 +127,10 @@ const toggle = (passwordField, togglePassword) => { if(isPasswordVisible){ passwordField.type = "text" - togglePassword.innerHTML = ` - - - - `; + togglePassword.innerText = "Hide"; } else { passwordField.type = "password"; - - togglePassword.innerHTML = ` - - - - `; + togglePassword.innerText = "Show"; } }