diff --git a/app/assets/stylesheets/devise/sessions/new.sass b/app/assets/stylesheets/devise/sessions/new.sass index 6d4b7b3e..e4414575 100644 --- a/app/assets/stylesheets/devise/sessions/new.sass +++ b/app/assets/stylesheets/devise/sessions/new.sass @@ -1,4 +1,37 @@ +@import "../../partials/clean/constants" + 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 margin-bottom: 1em diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 44571b5c..285773b0 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -1,39 +1,67 @@

Log in

-<% if can_use_neopass %> - <%= 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" %> +
+
+ <%= form_with(model: resource, url: session_path(resource_name), + class: "login-form") do |f| %> +
+ <%= f.label :name, 'DTI Username' %>
+ <%= f.text_field :name, autofocus: true, autocomplete: "username" %> +
+ +
+ <%= f.label :password, "DTI Password" %>
+ <%= f.password_field :password, autocomplete: "current-password" %> +
+ +
+ <%= f.check_box :remember_me %> + <%= f.label :remember_me %> +
+ +
+ <%= f.submit "Log in" %> +
+ <% end %> + + +
+ + <% if can_use_neopass %> +
+
Have a NeoPass?
+ + <%= 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 %> + +
+ How does it work? +

+ If this is your first time using NeoPass at Dress to Impress, we'll + create a new DTI account for you automatically! +

+

+ You'll be asked for 3 permissions: OpenID and + Email tell us who you are, and + Linkage tells us your Neopets username. +

+

+ After that, you'll be able to one-click log in here, any time! +

+

+ To connect an existing DTI account, don't start here! Log in with + your password first, then check the Settings page. +

+
+
<% end %> -<% end %> - -<%= form_with(model: resource, url: session_path(resource_name), - class: "login-form") do |f| %> -
- <%= f.label :name, 'Username' %>
- <%= f.text_field :name, autofocus: true, autocomplete: "username" %> -
- -
- <%= f.label :password %>
- <%= f.password_field :password, autocomplete: "current-password" %> -
- -
- <%= f.check_box :remember_me %> - <%= f.label :remember_me %> -
- -
- <%= f.submit "Log in" %> -
-<% end %> - - <% content_for :stylesheets do %>