[5.x] Prevent logout flow being triggered 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'
@@ -69,7 +70,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

@@ -148,6 +148,7 @@ export const login = async function (email, password) {
         },
         {
             notifyOnError: false,
+            redirectOnExpiration: false,
         },
     )
 

resources/views/components/notifications.blade.php

@@ -1,5 +1,5 @@
 <notifications v-cloak v-slot="{ 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">
+    <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" >
         <notification
             v-if="notifications.length"
             v-for="(notification, index) in notifications"

tests/playwright/checkout.spec.js

@@ -1,41 +1,71 @@
 import { test, expect } from '@playwright/test'
 import { BasePage } from './pages/BasePage'
 import { ProductPage } from './pages/ProductPage'
-import { CheckoutPage } from './pages/CheckoutPage'
+import { CheckoutPage, screenshot_login, screenshot_credentials, screenshot_payment, screenshot_success } from './pages/CheckoutPage'
 import { AccountPage } from './pages/AccountPage'
 
 const checkoutTypes = ['default', 'onestep']
 
 checkoutTypes.forEach((type) => {
     test(type + ' - as guest', BasePage.tags, async ({ page }) => {
         const productPage = new ProductPage(page)
-        const checkoutPage = new CheckoutPage(page, type)
+        const checkoutPage = new CheckoutPage(page, type, [
+            screenshot_login,
+            screenshot_credentials,
+            screenshot_payment,
+            screenshot_success,
+        ])
 
         await productPage.addToCart(process.env.PRODUCT_URL_SIMPLE)
-        await checkoutPage.checkout(`wayne+${crypto.randomUUID()}@enterprises.com`, false, false, [
-            'login',
-            'credentials',
-            'payment',
-            'success',
-        ])
+        await checkoutPage.checkout(`wayne+${crypto.randomUUID()}@enterprises.com`, false, false)
     })
 
     test(type + ' - as user', BasePage.tags, async ({ page }) => {
         const productPage = new ProductPage(page)
-        const checkoutPage = new CheckoutPage(page, type)
+        const checkoutPage = new CheckoutPage(page, type, [screenshot_login, screenshot_credentials])
         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 checkoutPage.checkout(email, password, true)
 
         await accountPage.logout()
 
+        checkoutPage.screenshots = []
         // Login
         await productPage.addToCart(process.env.PRODUCT_URL_SIMPLE)
         await checkoutPage.checkout(email, password)
     })
 })
+
+test('incorrect password login', BasePage.tags, async ({ page }) => {
+    const productPage = new ProductPage(page)
+    const checkoutPage = new CheckoutPage(page, 'default', [screenshot_credentials])
+    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)
+
+    await accountPage.logout()
+
+    checkoutPage.screenshots = []
+    // Login
+    await productPage.addToCart(process.env.PRODUCT_URL_SIMPLE)
+    await checkoutPage.gotoCheckout()
+    await checkoutPage.login(email, password + '!')
+    await page.getByTestId('continue').click()
+    await page.waitForTimeout(500)
+    await page.waitForLoadState('networkidle')
+    await expect(page.getByTestId('notifications')).toContainText(
+        'The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.',
+    )
+
+    await checkoutPage.checkout(email, password)
+})

tests/playwright/pages/CheckoutPage.js

@@ -1,10 +1,15 @@
 import { expect } from '@playwright/test'
 import { BasePage } from './BasePage'
 
+export const screenshot_login = 'login'
+export const screenshot_credentials = 'credentials'
+export const screenshot_payment = 'payment'
+export const screenshot_success = 'success'
 export class CheckoutPage {
-    constructor(page, type = 'default') {
+    constructor(page, type = 'default', screenshots = []) {
         this.page = page
         this.type = type
+        this.screenshots = screenshots
     }
 
     async gotoCheckout() {
@@ -14,18 +19,23 @@ export class CheckoutPage {
     }
 
     async login(email, password = false, register = false) {
+        await this.page.waitForLoadState('networkidle')
         await this.page.fill('[name=email]', email)
         await this.page.locator('[name=email]').press('Tab')
         await this.page.waitForLoadState('networkidle')
 
         if (password && !register) {
-            await new BasePage(this.page).screenshot('fullpage')
+            if (this.this.screenshots.includes(screenshot_login)) {
+                await new BasePage(this.page).screenshot('fullpage')
+            }
             await this.page.fill('[name=password]', password)
         }
 
         if (password && register) {
             await this.page.getByTestId('create-account').click()
-            await new BasePage(this.page).screenshot('fullpage')
+            if (this.this.screenshots.includes(screenshot_login)) {
+                await new BasePage(this.page).screenshot('fullpage')
+            }
             await this.page.fill('[name=password]', password)
             await this.page.fill('[name=password_repeat]', password)
             await this.page.fill('[name=firstname]', 'Bruce')
@@ -92,16 +102,16 @@ export class CheckoutPage {
         await this.page.getByTestId('continue').waitFor({ state: 'visible' })
     }
 
-    async checkout(email, password = false, register = false, screenshots = []) {
+    async checkout(email, password = false, register = false) {
         const method = this.type === 'onestep' ? 'checkoutOnestep' : 'checkoutDefault'
 
-        await this[method](email, password, register, screenshots)
+        await this[method](email, password, register)
     }
 
-    async checkoutDefault(email = false, password = false, register = false, screenshots = []) {
+    async checkoutDefault(email = false, password = false, register = false) {
         await this.gotoCheckout()
 
-        if (screenshots.includes('login')) {
+        if (this.screenshots.includes(screenshot_login)) {
             await new BasePage(this.page).screenshot('fullpage')
         }
 
@@ -110,31 +120,31 @@ export class CheckoutPage {
             await this.continue('credentials')
         }
 
-        if (screenshots.includes('credentials')) {
+        if (this.screenshots.includes(screenshot_credentials)) {
             await new BasePage(this.page).screenshot('fullpage')
         }
 
         await this.shippingAddress()
         await this.shippingMethod()
         await this.continue('payment')
 
-        if (screenshots.includes('payment')) {
+        if (this.screenshots.includes(screenshot_payment)) {
             await new BasePage(this.page).screenshot('fullpage')
         }
 
         await this.paymentMethod()
         await this.continue('success')
         await this.success()
 
-        if (screenshots.includes('success')) {
+        if (this.screenshots.includes(screenshot_success)) {
             await new BasePage(this.page).screenshot('fullpage-footer')
         }
     }
 
-    async checkoutOnestep(email = false, password = false, register = false, screenshots = []) {
+    async checkoutOnestep(email = false, password = false, register = false) {
         await this.gotoCheckout()
 
-        if (screenshots.includes('login')) {
+        if (this.screenshots.includes(screenshot_login)) {
             await new BasePage(this.page).screenshot('fullpage')
         }
 
@@ -146,14 +156,14 @@ export class CheckoutPage {
         await this.shippingMethod()
         await this.paymentMethod()
 
-        if (screenshots.includes('payment')) {
+        if (this.screenshots.includes(screenshot_payment)) {
             await new BasePage(this.page).screenshot('fullpage')
         }
 
         await this.continue('success')
         await this.success()
 
-        if (screenshots.includes('success')) {
+        if (this.screenshots.includes(screenshot_success)) {
             await new BasePage(this.page).screenshot('fullpage-footer')
         }
     }