Authentication
Password recovery
A simple email form to help people recover access to their workspace.
Desktop · Light
Copy this into a Rails view with unmagic-components and Tailwind installed. Sample data is included; replace it with your own records.
<div class="grid min-h-screen place-items-center bg-neutral-50 p-6 dark:bg-neutral-950">
<main class="w-full max-w-sm">
<p class="mb-8 text-center text-lg font-semibold">acme</p>
<%= card do %>
<h1 class="text-2xl font-semibold tracking-tight">Forgot your password?</h1>
<p class="mb-6 mt-3 text-sm leading-6 text-neutral-500">It happens. Enter your email and we'll help you get back to your workspace.</p>
<%# Set your password-reset endpoint and form method when adopting this example. %>
<form method="dialog" data-block-demo-form data-block-demo-message="Preview only. No reset email has been sent." class="space-y-5">
<div>
<%= label_tag :recovery_email, "Email address", class: "UnmagicLabel mb-2 block" %>
<%= email_field_tag :email, nil, id: "recovery_email", placeholder: "you@example.com", required: true, autocomplete: "email", class: "#{control_classes(:input)} w-full" %>
</div>
<%= tag.button "Send reset link", type: "submit", class: "#{button_classes(:primary)} w-full" %>
<p data-block-demo-status role="status" class="text-sm text-neutral-500"></p>
</form>
<% end %>
<p class="mt-6 text-center text-sm text-neutral-500">Need a hand? Contact your workspace administrator.</p>
</main>
</div>