From aa0b376a128f70d2c3fd24bb3cabf65126a8901a Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Fri, 12 Apr 2024 07:14:34 -0700
Subject: [PATCH] Clarify NeoPass explanations

In particular, we got feedback that it was surprising to not get to
check which NeoPass you wanted to use, and that the permissions were
never prompted again. I figure let's err on the side of ample clarity!

As part of this, I've added the new `external_link_icon` global helper,
which embeds an SVG from Chakra UI. That's just the convenient place I
know to grab that icon, and I did it this way instead of an `img` tag
because that enables the `currentColor` thing to work instead of coming
out black!
---
 app/helpers/application_helper.rb      |  7 +++++++
 app/views/auth_users/edit.html.erb     | 11 +++++++++++
 app/views/devise/sessions/new.html.erb | 14 +++++++++-----
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 73a9cf9c..d1f18758 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -73,6 +73,13 @@ module ApplicationHelper
     "matchu@openneo.net"
   end
 
+  # SVG icon source from Chakra UI!
+  EXTERNAL_LINK_SVG_SOURCE = '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></g>'.html_safe
+  def external_link_icon
+    content_tag :svg, EXTERNAL_LINK_SVG_SOURCE, alt: "(external link)",
+      viewBox: "0 0 24 24", style: "width: 1em; height: 1em"
+  end
+
   def flashes
     raw(flash.inject('') do |html, pair|
       key, value = pair
diff --git a/app/views/auth_users/edit.html.erb b/app/views/auth_users/edit.html.erb
index a7f22210..c48ef4cf 100644
--- a/app/views/auth_users/edit.html.erb
+++ b/app/views/auth_users/edit.html.erb
@@ -106,6 +106,17 @@
     <section class="neopass-explanation">
       <p>
         If you connect a NeoPass, you can use it to log into this DTI account!
+      </p>
+      <p>
+        When you click below, you'll be connected to
+        <%= link_to "https://account.neopets.com/", target: "_blank" do %>
+          whatever NeoPass is already logged in
+          <%= external_link_icon %><% end %>.
+        If it's your first time connecting, you'll be asked for 3 permissions:
+        <em>OpenID</em> and <em>Email</em> tell us who you are, and
+        <em>Linkage</em> tells us your Neopets username.
+      </p>
+      <p>
         You'll still be able to use your password to log in too, and you can
         disconnect this later if you'd like.
       </p>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 90528f6f..22b67728 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -42,20 +42,24 @@
     <details class="neopass-explanation">
       <summary>How does it work?</summary>
       <p>
-        If this is your first time using NeoPass at Dress to Impress, we'll
-        create a new DTI account for you automatically!
-      </p>
+        When you click the button above, we'll connect with
+        <%= link_to "https://account.neopets.com/", target: "_blank" do %>
+          your currently logged-in NeoPass
+          <%= external_link_icon %><% end %>. If this is your first time here,
+          we'll create a new DTI account for you automatically!
+       </p>
       <p>
         You'll be asked for 3 permissions: <em>OpenID</em> and
         <em>Email</em> tell us who you are, and
         <em>Linkage</em> tells us your Neopets username.
       </p>
       <p>
-        After that, you'll be able to one-click log in here, any time!
+        After that, you'll be able to one-click log in here, any time! You'll
+        never be asked for these permissions again.
       </p>
       <p>
         To connect an existing DTI account, don't start here! Log in with
-        your password first, then check the Settings page.
+        your password first, then connect via the Settings page.
       </p>
     </details>
   </section>