keycloak-theme/account/account.ftl

<#import "template.ftl" as layout>
<@layout.mainLayout active='account' bodyClass='user'; section>

  <div class="row">
    <div class="col-md-10">
      <h2>${msg("editAccountHtmlTitle")}</h2>
    </div>
    <div class="col-md-2 subtitle">
      <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
    </div>
  </div>

  <form action="${url.accountUrl}" class="ps-container" method="post">

    <input
      type="hidden"
      id="stateChecker"
      name="stateChecker"
      value="${stateChecker}"
    >

    <#if !realm.registrationEmailAsUsername>
      <div class="ps-form-group ${messagesPerField.printIfExists('username','has-error')}">
        <label class="ps-form-group--label">${msg("username")}<#if realm.editUsernameAllowed> <span class="required">*</span></#if></label>

        <input
          type="text"
          class="ps-input"
          id="username"
          name="username"
          <#if !realm.editUsernameAllowed>disabled="disabled"</#if> value="${(account.username!'')}"
        />
      </div>
    </#if>

    <div class="ps-form-group ${messagesPerField.printIfExists('email','has-error')}">
      <label for="email" class="ps-form-group--label">${msg("email")} <span class="required">*</span></label>

      <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>

      <input type="text" class="ps-input" id="firstName" name="firstName" value="${(account.firstName!'')}"/>
    </div>

    <div class="ps-form-group ${messagesPerField.printIfExists('lastName','has-error')}">
      <label for="lastName" class="ps-form-group--label">${msg("lastName")}</label>

      <input type="text" class="ps-input" id="lastName" name="lastName" value="${(account.lastName!'')}"/>
    </div>

    <div class="ps-form-group">
      <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
        <div class="">
          <#if url.referrerURI??><a href="${url.referrerURI}">${kcSanitize(msg("backToApplication")?no_esc)}</a></#if>
          <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
          <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Cancel">${msg("doCancel")}</button>
        </div>
      </div>
    </div>
  </form>

</@layout.mainLayout>