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:
parent
410ace106e
commit
aa0b376a12
3 changed files with 27 additions and 5 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
create a new DTI account for you automatically!
|
||||
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
|
||||
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue