Feature password reset multi lang

Keycloak/caritas-theme/login/resources/css/caritas.css

@@ -156,45 +156,3 @@ body {
 .pf-c-alert__icon {
     display: inline-block;
 }
-
-#kc-locale {
-    margin-bottom: 20px;
-}
-
-#kc-locale ul {
-    display: none;
-    position: absolute;
-    min-width: 150px;
-    padding: 0;
-    background-color: #cc1e1c;
-    list-style-type: none;
-}
-
-#kc-locale-dropdown{
-    display: inline-block;
-    padding:10px;
-
-}
-
-#kc-locale-dropdown:hover ul {
-    display:block;
-    cursor: pointer;
-    padding: 10px;
-}
-
-#kc-locale-dropdown a {
-    color: #fff;
-    font-weight: strong;
-    background-color: #cc1e1c;
-    text-align: right;
-}
-
-#kc-current-locale-link {
-    padding: 10px;
-    width: 150px;
-}
-
-a#kc-current-locale-link::after {
-    content: " \2c5";
-    margin-left: 5px
-}

Keycloak/caritas-theme/login/template.ftl

@@ -44,7 +44,7 @@
         </div>
         <div class="${properties.kcFormCardClass!}">
             <header class="${properties.kcFormHeaderClass!}">
-                <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
+                <#if false && realm.internationalizationEnabled && locale.supported?size gt 1>
                     <div class="${properties.kcLocaleMainClass!}" id="kc-locale">
                         <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
                             <div id="kc-locale-dropdown" class="${properties.kcLocaleDropDownClass!}">

Keycloak/diakonie-theme/email/html/otp-email.ftl

@@ -44,12 +44,15 @@
           <td cellspacing="0" cellpadding="0" colspan="2"
               style="text-align: left; padding: 36px; color: #3F373F;font-size: 16px; line-height: 24px; font-family: 'Open Sans', 'OpenSans', 'Arial', 'sans-serif';">
             <!-- message -->
-            <b>Liebe(r) Benutzer:in,</b>
+            <b>${msg("emailSalutation")}</b>
             <br/><br/>
-            Ihr E-Mail-Code lautet <span
-                style="color: #5A2572FF"><strong>${kcSanitize(msg("emailCodeBody", otp))?no_esc}</strong></span>
-            und ist für <span>${kcSanitize(msg("emailTtlBody", ttl))?no_esc}</span> Minuten
-            gültig.
+            <#assign otpText="<span style=\"color: #5A2572FF\"><strong>${otp}</strong></span>">
+            <#outputformat "plainText">
+              ${msg("emailTextBody", otpText, ttl)}
+            </#outputformat>
+            <br/><br/>
+            ${msg("emailSignature1")}<br/>
+            ${msg("emailSignature2")}
           </td>
         </tr>
       </table>

Keycloak/diakonie-theme/email/messages/messages_de.properties

@@ -1,4 +1,5 @@
 emailSubject=Ihr Zwei-Faktor-Authentifizierungscode
-emailCodeBody={0}
-emailTtlBody={0}
-emailTextBody=Liebe(r) Benutzer:in,\n\nDein E-Mail-Code lautet {0} und ist f�r {1} Minuten g�ltig.\n\nDein Team des\nOnline-Beratungsportals der Diakonie
+emailTextBody=Dein E-Mail-Code lautet {0} und ist f�r {1} Minuten g�ltig.
+emailSalutation=Liebe(r) Benutzer:in,
+emailSignature1=Dein Team des
+emailSignature2=Online-Beratungsportals der Diakonie

Keycloak/diakonie-theme/email/messages/messages_en.properties

@@ -1,4 +1,5 @@
-emailSubject=Your two-factor authentication code
-emailCodeBody={0}
-emailTtlBody={0}
-emailTextBody=Dear User,\n\nYour email code is {0} and is valid for {1} minutes.\n\nBest regards,\nYour Diakonie online portal team
+emailSubject=Your Two-Factor Authentication Code
+emailTextBody=Your email code is {0} and is valid for {1} minutes.
+emailSalutation=Dear User,
+emailSignature1=Best regards,
+emailSignature2=Your Diakonie online portal team

Keycloak/diakonie-theme/email/text/otp-email.ftl

@@ -1,2 +1,5 @@
 <#ftl output_format="plainText">
-${msg("emailTextBody", otp, ttl)}
+${msg("emailSalutation")}\n
+${msg("emailTextBody", otp, ttl)}\n
+${msg("emailSignature1")}
+${msg("emailSignature2")}

Keycloak/diakonie-theme/login/messages/messages_en.properties

@@ -0,0 +1 @@
+updatePasswordInfoText=Please choose a password of at least ten characters, one digit, and one special character to assure your data is safe.

Keycloak/diakonie-theme/login/resources/js/script.js

@@ -0,0 +1,24 @@
+function localeOf(url) {
+    let a = document.createElement('a');
+    a.href = url;
+    const params = new Proxy(new URLSearchParams(a.search), {
+        get: (searchParams, prop) => searchParams.get(prop),
+    });
+    return params["kc_locale"] || "de";
+}
+
+function changeLocale(url) {
+    document.cookie = "KEYCLOAK_LOCALE=" + localeOf(url);
+    window.location.href = url
+}
+
+window.onload = function () {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+
+    if (params.has("init")) {
+        params.delete("init");
+        let nextUrl = url.href.split('?')[0] + "?" + params.toString();
+        changeLocale(nextUrl);
+    }
+}

