Redesign user settings form
Motivation is that I wanna add NeoPass stuff to here! But also like, it's looked bad for a long time, let's clean it up!! (I just used the Devise default without any styling at all lol)
This commit is contained in:
parent
8e269df3c1
commit
82aea20679
4 changed files with 97 additions and 40 deletions
|
|
@ -82,7 +82,7 @@ $container_width: 800px
|
||||||
input, button, select, label
|
input, button, select, label
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
input[type=text], input[type=password], input[type=search], input[type=number], select, textarea
|
input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
|
||||||
border-radius: 3px
|
border-radius: 3px
|
||||||
background: #fff
|
background: #fff
|
||||||
border: 1px solid $input-border-color
|
border: 1px solid $input-border-color
|
||||||
|
|
|
||||||
46
app/assets/stylesheets/devise/registrations/edit.sass
Normal file
46
app/assets/stylesheets/devise/registrations/edit.sass
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
@import "../../partials/clean/constants"
|
||||||
|
|
||||||
|
.settings-form
|
||||||
|
border: 1px solid $module-border-color
|
||||||
|
background: $module-bg-color
|
||||||
|
border-radius: 1em
|
||||||
|
padding: 1em 1.25em
|
||||||
|
|
||||||
|
h2
|
||||||
|
font-size: 1.5rem
|
||||||
|
margin-bottom: .25em
|
||||||
|
|
||||||
|
.hint
|
||||||
|
font-style: italic
|
||||||
|
font-size: .85em
|
||||||
|
opacity: .9
|
||||||
|
|
||||||
|
fieldset
|
||||||
|
padding-block: .5em
|
||||||
|
|
||||||
|
fieldset:not(:last-of-type)
|
||||||
|
border-bottom: 1px solid $module-border-color
|
||||||
|
margin-bottom: .5em
|
||||||
|
|
||||||
|
.field
|
||||||
|
margin-bottom: 1em
|
||||||
|
|
||||||
|
.field_with_errors
|
||||||
|
display: inline
|
||||||
|
|
||||||
|
label
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
.error-explanation
|
||||||
|
color: $error-color
|
||||||
|
background: $error-bg-color
|
||||||
|
border: 1px solid $error-border-color
|
||||||
|
border-radius: .5em
|
||||||
|
padding: .5em
|
||||||
|
margin-bottom: .5em
|
||||||
|
|
||||||
|
header
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
ul
|
||||||
|
padding-left: 2em
|
||||||
|
|
@ -1,44 +1,57 @@
|
||||||
<h2>Settings</h2>
|
<h2>Settings</h2>
|
||||||
|
|
||||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
|
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "settings-form" }) do |f| %>
|
||||||
|
<h2>Your info</h2>
|
||||||
<%= render "devise/shared/error_messages", resource: resource %>
|
<%= render "devise/shared/error_messages", resource: resource %>
|
||||||
|
|
||||||
<div class="field">
|
<fieldset>
|
||||||
<%= f.label :name, 'Username' %><br />
|
<div class="field">
|
||||||
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
|
<%= f.label :name, 'DTI Username' %>
|
||||||
</div>
|
<span class="hint">Use this to log in to Dress to Impress!</span>
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<%= f.label :email %><br />
|
|
||||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
|
||||||
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
|
|
||||||
<%= f.password_field :password, autocomplete: "new-password" %>
|
|
||||||
<% if @minimum_password_length %>
|
|
||||||
<br />
|
<br />
|
||||||
<em><%= @minimum_password_length %> characters minimum</em>
|
<%= f.text_field :name, autocomplete: "username" %>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :password_confirmation %><br />
|
<%= f.label :email %>
|
||||||
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
<span class="hint">This can help you recover your account later.</span>
|
||||||
</div>
|
<br />
|
||||||
|
<%= f.email_field :email, autocomplete: "email" %>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<div class="field">
|
<fieldset>
|
||||||
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
|
<div class="field">
|
||||||
<%= f.password_field :current_password, autocomplete: "current-password" %>
|
<%= f.label :password, "New password" %>
|
||||||
</div>
|
<span class="hint">Leave blank if you don't want to change it.</span>
|
||||||
|
<br />
|
||||||
|
<%= f.password_field :password, autocomplete: "new-password" %>
|
||||||
|
<% if @minimum_password_length %>
|
||||||
|
<br />
|
||||||
|
<span class="hint"><%= @minimum_password_length %> characters minimum</span>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<%= f.label :password_confirmation, "New password confirmation" %><br />
|
||||||
|
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<div class="field">
|
||||||
|
<%= f.label :current_password %>
|
||||||
|
<span class="hint">We need your current password to confirm your changes.</span>
|
||||||
|
<br />
|
||||||
|
<%= f.password_field :current_password, autocomplete: "current-password" %>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<%= f.submit "Update" %>
|
<%= f.submit "Save changes" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%= link_to "Back", :back %>
|
<% content_for :stylesheets do %>
|
||||||
|
<%= stylesheet_link_tag "devise/registrations/edit" %>
|
||||||
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
<% if resource.errors.any? %>
|
<% if resource.errors.any? %>
|
||||||
<div id="error_explanation" data-turbo-cache="false">
|
<div class="error-explanation" data-turbo-cache="false">
|
||||||
<h2>
|
<header>
|
||||||
<%= I18n.t("errors.messages.not_saved",
|
<%= I18n.t("errors.messages.not_saved", count: resource.errors.count,
|
||||||
count: resource.errors.count,
|
resource: "user") %>
|
||||||
resource: resource.class.model_name.human.downcase)
|
</header>
|
||||||
%>
|
|
||||||
</h2>
|
|
||||||
<ul>
|
<ul>
|
||||||
<% resource.errors.full_messages.each do |message| %>
|
<% resource.errors.full_messages.each do |message| %>
|
||||||
<li><%= message %></li>
|
<li><%= message %></li>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue