Alexander Zaytsev
32 lines
2.0 KiB
Plaintext
32 lines
2.0 KiB
Plaintext
<% @page_title = "Check your email" %>
|
|
|
|
<div class="panel panel--centered flex flex-column gap-half <%= "shake" if flash[:alert] || flash[:shake] %>">
|
|
<header>
|
|
<h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
|
|
<p class="margin-none-block-start txt-medium txt-balance">
|
|
Then enter the verification code included in the email below:
|
|
</p>
|
|
</header>
|
|
|
|
<%= form_with url: session_magic_link_path, method: :post, html: { data: { controller: "magic-link" } } do |form| %>
|
|
<%= form.text_field :code, required: true, class: "input center txt-align-enter txt-large txt-uppercase",
|
|
autofocus: true, autocorrect: "off", autocapitalize: "off", spellcheck: "false", "data-1p-ignore": true,
|
|
autocomplete: "one-time-code", maxlength: "6", placeholder: "••••••", value: params[:code],
|
|
data: { magic_link_target: "input", action: "keydown.enter->magic-link#submitOnEnter paste->magic-link#submitOnPaste" } %>
|
|
<% end %>
|
|
|
|
<p class="txt-small txt-balance">The code sent to <strong><%= email_address_pending_authentication %></strong> will work for <%= distance_of_time_in_words(MagicLink::EXPIRATION_TIME) %>.</p>
|
|
</div>
|
|
|
|
<% if Rails.env.development? && flash[:magic_link_code].present? %>
|
|
<div class="flex align-center justify-center gap fill-shade border-radius pad margin-block-start full-width position-relative" style="animation: slide-up-fade-in 400ms ease-out both; max-width: 42ch; overflow: hidden;">
|
|
<span class="txt-uppercase translucent txt-tight-lines">Psst, here's your code:</span>
|
|
<code class="txt-large font-weight-black txt-tight-lines"><%= flash[:magic_link_code] %></code>
|
|
<span class="txt-xx-small txt-uppercase font-weight-black txt-align-center flex align-center justify-center" style="position: absolute; top: 0; bottom: 0; left: 0; background: var(--color-ink-lighter); padding: 0 0.5em; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1;">DEV</span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% content_for :footer do %>
|
|
<%= render "sessions/footer" %>
|
|
<% end %>
|