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

@@ -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

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>

app/views/devise/sessions/new.html.erb

@@ -42,8 +42,11 @@
     <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
+        When you click the button above, we'll connect with
-        create a new DTI account for you automatically!
+        <%= 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
@@ -51,11 +54,12 @@
         <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>