OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Split login page into two columns: password login and NeoPass login

Browse source 
I also wrote up some explainer text for the NeoPass option, too!
This commit is contained in:
Emi Matchu 2024-04-11 09:12:59 -07:00
parent 724f22e602
commit 8de5591719
2 changed files with 94 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/assets/stylesheets/devise/sessions/new.sass
View file

@ -1,4 +1,37 @@
@import "../../partials/clean/constants"
body.devise-sessions, body.devise-sessions-new body.devise-sessions, body.devise-sessions-new
.login-options
display: flex
section
flex: 1 1 0
padding-block: 1em
display: flex
flex-direction: column
justify-content: center
align-items: center
&:not(:last-of-type)
border-right: 1px solid $module-border-color
margin-right: 1em
padding-right: 1em
.login-option-neopass
text-align: center
header
font-weight: bold
font-size: 125%
margin-bottom: .5em
.neopass-explanation
font-size: 85%
summary
cursor: pointer
margin-bottom: 1em
.login-form .login-form
margin-bottom: 1em margin-bottom: 1em

50
app/views/devise/sessions/new.html.erb
View file

@ -1,23 +1,16 @@
<h2>Log in</h2> <h2>Log in</h2>
<% if can_use_neopass %> <div class="login-options">
<%= button_to auth_user_neopass_omniauth_authorize_path(intent: "login"), <section class="login-option-password">
data: {turbo: false}, class: "log-in-with-neopass-button" do
%>
Log in with
<%= image_tag "neopass_icon.png", alt: "NeoPass", class: "neopass-icon" %>
<% end %>
<% end %>
<%= form_with(model: resource, url: session_path(resource_name), <%= form_with(model: resource, url: session_path(resource_name),
class: "login-form") do |f| %> class: "login-form") do |f| %>
<div class="field input-field"> <div class="field input-field">
<%= f.label :name, 'Username' %><br /> <%= f.label :name, 'DTI Username' %><br />
<%= f.text_field :name, autofocus: true, autocomplete: "username" %> <%= f.text_field :name, autofocus: true, autocomplete: "username" %>
</div> </div>
<div class="field input-field"> <div class="field input-field">
<%= f.label :password %><br /> <%= f.label :password, "DTI Password" %><br />
<%= f.password_field :password, autocomplete: "current-password" %> <%= f.password_field :password, autocomplete: "current-password" %>
</div> </div>
@ -35,6 +28,41 @@
<%= link_to "Sign up", new_auth_user_path %> <%= link_to "Sign up", new_auth_user_path %>
<%= link_to "Forgot your password?", new_auth_user_password_path %> <%= link_to "Forgot your password?", new_auth_user_password_path %>
</div> </div>
</section>
<% if can_use_neopass %>
<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 %>
<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 %>
</div>
<% content_for :stylesheets do %> <% content_for :stylesheets do %>
<%= stylesheet_link_tag "devise/sessions/new" %> <%= stylesheet_link_tag "devise/sessions/new" %>