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!
This commit is contained in:
Emi Matchu 2024-04-12 07:14:34 -07:00
parent 410ace106e
commit aa0b376a12
3 changed files with 27 additions and 5 deletions

View File

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

View File

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

View File

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