From 5865d79ed9ed6e6ed3e4ba6699e8731beca06830 Mon Sep 17 00:00:00 2001
From: Mike Dalessio <mike@37signals.com>
Date: Sat, 6 Dec 2025 13:43:48 -0500
Subject: [PATCH] Display the verification code in the dev env

This seems better and easier than the console log.
---
 app/assets/stylesheets/animation.css         |  5 +++++
 app/views/sessions/magic_links/show.html.erb | 10 ++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 8c617a1d7..d6f05efa9 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -44,6 +44,11 @@
     to   { transform: translateY(0); }
   }
 
+  @keyframes slide-up-fade-in {
+    from { transform: translateY(2rem); opacity: 0; }
+    to   { transform: translateY(0); opacity: 1; }
+  }
+
   @keyframes slide-down {
     from { transform: translateY(0); }
     to   { transform: translateY(2rem); }
diff --git a/app/views/sessions/magic_links/show.html.erb b/app/views/sessions/magic_links/show.html.erb
index 7eca24264..4e94f411e 100644
--- a/app/views/sessions/magic_links/show.html.erb
+++ b/app/views/sessions/magic_links/show.html.erb
@@ -16,10 +16,12 @@
   <p class="txt-small">The code you receive will work for <%= distance_of_time_in_words(MagicLink::EXPIRATION_TIME) %>.</p>
 </div>
 
-<% if Rails.env.development? %>
-  <%= javascript_tag do %>
-    console.log("Magic link code: <%= flash[:magic_link_code].presence || "not generated" %>");
-  <% end %>
+<% 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 %>