NeoPass launch message on homepage

Some cute logged-in-user differentiation uwu
Clarify NeoPass explanations
2024-04-12 07:22:25 -07:00 · 2024-04-12 07:14:34 -07:00 · 2024-04-12 06:51:20 -07:00
5 changed files with 66 additions and 53 deletions
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -69,23 +69,17 @@ module ApplicationHelper
    end
  end

-  # Add ?neopass=1 to the URL, or set the `neopass_access_secret=1` cookie, to
-  # view NeoPass features. (NOTE: In production, this is a secret value
-  # instead!)
-  #
-  # NOTE: We intentionally don't e.g. set the cookie just because you went to
-  #       the secret URL once, to avoid demo users getting confused about
-  #       whether NeoPass is publicly available: if they go to the public page,
-  #       they should NOT see NeoPass anymore, rather than think it's live!
-  def can_use_neopass
-    params[:neopass] == Rails.configuration.neopass_access_secret ||
-      cookies[:neopass_access_secret] == Rails.configuration.neopass_access_secret
-  end
-
  def contact_email
    "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
--- a/app/models/user.rb
+++ b/app/models/user.rb
@ -4,7 +4,7 @@ class User < ApplicationRecord
  PreviewTopContributorsCount = 3

  belongs_to :auth_user, foreign_key: :remote_id, inverse_of: :user
-  delegate :disconnect_neopass, to: :auth_user
+  delegate :disconnect_neopass, :uses_neopass?, to: :auth_user

  has_many :closet_hangers
  has_many :closet_lists
--- a/app/views/auth_users/edit.html.erb
+++ b/app/views/auth_users/edit.html.erb
@ -98,7 +98,7 @@
        disabled: !@persisted_auth_user.uses_password? &&
          !@persisted_auth_user.email? %>
  <% end %>
-<% elsif can_use_neopass %>
+<% else %>
  <%= form_with url: auth_user_neopass_omniauth_authorize_path(intent: "connect"),
      method: :post, class: "settings-form", data: {turbo: false} do |form|
  %>
@ -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>
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@ -29,38 +29,40 @@
    </div>
  </section>

-  <% if can_use_neopass %>
-    <section class="login-option-neopass">
-      <header>Have a NeoPass?</header>
+  <section class="login-option-neopass">
+    <header>Have a NeoPass?</header>

-      <%= button_to auth_user_neopass_omniauth_authorize_path(intent: "login"),
-                    data: {turbo: false}, class: "log-in-with-neopass-button" do
-      %>
-        Log in with
-        <%= image_tag "neopass_icon.png", alt: "NeoPass", class: "neopass-icon" %>
-      <% end %>
+    <%= button_to auth_user_neopass_omniauth_authorize_path(intent: "login"),
+                  data: {turbo: false}, class: "log-in-with-neopass-button" do
+    %>
+      Log in with
+      <%= image_tag "neopass_icon.png", alt: "NeoPass", class: "neopass-icon" %>
+    <% end %>

-      <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>
-        <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!
-        </p>
-        <p>
-          To connect an existing DTI account, don't start here! Log in with
-          your password first, then check the Settings page.
-        </p>
-      </details>
-    </section>
-  <% end %>
+    <details class="neopass-explanation">
+      <summary>How does it work?</summary>
+      <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! 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 connect via the Settings page.
+      </p>
+    </details>
+  </section>
 </div>

 <% content_for :stylesheets do %>
--- a/app/views/outfits/new.html.haml
+++ b/app/views/outfits/new.html.haml
@ -11,20 +11,26 @@
  .neopass-content
    %p
      %strong
-        Big news: we're adding NeoPass and other integrations to DTI over the
-        coming months!
+        🎉 Big news: Login with NeoPass is ready!
+      - if user_signed_in?
+        - if current_user.uses_neopass?
+          And hey, you're already on it, thank you for giving it a try!! 🥰
+        - else
+          You can connect your existing account via the
+          #{link_to "Settings page", edit_auth_user_path}.
+      - else
+        If you're new to Dress to Impress, try logging in right now!! 🎉
+
    %p
-      We're hoping it will help new users, and can be part of a more sustainable future for the site.
+      We're hoping NeoPass will help new users, and can be part of a more sustainable future for the site.
      %br
      = link_to "Here's what's coming and why.", about_neopass_path

    %p
-      %strong ➡️ Seeking beta testers, please!
-      We need help making sure NeoPass login actually works reliably!
+      Big thanks to our beta testers! More to come soon! Thank you all for
+      your constant love and support! 💖
      %br
-      = link_to "Check out the secret testing info",
-        "https://forms.gle/hEkw5bXY1W4YhUZb7"
-      and let us know how it goes! Thank you!! 💖
+      %em —Matchu

 #outfit-forms
  - localized_cache :action_suffix => 'outfit_forms_intro' do