Older/resources/auth_css_theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<messages xmlns:if="Wt.WTemplate.conditions">
  <message id="Wt.Auth.field">
    <![CDATA[
    ${<if:{1}>}
      <label for="${id:{1}}">${tr:Wt.Auth.{1}}
        ${{1}-info class="Wt-info"}
      </label>
      ${{1}}
    ${</if:{1}>}
    ]]>
  </message>

  <message id="Wt.Auth.template.login">
    <div class="bulma-box bulma-container bulma-is-max-tablet">
      <h2>${tr:Wt.Auth.login-form-title}</h2>
      <p>${tr:Wt.Auth.login-form-info}</p>


        ${<if:passwords>}
          <div class="bulma-field"> 
            <label for="${id:user-name}" class="bulma-label">
              ${user-name-label}
              ${user-confirm-email class="Wt-info"}
            </label>
            <div class="bulma-control bulma-has-icons-left">
              ${user-name class="bulma-input" type="text"}
              <span class="bulma-icon bulma-is-small bulma-is-left">
                <i class="fa-solid fa-user"></i>
              </span>
            </div>
            ${user-name-info class="Wt-info bulma-help"}
          </div>

          ${<if:password>}
            <div class="bulma-field"> 
              <label for="${id:password}" class="bulma-label">
                ${tr:Wt.Auth.password}
              </label>
              <div class="bulma-control bulma-has-icons-left">
                ${password class="bulma-input"}
                <span class="bulma-icon bulma-is-small bulma-is-left">
                  <i class="fa-solid fa-lock"></i>
                </span>
              </div>
              ${password-info class="Wt-info bulma-help"}
            </div>
          ${</if:password>}

          ${<if:remember-me>}
            <label for="${id:remember-me}">
              ${remember-me}
              ${tr:Wt.Auth.remember-me}
              ${remember-me-info class="Wt-info bulma-help"}
            </label>
            
          ${</if:remember-me>}
         ${</if:passwords>}


      ${<if:oauth>}

        <div class="Wt-col-right">
          <h3>Or use:</h3>
          ${icons}
        </div>

      ${</if:oauth>}

      <div class="Wt-buttons">
        ${login}
      </div>

      <div class="Wt-buttons">
        ${lost-password} ${sep} 
        ${register class="has-text-link is-pointer-cursor"}
      </div>
    </div>
  </message>

  <message id="Wt.Auth.template.registration">
    <div class="Wt-form Wt-auth-registration">
      <h2>${tr:Wt.Auth.registration-form-title}</h2>
      <p>${tr:Wt.Auth.registration-form-info}</p>

      ${password-description}

      <div class="Wt-fields">
        ${<if:user-name>}
          <label for="${id:user-name}" class="bulma-label">
            ${user-name-label}
          </label>

          <div class="bulma-control bulma-has-icons-left">
            ${user-name class="bulma-input" type="text"}
            <span class="bulma-icon bulma-is-small bulma-is-left">
              <i class="fa-solid fa-user"></i>
            </span>
          </div>
          ${user-name-info class="Wt-info bulma-help"}
          ${confirm-is-you class="Wt-info bulma-help"}
        ${</if:user-name>}

        ${<if:choose-password>}
          <div class="bulma-field">
            <label for="${id:choose-password}">${tr:Wt.Auth.choose-password}
              ${choose-password-info class="Wt-info"}
            </label>

            <div class="bulma-control bulma-has-icons-left">
              ${choose-password class="bulma-input"}
              <span class="bulma-icon bulma-is-small bulma-is-left">
                <i class="fa-solid fa-lock"></i>
              </span>
            </div>
          </div>
        ${</if:choose-password>}

        ${<if:repeat-password>}
          <div>
            <label for="${id:repeat-password}">${tr:Wt.Auth.repeat-password}
              ${repeat-password-info class="Wt-info"}
            </label>
            <div class="bulma-control bulma-has-icons-left">
              ${repeat-password class="bulma-input"}
              <span class="bulma-icon bulma-is-small bulma-is-left">
                <i class="fa-solid fa-lock"></i>
              </span>
            </div>
          </div>
        ${</if:repeat-password>}

        ${<if:email>}
          <div>
            <label for="${id:email}">${tr:Wt.Auth.email}
              ${email-info class="Wt-info"}
            </label>
            <div class="bulma-control bulma-has-icons-left">
              ${email class="bulma-input"}
              <span class="bulma-icon bulma-is-small bulma-is-left">
                <i class="fa-solid fa-envelope"></i>
              </span>
            </div>
          </div>
        ${</if:email>}
      </div>

      ${<if:oauth>}
        <br clear="both" />
        ${oauth-description}
        <label>${tr:Wt.Auth.oauth}
          <span class="Wt-info">${tr:Wt.Auth.oauth-info}</span>
        </label>
        ${icons}
      ${</if:oauth>}

      <div class="Wt-buttons">
        ${ok-button} ${cancel-button}
      </div>
    </div>
  </message>

  <message id="Wt.Auth.template.update-password">
    <div class="Wt-form Wt-auth-update-password">
      <h2>${tr:Wt.Auth.update-password-form-title}</h2>
      <p>${tr:Wt.Auth.update-password-form-info}</p>

      <div class="Wt-fields">
        <label for="${id:user-name}">${tr:Wt.Auth.user-name}
        </label>
        ${user-name}

        ${block:Wt.Auth.field password}
        ${block:Wt.Auth.field choose-password}
        ${block:Wt.Auth.field repeat-password}
      </div>

      <div class="Wt-buttons">
        ${ok-button} ${cancel-button}
      </div>
    </div>
  </message>

  <message id="Wt.Auth.template.lost-password">
    <div class="Wt-form Wt-auth-lost-password">
      <h2>${tr:Wt.Auth.lost-password-form-title}</h2>
      <p>${tr:Wt.Auth.lost-password-form-info}</p>

      <div class="Wt-fields">
        <label for="${id:email}">${tr:Wt.Auth.email}
          <span class="Wt-info">${tr:Wt.Auth.email-info}</span>
        </label>
        ${email}
      </div>

      <div class="Wt-buttons">
        ${send-button} ${cancel-button}
      </div>
    </div>
  </message>

  <message id="Wt.Auth.template.password-prompt">
    <div class="Wt-form Wt-auth-password-prompt">
      <h2>${tr:Wt.Auth.password-prompt-form-title}</h2>
      <p>${tr:Wt.Auth.password-prompt-form-info}</p>

      <div class="Wt-fields">
        <label for="${id:user-name}">${tr:Wt.Auth.user-name}
        </label>
        ${user-name}

        ${block:Wt.Auth.field password}
      </div>

      <div class="Wt-buttons">
        ${ok-button} ${cancel-button}
      </div>
    </div>
  </message>

  <message id="Wt.Auth.template.logged-in">
      <span class="is-size-5 has-text-justified">${user-name}</span> 
      ${logout}
  </message>

  <message id="Wt.Auth.template.totp">
    <div class="Wt-form Wt-auth-login">
      <h2>${tr:Wt.Auth.totp-title}</h2>
      <p>${tr:Wt.Auth.totp-info}</p>

      <div class="Wt-fields">
        ${<if:no-secret-key>}
          ${qr-code}
          ${tr:Wt.Auth.totp-qr-code-explanation}
          <p> Secret key: ${secret-key}</p>
        ${</if:no-secret-key>}
        <label for="${id:totp-code}">${tr:Wt.Auth.totp-code}
          <span class="Wt-info">${totp-code-info}</span>
        </label>
        ${totp-code}

        ${block:Wt.Auth.field remember-me}
      </div>

      <div class="Wt-buttons">
        ${login}
      </div>
    </div>
  </message>
</messages>