LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(3)

13178 ワード
locomotivecms Ruby Rails devise Ruby テキストリンク

前回からの続きです。

前回までの記事で、ユーザー登録画面については無事CMS側でデザインできるようになったのですが、ログイン画面はあいかわらずこんな感じです。

この画面も、CMS側から変更できるようにします。

テンプレートを作る

まずは、CMS側でテンプレートを作りましょう。/loginpage としました。

app/views/pages/loginpage.liquid.haml
---
title: Loginpage
listed: false
published: true
position: 6
---
{% extends parent %}
{% block main %}

.row
  .large-8.columns
    %h1 ログイン
    .error {{error}}
    %form#new_user.new_user{"accept-charset" => "UTF-8", :action => "/users/sign_in", :method => "post", :_lpchecked => '1'}
      .hidden
        {% csrf_param %}
        %input{:name => "utf8", :type => "hidden", :value => "✓"}/
      %div
        %label{:for => "user_email"}
        %br/
        %input#user_email{:autofocus => "autofocus", :keyev => "true", :mouseev => "true", :name => "user[email]", :size => "30", :type => "email", :value => "{{user.email}}"}/
      %div
        %label{:for => "user_password"} Password
        %br/
        %input#user_password{:keyev => "true", :mouseev => "true", :name => "user[password]", :size => "30", :type => "password"}/
        %div
          %input{:name=>"user[remember_me]", :type=>"hidden", :value=>"0"}
          %input#user_remember_me{:name=>"user[remember_me]", :type=>"checkbox", :value=>"1"}
          %label{:for=>"user_remember_me"}Remember me
      %input{:name=>"commit", :type=>"submit", :value=>"Sign in"}
{% endblock %}

ログインコントロラーをカスタマイズ

次に、上記テンプレートを呼び出すように、コントローラーを編集します。Devise 側のコントローラーは SessionController なので、それを拡張します。

app/controllers/users/sessions_controller.rb
class Users::SessionsController < Devise::SessionsController
  include Locomotive::Routing::SiteDispatcher
  include Locomotive::Render
  include Locomotive::ActionController::LocaleHelpers
  include ActionView::Helpers::TagHelper
  before_filter :require_site
  # GET /resource/sign_in
  def new
    self.resource = resource_class.new(params.fetch(resource_name, {}))
    clean_up_passwords(resource)
    @page ||= self.locomotive_page('/loginpage')

    logger.debug flash[:alert]
    respond_to do |format|
      format.html {
         render :inline => @page.render(self.locomotive_context({ 'user' => self.resource, 'error' => flash[:alert]}))
      }
    end
  end
end

routes.rb も忘れずに変更します。

config/routes.rb
  devise_for :users, :controllers => {                                                                                                                        
    :registrations => 'users/registrations',
    :confirmations => 'users/confirmations',
    :sessions => 'users/sessions'
  }

Devise 用日本語リソースの配置

devise のエラーメッセージ用のファイルを、config/locales/devise.ja.yml として配置します。
中身は、yhara さんの公開しているものを参考にさせていただきました。

config/locales/devise.ja.yml
ja:                                                                                                                                                           
  errors:
    messages:
      not_found: "は見つかりませんでした"
#      not_found: "not found"
      already_confirmed: "は既に登録済みです"
#      already_confirmed: "was already confirmed"
       not_locked: "は凍結されていません"
#      not_locked: "was not locked"

  devise:
    failure:
      unauthenticated: 'ログインしてください。'
(省略)

これで、無事ログイン画面もCMS対応することが出来るようになりました！

以上で本シリーズは終了です。

Locomotive 関連の記事一覧：
* Locomotive Engine を Heroku で動かすまで
* LocomotiveCMS でニュース記事一覧機能を作る
* LocomotiveCMS のページにユーザー認証機能を組み込む（Engineの拡張）
* LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(1)
* LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(2)
* LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(3)
* LocomotiveCMS で、複数の Heroku インスタンスを使う