Merge 5bf3183 into ea2c90a

packages/about-you/theme/components/AppHeader.vue

@@ -57,7 +57,7 @@ export default {
     LocaleSelector
   },
   setup() {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleAuthModal } = useUiState();
     const { cart, loadCart } = useCart();
     const { loadWishlist } = useWishlist();
     const { search, searchResults } = useSearch();
@@ -97,7 +97,7 @@ export default {
       searchResults,
       showSearchResults,
       toggleCartSidebar,
-      toggleLoginModal,
+      toggleAuthModal,
       toggleWishlistSidebar,
       onSearchQueryChanged
     };

packages/commercetools/theme/lang/en.js

@@ -112,4 +112,7 @@ export default {
   'login in to your account': 'login in to your account',
   'Create an account': 'Create an account',
   'Your bag is empty': 'Your bag is empty',
+  'There is already an existing customer with this email': 'There is already an existing customer with this email',
+  'Account with the given credentials not found.': 'Account with the given credentials not found.',
+  'Customer account with the given credentials not found.': 'Customer account with the given credentials not found.'
 };

packages/commercetools/theme/pages/Checkout/PersonalDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="log-in desktop-only">
-      <SfButton class="log-in__button color-secondary" @click="toggleLoginModal">
+      <SfButton class="log-in__button color-secondary" @click="toggleAuthModal">
         {{ $t('Log into your account') }}
       </SfButton>
       <p class="log-in__info">{{ $t('or fill the details below') }}:</p>
