deviseでログイン時のエラーメッセージをカスタマイズしたい

前提

Rails7.0.4
Ruby3.0.5
devise4.8.1

rails初学者です。
deviseでログイン等の認証機能を実装しています。
deviseをインストールし、Userモデル、コントローラ、ビューを作成し日本語化までを済ませました。
ルーティングの設定やデフォルトURLの設定も行い、フラッシュメッセージの設定をしている途中です。

現状、特に何も表示設定は行っていないのですが、ログインフォームに適当な値を入れてログインしようとすると、エラーメッセージが表示されます。
以下の画像のように、押した分だけ横に追加されていきます。<body>タグの外で、<html>タグの中の最下部に現れます。
ちなみに、ログイン画面でのみ上記の現象が起こり、新規登録画面でのエラーメッセージやログインした際のフラッシュメッセージはそれ自体の表示がされません。
イメージ説明

実現したいこと

エラーメッセージの表示、非表示の設定や配置等を自分でカスタマイズしたいです。

現在のコード

関連していそうな部分で手を加えたファイルは以下です。

erb:application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Bandapp</title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8
9    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
10    <%= javascript_importmap_tags %>
11  </head>
12
13  <body>
14    <%= render 'shared/header' %>
15    <%= yield %>
16    <%= render 'shared/footer' %>
17  </body>
18</html>

erb:sessions/new.html.erb
1<div class="top-wrapper">
2  <div class="container">
3    <div class="row">
4      <div class="top-text col mx-auto">
5        <h1 class="top-title fw-bold">BANDAPP</h1>
6        <h3 class="top-discription">ここにテキストを入力</h3>
7      </div>
8      <div class="login-form col-xl-7">
9        <div class="card w-50 mx-auto shadow border border-1">
10          <div class="card-body mx-2">
11            <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
12              <div class="form-group">
13                <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control-lg w-100 border border-1", placeholder: "メールアドレス"%>
14              </div>
15              <div class="form-group my-3">
16                <%= f.password_field :password, class: "form-control-lg w-100 border border-1", placeholder: "パスワード"%>
17              </div>
18              <div class="form-check">
19                <% if devise_mapping.rememberable? %>
20                  <%= f.check_box :remember_me %>
21                  <%= f.label :remember_me, "ログインを記憶する", class: "form-check-label" %>
22                <% end %>
23              </div>
24              <div class="action my-3">
25                <%= f.submit "ログイン", :class => "btn btn-secondary btn-block btn-lg w-100" %>
26              </div>
27              <%= link_to "パスワードを忘れた方はこちら", new_user_password_path, :class => "text-decoration-none text-dark d-block mb-4" %>
28              <div class="action border-top">
29                <%= link_to "アカウントを作成", new_user_registration_path, :class => "btn btn btn-outline-secondary btn-block btn-lg w-75 my-4" %>
30              </div>
31            <% end %>
32          </div>
33        </div>
34      </div>
35    </div>
36  </div>
37</div>

userモデルのモデルファイルやコントローラ等は自動作成されたものから変更はしていません。

試したこと

application.html.erbに以下のコードを追加するも、結果は変わらず。

  <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    <%= yield %>
  </body>

色々と自分なりに調べてみましたが、同じ状況に陥っている例が見当たらず困っています。
知識も浅い為見当違いをしている部分も多いかとは思いますが、少しでも助言等を頂ければ非常に有難いです。
何卒宜しくお願い申し上げます。

yuma.inaura

2023/01/01 14:46

質問内に今のコードを載せておきませんか？

palette3995

2023/01/02 09:41

コメントありがとうございます。当該のビューファイルのコードを追加いたしました。

回答1件

直接的な答えでなく恐縮ですが、Deviseを日本語化して導入するのであれば、下記の記事の通りにやると、手数も少なくきちんと設定できます。（たぶん10分ぐらい？）
https://ichitasu.com/devise-i18n/
そのため新しいプロジェクトで、上記の通りに作成し、既存アプリのコードと比較してみるのはいかがでしょうか？

尚、Rails7だとDeviseがTurboに対応していない可能性があるので、その際は、下記も参考にしてみてください。
公式：https://github.com/heartcombo/devise/wiki/Troubleshooting-Rails-7-and-Turbo-Drive

投稿2023/01/04 06:47