Added style to the Devise views and a Sign out button to the header.

americas--guest · Oct 27, 2013 · 1374223 · 1374223
1 parent 4199b77
commit 1374223
Show file tree

Hide file tree

Showing 16 changed files with 251 additions and 60 deletions.
diff --git a/app/assets/stylesheets/style.css b/app/assets/stylesheets/style.css
@@ -36,6 +36,11 @@ nav {
   padding: 10px 14px 18px;
 }
 
+.nav-sign-out {
+  float: right;
+  margin-top: -10px;
+}
+
 .bird-topbar-blue {
   background-image: url(/assets/twitter_web_sprite_icons.png);
   background-position: -80px 0;
@@ -76,6 +81,11 @@ nav {
   font-size: 12px;
 }
 
+.panel form .form-group.or-links {
+  margin-top: 8px !important;
+  margin-bottom: 20px !important;
+}
+
 .panel form .form-group label {
   font-weight: normal;
 }
@@ -97,14 +107,14 @@ nav {
   float: left;
 }
 
-.panel form .form-group .btn {
-  float: right;
-}
-
 .panel form .form-group .btn.btn-warning {
   color: black;
 }
 
 .panel form .clearfix {
   padding: 1px;
 }
+
+.clearfix.top-space {
+  margin: 120px 0 0 0;
+}
diff --git a/app/builders/inline_errors_builder.rb b/app/builders/inline_errors_builder.rb
@@ -0,0 +1,16 @@
+class InlineErrorsBuilder < ActionView::Helpers::FormBuilder
+  def errors_for(meth, options = {})
+    @template.content_tag :p, @object.errors[meth].join('<br>').html_safe, :class => 'help-block' if has_errors?(meth)
+  end
+
+  def validation_class(meth, *klasses)
+    klasses << 'has-error' if has_errors?(meth)
+    klasses.compact.join(' ').html_safe
+  end
+
+  private
+
+  def has_errors?(meth)
+    @object.present? ? @object.errors[meth].present? : false
+  end
+end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -2,4 +2,14 @@ class ApplicationController < ActionController::Base
   # Prevent CSRF attacks by raising an exception.
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
+
+  before_filter :configure_permitted_parameters, if: :devise_controller?
+
+  protected
+
+  # See section on Strong Parameters: https://github.com/plataformatec/devise
+  def configure_permitted_parameters
+    devise_parameter_sanitizer.for(:sign_up) << :name
+    devise_parameter_sanitizer.for(:sign_up) << :username
+  end
 end
diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb
@@ -1,2 +1,5 @@
 module HomeHelper
+  def resource
+    current_user || User.new
+  end
 end
diff --git a/app/views/devise/mailer/reset_password_instructions.html.erb b/app/views/devise/mailer/reset_password_instructions.html.erb
@@ -0,0 +1,8 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+
+<p><%= link_to 'Change my password', edit_password_url(@resource, :reset_password_token => @token) %></p>
+
+<p>If you didn't request this, please ignore this email.</p>
+<p>Your password won't change until you access the link above and create a new one.</p>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
@@ -0,0 +1,32 @@
+<div class="clearfix top-space"></div>
+<div class="row">
+  <div class="col-md-4 col-md-offset-4 panel panel-default">
+    <div class="pull-left">
+      <h4>Change your password</h4>
+    </div>
+    <div class="clearfix"></div>
+    <hr />
+
+    <%= form_for resource, :url => user_password_path,
+                           :builder => InlineErrorsBuilder,
+                           :method => :PUT,
+                           :role => :form do |f| %>
+     <div>
+        <%= content_tag :div, :class => f.validation_class(:password, "form-group") do %>
+          <%= f.text_field :password, :placeholder => "New Password", :class => 'form-control', :autofocus => true %>
+          <%= f.errors_for :password %>
+        <% end %>
+
+        <%= f.hidden_field :reset_password_token %>
+
+        <div class="form-group or-links">
+          <%= f.submit "Change my password", :class => "btn btn-primary pull-left" %>
+          <div style="padding-top: 8px;"></div>
+          - or -
+          <%= link_to "Sign in", new_user_session_path, :class => "pull-right" %><br />
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
@@ -0,0 +1,30 @@
+<div class="clearfix top-space"></div>
+<div class="row">
+  <div class="col-md-4 col-md-offset-4 panel panel-default">
+    <div class="pull-left">
+      <h4>Forgot your password?</h4>
+    </div>
+    <div class="clearfix"></div>
+    <hr />
+
+    <%= form_for resource, :url => user_password_path,
+                           :builder => InlineErrorsBuilder,
+                           :method => :POST,
+                           :role => :form do |f| %>
+
+      <div>
+        <%= content_tag :div, :class => f.validation_class(:email, "form-group") do %>
+          <%= f.text_field :email, :placeholder => "Email", :class => 'form-control', :autofocus => true %>
+          <%= f.errors_for :email %>
+        <% end %>
+
+        <div class="form-group or-links">
+          <%= f.submit "Send me instructions", :class => "btn btn-primary pull-left" %>
+          <div style="padding-top: 8px;"></div>
+          - or -
+          <%= link_to "Sign up", new_user_registration_path, :class => "pull-right" %><br />
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
@@ -0,0 +1,50 @@
+<div class="clearfix top-space"></div>
+<div class="row">
+  <div class="col-md-4 col-md-offset-4 panel panel-default">
+    <div class="pull-left">
+      <h4>Edit My Account</h4>
+    </div>
+    <div class="clearfix"></div>
+    <hr />
+
+    <%= form_for resource, :url => user_registration_path,
+                           :builder => InlineErrorsBuilder,
+                           :method => :put,
+                           :role => :form do |f| %>
+
+      <div>
+        <%= content_tag :div, :class => f.validation_class(:name, "form-group") do %>
+          <%= f.text_field :name, :placeholder => "Full Name", :class => 'form-control', :autofocus => true %>
+          <%= f.errors_for :name %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:username, "form-group") do %>
+          <%= f.text_field :username, :placeholder => "Username", :class => 'form-control', :autofocus => true %>
+          <%= f.errors_for :username %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:email, "form-group") do %>
+          <%= f.text_field :email, :placeholder => "Email", :class => 'form-control', :autofocus => true %>
+          <%= f.errors_for :email %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:password, "form-group") do %>
+          <%= f.password_field :password, :placeholder => "Password (if changing)", :class => 'form-control', :autocomplete => "off" %>
+          <%= f.errors_for :password %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:current_password, "form-group") do %>
+          <%= f.password_field :current_password, :placeholder => "Current Password", :class => 'form-control', :autocomplete => "off" %>
+          <%= f.errors_for :current_password %>
+        <% end %>
+
+
+        <div class="form-group tall">
+          <%= link_to "Back", :back, :class => "btn btn-default pull-left" %>
+          <%= f.submit "Update", :class => "btn btn-warning pull-right" %>
+        </div>
+      </div>
+    <% end %>
+
+  </div>
+</div>
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -0,0 +1,2 @@
+<div class="clearfix top-space"></div>
+<%= render :partial => 'home/sign_up' %>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -0,0 +1,3 @@
+<div class="clearfix top-space"></div>
+<%= render :partial => 'home/sign_in' %>
+
diff --git a/app/views/home/_sign_in.html.erb b/app/views/home/_sign_in.html.erb
@@ -0,0 +1,30 @@
+<div class="row">
+  <div class="col-md-4 col-md-offset-4 panel panel-default">
+    <%= form_for :user, :url => user_session_path,
+                        :builder => InlineErrorsBuilder,
+                        :method => :POST,
+                        :role => :form do |f| %>
+      <div>
+        <%= content_tag :div, :class => f.validation_class(:email, "form-group") do %>
+          <%= f.text_field :email, :placeholder => "Username or email", :class => 'form-control' %>
+          <%= f.errors_for :email %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:password, "form-group") do %>
+          <%= f.password_field :password, :placeholder => "Password", :class => 'form-control left' %>
+          <%= f.errors_for :password %>
+          <%= f.submit "Sign in", :class => "btn btn-primary pull-right" %>
+        <% end %>
+
+        <div class="clearfix"></div>
+
+        <div class="form-group">
+          <div class="pull-left">
+            <label><%= f.check_box :remember_me %> Remember me</label> -
+            <%= link_to "Forgot password?", new_user_password_path %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/home/_sign_up.html.erb b/app/views/home/_sign_up.html.erb
@@ -0,0 +1,39 @@
+<div class="row">
+  <div class="col-md-4 col-md-offset-4 panel panel-default">
+    <div class="pull-left">
+      <h4>New to Twitter? <span>Sign up</span></h4>
+    </div>
+    <div class="clearfix"></div>
+    <hr />
+    <%= form_for resource, :url => user_registration_path,
+                           :builder => InlineErrorsBuilder,
+                           :method => :POST,
+                           :role => :form do |f| %>
+      <div>
+        <%= content_tag :div, :class => f.validation_class(:name, "form-group") do %>
+          <%= f.text_field :name, :placeholder => "Full name", :class => 'form-control' %>
+          <%= f.errors_for :name %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:username, "form-group") do %>
+          <%= f.text_field :username, :placeholder => "Username", :class => 'form-control' %>
+          <%= f.errors_for :username %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:email, "form-group") do %>
+          <%= f.text_field :email, :placeholder => "Email", :class => 'form-control' %>
+          <%= f.errors_for :email %>
+        <% end %>
+
+        <%= content_tag :div, :class => f.validation_class(:password, "form-group") do %>
+          <%= f.password_field :password, :placeholder => "Password", :class => 'form-control' %>
+          <%= f.errors_for :password %>
+        <% end %>
+
+        <div class="form-group tall">
+          <%= f.submit "Sign up for Twitter", :class => "btn btn-warning pull-right" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,56 +1,3 @@
-<div class="row" style="margin-top: 120px;">
-  <div class="col-md-4 col-md-offset-4 panel panel-default">
-    <%= form_for :user, :url => user_session_path, :method => :POST, :role => :form do |f| %>
-      <div>
-        <div class="form-group">
-          <%= f.text_field :email, :placeholder => "Username or email", :class => "form-control" %>
-        </div>
-
-        <div class="form-group">
-          <%= f.password_field :password, :class => "form-control" %>
-          <%= f.submit "Sign in", :class => "btn btn-primary" %>
-        </div>
-
-        <div class="clearfix"></div>
-
-        <div class="form-group">
-          <div class="pull-left">
-            <label><%= f.check_box :remember_me %> Remember me</label> -
-            <%= link_to "Forgot password?", new_user_password_path %>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-4 col-md-offset-4 panel panel-default">
-    <div class="pull-left">
-      <h4>New to Twitter? <span>Sign up</span></h4>
-    </div>
-    <div class="clearfix"></div>
-    <hr />
-    <%= form_for :user, :url => user_registration_path, :method => :POST, :role => :form do |f| %>
-      <div>
-        <div class="form-group">
-          <%= f.text_field :name, :placeholder => "Full name", :class => "form-control" %>
-        </div>
-
-        <div class="form-group">
-          <%= f.text_field :email, :placeholder => "Email", :class => "form-control" %>
-        </div>
-
-        <div class="form-group">
-          <%= f.password_field :password, :class => "form-control", :placeholder => "Password" %>
-        </div>
-
-        <div class="form-group tall">
-          <%= f.submit "Sign up for Twitter", :class => "btn btn-warning" %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>
-
-
+<div class="clearfix top-space"></div>
+<%= render :partial => 'sign_in' %>
+<%= render :partial => 'sign_up' %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -14,6 +14,8 @@
       <a class="nav-logo-link" href="/">
         <span class="icon bird-topbar-blue"></span>
       </a>
+
+      <%= button_to("Sign out", destroy_user_session_path, :method => :delete, :class => 'btn btn-xs btn-link nav-sign-out') if user_signed_in? %>
     </div>
   </nav>
 

diff --git a/config/application.rb b/config/application.rb
@@ -19,5 +19,11 @@ class Application < Rails::Application
     # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
     # config.i18n.default_locale = :de
+
+    # By default, Rails wraps form fields with a div.field_with_errors. This messes with the DOM
+    # heirarchy so let's remove it: http://bit.ly/1aMUIu2
+    config.action_view.field_error_proc = Proc.new { |html_tag, instance|
+      "#{html_tag}".html_safe
+    }
   end
 end
diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -26,4 +26,7 @@
   # This option may cause significant delays in view rendering with a large
   # number of complex assets.
   config.assets.debug = true
+
+  # see Controller filters and helpers at: https://github.com/plataformatec/devise
+  config.action_mailer.default_url_options = { :host => 'localhost:3000' }
 end
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<div class="clearfix top-space"></div>
		<%= render :partial => 'home/sign_up' %>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<div class="clearfix top-space"></div>
		<%= render :partial => 'home/sign_in' %>
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,8 @@ @@
           <a class="nav-logo-link" href="/">
             <span class="icon bird-topbar-blue"></span>
           </a>
+          <%= button_to("Sign out", destroy_user_session_path, :method => :delete, :class => 'btn btn-xs btn-link nav-sign-out') if user_signed_in? %>
         </div>
       </nav>
@@ Expand Down @@