feat: add password visibility toggle feature in API development portal

RocketChat · Dec 21, 2024 · c76fe88 · c76fe88
1 parent 1058405
commit c76fe88
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git 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;
+    	}
 	</style>
 </head>
 <body>
@@ -43,6 +50,23 @@
 			<div class="input-group">
 				<input type="text" id="email" placeholder="Email">
 				<input type="password" id="password" placeholder="Password">
+				<span id="togglePassword" class="toggle-icon">
+					<svg
+					height="20"
+					width="20"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+					/>
+					</svg>
+				</span>
 				<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,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 = `
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.575 3.012 9.964 7.183a1.012 1.012 0 0 1 0 .639C20.575 16.488 16.638 19.5 12 19.5c-4.638 0-8.575-3.012-9.964-7.183ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
+				/>
+			</svg>
+		`;
+	} else {
+		passwordField.type = "password";	
+
+		togglePassword.innerHTML = `
+			<svg
+				height="20"
+				width="20"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+				/>
+			</svg>
+		`;
+	}	
+}
+
 function escapeHTML(str) {
   return str.replace(
     /[&<>'"]/g,