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 <[email protected]>
RocketChat · Jan 1, 2025 · 4705888 · 4705888
1 parent 051dfe3
commit 4705888
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git 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;
+    	}
 	</style>
 </head>
 <body>
@@ -43,6 +51,9 @@
 			<div class="input-group">
 				<input type="text" id="email" placeholder="Email">
 				<input type="password" id="password" placeholder="Password">
+				<button id="togglePassword" class="toggle-icon">
+					Show
+				</button>
 				<button id="loginWithPassword">Sign in</button>
 			</div>
 			<div class="input-group">

diff --git 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,