ForgotPasswordForm

Domain

Email input that triggers a password reset link. Shows an inline success state after submission instead of a redirect.

Preview

Code

<%- include('modules/domain/common/auth/ForgotPasswordForm', {
  action: '/auth/forgot-password'
}) %>

Preview

Check your inbox

We sent a password reset link to user@example.com.

Code

<%- include('modules/domain/common/auth/ForgotPasswordForm', {
  sent: true,
  email: 'user@example.com'
}) %>

<%
  var _action = locals.action || '#';
  var _method = locals.method || 'post';
  var _error  = locals.error  || '';
  var _sent   = !!locals.sent;
  var _email  = locals.email  || '';
%>
<% if (_sent) { %>
<div class="rounded-lg bg-success-subtle border border-success px-4 py-4 text-sm text-success-fg space-y-1">
  <p class="font-semibold">Check your inbox</p>
  <p>We sent a password reset link to <span class="font-mono"><%= _email %></span>.</p>
</div>
<% } else { %>
<form action="<%= _action %>" method="<%= _method %>" novalidate class="space-y-4<%= locals.className ? ' ' + locals.className : '' %>">
  <% if (_error) { %>
  <div role="alert" class="flex items-start gap-3 rounded-lg border p-3 bg-error-subtle border-error text-error-fg text-sm">
    <i class="fa-solid fa-circle-xmark mt-0.5 shrink-0" aria-hidden="true"></i>
    <span><%= _error %></span>
  </div>
  <% } %>

  <%- include('../../../ui/Input', {
    id: 'forgot-email',
    label: 'Email',
    type: 'email',
    name: 'email',
    required: true,
    iconLeft: '<i class="fa-solid fa-envelope text-xs" aria-hidden="true"></i>'
  }) %>

  <%- include('../../../ui/Button', {
    type: 'submit',
    fullWidth: true,
    children: 'Send reset link'
  }) %>
</form>
<% } %>

ForgotPasswordForm

Default

Sent state