ログイン機能を作ろう。 パート３
devisegemを追加していきます。
参考
Docker使ったRails環境でdeviseを導入する手順 - Qiita
gemfile に
gem 'devise'
その後docker-compose run web bundle install
その後
docker-compose build
そしたら、gemが入っているはずなので、deviseをインストールします。
docker-compose run web rails g devise:install
これで、インストールできたはずなので、viewを作っていきます。
docker-compose run web rails g devise:views
モデルを作っていきます。
docker-compose run web rails g devise user
app/views/deviseの中にviewが追加されていて、
app/models/userというモデルが追加されています。
deviseの初期設定はemailとpasswordの２つです。最小限なものになっています。
ですが、今回はそれに加えて、nameを追加していきたいと思います。
db/migrate/20210223102723_devise_create_users(数字は違うかも？)
この中に t.string :nameを追加
次にapp/cotroller/application_controller.rb
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
private
def configure_permitted_parameters
end
end
５行目のsign_upは新規登録のことで、app/views/devise/registrations/new.erbに名前も追できる欄を追加していきます。
<div class="container mt-5">
<div class="row">
<div class="col-6 mx-auto">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :name %><br />
<%= f.text_field :name, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
</div>
<div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
bootstrapの便利さよ、次にこれをheaderとして追加していきたいと思います。
headerを作る場所は共通部分として、書きたいので、app/veiws/layout/application.html.erbで、書きます
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to 'FLXED_FEE', root_path, class: "navbar-brand" %>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<% if user_signed_in? %>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<%= link_to 'マイページ', user_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to '新規投稿', new_recipe_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to '投稿一覧', recipes_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link" %>
</li>
</ul>
</div>
<% else %>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<%= link_to 'ログイン', new_user_session_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to '新規登録', new_user_registration_path, class: "nav-link" %>
</li>
</ul>
</div>
<% end %>
</nav>
これは、if文で、ログインしているかどうかを、区別して、違う処理をしてくれる
<% if user_signed_in? %>
を使っています。
あとは、ログイン画面のviewもきれいにして、とりあえず今日はここまで、ちょっと雑なので気が向いたらきれいに編集していきたい！
次回はuserのテストコードを書いていきます。
