Split login page into two columns: password login and NeoPass login
I also wrote up some explainer text for the NeoPass option, too!
This commit is contained in:
parent
724f22e602
commit
8de5591719
2 changed files with 94 additions and 33 deletions
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,67 @@
|
||||||
<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
|
<%= form_with(model: resource, url: session_path(resource_name),
|
||||||
%>
|
class: "login-form") do |f| %>
|
||||||
Log in with
|
<div class="field input-field">
|
||||||
<%= image_tag "neopass_icon.png", alt: "NeoPass", class: "neopass-icon" %>
|
<%= f.label :name, 'DTI Username' %><br />
|
||||||
|
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field input-field">
|
||||||
|
<%= f.label :password, "DTI Password" %><br />
|
||||||
|
<%= f.password_field :password, autocomplete: "current-password" %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field checkbox-field">
|
||||||
|
<%= f.check_box :remember_me %>
|
||||||
|
<%= f.label :remember_me %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<%= f.submit "Log in" %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<div class="login-links">
|
||||||
|
<%= link_to "Sign up", new_auth_user_path %>
|
||||||
|
<%= link_to "Forgot your password?", new_auth_user_password_path %>
|
||||||
|
</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 %>
|
<% end %>
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= form_with(model: resource, url: session_path(resource_name),
|
|
||||||
class: "login-form") do |f| %>
|
|
||||||
<div class="field input-field">
|
|
||||||
<%= f.label :name, 'Username' %><br />
|
|
||||||
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field input-field">
|
|
||||||
<%= f.label :password %><br />
|
|
||||||
<%= f.password_field :password, autocomplete: "current-password" %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field checkbox-field">
|
|
||||||
<%= f.check_box :remember_me %>
|
|
||||||
<%= f.label :remember_me %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="actions">
|
|
||||||
<%= f.submit "Log in" %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<div class="login-links">
|
|
||||||
<%= link_to "Sign up", new_auth_user_path %>
|
|
||||||
<%= link_to "Forgot your password?", new_auth_user_password_path %>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<% content_for :stylesheets do %>
|
<% content_for :stylesheets do %>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue