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


[前回](http://qiita.com/hal_sk/items/c0f56736398f1154ddca)からの続きです。

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

![sign_in.png](https://qiita-image-store.s3.amazonaws.com/0/1399/bb7d723a-11ba-30a4-b1c1-f911fc0a7f84.png "sign_in.png")

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

#テンプレートを作る

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

```HAML: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 なので、それを拡張します。

```ruby: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 も忘れずに変更します。

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

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

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

```YAML: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: 'ログインしてください。'
(省略)
```

![sign_in_error.png](https://qiita-image-store.s3.amazonaws.com/0/1399/a3b77c31-3403-0895-6d06-3dffbad4978b.png "sign_in_error.png")

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

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

---
Locomotive 関連の記事一覧：
* [Locomotive Engine を Heroku で動かすまで](http://qiita.com/hal_sk/items/0512a4a9cb215fb016f5)
* [LocomotiveCMS でニュース記事一覧機能を作る](http://qiita.com/hal_sk/items/b72db4a288566e92096c)
* [LocomotiveCMS のページにユーザー認証機能を組み込む（Engineの拡張）](http://qiita.com/hal_sk/items/c6d4f5582d23bc4dd415)
* [LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(1)](http://qiita.com/hal_sk/items/50c45f764cb95615dd59)
* [LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(2)](http://qiita.com/hal_sk/items/c0f56736398f1154ddca)
* [LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(3)](http://qiita.com/hal_sk/items/92d653f47ddadb6d879c)
* [LocomotiveCMS で、複数の Heroku インスタンスを使う](http://qiita.com/hal_sk/items/aba8d324638d205b2ce1)