@@ -131,7 +131,7 @@ export default {
     ValidationProvider
   },
   setup(props, context) {
-    const { toggleLoginModal } = useUiState();
+    const { toggleAuthModal } = useUiState();
     const { register, isAuthenticated } = useUser();
     const { loadDetails, personalDetails, setPersonalDetails, loading } = useCheckout();
     const accountBenefits = ref(false);
@@ -160,7 +160,7 @@ export default {
       createAccount,
       setPersonalDetails,
       handleFormSubmit,
-      toggleLoginModal,
+      toggleAuthModal,
       characteristics: [
         { description: 'Faster checkout',
           icon: 'clock' },

packages/core/core/__tests__/composables/useUiState.spec.ts

@@ -3,12 +3,12 @@ import { useUiState } from '../../../nuxt-theme-module/theme/composables';
 const {
   isCartSidebarOpen,
   isWishlistSidebarOpen,
-  isLoginModalOpen,
+  isAuthModalOpen,
   isCategoryGridView,
   isFilterSidebarOpen,
   toggleCartSidebar,
   toggleWishlistSidebar,
-  toggleLoginModal,
+  toggleAuthModal,
   toggleCategoryGridView,
   toggleFilterSidebar
 } = useUiState();
@@ -31,11 +31,11 @@ describe('useUiState', () => {
   });
 
   it('Login Modal', () => {
-    const expectedIsLoginModalOpen = !isLoginModalOpen.value;
+    const expectedIsAuthModalOpen = !isAuthModalOpen.value;
 
-    toggleLoginModal();
+    toggleAuthModal();
 
-    expect(expectedIsLoginModalOpen).toBe(isLoginModalOpen.value);
+    expect(expectedIsAuthModalOpen).toBe(isAuthModalOpen.value);
   });
 
   it('Grid View', () => {

packages/core/docs/shopify/use-user.md

@@ -88,7 +88,7 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { useUser } from '@vue-storefront/shopify';
 
 export default {
-  name: 'LoginModal',
+  name: 'AuthModal',
     components: {
       SfInput,
       SfButton,

packages/core/nuxt-theme-module/theme/components/AppHeader.vue

@@ -43,7 +43,7 @@ export default {
     LocaleSelector
   },
   setup(props, { root }) {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleAuthModal } = useUiState();
     const { changeSearchTerm, getFacetsFromURL } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
     const { cart, load: loadCart } = useCart();
@@ -63,7 +63,7 @@ export default {
         return root.$router.push('/my-account');
       }
 
-      toggleLoginModal();
+      toggleAuthModal();
     };
 
     onSSR(async () => {

packages/core/nuxt-theme-module/theme/components/LoginModal.vue → packages/core/nuxt-theme-module/theme/components/AuthModal.vue

@@ -1,20 +1,24 @@
 <template>
   <SfModal
-    :visible="isLoginModalOpen"
+    :visible="isAuthModalOpen"
     class="modal"
-    @close="toggleLoginModal"
+    @close="toggleAuthModal"
   >
     <template #modal-bar>
       <SfBar
         class="sf-modal__bar smartphone-only"
         :close="true"
         :title="isLogin ? 'Log in' : 'Sign in'"
-        @click:close="toggleLoginModal"
+        @click:close="toggleAuthModal"
       />
     </template>
     <transition name="sf-fade" mode="out-in">
       <div v-if="isLogin">
         <ValidationObserver v-slot="{ handleSubmit }" key="log-in">
+          <SfAlert
+            v-if="serverError && serverError.fieldName === null"
+            type="danger"
+            :message="serverError && serverError.displayMessage" />
           <form class="form" @submit.prevent="handleSubmit(handleLogin)">
             <ValidationProvider rules="required|email" v-slot="{ errors }">
               <SfInput
@@ -71,13 +75,17 @@
       </div>
       <div v-else class="form">
         <ValidationObserver v-slot="{ handleSubmit }" key="sign-up">
+          <SfAlert
+            v-if="serverError && serverError.fieldName === null"
+            type="danger"
+            :message="serverError && serverError.displayMessage" />
           <form class="form" @submit.prevent="handleSubmit(handleRegister)" autocomplete="off">
             <ValidationProvider rules="required|email" v-slot="{ errors }">
               <SfInput
                 data-cy="login-input_email"
                 v-model="form.email"
-                :valid="!errors[0]"
-                :errorMessage="errors[0]"
+                :valid="serverError && serverError.fieldName === 'email' ? false : !errors[0]"
+                :errorMessage="serverError && serverError.fieldName === 'email' ? serverError.displayMessage : errors[0]"
                 name="email"
                 label="Your email"
                 class="form__element"
@@ -151,11 +159,12 @@
 </template>
 <script>
 import { ref, watch } from '@vue/composition-api';
-import { SfModal, SfInput, SfButton, SfCheckbox, SfLoader, SfAlert, SfBar } from '@storefront-ui/vue';
-import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { required, email } from 'vee-validate/dist/rules';
+import { SfAlert, SfBar, SfButton, SfCheckbox, SfInput, SfLoader, SfModal } from '@storefront-ui/vue';
+import { extend, ValidationObserver, ValidationProvider } from 'vee-validate';
+import { email, required } from 'vee-validate/dist/rules';
 import { useUser } from '<%= options.generate.replace.composables %>';
 import { useUiState } from '~/composables';
+import { knownErrors } from '~/helpers/errors';
 
 extend('email', {
   ...email,
@@ -168,7 +177,7 @@ extend('required', {
 });
 
 export default {
-  name: 'LoginModal',
+  name: 'AuthModal',
   components: {
     SfModal,
     SfInput,
@@ -180,23 +189,37 @@ export default {
     ValidationObserver,
     SfBar
   },
-  setup() {
-    const { isLoginModalOpen, toggleLoginModal } = useUiState();
+  setup(_, context) {
+    const { isAuthModalOpen, toggleAuthModal } = useUiState();
     const form = ref({});
+    const serverError = ref({});
     const isLogin = ref(false);
     const createAccount = ref(false);
     const rememberMe = ref(false);
-    const { register, login, loading } = useUser();
+    const { register, login, loading, error } = useUser();
 
-    watch(isLoginModalOpen, () => {
-      if (isLoginModalOpen) {
+    watch([isAuthModalOpen, isLogin], (newValue, prevValues) => {
+      if (isAuthModalOpen) {
         form.value = {};
+        serverError.value = {};
       }
+      if (newValue[1] !== prevValues[1]) serverError.value = {};
     });
 
+    const handleError = ({ email }) => {
+      const activeModal = isLogin.value ? 'login' : 'register';
+      const currErr = error.value[activeModal];
+      if (!currErr) return;
+
+      const authErrors = knownErrors(context, email);
+      serverError.value = authErrors.find(authError => authError.originalMessage === currErr.message);
+    };
+
     const handleForm = (fn) => async () => {
       await fn({ user: form.value });
-      toggleLoginModal();
+      handleError(form.value);
+      if (isLogin.value && !error.value.login) toggleAuthModal();
+      if (!isLogin.value && !error.value.register) toggleAuthModal();
     };
 
     const handleRegister = async () => handleForm(register)();
@@ -209,8 +232,10 @@ export default {
       isLogin,
       createAccount,
       rememberMe,
-      isLoginModalOpen,
-      toggleLoginModal,
+      error,
+      serverError,
+      isAuthModalOpen,
+      toggleAuthModal,
       handleLogin,
       handleRegister
     };

packages/core/nuxt-theme-module/theme/components/BottomNavigation.vue

@@ -39,14 +39,14 @@ export default {
     SfCircleIcon
   },
   setup(props, { root }) {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleAuthModal } = useUiState();
     const { isAuthenticated } = useUser();
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         return root.$router.push('/my-account');
       }
-      toggleLoginModal();
+      toggleAuthModal();
     };
 
     return {

packages/core/nuxt-theme-module/theme/composables/useUiState.ts

@@ -7,7 +7,7 @@ Vue.use(VueCompositionAPI);
 const state = reactive({
   isCartSidebarOpen: false,
   isWishlistSidebarOpen: false,
-  isLoginModalOpen: false,
+  isAuthModalOpen: false,
   isCategoryGridView: true,
   isFilterSidebarOpen: false
 });
@@ -23,9 +23,9 @@ const useUiState = () => {
     state.isWishlistSidebarOpen = !state.isWishlistSidebarOpen;
   };
 
-  const isLoginModalOpen = computed(() => state.isLoginModalOpen);
-  const toggleLoginModal = () => {
-    state.isLoginModalOpen = !state.isLoginModalOpen;
+  const isAuthModalOpen = computed(() => state.isAuthModalOpen);
+  const toggleAuthModal = () => {
+    state.isAuthModalOpen = !state.isAuthModalOpen;
   };
 
   const isCategoryGridView = computed(() => state.isCategoryGridView);
@@ -41,12 +41,12 @@ const useUiState = () => {
   return {
     isCartSidebarOpen,
     isWishlistSidebarOpen,
-    isLoginModalOpen,
+    isAuthModalOpen,
     isCategoryGridView,
     isFilterSidebarOpen,
     toggleCartSidebar,
     toggleWishlistSidebar,
-    toggleLoginModal,
+    toggleAuthModal,
     toggleCategoryGridView,
     toggleFilterSidebar
   };

packages/core/nuxt-theme-module/theme/helpers/errors/authentication.ts

@@ -0,0 +1,21 @@
+export const knownErrors = (context, email) => {
+  const { $i18n } = context.root;
+
+  return [
+    {
+      originalMessage: `There is already an existing customer with the email '"${email}"'.`,
+      displayMessage: `${$i18n.t('There is already an existing customer with this email')} ${email}.`,
+      fieldName: 'email'
+    },
+    {
+      originalMessage: 'Account with the given credentials not found.',
+      displayMessage: `${$i18n.t('Account with the given credentials not found.')}`,
+      fieldName: null
+    },
+    {
+      originalMessage: 'Network error: Customer account with the given credentials not found.',
+      displayMessage: `${$i18n.t('Customer account with the given credentials not found.')}`,
+      fieldName: null
+    }
+  ];
+};

packages/core/nuxt-theme-module/theme/helpers/errors/index.js

@@ -0,0 +1,5 @@
+import { knownErrors } from './authentication';
+
+export {
+  knownErrors
+};

packages/core/nuxt-theme-module/theme/lang/en.js

@@ -112,4 +112,7 @@ export default {
   'login in to your account': 'login in to your account',
   'Create an account': 'Create an account',
   'Your bag is empty': 'Your bag is empty',
+  'There is already an existing customer with this email.': 'There is already an existing customer with this email.',
+  'Account with the given credentials not found.': 'Account with the given credentials not found.',
+  'Customer account with the given credentials not found.': 'Customer account with the given credentials not found.'
 };

packages/core/nuxt-theme-module/theme/layouts/account.vue

@@ -6,7 +6,7 @@
       <nuxt />
       <BottomNavigation />
       <CartSidebar />
-      <LoginModal />
+      <AuthModal />
     </div>
   </div>
 </template>
@@ -16,15 +16,15 @@ import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
-import LoginModal from '~/components/LoginModal.vue';
+import AuthModal from '~/components/AuthModal.vue';
 
 export default {
   components: {
     TopBar,
     AppHeader,
     BottomNavigation,
     CartSidebar,
-    LoginModal
+    AuthModal
   }
 };
 </script>

packages/core/nuxt-theme-module/theme/layouts/default.vue

@@ -21,7 +21,7 @@
 
       <CartSidebar />
       <WishlistSidebar />
-      <LoginModal />
+      <AuthModal />
     </div>
   </div>
 </template>
@@ -33,7 +33,7 @@ import AppFooter from '~/components/AppFooter.vue';
 import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import WishlistSidebar from '~/components/WishlistSidebar.vue';
-import LoginModal from '~/components/LoginModal.vue';
+import AuthModal from '~/components/AuthModal.vue';
 import LazyHydrate from 'vue-lazy-hydration';
 
 export default {
@@ -45,7 +45,7 @@ export default {
     AppFooter,
     CartSidebar,
     WishlistSidebar,
-    LoginModal
+    AuthModal
   }
 };
 </script>