theme(account): add note about personal data

fix: account-v1 parent theme name
keycloak: use base theme again
2024-02-08 21:39:45 +01:00 · 2024-02-08 21:39:45 +01:00 · 2024-02-08 21:39:45 +01:00
14 changed files with 257 additions and 320 deletions
--- a/account/account.ftl
+++ b/account/account.ftl
@ -39,6 +39,9 @@
      <input type="text" class="ps-input" id="email" name="email" autofocus value="${(account.email!'')}"/>
    </div>

+    <h3>Personal details</h3>
+    <p>Please note that providing identifying data is not required and should be done with great care. At the moment, your first name and last name are only displayed in Nextcloud.</p>
+
    <div class="ps-form-group ${messagesPerField.printIfExists('firstName','has-error')}">
      <label for="firstName" class="ps-form-group--label">${msg("firstName")}</label>

--- a/account/theme.properties
+++ b/account/theme.properties
@ -1,4 +1,4 @@
-parent=keycloak.v2
+parent=account-v1
 import=common/pub.solar

 styles=
--- a/common/resources/css/index.css
+++ b/common/resources/css/index.css
@ -21,10 +21,8 @@ html {
  width: 100vw;
  height: 100vh;
  margin: 0;
-  font-size: 16px; }
-  @media screen and (min-width: 1200px) {
-    html {
-      font-size: 20px; } }
+  font-size: 20px; }
+
 *:focus-visible {
  outline: 0.2rem solid var(--accent); }

@ -59,26 +57,23 @@ html {
    padding: 0rem 2rem; }

 .ps-button {
+  padding: 0.5rem 1rem;
  font-size: 1rem;
-  padding: 0.5em 1em;
-  line-height: 1.2em;
-  border: 0.125em solid var(--foreground);
-  border-radius: 1.5em;
+  line-height: 1.2rem;
+  border: 2px solid var(--foreground);
+  border-radius: 1.5rem;
  background-color: var(--background-darker-2);
  cursor: pointer; }
  .ps-button:hover, .ps-button:focus {
    border-color: var(--accent); }
  .ps-button_primary {
-    border: 0.25em solid var(--foreground);
+    border: 4px solid var(--foreground);
    background-color: var(--background);
    color: var(--foreground);
    font-weight: bold; }
    .ps-button_primary:focus, .ps-button_primary:hover {
      background-color: var(--foreground);
      color: var(--background); }
-  .ps-button_small {
-    font-size: 0.8rem;
-    padding: 0.25em 0.7em; }

 .ps-input {
  padding: 0.5rem 0.5rem;
@ -121,20 +116,18 @@ html {
  display: flex;
  flex-direction: column; }
  .ps-form-group--label {
-    margin-bottom: 0.25rem;
-    display: inline-block;
-    font-weight: bold;
-    margin-top: 0.5rem; }
+    margin-bottom: 0.5rem;
+    display: flex;
+    font-weight: bold; }
  .ps-form-group .ps-button {
    align-self: flex-start; }
  .ps-form-group--error {
    margin-top: 0.25rem;
    color: var(--accent);
    font-weight: bold; }
