To modify Raytha's built-in web templates, follow these steps:
- Navigate to the Themes section in the left side navigation menu.
- Select the Theme and then click Web templates.
- Find the built-in web template you wish to modify.
- 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.