HAML Views for Devise Using Bootstrap3 - moralesalberto/personal GitHub Wiki

Layout

!!! 5
%html
  %head
    %title Personal
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"}
    = stylesheet_link_tag "application", :medial => "all", 'data-turbolinks-track' => true
    = javascript_include_tag "application", "data-turbolinks-track" => true
    = csrf_meta_tags

  %div{:class => "container"}
    %body
      %div{:class => "row margin-base-vertical"}
        %div{:class => 'col-md-6 col-md-offset-3'}
          = render(:partial => "shared/flash_messages")
        = yield

Flash Partial

- if(flash[:notice])
  %div{:class => 'alert alert-info'}
    = flash[:notice]
- if(flash[:alert])
  %div{:class => 'alert alert-danger'}
    = flash[:alert]

Login View (Sessions New)

%div{:class => "row margin-base-vertical"}
  %div{:class => 'col-md-6 col-md-offset-3'}
    = render(:partial => 'shared/model_error_messages', :locals => {:model => resource})
    %div{:class => 'bordered'}
      %h4{:class => "col-lg-offset-2"} Please log-in
      %p  
      = form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-horizontal', :role => 'form'}) do |f|
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} Email
          %div{:class => 'col-lg-8'}= f.email_field :email, :autofocus => true, :class => 'form-control', :placeholder => 'Email'
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} Password
          %div{:class => 'col-lg-8'}= f.password_field :password, :class => 'form-control'
        
        %div{:class => 'form-group'}
          %div{:class => 'col-lg-offset-2 col-lg-8'}= f.submit "Sign in", :class => "btn btn-default"

        %div{:class => 'form-group'}
          %div{:class => 'col-lg-offset-2 col-lg-8'}= render "devise/shared/links"

Forgot password view

%div{:class => "row margin-base-vertical"}
  %div{:class => 'col-md-6 col-md-offset-3'}
    = render(:partial => 'shared/model_error_messages', :locals => {:model => resource})
    %div{:class => 'bordered'}
      %h4{:class => "col-lg-offset-2"} Forgot your password?
      %p  
      = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => {:method => :post, :class => 'form-horizontal', :role => 'form'}) do |f|
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} Email
          %div{:class => 'col-lg-8'}= f.email_field :email, :autofocus => true, :class => 'form-control', :placeholder => 'Email'
        %div{:class => 'form-group'}
        %div{:class => 'form-group'}
          %div{:class => 'col-lg-offset-2 col-lg-8'}= f.submit "Send me reset password instructions", :class => "btn btn-default"

Reset Password View

%div{:class => "row margin-base-vertical"}
  %div{:class => 'col-md-6 col-md-offset-3'}
    = render(:partial => 'shared/model_error_messages', :locals => {:model => resource})
    %div{:class => 'bordered'}
      %h4{:class => "col-lg-offset-2"} Change your password
      %p  
      = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => {:method => :put, :class => 'form-horizontal', :role => 'form'}) do |f|
        = devise_error_messages!
        = f.hidden_field :reset_password_token
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} New password
          %div{:class => 'col-lg-8'}= f.password_field :password, :autofocus => true, :class => 'form-control', :placeholder => 'Email'
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} New password confirmation
          %div{:class => 'col-lg-8'}= f.password_field :password_confirmation, :class => 'form-control', :placeholder => 'Email'
        %div{:class => 'form-group'}
        %div{:class => 'form-group'}
          %div{:class => 'col-lg-offset-2 col-lg-8'}= f.submit "Change my password", :class => "btn btn-default"

Change Password View -- Uses custom Users controller

%div{:class => "row margin-base-vertical"}
  %div{:class => 'col-md-6 col-md-offset-3'}
    = render(:partial => "shared/model_error_messages", :locals => {:model => @user})
    %div{:class => 'bordered'}
      %h4{:class => "col-lg-offset-2"} Change your password
      %p  
      = form_for(@user, :url => {:action => 'update_password'}, :html => {:method => :patch, :class => 'form-horizontal', :role => 'form'}) do |f|
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} Current Password
          %div{:class => 'col-lg-8'}= f.password_field :current_password, :class => 'form-control'
        
        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} New Password
          %div{:class => 'col-lg-8'}= f.password_field :password, :class => 'form-control'

        %div{:class => 'form-group'}
          %label{:class => 'col-lg-2 control-label'} New Password Confirmation
          %div{:class => 'col-lg-8'}= f.password_field :password_confirmation, :class => 'form-control'

        %div{:class => 'form-group'}
          %div{:class => 'col-lg-offset-2 col-lg-8'}= f.submit "Change Password", :class => "btn btn-default"

Custom users controller

class UsersController < ApplicationController
  def edit
    @user = current_user
  end

    def update_password
    @user = User.find(current_user.id)
    if @user.update_with_password(user_params)
      redirect_to root_path
    else
      render "edit"
    end
  end

  private

  def user_params
    params.required(:user).permit(:current_password, :password, :password_confirmation)
  end
end