-  .ps-form-group--buttons {
-    margin: 0.5rem 0; }

 .ps-homelink {
+  z-index: 100;
  pointer-events: all;
  color: var(--foreground);
  background: white;
@ -204,9 +197,7 @@ html {
  display: flex;
  justify-content: space-between;
  padding: 0;
-  margin: 0;
-  overflow-x: auto;
-  z-index: 100; }
+  margin: 0; }
  .ps-header--title {
    font-size: 1.5rem;
    padding: 0 1rem;
@ -215,9 +206,8 @@ html {
    background-color: var(--background);
    border-right: 0.5rem solid var(--foreground);
    pointer-events: all; }
-  .ps-header--i18n {
-    margin-left: auto; }
  .ps-header--nav {
+    margin-left: auto;
    display: flex;
    border-bottom: 0.5rem solid var(--foreground);
    border-left: 0.5rem solid var(--foreground);
@ -270,9 +260,6 @@ html {
    border-bottom: 0.5rem solid var(--foreground);
    padding-bottom: 0.5rem;
    margin: 2rem; }
-  .ps-page--subtitle {
-    padding-bottom: 0.25rem;
-    margin: 2rem; }
  .ps-page--section {
    border: 12px solid black;
    margin-top: 2rem;
@ -370,8 +357,7 @@ html {
  left: 0;
  width: 100%;
  background-color: var(--background);
-  border-bottom: 2px solid var(--foreground);
-  overflow-x: auto; }
+  border-bottom: 2px solid var(--foreground); }
  .ps-section-nav--list {
    list-style: none;
    display: flex;
--- a/common/resources/scss/form-group.scss
+++ b/common/resources/scss/form-group.scss
@ -3,10 +3,9 @@
  flex-direction: column;

  &--label {
-    margin-bottom: 0.25rem;
-    display: inline-block;
+    margin-bottom: 0.5rem;
+    display: flex;
    font-weight: bold;
-    margin-top: 0.5rem;
  }

  .ps-button {
@ -19,8 +18,4 @@
    font-weight: bold;
    // font-family: monospace;
  }
-
-  &--buttons {
-    margin: 0.5rem 0;
-  };
 }
--- a/common/resources/scss/page.scss
+++ b/common/resources/scss/page.scss
@ -36,11 +36,6 @@
    margin: 2rem; 
  }

-  &--subtitle {
-    padding-bottom: 0.25rem;
-    margin: 2rem; 
-  };
-
  &--section {
    border: 12px solid black;
    margin-top: 2rem;
--- a/login/login-update-profile.ftl
+++ b/login/login-update-profile.ftl
@ -1,12 +1,83 @@
 <#import "template.ftl" as layout>
-<#import "user-profile-commons.ftl" as userProfileCommons>
-<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','email','firstName','lastName'); section>
    <#if section = "header">
        ${msg("loginProfileTitle")}
    <#elseif section = "form">
        <form id="kc-update-profile-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <#if user.editUsernameAllowed>
+                <div class="${properties.kcFormGroupClass!}">
+                    <div class="${properties.kcLabelWrapperClass!}">
+                        <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
+                    </div>
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <input type="text" id="username" name="username" value="${(user.username!'')}"
+                               class="${properties.kcInputClass!}"
+                               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
+                        />

-            <@userProfileCommons.userProfileFormFields/>
+                        <#if messagesPerField.existsError('username')>
+                            <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('username'))?no_esc}
+                            </span>
+                        </#if>
+                    </div>
+                </div>
+            </#if>
+            <#if user.editEmailAllowed>
+                <div class="${properties.kcFormGroupClass!}">
+                    <div class="${properties.kcLabelWrapperClass!}">
+                        <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
+                    </div>
+                    <div class="${properties.kcInputWrapperClass!}">
+                        <input type="text" id="email" name="email" value="${(user.email!'')}"
+                               class="${properties.kcInputClass!}"
+                               aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
+                        />
+
+                        <#if messagesPerField.existsError('email')>
+                            <span id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                ${kcSanitize(messagesPerField.get('email'))?no_esc}
+                            </span>
+                        </#if>
+                    </div>
+                </div>
+            </#if>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="firstName" class="${properties.kcLabelClass!}">${msg("firstName")}</label>
+                </div>
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="firstName" name="firstName" value="${(user.firstName!'')}"
+                           class="${properties.kcInputClass!}"
+                           aria-invalid="<#if messagesPerField.existsError('firstName')>true</#if>"
+                    />
+
+                    <#if messagesPerField.existsError('firstName')>
+                        <span id="input-error-firstname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('firstName'))?no_esc}
+                        </span>
+                    </#if>
+                </div>
+            </div>
+
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="lastName" class="${properties.kcLabelClass!}">${msg("lastName")}</label>
+                </div>
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="lastName" name="lastName" value="${(user.lastName!'')}"
+                           class="${properties.kcInputClass!}"
+                           aria-invalid="<#if messagesPerField.existsError('lastName')>true</#if>"
+                    />
+
+                    <#if messagesPerField.existsError('lastName')>
+                        <span id="input-error-lastname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('lastName'))?no_esc}
+                        </span>
+                    </#if>
+                </div>
+            </div>

            <div class="${properties.kcFormGroupClass!}">
                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
