Compare commits
5 commits
eb8e5d6df5
...
99277aecdd
| Author | SHA1 | Date | |
|---|---|---|---|
| 99277aecdd | |||
| 2673baa7ff | |||
| 8de5591719 | |||
| 724f22e602 | |||
| 2cc6cee542 |
4 changed files with 148 additions and 33 deletions
BIN
app/assets/images/neopass_icon.png
Normal file
BIN
app/assets/images/neopass_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
84
app/assets/stylesheets/devise/sessions/new.sass
Normal file
84
app/assets/stylesheets/devise/sessions/new.sass
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@import "../../partials/clean/constants"
|
||||
|
||||
body.devise-sessions, body.devise-sessions-new
|
||||
#title
|
||||
text-align: center
|
||||
font-size: 2.5rem
|
||||
|
||||
.login-options
|
||||
display: flex
|
||||
margin-block: 3em
|
||||
|
||||
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
|
||||
margin-bottom: 1em
|
||||
|
||||
.field
|
||||
margin-bottom: .75em
|
||||
|
||||
.input-field label
|
||||
font-weight: bold
|
||||
|
||||
.actions
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: .5em
|
||||
|
||||
.remember-me
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: .25em
|
||||
font-size: 85%
|
||||
|
||||
input[type=checkbox]
|
||||
height: 1em
|
||||
width: 1em
|
||||
|
||||
.login-links
|
||||
font-size: 85%
|
||||
display: flex
|
||||
gap: .5em
|
||||
|
||||
.log-in-with-neopass-button
|
||||
background: linear-gradient(#ebb233, #f6e250, #ebb233)
|
||||
color: #111
|
||||
font-size: 1rem
|
||||
text-shadow: none
|
||||
font-family: "Arial Black", sans-serif
|
||||
margin-bottom: 1em
|
||||
|
||||
&:hover
|
||||
color: #111 // override default DTI styles
|
||||
filter: brightness(105%)
|
||||
|
||||
.neopass-icon
|
||||
vertical-align: middle
|
||||
height: 2em
|
||||
width: 2em
|
||||
|
|
@ -1,38 +1,68 @@
|
|||
<h2>Log in</h2>
|
||||
<% title "Log into Dress to Impress" %>
|
||||
|
||||
<% if can_use_neopass %>
|
||||
🌟✨🌟✨🌟✨🌟✨🌟
|
||||
<br />
|
||||
<%= button_to "Log in with NeoPass",
|
||||
auth_user_neopass_omniauth_authorize_path(intent: "login"),
|
||||
data: {turbo: false} # Turbo can't handle this redirect!
|
||||
%>
|
||||
🌟✨🌟✨🌟✨🌟✨🌟
|
||||
<br />
|
||||
<br />
|
||||
<% end %>
|
||||
<div class="login-options">
|
||||
<section class="login-option-password">
|
||||
<%= form_with(model: resource, url: session_path(resource_name),
|
||||
class: "login-form") do |f| %>
|
||||
<div class="field input-field">
|
||||
<%= f.label :name, 'DTI Username' %><br />
|
||||
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
|
||||
</div>
|
||||
|
||||
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
|
||||
<div class="field">
|
||||
<%= f.label :name, '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">
|
||||
<%= f.label :password %><br />
|
||||
<%= f.password_field :password, autocomplete: "current-password" %>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<%= f.submit "Log in" %>
|
||||
<div class="remember-me">
|
||||
<%= f.check_box :remember_me %>
|
||||
<%= f.label :remember_me %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if devise_mapping.rememberable? %>
|
||||
<div class="field">
|
||||
<%= f.check_box :remember_me %>
|
||||
<%= f.label :remember_me %>
|
||||
<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 %>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<%= f.submit "Log in" %>
|
||||
</div>
|
||||
<% content_for :stylesheets do %>
|
||||
<%= stylesheet_link_tag "devise/sessions/new" %>
|
||||
<% end %>
|
||||
|
||||
<%= render "devise/shared/links" %>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,12 @@
|
|||
%br
|
||||
= link_to "Here's what's coming and why.", about_neopass_path
|
||||
|
||||
- if @neopass_test_group < 25
|
||||
- if @neopass_test_group < 50
|
||||
%p
|
||||
%strong ➡️ We're starting limited testing today!
|
||||
= link_to "Here's the secret info if you'd like to take a look!",
|
||||
%strong ➡️ Seeking beta testers, please!
|
||||
= link_to "Check out the secret testing info",
|
||||
"https://forms.gle/hEkw5bXY1W4YhUZb7"
|
||||
and let us know how it goes!
|
||||
|
||||
#outfit-forms
|
||||
- localized_cache :action_suffix => 'outfit_forms_intro' do
|
||||
|
|
|
|||
Loading…
Reference in a new issue