From 470588888738fbb07d1e96cb64f80e7e285aac60 Mon Sep 17 00:00:00 2001 From: Anirban Singha <143536290+SinghaAnirban005@users.noreply.github.com> Date: Wed, 1 Jan 2025 19:24:22 +0530 Subject: [PATCH] feat: add password visibility toggle feature in API development portal (#706) * feat: add password visibility toggle feature in API development portal * Simplify changes --------- Co-authored-by: Zishan Ahmad --- packages/api/playground/index.html | 11 +++++++++++ packages/api/playground/playground.js | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/api/playground/index.html b/packages/api/playground/index.html index 609135019..d850068e9 100644 --- a/packages/api/playground/index.html +++ b/packages/api/playground/index.html @@ -24,6 +24,14 @@ .playground-output #output{ white-space: pre-wrap; } + #togglePassword { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + vertical-align: middle; + width: 50px; + } @@ -43,6 +51,9 @@
+
diff --git a/packages/api/playground/playground.js b/packages/api/playground/playground.js index e280d9a4c..d57201842 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,25 @@ 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.innerText = "Hide"; + } else { + passwordField.type = "password"; + togglePassword.innerText = "Show"; + } +} + function escapeHTML(str) { return str.replace( /[&<>'"]/g,