6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】ログイン画面にエラーメッセージを表示させる(devise使用)

Posted at

環境

macOS: Big Sur Ver11.2.2
Rails: 6.0.0
Ruby: 2.6.5

やりたいこと

Railsアプリケーションでdeviseを使ってユーザー登録やらを実装している。
新規登録やパスワードリセット画面ではモデルに紐づくエラーメッセージが表示されるが、なぜかログイン画面では表示されない仕様になっている。
ログイン画面でもエラーメッセージを表示させてユーザーにわかりやすい仕様にしたい。

試したこと

新規登録のビューと同じパーシャルをログインのビューファイルにも記載した。
【結論】
表示されない…

app:views:devise:sessions/new.html.erb
<h2>ログイン</h2>

<%= form_with model: @user, url: new_user_session_path, local: true do |f| %>

<%# 以下にエラーメッセージのパーシャルを記載 %>
<%= render "devise/shared/error_messages", resource: resource %>

<div class="field">
  <%= f.label :email %><br />
  <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>

<div class="field">
  <%= f.label :password %><br />
  <%= f.password_field :password, autocomplete: "current-password" %>
</div>

<% if devise_mapping.rememberable? %>
<div class="field">
  <%= f.check_box :remember_me %>
  <%= f.label :remember_me %>
</div>
<% end %>

<div class="actions">
  <%= f.submit "ログインする" %>
</div>
<% end %>

<%= render "devise/shared/links" %>

解決方法

% rails g devise:install した時にターミナルの完了画面にそもそも指示が書いてありました!
指示に従って、以下のファイルを編集したら無事にエラーメッセージが表示されました(厳密に言うと、エラー用のフラッシュメッセージ)。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>

<head>
  <title>TakeOutApp</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>

  <%# deivseのフラッシュメッセージを表示 %>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>

  <%= yield %>

</body>

</html>

</html>

ちなみに、上記の記述でログインしてルートページにリダイレクトしたときにも「ログインに成功しました!」というフラッシュメッセージが表示されるようになります。

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?