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
|
||||
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
|
||||
background: #fff
|
||||
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>
|
||||
|
||||
<%= 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 %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :name, 'Username' %><br />
|
||||
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
|
||||
</div>
|
||||
|
||||
<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 %>
|
||||
<fieldset>
|
||||
<div class="field">
|
||||
<%= f.label :name, 'DTI Username' %>
|
||||
<span class="hint">Use this to log in to Dress to Impress!</span>
|
||||
<br />
|
||||
<em><%= @minimum_password_length %> characters minimum</em>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= f.text_field :name, autocomplete: "username" %>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password_confirmation %><br />
|
||||
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :email %>
|
||||
<span class="hint">This can help you recover your account later.</span>
|
||||
<br />
|
||||
<%= f.email_field :email, autocomplete: "email" %>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
|
||||
<%= f.password_field :current_password, autocomplete: "current-password" %>
|
||||
</div>
|
||||
<fieldset>
|
||||
<div class="field">
|
||||
<%= f.label :password, "New password" %>
|
||||
<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">
|
||||
<%= f.submit "Update" %>
|
||||
<%= f.submit "Save changes" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "Back", :back %>
|
||||
<% content_for :stylesheets do %>
|
||||
<%= stylesheet_link_tag "devise/registrations/edit" %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<% if resource.errors.any? %>
|
||||
<div id="error_explanation" data-turbo-cache="false">
|
||||
<h2>
|
||||
<%= I18n.t("errors.messages.not_saved",
|
||||
count: resource.errors.count,
|
||||
resource: resource.class.model_name.human.downcase)
|
||||
%>
|
||||
</h2>
|
||||
<div class="error-explanation" data-turbo-cache="false">
|
||||
<header>
|
||||
<%= I18n.t("errors.messages.not_saved", count: resource.errors.count,
|
||||
resource: "user") %>
|
||||
</header>
|
||||
<ul>
|
||||
<% resource.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue