From 82aea206794cba74e4300e571724af227e96e2ed Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sun, 7 Apr 2024 06:40:15 -0700 Subject: [PATCH] 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) --- app/assets/stylesheets/_layout.sass | 2 +- .../devise/registrations/edit.sass | 46 +++++++++++ app/views/devise/registrations/edit.html.erb | 77 +++++++++++-------- .../devise/shared/_error_messages.html.erb | 12 ++- 4 files changed, 97 insertions(+), 40 deletions(-) create mode 100644 app/assets/stylesheets/devise/registrations/edit.sass diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass index 3b319d31..982be028 100644 --- a/app/assets/stylesheets/_layout.sass +++ b/app/assets/stylesheets/_layout.sass @@ -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 diff --git a/app/assets/stylesheets/devise/registrations/edit.sass b/app/assets/stylesheets/devise/registrations/edit.sass new file mode 100644 index 00000000..88c2e169 --- /dev/null +++ b/app/assets/stylesheets/devise/registrations/edit.sass @@ -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 diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb index c61fa346..3ba3962c 100644 --- a/app/views/devise/registrations/edit.html.erb +++ b/app/views/devise/registrations/edit.html.erb @@ -1,44 +1,57 @@

Settings

-<%= 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| %> +

Your info

<%= render "devise/shared/error_messages", resource: resource %> -
- <%= f.label :name, 'Username' %>
- <%= f.text_field :name, autofocus: true, autocomplete: "username" %> -
- -
- <%= f.label :email %>
- <%= f.email_field :email, autofocus: true, autocomplete: "email" %> -
- - <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> -
Currently waiting confirmation for: <%= resource.unconfirmed_email %>
- <% end %> - -
- <%= f.label :password %> (leave blank if you don't want to change it)
- <%= f.password_field :password, autocomplete: "new-password" %> - <% if @minimum_password_length %> +
+
+ <%= f.label :name, 'DTI Username' %> + Use this to log in to Dress to Impress!
- <%= @minimum_password_length %> characters minimum - <% end %> -
+ <%= f.text_field :name, autocomplete: "username" %> +
-
- <%= f.label :password_confirmation %>
- <%= f.password_field :password_confirmation, autocomplete: "new-password" %> -
+
+ <%= f.label :email %> + This can help you recover your account later. +
+ <%= f.email_field :email, autocomplete: "email" %> +
+ -
- <%= f.label :current_password %> (we need your current password to confirm your changes)
- <%= f.password_field :current_password, autocomplete: "current-password" %> -
+
+
+ <%= f.label :password, "New password" %> + Leave blank if you don't want to change it. +
+ <%= f.password_field :password, autocomplete: "new-password" %> + <% if @minimum_password_length %> +
+ <%= @minimum_password_length %> characters minimum + <% end %> +
+ +
+ <%= f.label :password_confirmation, "New password confirmation" %>
+ <%= f.password_field :password_confirmation, autocomplete: "new-password" %> +
+
+ +
+
+ <%= f.label :current_password %> + We need your current password to confirm your changes. +
+ <%= f.password_field :current_password, autocomplete: "current-password" %> +
+
- <%= f.submit "Update" %> + <%= f.submit "Save changes" %>
<% end %> -<%= link_to "Back", :back %> +<% content_for :stylesheets do %> + <%= stylesheet_link_tag "devise/registrations/edit" %> +<% end %> diff --git a/app/views/devise/shared/_error_messages.html.erb b/app/views/devise/shared/_error_messages.html.erb index cabfe307..2ad73ce7 100644 --- a/app/views/devise/shared/_error_messages.html.erb +++ b/app/views/devise/shared/_error_messages.html.erb @@ -1,11 +1,9 @@ <% if resource.errors.any? %> -
-

- <%= I18n.t("errors.messages.not_saved", - count: resource.errors.count, - resource: resource.class.model_name.human.downcase) - %> -

+
+
+ <%= I18n.t("errors.messages.not_saved", count: resource.errors.count, + resource: "user") %> +
    <% resource.errors.full_messages.each do |message| %>
  • <%= message %>