Back to User Guide

Overview of the built-in web templates


Raytha comes with public account management such as login, change password, forgot password, etc.

To modify Raytha's built-in web templates, follow these steps:

  1. Navigate to the Themes section in the left side navigation menu.
  2. Select the Theme and then click Web templates.
  3. Find the built-in web template you wish to modify.
  4. Click the Edit button.



Please note: You must have the necessary permissions to modify templates in order to make changes.

Some of the built-in templates have associated target variables and form submission endpoints. For example, the Change Password template has these features. See the Change Password template below.

<div class="ud-login-logo">
  <h3>Change password</h3>
</div>
{% if Target.ValidationFailures["__ValidationSummary"] %}
  <div class="alert alert-danger">
    {{ Target.ValidationFailures["__ValidationSummary"] }}
  </div>
{% elsif Target.SuccessMessage %}
  <div class="alert alert-success">
    {{ Target.SuccessMessage }}
  </div>
{% endif %}
<form
  class="ud-login-form"
  action="/account/me/change-password"
  method="post">
  <div class="ud-form-group">
    <label for="currentpassword" class="form-label">Current password</label>
    <input
      id="currentpassword"
      type="password"
      name="CurrentPassword"
      {% if Target.ValidationFailures["CurrentPassword"] %}class="is-invalid"{% endif %}>
    {% if Target.ValidationFailures["CurrentPassword"] %}
      <div class="invalid-feedback">{{ Target.ValidationFailures["CurrentPassword"] }}</div>
    {% endif %}
  </div>
  <div class="ud-form-group">
    <label for="newpassword" class="form-label">New password</label>
    <input
      id="newpassword"
      type="password"
      name="NewPassword"
      {% if Target.ValidationFailures["NewPassword"] %}class="is-invalid"{% endif %}>
    {% if Target.ValidationFailures["NewPassword"] %}
      <div class="invalid-feedback">{{ Target.ValidationFailures["NewPassword"] }}</div>
    {% else %}
      <div class="form-text">Password must be at least 8 characters.</div>
    {% endif %}
  </div>
  <div class="ud-form-group">
    <label for="confirmnewpassword" class="form-label">Confirm new password</label>
    <input
      id="confirmnewpassword"
      type="password"
      name="ConfirmNewPassword"
      {% if Target.ValidationFailures["ConfirmNewPassword"] %}class="is-invalid"{% endif %}>
    {% if Target.ValidationFailures["ConfirmNewPassword"] %}
      <div class="invalid-feedback">{{ Target.ValidationFailures["ConfirmNewPassword"] }}</div>
    {% else %}
      <div class="form-text">Password must match the above.</div>
    {% endif %}
  </div>
  <div class="ud-form-group">
    <button type="submit" class="ud-main-btn w-100">Save changes</button>
  </div>
  <input
    name="__RequestVerificationToken"
    type="hidden"
    value="{{ Target.RequestVerificationToken }}" />
</form>

The Change Password template uses the Target.ValidationFailures variable, which is a key-value dictionary that displays validation errors for each form field upon submission. In addition, the template includes the Target.RequestVerificationToken hidden field to protect against cross-site request forgery (CSRF) attacks.

Move on to the next user guide article by clicking the link under the Continue learning section below.


Continue learning