feat: add password ändern button (#82)

Fix: A password can be changed by a "password ändern" button
Co-authored-by: Maximilian Laue <65015235+mlaue-tech@users.noreply.github.com>

Author: lbenthins

src/main/java/app/coronawarn/verification/portal/controller/VerificationPortalController.java

@@ -90,6 +90,13 @@ public class VerificationPortalController {
    */
   private static final String ATTR_TELETAN = "teleTAN";
   private static final String ATTR_USER = "userName";
+  private static final String ATTR_PW_RESET_URL = "pwResetUrl";
+
+  /**
+   * The Keycloak password reset URL.
+   */
+  @Value("${keycloak-pw.reset-url}")
+  private String pwResetUrl;
 
   private static final Map<String, LocalDateTime> rateLimitingUserMap = new ConcurrentHashMap<String, LocalDateTime>();
 
@@ -133,6 +140,7 @@ public String start(HttpServletRequest request, Model model) {
 
     if (model != null) {
       model.addAttribute(ATTR_USER, user.replace("<", "").replace(">", ""));
+      model.addAttribute(ATTR_PW_RESET_URL, pwResetUrl);
     }
 
     HttpSession session = request.getSession();
@@ -176,9 +184,9 @@ public String teletan(HttpServletRequest request, Model model) {
       session.setAttribute(SESSION_ATTR_TELETAN, "TeleTAN");
     }
     if (model != null) {
-      // set thymeleaf attributes (teleTAN and user name)
       model.addAttribute(ATTR_TELETAN, teleTan.getValue().replace("<", "").replace(">", ""));
       model.addAttribute(ATTR_USER, user.replace("<", "").replace(">", ""));
+      model.addAttribute(ATTR_PW_RESET_URL, pwResetUrl);
     }
     return template;
   }

src/main/resources/application.yml

@@ -17,6 +17,9 @@ keycloak:
   realm: cwa
   resource: verification-portal
 
+keycloak-pw:
+  reset-url: http://localhost:8080/auth/realms/cwa/account/password
+
 server:
   error:
     whitelabel:

src/main/resources/static/logout.js

@@ -1,4 +1,6 @@
 function showUserPopup() {
-  var popup = document.getElementById("logout");
-  popup.classList.toggle("show");
+  var popup_logout = document.getElementById("logout");
+  var popup_password_reset = document.getElementById("password_reset");
+  popup_logout.classList.toggle("show");
+  popup_password_reset.classList.toggle("show");
 }

src/main/resources/static/teletan.css

@@ -171,21 +171,29 @@
  	color: #262626;	
 }
 
-.button-logout {
+.button-menu {
 	position: fixed;
  	right: 40px;
-	top: 150px;
-	width: 100px; 
 	visibility: hidden;
  	font-family: "Telegrotesk Next Regular";
  	font-size: 18px;
- 	color: #262626;	
+ 	color: #262626;
 	border-width: 1px;
 	border-radius: 4px;
 	border-color: #dddddd;
 	background-color: #ffffff;
 }
 
+.button-logout {
+	top: 150px;
+	width: 100px;
+}
+
+.button-pw-reset {
+	top: 180px;
+	width: 140px;
+}
+
 .show {
 	visibility: visible;
 }

src/main/resources/templates/start.html

@@ -43,10 +43,10 @@
   </tr>
 </table>
 <form action="/cwa/logout" method="post">
-	<button class="button-logout" id="logout">Abmelden</button>
+	<button class="button-menu button-logout" id="logout">Abmelden</button>
   <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
 </form>
-
+<a th:href="${pwResetUrl}" target="_blank"><button class="button-menu button-pw-reset" id="password_reset">Passwort Ändern</button></a>
 <!-- END page specific content  -->
 </body>
 </html>

src/main/resources/templates/teletan.html

@@ -46,9 +46,10 @@
   </tr>
 </table>
 <form action="/cwa/logout" method="post">
-	<button class="button-logout" id="logout">Abmelden</button>
+  <button class="button-menu button-logout" id="logout">Abmelden</button>
   <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
 </form>
+<a th:href="${pwResetUrl}" target="_blank"><button class="button-menu button-pw-reset" id="password_reset">Passwort Ändern</button></a>
 
 <!-- END page specific content  -->
 </body>