前提・実現したいこと
Ruby on rails ログイン認証(モーダル表示)でのログインエラー時(メールアドレスまたはパスワードが違う場合)に、ページが移り変わる事なく「そのままの画面で、エラー文のみ加わった形」で表示させたいです。
モーダルを実装する前は、ログイン専用のページ(/users/login-form)を作っていたため、ログインエラー時に、render "users/login-form" でエラー文を表示させていました。
今回ヘッダーにログインモーダルを表示させるためのボタンを作成しております。
(モーダル画面はvue.jsで作成しました)
よって、topページ、新規ユーザー登録ページなど、様々なページから、ログインモーダルにアクセスできる仕様にしているため、上記のようにrenderで特定のURLを指定するのではなく、「現在の画面で、エラー文のみ加わった形」で表示させるような仕様にしたいです。
そこで、良い案をご教示いただければ幸いです。
該当のソースコード
rails, vue.js
#######application.html
html
1<div id="app"> 2 <button v-on:click="openModal">ログイン</button> 3 <open-modal v-show="showContent" v-on:from-child="closeModal"> 4 5 <div class="main-containar"> 6 <div class="error_message"> 7 <%= @error_message %> 8 </div> 9 <div class="form-containar"> 10 <%= form_tag("/users/login") do %> 11 <div class="mail-containar"> 12 <p>メールアドレス</p> 13 <input name="email" value="<%= @email %>"> 14 </div> 15 <div class="password-containar"> 16 <p>パスワード</p> 17 <input name="password" type="password" value="<%= @password %>"> 18 </div> 19 <div class="submit-containar"> 20 <input type="submit" value="送信"> 21 </div> 22 <% end %> 23 </div> 24 </div> 25 26 </open-modal> 27 </div> 28 29<script> 30 Vue.component('open-modal',{ 31 template : 32 <div id="overlay" v-on:click="clickEvent"> 33 <div id="content" v-on:click="stopEvent"> 34 <p><slot></slot></p> 35 <button v-on:click="clickEvent">close</button> 36 </div> 37 </div> 38 , 39 methods :{ 40 clickEvent: function(){ 41 this.$emit('from-child') 42 }, 43 stopEvent: function(){ 44 event.stopPropagation() 45 } 46 } 47 }) 48 49 new Vue({ 50 el: '#app', 51 data: { 52 showContent: false 53 }, 54 methods:{ 55 openModal: function(){ 56 this.showContent = true 57 }, 58 closeModal: function(){ 59 this.showContent = false 60 }, 61 } 62 }) 63</script>
#######users_controller.rb
rails
1def login 2 @user=User.find_by(email: params[:email]) 3 if @user && @user.authenticate(params[:password]) 4 session[:user_id]=@user.id 5 flash[:notice]="ログインしました" 6 redirect_to("/users/#{@user.id}") 7 else 8 @error_message="メールアドレスまたはパスワードが間違っています" 9 @email=params[:email] 10 @password=params[:password] 11 render "users/login_form" 12 end 13 end
試したこと
別html作成の上、render partial:
→ ログインエラー時、エラー文を呼び起こしたいのに、逆に別htmlのページに飛んでしまう
render json: { messages:@error_message}
→ プログラム上でエラーが出てうまくいかない
補足情報(FW/ツールのバージョンなど)
ruby 2.6.5p114
Rails 6.0.2.2
あなたの回答
tips
プレビュー