Improving all forms

Dockerfile.neo4j

@@ -12,3 +12,6 @@ com.graphaware.module.NR.maxTopRankNodes=10\n\
 com.graphaware.module.NR.dampingFactor=0.85\n\
 com.graphaware.module.NR.propertyKey=nodeRank\n'\
   >> /var/lib/neo4j/conf/neo4j.conf
+RUN echo 'com.graphaware.runtime.stats.disabled=true\n\
+com.graphaware.server.stats.disabled=true\n'\
+  >> /var/lib/neo4j/conf/neo4j.conf

app/assets/stylesheets/application.scss

@@ -189,192 +189,6 @@ body {
   }
 }
 
-.form-container {
-  max-width: 400px;
-  margin: 0 auto;
-  padding: 20px;
-
-  .field {
-    margin-bottom: 15px;
-  }
-
-  .file-field {
-    padding: 15px 0;
-
-    label {
-      font-family: 'Roboto';
-      font-size: 16px;
-      color: #fff;
-      width: 100px;
-      display: inline-block;
-    }
-
-    input[type=file] {
-      width: 280px;
-    }
-  }
-
-  .fields-group {
-    margin-bottom: 25px;
-  }
-
-  .boolean-field {
-    margin-bottom: 5px;
-
-    label {
-      font-family: 'Roboto';
-      font-size: 14px;
-      color: #9baec8;
-    }
-
-    input[type=checkbox] {
-      display: inline-block;
-      margin-bottom: -13px;
-    }
-  }
-
-  input[type=text], input[type=email], input[type=password], textarea {
-    background: transparent;
-    border: 0;
-    border-bottom: 2px solid #9baec8;
-    padding: 7px 0;
-    font-size: 16px;
-    color: #fff;
-    display: block;
-    width: 100%;
-    outline: 0;
-    font-family: 'Roboto';
-
-    &:invalid {
-      box-shadow: none;
-    }
-
-    &:focus:invalid {
-      border-bottom-color: #df405a;
-    }
-
-    &:required:valid {
-      border-bottom-color: #79bd9a;
-    }
-
-    &:active, &:focus {
-      border-bottom-color: #2b90d9;
-    }
-  }
-
-  .field_with_error {
-    input[type=text], input[type=email], input[type=password] {
-      border-bottom-color: #df405a;
-    }
-  }
-
-  .prompt {
-    font-size: 16px;
-    color: #9baec8;
-    text-align: center;
-
-    .prompt-highlight {
-      font-weight: 500;
-      color: #fff;
-    }
-  }
-
-  code.copypasteable {
-    display: block;
-    font-family: 'Roboto Mono', monospace;
-    font-weight: 400;
-    font-size: 12px;
-    margin-top: 20px;
-    background: #282c37;
-    border-radius: 4px;
-    padding: 2px;
-    word-wrap: break-word;
-  }
-
-  .actions {
-    margin-top: 30px;
-
-    button {
-      display: block;
-      width: 100%;
-      border: 0;
-      border-radius: 4px;
-      background: #2b90d9;
-      color: #fff;
-      font-size: 18px;
-      padding: 10px;
-      text-transform: uppercase;
-      cursor: pointer;
-      font-weight: 500;
-      outline: 0;
-      margin-bottom: 10px;
-
-      &:hover {
-        background-color: lighten(#2b90d9, 5%);
-      }
-
-      &:active, &:focus {
-        position: relative;
-        top: 1px;
-        background-color: darken(#2b90d9, 5%);
-      }
-
-      &.negative {
-        background: #df405a;
-
-        &:hover {
-          background-color: lighten(#df405a, 5%);
-        }
-
-        &:active, &:focus {
-          background-color: darken(#df405a, 5%);
-        }
-      }
-    }
-  }
-
-  .flash-message {
-    text-align: center;
-    font-size: 14px;
-    margin-bottom: 30px;
-    font-weight: 500;
-  }
-
-  .form-footer {
-    margin-top: 30px;
-    text-align: center;
-
-    a {
-      color: #9baec8;
-      text-decoration: none;
-
-      &:hover {
-        color: #d9e1e8;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  #error_explanation {
-    background: #282c37;
-    color: #9baec8;
-    border-radius: 4px;
-    padding: 15px 10px;
-    margin-bottom: 30px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-
-    h2 {
-      font-weight: 500;
-      margin-bottom: 5px;
-    }
-
-    li {
-      margin-left: 15px;
-      list-style: circle;
-    }
-  }
-}
-
 .no-list {
   list-style: none;
 
@@ -415,6 +229,7 @@ body {
   }
 }
 
+@import 'forms';
 @import 'accounts';
 @import 'stream_entries';
 @import 'components';

app/assets/stylesheets/forms.scss

@@ -0,0 +1,182 @@
+.form-container {
+  max-width: 400px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.simple_form {
+  .input {
+    margin-bottom: 15px;
+  }
+
+  .input.file {
+    padding: 15px 0;
+    margin-bottom: 0;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 16px;
+      color: #fff;
+      width: 100px;
+      display: inline-block;
+    }
+
+    input[type=file] {
+      width: 280px;
+    }
+  }
+
+  .fields-group {
+    margin-bottom: 25px;
+  }
+
+  .input.boolean {
+    margin-bottom: 5px;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 14px;
+      color: #9baec8;
+    }
+
+    input[type=checkbox] {
+      display: inline-block;
+      margin-bottom: -13px;
+    }
+  }
+
+  input[type=text], input[type=email], input[type=password], textarea {
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid #9baec8;
+    padding: 7px 0;
+    font-size: 16px;
+    color: #fff;
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: 'Roboto';
+
+    &:invalid {
+      box-shadow: none;
+    }
+
+    &:focus:invalid {
+      border-bottom-color: #df405a;
+    }
+
+    &:required:valid {
+      border-bottom-color: #79bd9a;
+    }
+
+    &:active, &:focus {
+      border-bottom-color: #2b90d9;
+    }
+  }
+
+  .input.field_with_errors {
+    input[type=text], input[type=email], input[type=password] {
+      border-bottom-color: #df405a;
+    }
+
+    .error {
+      font-weight: 500;
+      color: #df405a;
+    }
+  }
+
+  .prompt {
+    font-size: 16px;
+    color: #9baec8;
+    text-align: center;
+
+    .prompt-highlight {
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+
+  code.copypasteable {
+    display: block;
+    font-family: 'Roboto Mono', monospace;
+    font-weight: 400;
+    font-size: 12px;
+    margin-top: 20px;
+    background: #282c37;
+    border-radius: 4px;
+    padding: 2px;
+    word-wrap: break-word;
+  }
+
+  .actions {
+    margin-top: 30px;
+
+    button {
+      display: block;
+      width: 100%;
+      border: 0;
+      border-radius: 4px;
+      background: #2b90d9;
+      color: #fff;
+      font-size: 18px;
+      padding: 10px;
+      text-transform: uppercase;
+      cursor: pointer;
+      font-weight: 500;
+      outline: 0;
+      margin-bottom: 10px;
+
+      &:hover {
+        background-color: lighten(#2b90d9, 5%);
+      }
+
+      &:active, &:focus {
+        position: relative;
+        top: 1px;
+        background-color: darken(#2b90d9, 5%);
+      }
+
+      &.negative {
+        background: #df405a;
+
+        &:hover {
+          background-color: lighten(#df405a, 5%);
+        }
+
+        &:active, &:focus {
+          background-color: darken(#df405a, 5%);
+        }
+      }
+    }
+  }
+}
+
+.flash-message {
+  background: #282c37;
+  color: #9baec8;
+  border-radius: 4px;
+  padding: 15px 10px;
+  margin-bottom: 30px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  text-align: center;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
+.form-footer {
+  margin-top: 30px;
+  text-align: center;
+
+  a {
+    color: #9baec8;
+    text-decoration: none;
+
+    &:hover {
+      color: #d9e1e8;
+      text-decoration: underline;
+    }
+  }
+}
+

app/controllers/xrd_controller.rb

@@ -1,5 +1,6 @@
 class XrdController < ApplicationController
-  before_action :set_default_format
+  before_action :set_default_format_json, only: :webfinger
+  before_action :set_default_format_xml, only: :host_meta
 
   def host_meta
     @webfinger_template = "#{webfinger_url}?resource={uri}"
@@ -24,7 +25,11 @@ class XrdController < ApplicationController
 
   private
 
-  def set_default_format
+  def set_default_format_xml
+    request.format = 'xml' if request.headers["HTTP_ACCEPT"].nil? && params[:format].nil?
+  end
+
+  def set_default_format_json
     request.format = 'json' if request.headers["HTTP_ACCEPT"].nil? && params[:format].nil?
   end
 

app/views/auth/confirmations/new.html.haml

@@ -1,12 +1,12 @@
 - content_for :page_title do
   Confirmation instructions
 
-= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
-  = devise_error_messages!
+= simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+  = render 'shared/error_messages', object: resource
+
+  = f.input :email, autofocus: true, required: true, placeholder: 'E-mail address'
 
-  .field
-    = f.email_field :email, autofocus: true, required: true, placeholder: 'E-mail address'
   .actions
-    = f.button "Resend confirmation instructions", type: 'submit'
+    = f.button :button, "Resend confirmation instructions", type: :submit
 
 .form-footer= render "auth/shared/links"

app/views/auth/passwords/edit.html.haml

@@ -1,15 +1,14 @@
 - content_for :page_title do
   Set new password
 
-= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
-  = devise_error_messages!
-  = f.hidden_field :reset_password_token
+= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
+  = render 'shared/error_messages', object: resource
+  = f.input :reset_password_token, as: :hidden
+
+  = f.input :password, autofocus: true, autocomplete: "off", placeholder: 'New password'
+  = f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
 
-  .field
-    = f.password_field :password, autofocus: true, autocomplete: "off", placeholder: 'New password'
-  .field
-    = f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
   .actions
-    = f.button "Change my password", type: :submit
+    = f.button :button, "Change my password", type: :submit
 
-= render "devise/shared/links"
+.form-footer= render "devise/shared/links"

app/views/auth/passwords/new.html.haml

@@ -1,12 +1,12 @@
 - content_for :page_title do
   Reset password
 
-= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
-  = devise_error_messages!
+= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+  = render 'shared/error_messages', object: resource
+
+  = f.input :email, autofocus: true, required: true, placeholder: 'E-mail address'
 
-  .field
-    = f.email_field :email, autofocus: true, required: true, placeholder: 'E-mail address'
   .actions
-    = f.button "Reset password", type: 'submit'
+    = f.button :button, "Reset password", type: :submit
 
 .form-footer= render "auth/shared/links"

app/views/auth/registrations/edit.html.haml

@@ -1,19 +1,15 @@
 - content_for :page_title do
   Change password
 
-= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
-  = devise_error_messages!
+= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
+  = render 'shared/error_messages', object: resource
 
-  .field
-    = f.email_field :email, placeholder: 'E-mail address'
-  .field
-    = f.password_field :password, autocomplete: "off", placeholder: 'New password'
-  .field
-    = f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
-  .field
-    = f.password_field :current_password, autocomplete: "off", placeholder: 'Current password'
+  = f.input :email, placeholder: 'E-mail address'
+  = f.input :password, autocomplete: "off", placeholder: 'New password'
+  = f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm new password'
+  = f.input :current_password, autocomplete: "off", placeholder: 'Current password'
 
   .actions
-    = f.button "Save changes", type: 'submit'
+    = f.button :button, "Save changes", type: :submit
 
 .form-footer= render "settings/shared/links"

app/views/auth/registrations/new.html.haml

@@ -1,20 +1,17 @@
 - content_for :page_title do
   Sign up
 
-= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
-  = devise_error_messages!
+= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+  = render 'shared/error_messages', object: resource
 
-  = f.fields_for :account do |ff|
-    .field
-      = ff.text_field :username, autofocus: true, placeholder: 'Username', required: true
+  = f.simple_fields_for :account do |ff|
+    = ff.input :username, autofocus: true, placeholder: 'Username', required: true
+
+  = f.input :email, placeholder: 'E-mail address', required: true
+  = f.input :password, autocomplete: "off", placeholder: 'Password', required: true
+  = f.input :password_confirmation, autocomplete: "off", placeholder: 'Confirm password', required: true
 
-  .field
-    = f.email_field :email, placeholder: 'E-mail address', required: true
-  .field
-    = f.password_field :password, autocomplete: "off", placeholder: 'Password', required: true
-  .field
-    = f.password_field :password_confirmation, autocomplete: "off", placeholder: 'Confirm password', required: true
   .actions
-    = f.button "Sign up", type: 'submit'
+    = f.button :button, "Sign up", type: :submit
 
 .form-footer= render "auth/shared/links"

app/views/auth/sessions/new.html.haml

@@ -1,12 +1,11 @@
 - content_for :page_title do
   Log in
 
-= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-  .field
-    = f.email_field :email, autofocus: true, placeholder: 'E-mail address', required: true
-  .field
-    = f.password_field :password, autocomplete: "off", placeholder: 'Password', required: true
+= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+  = f.input :email, autofocus: true, placeholder: 'E-mail address', required: true
+  = f.input :password, placeholder: 'Password', required: true
+
   .actions
-    = f.button "Log in", type: 'submit'
+    = f.button :button, "Log in", type: :submit
 
 .form-footer= render "auth/shared/links"

app/views/layouts/auth.html.haml

@@ -4,14 +4,15 @@
       %h1
         = link_to root_path do
           = image_tag 'logo.png'
-          %small= Rails.configuration.x.local_domain
 
     .form-container
       - if flash[:notice]
-        .flash-message.notice= flash[:notice]
+        .flash-message.notice
+          %strong= flash[:notice]
 
       - if flash[:alert]
-        .flash-message.alert= flash[:alert]
+        .flash-message.alert
+          %strong= flash[:alert]
 
       = yield
 

app/views/settings/preferences/show.html.haml

@@ -1,22 +1,16 @@
 - content_for :page_title do
   Preferences
 
-= form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
-  = f.fields_for :notification_emails, current_user.settings(:notification_emails) do |ff|
-    .boolean-field
-      = ff.check_box :follow
-      = ff.label :follow, 'Send e-mail when someone follows you'
-    .boolean-field
-      = ff.check_box :reblog
-      = ff.label :reblog, 'Send e-mail when someone reblogs your status'
-    .boolean-field
-      = ff.check_box :favourite
-      = ff.label :favourite, 'Send e-mail when someone favourites your status'
-    .boolean-field
-      = ff.check_box :mention
-      = ff.label :mention, 'Send e-mail when someone mentions you'
+= simple_form_for current_user, url: settings_preferences_path, html: { method: :put } do |f|
+  = render 'shared/error_messages', object: current_user
+
+  = f.simple_fields_for :notification_emails, current_user.settings(:notification_emails) do |ff|
+    = ff.input :follow, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone follows you'
+    = ff.input :reblog, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone reblogs your status'
+    = ff.input :favourite, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone favourites your status'
+    = ff.input :mention, as: :boolean, wrapper: :with_label, label: 'Send e-mail when someone mentions you'
 
   .actions
-    = f.button 'Save changes', type: :submit
+    = f.button :button, 'Save changes', type: :submit
 
 .form-footer= render "settings/shared/links"

app/views/settings/profiles/show.html.haml

@@ -1,19 +1,15 @@
 - content_for :page_title do
   Edit profile
 
-= form_for @account, url: settings_profile_path, html: { method: :put } do |f|
-  .field
-    = f.text_field :display_name, placeholder: 'Display name'
-  .field
-    = f.text_area :note, placeholder: 'Bio'
-  .file-field
-    = f.label :avatar
-    = f.file_field :avatar
-  .file-field
-    = f.label :header
-    = f.file_field :header
+= simple_form_for @account, url: settings_profile_path, html: { method: :put } do |f|
+  = render 'shared/error_messages', object: @account
+
+  = f.input :display_name, placeholder: 'Display name'
+  = f.input :note, placeholder: 'Bio'
+  = f.input :avatar, wrapper: :with_label
+  = f.input :header, wrapper: :with_label
 
   .actions
-    = f.button 'Save changes', type: :submit
+    = f.button :button, 'Save changes', type: :submit
 
 .form-footer= render "settings/shared/links"

app/views/shared/_error_messages.html.haml

@@ -0,0 +1,6 @@
+- if object.errors.any?
+  .flash-message#error_explanation
+    %strong
+      Something isn't quite right yet! Please review
+      = pluralize(object.errors.count, 'error')
+      below:

config/initializers/simple_form.rb

@@ -40,7 +40,7 @@ SimpleForm.setup do |config|
     b.optional :readonly
 
     ## Inputs
-    b.use :label_input
+    b.use :input
     b.use :hint,  wrap_with: { tag: :span, class: :hint }
     b.use :error, wrap_with: { tag: :span, class: :error }
 
@@ -51,6 +51,14 @@ SimpleForm.setup do |config|
     # b.use :full_error, wrap_with: { tag: :span, class: :error }
   end
 
+  config.wrappers :with_label, class: :input,
+    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
+    b.use :html5
+    b.use :hint,  wrap_with: { tag: :span, class: :hint }
+    b.use :error, wrap_with: { tag: :span, class: :error }
+    b.use :label_input
+  end
+
   # The default wrapper to be used by the FormBuilder.
   config.default_wrapper = :default