[4.x] Prevent logout flow being triggert when incorrect credentials are used

resources/js/components/Checkout/CheckoutLogin.vue

@@ -1,4 +1,5 @@
 <script>
+import { SessionExpired } from '../../fetch'
 import { cart, setGuestEmailOnCart } from '../../stores/useCart'
 import { isEmailAvailable, login, register, user } from '../../stores/useUser'
 import { useDebounceFn } from '@vueuse/core'
@@ -70,7 +71,15 @@ export default {
         async handleLogin() {
             return await login(this.email, this.password)
                 .then(() => true)
-                .catch((error) => {
+                .catch(async (error) => {
+                    if (error instanceof SessionExpired) {
+                        let data = await error.response.json()
+                        if (data?.errors?.[0]?.message) {
+                            Notify(data.errors[0].message, 'error')
+                            return false
+                        }
+                    }
+
                     if (error.message) {
                         Notify(error.message, 'error')
                     }

resources/js/stores/useUser.js

@@ -136,6 +136,7 @@ export const login = async function (email, password) {
         },
         {
             notifyOnError: false,
+            redirectOnExpiration: false,
         },
     ).then(async (response) => {
         await loginByToken(response.data.generateCustomerToken.token)

resources/views/components/notifications.blade.php

@@ -1,5 +1,5 @@
 <notifications v-cloak>
-    <div class="fixed sm:max-w-sm sm:w-full top-6 right-6 left-6 sm:left-auto flex flex-col z-notifications" slot-scope="{ notifications }">
+    <div class="fixed sm:max-w-sm sm:w-full top-6 right-6 left-6 sm:left-auto flex flex-col z-notifications" data-testid="notifications" slot-scope="{ notifications }">
         <notification v-if="notifications.length" v-for="(notification, index) in notifications" :notification="notification" :key="index +1">
             <transition
                 enter-active-class="ease-in-out duration-500"

tests/playwright/checkout.spec.js

@@ -39,3 +39,31 @@ checkoutTypes.forEach((type) => {
         await checkoutPage.checkout(email, password)
     })
 })
+
+test('incorrect password login', BasePage.tags, async ({ page }) => {
+    const productPage = new ProductPage(page)
+    const checkoutPage = new CheckoutPage(page, 'default')
+    const accountPage = new AccountPage(page)
+
+    const email = `wayne+${crypto.randomUUID()}@enterprises.com`
+    const password = 'IronManSucks.91939'
+
+    // Register
+    await productPage.addToCart(process.env.PRODUCT_URL_SIMPLE)
+    await checkoutPage.checkout(email, password, true, ['credentials'])
+
+    await accountPage.logout()
+
+    // Login
+    await productPage.addToCart(process.env.PRODUCT_URL_SIMPLE)
+    await checkoutPage.gotoCheckout()
+    await checkoutPage.login(email, password + '!')
+    await this.page.getByTestId('continue').click()
+    await this.page.waitForTimeout(500)
+    await this.page.waitForLoadState('networkidle')
+    await expect(page.getByTestId('notifications')).toHaveText(
+        'The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.',
+    )
+
+    await checkoutPage.checkout(email, password)
+})