Deviseのエラーメッセージにbootstrapを当てたい

こんにちは!kossyです!



本日気になったニュースはこちら
www.nikkei.com

プログラミングスクール、雨後の筍のように乱立してますよね。
エンジニア不足(できるエンジニアが不足してるだけであって、未経験や経験の浅い人向けには門戸は開かれて無い印象です)なので、
社会的意義の高い事業だとは思いますが、一方で、
SEO対策にめちゃくちゃ力を入れている某スクールのように、
情報の非対称性を利用して、受講者のことを考えず運営するようなスクールもありますので、
プログラミングスクール選びには十分検討して決めましょう。





さて、今回はdeviseのエラーメッセージにbootstrapのスタイルを当てる方法を
ブログに残してみたいと思います。



環境
Rails 5.1.6
Ruby 2.5.1
devise 4.5.0
bootstrap-rails 4.1.3




devise_helper.rbを作ってdevise_error_messages!の中身を書き換えるだけ


qiita.com

このQiita記事通りに実装したらスタイルの適用ができました。

module DeviseHelper
  def devise_error_messages!
    return "" if resource.errors.empty?

    html = ""
    messages = resource.errors.full_messages.each do |errmsg|
      html += <<-EOF
      <div class="alert-danger">
        #{errmsg}
      </div>
      EOF
    end
    html.html_safe
  end

  def devise_error_messages?
    resource.errors.empty? ? false : true
  end

end



app/views/registrations/new.html.haml


.signUpPage
  .titleArea
    %h1 アカウントを新規作成
    .m-3 or
    = render "devise/shared/links"
  .container.w-50.text-center
    = devise_error_messages!
  .container
    = form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "mt-5, signUpForm" }) do |f|
      .form-group
        = f.label :name
        = f.text_field :name, class: "form-control", placeholder: "名前を入力してください"
      .form-group
        = f.label :email
        = f.email_field :email, class: "form-control", placeholder: "emailを入力してください" ,autocomplete: "email"
      .form-group
        = f.label :password
        - if @minimum_password_length
          %em
            (#{@minimum_password_length}文字以上入力してください)
        = f.password_field :password, class: "form-control", placeholder:"パスワードを入力してください", autocomplete: "off"
      .form-group
        = f.label :password_confirmation
        = f.password_field :password_confirmation, class:"form-control", placeholder: "パスワードを再度入力してください", autocomplete: "off"
      .text-center
        = f.submit "アカウントを作成", class: "btn submitBtn"

これだけで適用できました。