質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Q&A

0回答

600閲覧

rails ログイン認証(モーダル表示)でのログインエラー時に画面遷移無しにしたい

kenkenkengo.y

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

0グッド

0クリップ

投稿2020/05/05 03:35

編集2020/05/05 03:41

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問