Keycloak/diakonie-theme/login/template.ftl

@@ -0,0 +1,154 @@
+<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
+    <!DOCTYPE html>
+    <html class="${properties.kcHtmlClass!}">
+
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <meta name="robots" content="noindex, nofollow">
+
+        <#if properties.meta?has_content>
+            <#list properties.meta?split(' ') as meta>
+                <meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
+            </#list>
+        </#if>
+        <title>${msg("loginTitle",(realm.displayName!''))}</title>
+        <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
+        <#if properties.stylesCommon?has_content>
+            <#list properties.stylesCommon?split(' ') as style>
+                <link href="${url.resourcesCommonPath}/${style}" rel="stylesheet" />
+            </#list>
+        </#if>
+        <#if properties.styles?has_content>
+            <#list properties.styles?split(' ') as style>
+                <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
+            </#list>
+        </#if>
+        <#if properties.scripts?has_content>
+            <#list properties.scripts?split(' ') as script>
+                <script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
+            </#list>
+        </#if>
+        <#if scripts??>
+            <#list scripts as script>
+                <script src="${script}" type="text/javascript"></script>
+            </#list>
+        </#if>
+    </head>
+
+    <body class="${properties.kcBodyClass!}">
+    <div class="${properties.kcLoginClass!}">
+        <div id="kc-header" class="${properties.kcHeaderClass!}">
+            <div id="kc-header-wrapper"
+                 class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
+        </div>
+        <div class="${properties.kcFormCardClass!}">
+            <header class="${properties.kcFormHeaderClass!}">
+                <#if false && realm.internationalizationEnabled && locale.supported?size gt 1>
+                    <div class="${properties.kcLocaleMainClass!}" id="kc-locale">
+                        <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
+                            <div id="kc-locale-dropdown" class="${properties.kcLocaleDropDownClass!}">
+                                <a href="#" id="kc-current-locale-link">${locale.current}</a>
+                                <ul class="${properties.kcLocaleListClass!}">
+                                    <#list locale.supported as l>
+                                        <li class="${properties.kcLocaleListItemClass!}">
+                                            <a class="${properties.kcLocaleItemClass!}" onclick="changeLocale(`${l.url}`)">${l.label}</a>
+                                        </li>
+                                    </#list>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </#if>
+                <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+                    <#if displayRequiredFields>
+                        <div class="${properties.kcContentWrapperClass!}">
+                            <div class="${properties.kcLabelWrapperClass!} subtitle">
+                                <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
+                            </div>
+                            <div class="col-md-10">
+                                <h1 id="kc-page-title"><#nested "header"></h1>
+                            </div>
+                        </div>
+                    <#else>
+                        <h1 id="kc-page-title"><#nested "header"></h1>
+                    </#if>
+                <#else>
+                    <#if displayRequiredFields>
+                        <div class="${properties.kcContentWrapperClass!}">
+                            <div class="${properties.kcLabelWrapperClass!} subtitle">
+                                <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
+                            </div>
+                            <div class="col-md-10">
+                                <#nested "show-username">
+                                <div id="kc-username" class="${properties.kcFormGroupClass!}">
+                                    <label id="kc-attempted-username">${auth.attemptedUsername}</label>
+                                    <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
+                                        <div class="kc-login-tooltip">
+                                            <i class="${properties.kcResetFlowIcon!}"></i>
+                                            <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    <#else>
+                        <#nested "show-username">
+                        <div id="kc-username" class="${properties.kcFormGroupClass!}">
+                            <label id="kc-attempted-username">${auth.attemptedUsername}</label>
+                            <a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
+                                <div class="kc-login-tooltip">
+                                    <i class="${properties.kcResetFlowIcon!}"></i>
+                                    <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
+                                </div>
+                            </a>
+                        </div>
+                    </#if>
+                </#if>
+            </header>
+            <div id="kc-content">
+                <div id="kc-content-wrapper">
+
+                    <#-- App-initiated actions should not see warning messages about the need to complete the action -->
+                    <#-- during login.                                                                               -->
+                    <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
+                        <div class="alert-${message.type} ${properties.kcAlertClass!} pf-m-<#if message.type = 'error'>danger<#else>${message.type}</#if>">
+                            <div class="pf-c-alert__icon">
+                                <#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
+                                <#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
+                                <#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
+                                <#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
+                            </div>
+                            <span class="${properties.kcAlertTitleClass!}">${kcSanitize(message.summary)?no_esc}</span>
+                        </div>
+                    </#if>
+
+                    <#nested "form">
+
+                    <#if auth?has_content && auth.showTryAnotherWayLink()>
+                        <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
+                            <div class="${properties.kcFormGroupClass!}">
+                                <input type="hidden" name="tryAnotherWay" value="on"/>
+                                <a href="#" id="try-another-way"
+                                   onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
+                            </div>
+                        </form>
+                    </#if>
+
+                    <#nested "socialProviders">
+
+                    <#if displayInfo>
+                        <div id="kc-info" class="${properties.kcSignUpClass!}">
+                            <div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
+                                <#nested "info">
+                            </div>
+                        </div>
+                    </#if>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    </body>
+    </html>
+</#macro>

Keycloak/diakonie-theme/login/theme.properties

@@ -2,6 +2,7 @@ parent=base
 import=common/keycloak
 
 styles=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css lib/zocial/zocial.css /css/diakonie.css
+scripts=js/script.js
 meta=viewport==width=device-width,initial-scale=1
 
 kcHtmlClass=login-pf