ui-gui: archive: added the show/hide input for password and clientSecret

dlr-eoc · Apr 12, 2024 · d5a354b · d5a354b
1 parent 8f3ac56
commit d5a354b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/ui/gui/src/main/resources/messages_de.properties b/ui/gui/src/main/resources/messages_de.properties
@@ -100,9 +100,9 @@ productarchive = Produktarchiv
 productarchive-archive-type = Archiv-Typ
 productarchive-available-product-classes = Verfügbare Produktklassen
 productarchive-base-uri = Basis-URI
-productarchive-code = Code
 productarchive-client-id = Klient Id
 productarchive-client-secret = Kundengehemnis
+productarchive-code = Code
 productarchive-context = Kontext
 productarchive-name = Name
 productarchive-send-auth-in-body = Auth Im Body senden

diff --git a/ui/gui/src/main/resources/messages_en.properties b/ui/gui/src/main/resources/messages_en.properties
@@ -100,9 +100,9 @@ productarchive = Product Archive
 productarchive-archive-type = Archive Type
 productarchive-available-product-classes = Available Product Classes
 productarchive-base-uri = Base URI
-productarchive-code = Code
 productarchive-client-id = Client Id
 productarchive-client-secret = Client Secret
+productarchive-code = Code
 productarchive-context = Context
 productarchive-name = Name
 productarchive-send-auth-in-body = Send Auth in Body

diff --git a/ui/gui/src/main/resources/templates/productarchive-show.html b/ui/gui/src/main/resources/templates/productarchive-show.html
@@ -162,10 +162,10 @@ <h5>
 										<td class="cursorpointer first-row no-left-border"
 											th:onclick="'toggleProductArchive('+${productarchive.id}+')'"
 											th:text="${productarchive.id}"></td>
-										<td class="first-row" th:text="${productarchive.code}"></td>	
-										<td class="first-row" th:text="${productarchive.name}"></td>
-										<td class="first-row" th:text="${productarchive.archiveType}"></td>
-										<td class="first-row" th:text="${productarchive.baseUri}"></td>
+										<td class="first-row" th:text="${productarchive?.code}"></td>	
+										<td class="first-row" th:text="${productarchive?.name}"></td>
+										<td class="first-row" th:text="${productarchive?.archiveType}"></td>
+										<td class="first-row" th:text="${productarchive?.baseUri}"></td>
 
 									</tr>
 								</tbody>
@@ -185,10 +185,10 @@ <h5>
 									<!-- Hidden content -->
 									<tr class="proseo-row-divider">
 										<td class="tr-rowspan">&nbsp;</td>
-										<td class="first-row" th:text="${productarchive.context}"></td>
-										<td class="first-row" th:text="${productarchive.tokenRequired}"></td>
-										<td class="first-row" th:text="${productarchive.tokenUri}"></td>
-										<td class="first-row" th:text="${productarchive.username}"></td>
+										<td class="first-row" th:text="${productarchive?.context}"></td>
+										<td class="first-row" th:text="${productarchive?.tokenRequired}"></td>
+										<td class="first-row" th:text="${productarchive?.tokenUri}"></td>
+										<td class="first-row" th:text="${productarchive?.username}"></td>
 									</tr>
 
 									<!-- More hidden table headers -->
@@ -203,10 +203,22 @@ <h5>
 									<!-- More hidden table content -->
 									<tr class="proseo-row-divider">
 										<td class="tr-rowspan">&nbsp;</td>
-										<td class="first-row" th:text="${productarchive.password}"></td>
-										<td class="first-row" th:text="${productarchive.clientId}"></td>
-										<td class="first-row" th:text="${productarchive.clientSecret}"></td>										
-										<td class="first-row" th:text="${productarchive.sendAuthInBody}"></td>
+
+										<td class="first-row"><input th:id="'passwordinput' + ${productarchive?.id}" th:value="${productarchive?.password}" type="password" readonly></input>
+											<a class="eye" th:id="'passwordeye' + ${productarchive?.id}" th:onclick="'showHidePassword(' + ${productarchive?.id} + ')'">
+										   		<span data-feather="eye"></span>
+										   	</a>
+										</td>
+
+										<td class="first-row" th:text="${productarchive?.clientId}"></td>
+
+									    <td class="first-row"><input th:id="'clientsecretinput' + ${productarchive?.id}" th:value="${productarchive?.clientSecret}" type="password" readonly></input> 
+									  		<a class="eye" th:id="'clientsecreteye' + ${productarchive?.id}" th:onclick="'showHideClientSecret(' + ${productarchive?.id} + ')'">
+									      		<span data-feather="eye"></span>
+									     	</a>
+									    </td>
+
+										<td class="first-row" th:text="${productarchive?.sendAuthInBody}"></td>
 									</tr>				
 
 								</tbody>
@@ -258,6 +270,30 @@ <h5>
 		var name = null;
 		var archiveType = null;
 
+		function showHideClientSecret(id) {
+		      if (document.getElementById('clientsecretinput' + id).type == 'password' ) { 
+		          document.getElementById('clientsecretinput' + id).type = 'text';
+		          document.getElementById('clientsecreteye' + id).innerHTML = '<span data-feather="eye-off"></span>';
+		          feather.replace();
+		      } else {
+			      document.getElementById('clientsecretinput' + id).type = 'password';
+		          document.getElementById('clientsecreteye' + id).innerHTML = '<span data-feather="eye"></span>';
+		          feather.replace();
+		      }
+	    };
+
+	    function showHidePassword(id) {
+	        if (document.getElementById('passwordinput' + id).type == 'password' ) { 
+	            document.getElementById('passwordinput' + id).type = 'text';
+	            document.getElementById('passwordeye' + id).innerHTML = '<span data-feather="eye-off"></span>';
+	            feather.replace();
+	        } else {
+	            document.getElementById('passwordinput' + id).type = 'password';
+	            document.getElementById('passwordeye' + id).innerHTML = '<span data-feather="eye"></span>';
+	            feather.replace();
+	        }
+	    };
+
 		// Function to fetch objects from the REST controller
 		function updateTable(newPage) {
 			currentPage = newPage;