Tidier User Settings page and add helpful messages to user forms

Author: ipweblab

app/assets/stylesheets/forms.scss

@@ -11,7 +11,9 @@ label[required] {
 .help-inline {
   font-size: 0.8rem;
   font-style: italic;
-  line-height: 1.1;
+  line-height: 1.3;
+  display: inline-flex;
+  color: $info;
 }
 
 .btn-lg, .btn-group-lg > .btn {

app/assets/stylesheets/login.scss

@@ -10,8 +10,7 @@
 
 .sessions,
 .passwords,
-.unlocks,
-.registrations {
+.unlocks {
 
   .logo {
     margin: 40px auto;

app/views/devise/registrations/_common_registration_fields.html.erb

@@ -9,14 +9,15 @@
   <%= f.label :username, class: 'control-label' %>
   <div>
     <%= f.text_field :username, class: 'form-control' %>
+    <span class='help-inline'>3-190 characters: only letters, numbers, underscores, and dashes.</span>
   </div>
 </div>
 
 <div class="form-group">
   <%= f.label :password, class: 'control-label' %>
   <div>
     <%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
-    <% if @validatable %><span class="help-inline"><%= @minimum_password_length %> characters minimum.</span><% end %>
+    <span class='help-inline'>Minimum 8 characters.</span>
   </div>
 </div>
 

app/views/devise/registrations/edit.html.erb

@@ -1,11 +1,15 @@
 <% content_for :title, "Account" -%>
 
 <div class="container">
-  <div class="row">
-    <p>If you want to access ActiveWorkflow via the REST API the token for your user is:
-      <pre><code class="text-info"><%= JsonWebToken.encode(user_id: current_user.id) %></code></pre>
-    </p>
+  <div class="row mt-3 mb-5">
+    <div class="col-md-12">
+      <p><em>If you want to access ActiveWorkflow via the REST API, the token for your user is:</em>
+        <pre><code class="text-info"><%= JsonWebToken.encode(user_id: current_user.id) %></code></pre>
+      </p>
+    </div>
+  </div>
 
+  <div class="row">
     <div class="col-md-6">
 
         <h2>Edit <%= resource_name.to_s.humanize %></h2>
@@ -16,6 +20,7 @@
             <%= f.label :email, class: 'control-label' %>
             <div>
               <%= f.email_field :email, autofocus: true, class: 'form-control' %>
+              <span class='help-inline'></span>
             </div>
           </div>
 
@@ -27,6 +32,7 @@
             <%= f.label :username, class: 'control-label' %>
             <div>
               <%= f.text_field :username, class: 'form-control' %>
+              <span class='help-inline'>3-190 characters: only letters, numbers, underscores, and dashes.</span>
             </div>
           </div>
 
@@ -64,13 +70,15 @@
             <%= f.label :password, class: 'control-label' %>
             <div>
               <%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
+              <span class='help-inline'>Minimum 8 characters.</span>
             </div>
           </div>
 
           <div class="form-group">
             <%= f.label :password_confirmation, class: 'control-label' %>
             <div>
               <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
+              <span class='help-inline'></span>
             </div>
           </div>