YNSTakeru / sail-sandbox

0 stars 0 forks source link

conduitのログイン機能の実装 #27

Closed YNSTakeru closed 7 months ago

YNSTakeru commented 7 months ago

何を変更したか

ログイン成功後のリダイレクト先を変更し、ログインページのエラーメッセージを表示するようにしました。

変更内容

以下のdiffを参照してください:

diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index 613bcd9..ca4196b 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -28,7 +28,7 @@ public function store(LoginRequest $request): RedirectResponse

         $request->session()->regenerate();

-        return redirect()->intended(route('dashboard', absolute: false));
+        return redirect()->intended(route('home', absolute: false));
     }

     /**
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 662e11e..cac30cc 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -8,18 +8,20 @@
                         <a href="/register">Need an account?</a>
                     </p>

-                    <ul class="error-messages">
-                        <li>That email is already taken</li>
-                    </ul>
+                    <x-input-error :messages="$errors->get('email')"></x-input-error>
+                    <x-input-error :messages="$errors->get('password')"></x-input-error>

-                    <form>
+                    <form method="POST" action="{{ route('login') }}">
+                        @csrf
                         <fieldset class="form-group">
-                            <input class="form-control form-control-lg" type="text" placeholder="Email" />
+                            <x-text-input id="email" type="email" name="email" :value="old('email')" required
+                                autocomplete="email" placeholder="Email" />
                         </fieldset>
                         <fieldset class="form-group">
-                            <input class="form-control form-control-lg" type="password" placeholder="Password" />
+                            <x-text-input id="password" type="password" name="password" required
+                                autocomplete="new-password" placeholder="Password" />
                         </fieldset>
-                        <button class="btn btn-lg btn-primary pull-xs-right">Sign in</button>
+                        <x-primary-button class="pull-xs-right">Sign in</x-primary-button>
                     </form>
                 </div>
             </div>

変更の理由

ログイン成功後にユーザーをホームページにリダイレクトする方が直感的であり、また、ログインページでエラーメッセージを表示することでユーザーが何が問題であるかを理解しやすくするためです。

変更の影響

ログイン成功後にユーザーはホームページにリダイレクトされ、ログインページではエラーメッセージが表示されます。

どのように変更を行なったのか

AuthenticatedSessionController.phpのstoreメソッドで、redirect()->intended(route('dashboard', absolute: false));をredirect()->intended(route('home', absolute: false));に変更しました。

また、login.blade.phpで、エラーメッセージを表示するためのx-input-errorコンポーネントを追加し、フォームをPOSTメソッドで送信するようにしました。

関連するIssueまたはPR

スクリーンショット

26

テスト

既に登録されているuserのemailとpasswordを入力し、Sign inボタンをクリック後、localhost/#/にリダイレクトされることを確認 また、既に登録されているemailで異なるpasswordを入力し、エラーメッセージが表示されることを確認