@ -17,7 +88,7 @@
                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
                    <#if isAppInitiatedAction??>
                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
-                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" formnovalidate/>${msg("doCancel")}</button>
+                    <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" />${msg("doCancel")}</button>
                    <#else>
                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
                    </#if>
--- a/login/register.ftl
+++ b/login/register.ftl
@ -1,31 +1,74 @@
 <#import "template.ftl" as layout>
-<#import "user-profile-commons.ftl" as userProfileCommons>
-<#import "register-commons.ftl" as registerCommons>
-<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section>
  <#if section = "header">
-        <#if messageHeader??>
-            ${kcSanitize(msg("${messageHeader}"))?no_esc}
-        <#else>
    ${msg("registerTitle")}
-        </#if>
  <#elseif section = "form">
-        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
+    <form id="kc-register-form" class="ps-container" action="${url.registrationAction}" method="post">
+      <!--div class="${properties.kcFormGroupClass!}">
+        <label for="firstName" class="${properties.kcLabelClass!}">${msg("firstName")}</label>
+        <input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName"
+             value="${(register.formData.firstName!'')}"
+             aria-invalid="<#if messagesPerField.existsError('firstName')>true</#if>"
+        />

-            <@userProfileCommons.userProfileFormFields; callback, attribute>
-                <#if callback = "afterField">
-                <#-- render password fields just under the username or email (if used as username) -->
-                    <#if passwordRequired?? && (attribute.name == 'username' || (attribute.name == 'email' && realm.registrationEmailAsUsername))>
-                        <div class="${properties.kcFormGroupClass!}">
-                            <div class="${properties.kcLabelWrapperClass!}">
-                                <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label> *
+        <#if messagesPerField.existsError('firstName')>
+          <span id="input-error-firstname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+            ${kcSanitize(messagesPerField.get('firstName'))?no_esc}
+          </span>
+        </#if>
      </div>
-                            <div class="${properties.kcInputWrapperClass!}">
-                                <div class="${properties.kcInputGroup!}">
+
+      <div class="${properties.kcFormGroupClass!}">
+        <label for="lastName" class="${properties.kcLabelClass!}">${msg("lastName")}</label>
+          <input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName"
+             value="${(register.formData.lastName!'')}"
+             aria-invalid="<#if messagesPerField.existsError('lastName')>true</#if>"
+          />
+
+          <#if messagesPerField.existsError('lastName')>
+            <span id="input-error-lastname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+              ${kcSanitize(messagesPerField.get('lastName'))?no_esc}
+            </span>
+          </#if>
+      </div-->
+
+      <#if !realm.registrationEmailAsUsername>
+        <div class="${properties.kcFormGroupClass!}">
+          <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
+          <input type="text" id="username" class="${properties.kcInputClass!}" name="username"
+               value="${(register.formData.username!'')}" autocomplete="username"
+               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
+          />
+
+          <#if messagesPerField.existsError('username')>
+            <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+              ${kcSanitize(messagesPerField.get('username'))?no_esc}
+            </span>
+          </#if>
+        </div>
+      </#if>
+
+      <div class="${properties.kcFormGroupClass!}">
+        <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
+          <input type="text" id="email" class="${properties.kcInputClass!}" name="email"
+             value="${(register.formData.email!'')}" autocomplete="email"
+             aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
+          />
+
+          <#if messagesPerField.existsError('email')>
+            <span id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+              ${kcSanitize(messagesPerField.get('email'))?no_esc}
+            </span>
+          </#if>
+      </div>
+
+      <#if passwordRequired??>
+        <div class="${properties.kcFormGroupClass!}">
+          <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
          <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
               autocomplete="new-password"
               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
          />
-                                </div>

          <#if messagesPerField.existsError('password')>
            <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
