【devise】どうしてもログイン画面でエラーメッセージを表示させたい

おはようございます。
前回新規登録画面でのエラーメッセージの表示のさせ方の記事を書かせてもらいましたが、今回はログイン画面でエラーメッセージを表示させる方法について書いていきます。実装後のイメージはこんな感じです。

【rails】deviseでのバリデーションチェックのかけ方【同期通信】
https://shun-0211.hatenablog.com/entry/2020/06/05/204127

新規登録と同じようにやればできると思っちゃいますができません。自分も同じようにやろうとして大苦戦しました。そもそもログインができないのは入力後のメールアドレスに一致したユーザーのパスワードと入力したパスワードが同じであるかを見ているのであって、バリデーションチェックをしている訳ではないのです。これに気付ければ実装が見えてきます。

では一体どのように実装するのか。結論はrailsにデフォルトでついているflashを利用します。

flashとは

flashとはユーザーがログインしたときやメッセージを投稿したとき、一回限りの簡易的なメッセージを表示できるrailsの機能のこと。

では実際にflashを利用したエラーメッセージの表示をviewに入れてみます。

= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
   - flash.each do |key, value|　　#追加
     = content_tag :div, value, class: key　　#追加
   .input__form__email
     = f.text_field :email, placeholder: "ご登録頂いたメールアドレス", class: "email__form"
   .input__form__password
     = f.text_field :password, placeholder: "パスワード", class: "password__form"
   .login__button
     = f.submit "ログイン", class: "login__button"
   .for__forget__password   
     = link_to "パスワードをお忘れの方", "#"  

flash.each do |key, value|

deviseを使うとログイン時などに表示させるメッセージがキーとバリューの方式で自動で保存されます。ここでは、複数あるメッセージを一つ一つ取り出し表示させるための記述をしています。

content_tag :div, value, class: key

content_tagヘルパーメソッドでは１つ目の引数でタグ、２つ目の引数でそのコンテンツを指定することでHTML表記を実現させることができ、さらに引数を指定することでclassもつけることができます。これにより、エラーメッセージを画面上に表示させています。

後は、CSSで見た目を整えてあげて終了です。

.alert{
   font-weight: bold;
   color: red;
   padding-bottom: 15px;
 }
 .notice{
   display: none;
 }

noticeを非表示にしているのはログアウト後、すぐにログインすると下のような「ログアウトしました」と意図していない表示がされてしまうためです。ここはそもそもviewの書き方を直すのが本来になるので、これを参考にされる方はぜひそうして下さい。

以上で実装終了になります。最初にも触れましたが、バリデーションを見ていると勘違いしていたせいでハマりました。思い込みは怖いです。
ここまで読んでくださり、ありがとうございました。分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！