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:
Emi Matchu 2024-04-07 06:40:15 -07:00
parent 8e269df3c1
commit 82aea20679
4 changed files with 97 additions and 40 deletions

View file

@ -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

View 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

View file

@ -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 %>
<fieldset>
<div class="field"> <div class="field">
<%= f.label :name, 'Username' %><br /> <%= f.label :name, 'DTI Username' %>
<%= f.text_field :name, autofocus: true, autocomplete: "username" %> <span class="hint">Use this to log in to Dress to Impress!</span>
<br />
<%= f.text_field :name, autocomplete: "username" %>
</div> </div>
<div class="field"> <div class="field">
<%= f.label :email %><br /> <%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> <span class="hint">This can help you recover your account later.</span>
<br />
<%= f.email_field :email, autocomplete: "email" %>
</div> </div>
</fieldset>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <fieldset>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class="field"> <div class="field">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br /> <%= 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" %> <%= f.password_field :password, autocomplete: "new-password" %>
<% if @minimum_password_length %> <% if @minimum_password_length %>
<br /> <br />
<em><%= @minimum_password_length %> characters minimum</em> <span class="hint"><%= @minimum_password_length %> characters minimum</span>
<% end %> <% end %>
</div> </div>
<div class="field"> <div class="field">
<%= f.label :password_confirmation %><br /> <%= f.label :password_confirmation, "New password confirmation" %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %> <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div> </div>
</fieldset>
<fieldset>
<div class="field"> <div class="field">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br /> <%= 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" %> <%= f.password_field :current_password, autocomplete: "current-password" %>
</div> </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 %>

View file

@ -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>