@ -33,20 +76,14 @@
            </span>
          </#if>
        </div>
-                        </div>

        <div class="${properties.kcFormGroupClass!}">
-                            <div class="${properties.kcLabelWrapperClass!}">
          <label for="password-confirm"
-                                       class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label> *
-                            </div>
-                            <div class="${properties.kcInputWrapperClass!}">
-                                <div class="${properties.kcInputGroup!}">
+               class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
          <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
               name="password-confirm"
               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
          />
-                                </div>

          <#if messagesPerField.existsError('password-confirm')>
            <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
@ -54,46 +91,22 @@
            </span>
          </#if>
        </div>
-                        </div>
      </#if>
-                </#if>
-            </@userProfileCommons.userProfileFormFields>

-            <@registerCommons.termsAcceptance/>
-
-            <#if recaptchaRequired?? && (recaptchaVisible!false)>
-                <div class="form-group">
-                    <div class="${properties.kcInputWrapperClass!}">
-                        <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}" data-action="${recaptchaAction}"></div>
-                    </div>
+      <#if recaptchaRequired??>
+        <div class="ps-form-group">
+          <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
        </div>
      </#if>

      <div class="${properties.kcFormGroupClass!}">
-
-                <#if recaptchaRequired?? && !(recaptchaVisible!false)>
-                    <script>
-                        function onSubmitRecaptcha(token) {
-                            document.getElementById("kc-register-form").submit();
-                        }
-                    </script>
-                    <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                        <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!} g-recaptcha" 
-                            data-sitekey="${recaptchaSiteKey}" data-callback='onSubmitRecaptcha' data-action='${recaptchaAction}' type="submit">
-                            ${msg("doRegister")}
-                        </button>
+          <button
+            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+          >${msg("doRegister")}</button>
      </div>
-                <#else>
-                    <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
-                    </div>
-                    <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
-                        <div class="${properties.kcFormOptionsWrapperClass!}">
+      <div class="${properties.kcFormGroupClass!}">
        <span><a href="${url.loginUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
      </div>
-                    </div>
-                </#if>
-            </div>
    </form>
  </#if>
 </@layout.registrationLayout>
--- a/login/resources/js/base64url.js
+++ b/login/resources/js/base64url.js
@ -1,115 +0,0 @@
-// for embedded scripts, quoted and modified from https://github.com/swansontec/rfc4648.js by William Swanson
-'use strict';
-var base64url = base64url || {};
-(function(base64url) {
-
-    function parse (string, encoding, opts = {}) {
-        // Build the character lookup table:
-        if (!encoding.codes) {
-              encoding.codes = {};
-              for (let i = 0; i < encoding.chars.length; ++i) {
-                  encoding.codes[encoding.chars[i]] = i;
-              }
-        }
-
-        // The string must have a whole number of bytes:
-        if (!opts.loose && (string.length * encoding.bits) & 7) {
-            throw new SyntaxError('Invalid padding');
-        }
-
-        // Count the padding bytes:
-        let end = string.length;
-        while (string[end - 1] === '=') {
-            --end;
-
-            // If we get a whole number of bytes, there is too much padding:
-            if (!opts.loose && !(((string.length - end) * encoding.bits) & 7)) {
-                throw new SyntaxError('Invalid padding');
-            }
-        }
-
-        // Allocate the output:
-        const out = new (opts.out || Uint8Array)(((end * encoding.bits) / 8) | 0);
-
-        // Parse the data:
-        let bits = 0; // Number of bits currently in the buffer
-        let buffer = 0; // Bits waiting to be written out, MSB first
-        let written = 0; // Next byte to write
-        for (let i = 0; i < end; ++i) {
-            // Read one character from the string:
-            const value = encoding.codes[string[i]];
-            if (value === void 0) {
-                throw new SyntaxError('Invalid character ' + string[i]);
-            }
-
-            // Append the bits to the buffer:
-            buffer = (buffer << encoding.bits) | value;
-            bits += encoding.bits;
-
-            // Write out some bits if the buffer has a byte's worth:
-            if (bits >= 8) {
-                bits -= 8;
-                out[written++] = 0xff & (buffer >> bits);
-            }
-        }
-
-        // Verify that we have received just enough bits:
-        if (bits >= encoding.bits || 0xff & (buffer << (8 - bits))) {
-            throw new SyntaxError('Unexpected end of data');
-        }
-
-        return out
-    }
-
-    function stringify (data, encoding, opts = {}) {
-        const { pad = true } = opts;
-        const mask = (1 << encoding.bits) - 1;
-        let out = '';
-
-        let bits = 0; // Number of bits currently in the buffer
-        let buffer = 0; // Bits waiting to be written out, MSB first
-        for (let i = 0; i < data.length; ++i) {
-            // Slurp data into the buffer:
-            buffer = (buffer << 8) | (0xff & data[i]);
-            bits += 8;
-
-            // Write out as much as we can:
-            while (bits > encoding.bits) {
-                bits -= encoding.bits;
-                out += encoding.chars[mask & (buffer >> bits)];
-            }
-        }
-
-        // Partial character:
-        if (bits) {
-            out += encoding.chars[mask & (buffer << (encoding.bits - bits))];
-        }
-
-        // Add padding characters until we hit a byte boundary:
-        if (pad) {
-            while ((out.length * encoding.bits) & 7) {
-                out += '=';
-            }
-        }
-
-        return out
-    }
-
-    const encoding = {
-        chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_',
-        bits: 6
-    }
-
-    base64url.decode = function (string, opts) {
-        return parse(string, encoding, opts);
-    }
-
-    base64url.encode = function (data, opts) {
-        return stringify(data, encoding, opts)
-    }
-
-    return base64url;
-}(base64url));
-
-
-
--- a/login/resources/js/passwordVisibility.js
+++ b/login/resources/js/passwordVisibility.js
@ -1,15 +0,0 @@
-const toggle = (button) =>  {
-    const passwordElement = document.getElementById(button.getAttribute('aria-controls'));
-    if (passwordElement.type === "password") {
-        passwordElement.type = "text";
-        button.children.item(0).className = button.dataset.iconHide;
-        button.setAttribute("aria-label", button.dataset.labelHide);
-    } else if(passwordElement.type === "text") {
-        passwordElement.type = "password";
-        button.children.item(0).className = button.dataset.iconShow;
-        button.setAttribute("aria-label", button.dataset.labelShow);
-    }
-}
-
-document.querySelectorAll('[data-password-toggle]')
-    .forEach(button => button.onclick = () => toggle(button));
--- a/login/template.ftl
+++ b/login/template.ftl
@ -85,13 +85,11 @@

    <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
      <h1 class="ps-page--title"><#nested "header"></h1>
-      <div class="ps-page--subtitle">
      <#if displayRequiredFields>
        <div class="${properties.kcLabelWrapperClass!} subtitle">
          <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
        </div>
      </#if>
-      </div>
    <#else>
      <#if displayRequiredFields>
        <div class="${properties.kcContentWrapperClass!}">
--- a/login/theme.properties
+++ b/login/theme.properties
@ -12,9 +12,6 @@ kcButtonLargeClass=ps-button_large
 kcFormGroupClass=ps-form-group
 kcLabelClass=ps-form-group--label
 kcInputErrorMessageClass=ps-form-group--error
-kcFormOptionsClass=ps-form-group--options
-kcFormOptionsWrapperClass=ps-form-group--options-wrapper
-kcFormButtonsClass=ps-form-group--buttons

 kcInputClass=ps-input

--- a/login/update-email.ftl
+++ b/login/update-email.ftl
@ -1,12 +1,27 @@
 <#import "template.ftl" as layout>
 <#import "password-commons.ftl" as passwordCommons>
-<#import "user-profile-commons.ftl" as userProfileCommons>
-<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError('email'); section>
    <#if section = "header">
        ${msg("updateEmailTitle")}
    <#elseif section = "form">
        <form id="kc-update-email-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
-            <@userProfileCommons.userProfileFormFields/>
+            <div class="${properties.kcFormGroupClass!}">
+                <div class="${properties.kcLabelWrapperClass!}">
+                    <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
+                </div>
+                <div class="${properties.kcInputWrapperClass!}">
+                    <input type="text" id="email" name="email" value="${(email.value!'')}"
+                           class="${properties.kcInputClass!}"
+                           aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
+                    />
+
+                    <#if messagesPerField.existsError('email')>
+                        <span id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                            ${kcSanitize(messagesPerField.get('email'))?no_esc}
+                        </span>
+                    </#if>
+                </div>
+            </div>

            <div class="${properties.kcFormGroupClass!}">
                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
--- a/login/user-profile-commons.ftl
+++ b/login/user-profile-commons.ftl
@ -3,31 +3,27 @@
 	
 	<#list profile.attributes as attribute>

-		<#assign group = (attribute.group)!"">
-		<#if group != currentGroup>
-			<#assign currentGroup=group>
-			<#if currentGroup != "">
-				<div class="${properties.kcFormGroupClass!}"
-				<#list group.html5DataAnnotations as key, value>
-					data-${key}="${value}"
-				</#list>
-				>
+		<#assign groupName = attribute.group!"">
+		<#if groupName != currentGroup>
+			<#assign currentGroup=groupName>
+			<#if currentGroup != "" >
+				<div class="${properties.kcFormGroupClass!}">
 	
-					<#assign groupDisplayHeader=group.displayHeader!"">
+					<#assign groupDisplayHeader=attribute.groupDisplayHeader!"">
 					<#if groupDisplayHeader != "">
-						<#assign groupHeaderText=advancedMsg(groupDisplayHeader)!group>
+						<#assign groupHeaderText=advancedMsg(attribute.groupDisplayHeader)!groupName>
 					<#else>
-						<#assign groupHeaderText=group.name!"">
+						<#assign groupHeaderText=groupName>
 					</#if>
 					<div class="${properties.kcContentWrapperClass!}">
-						<label id="header-${attribute.group.name}" class="${kcFormGroupHeader!}">${groupHeaderText}</label>
+						<label id="header-${groupName}" class="${kcFormGroupHeader!}">${groupHeaderText}</label>
 					</div>
 	
-					<#assign groupDisplayDescription=group.displayDescription!"">
+					<#assign groupDisplayDescription=attribute.groupDisplayDescription!"">
 					<#if groupDisplayDescription != "">
-						<#assign groupDescriptionText=advancedMsg(groupDisplayDescription)!"">
+						<#assign groupDescriptionText=advancedMsg(attribute.groupDisplayDescription)!"">
 						<div class="${properties.kcLabelWrapperClass!}">
-							<label id="description-${group.name}" class="${properties.kcLabelClass!}">${groupDescriptionText}</label>
+							<label id="description-${groupName}" class="${properties.kcLabelClass!}">${groupDescriptionText}</label>
 						</div>
 					</#if>
 				</div>
@ -57,10 +53,6 @@
 		</div>
 		<#nested "afterField" attribute>
 	</#list>
-
-	<#list profile.html5DataAnnotations?keys as key>
-		<script type="module" src="${url.resourcesPath}/js/${key}.js"></script>
-	</#list>
 </#macro>

 <#macro inputFieldByType attribute>
@ -77,22 +69,16 @@
 		<@inputTagSelects attribute=attribute/>
 		<#break>
 	<#default>
-		<#if attribute.multivalued && attribute.values?has_content>
-			<#list attribute.values as value>
-				<@inputTag attribute=attribute value=value!''/>
-			</#list>
-		<#else>
-			<@inputTag attribute=attribute value=attribute.value!''/>
-		</#if>
+		<@inputTag attribute=attribute/>
 	</#switch>
 </#macro>

-<#macro inputTag attribute value>
-	<input type="<@inputTagType attribute=attribute/>" id="${attribute.name}" name="${attribute.name}" value="${(value!'')}" class="${properties.kcInputClass!}"
+<#macro inputTag attribute>
+	<input type="<@inputTagType attribute=attribute/>" id="${attribute.name}" name="${attribute.name}" value="${(attribute.value!'')}" class="${properties.kcInputClass!}"
 		aria-invalid="<#if messagesPerField.existsError('${attribute.name}')>true</#if>"
 		<#if attribute.readOnly>disabled</#if>
 		<#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}"</#if>
-		<#if attribute.annotations.inputTypePlaceholder??>placeholder="${advancedMsg(attribute.annotations.inputTypePlaceholder)}"</#if>
+		<#if attribute.annotations.inputTypePlaceholder??>placeholder="${attribute.annotations.inputTypePlaceholder}"</#if>
 		<#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}"</#if>
 		<#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}"</#if>
 		<#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}"</#if>
@ -100,10 +86,6 @@
 		<#if attribute.annotations.inputTypeMax??>max="${attribute.annotations.inputTypeMax}"</#if>
 		<#if attribute.annotations.inputTypeMin??>min="${attribute.annotations.inputTypeMin}"</#if>
 		<#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}"</#if>
-		<#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}"</#if>
-		<#list attribute.html5DataAnnotations as key, value>
-    		data-${key}="${value}"
-		</#list>
 	/>
 </#macro>

@ -146,14 +128,13 @@
 		<#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options>
 	<#elseif attribute.validators.options?? && attribute.validators.options.options??>
 		<#assign options=attribute.validators.options.options>
-	<#else>
-		<#assign options=[]>
 	</#if>

+	<#if options??>
 		<#list options as option>
 		<option value="${option}" <#if attribute.values?seq_contains(option)>selected</#if>><@selectOptionLabelText attribute=attribute option=option/></option>
 		</#list>
-
+	</#if>	
 	</select>
 </#macro>

@ -174,10 +155,9 @@
 		<#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options>
 	<#elseif attribute.validators.options?? && attribute.validators.options.options??>
 		<#assign options=attribute.validators.options.options>
-	<#else>
-		<#assign options=[]>
 	</#if>

+	<#if options??>
 		<#list options as option>
 		<div class="${classDiv}">
 			<input type="${inputType}" id="${attribute.name}-${option}" name="${attribute.name}" value="${option}" class="${classInput}"
@ -188,6 +168,8 @@
 			<label for="${attribute.name}-${option}" class="${classLabel}<#if attribute.readOnly> ${properties.kcInputClassRadioCheckboxLabelDisabled!}</#if>"><@selectOptionLabelText attribute=attribute option=option/></label>
 		</div>
 		</#list>
+	</#if>	
+	</select>
 </#macro>

 <#macro selectOptionLabelText attribute option>
--- a/overlay.nix
+++ b/overlay.nix
@ -1,10 +1,22 @@
 final: prev:
 let 
  pkgs = final;
+  version = "0.1";
+  keycloak-account-v1 = prev.fetchMavenArtifact {
+    artifactId = "keycloak-account-v1";
+    groupId = "io.phasetwo.keycloak";
+    inherit version;
+    hash = "sha256-t4kuc5ZieqsC06/alFN0W1ktORuk36TIgKXfrmBtesA=";
+  };
 in
 {
  # this key should be the same as the simpleFlake name attribute.
  keycloak-theme-pub-solar = {
    keycloak-theme-pub-solar = import ./pkgs/keycloak-theme-pub-solar.nix { inherit pkgs; };
+    keycloak = prev.keycloak.overrideAttrs (finalAttrs: previousAttrs: {
+      installPhase = previousAttrs.installPhase + ''
+        ln -s ${keycloak-account-v1}/share/java/keycloak-account-v1-${version}.jar $out/providers/keycloak-account-v1-${version}.jar
+      '';
+    });
  };
 }
Author	SHA1	Message	Date
teutat3s	282fde3d9c	theme(account): add note about personal data	2024-02-08 21:39:45 +01:00
teutat3s	fa04c65e06	fix: account-v1 parent theme name	2024-02-08 21:39:45 +01:00
teutat3s	635a245592	keycloak: use base theme again https://github.com/p2-inc/keycloak-account-v1	2024-02-08 21:39:45 +01:00