{"version":3,"file":"BaKJEzon.js","sources":["../../../../virtual:public?%2Fassets%2Fimages%2Fico-facebook.png","../../../../components/Auth/FacebookLoginButton.vue","../../../../pages/onboarding/login/index.vue"],"sourcesContent":["import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(\"/assets/images/ico-facebook.png\")","<script setup lang=\"ts\">\nimport { FACEBOOK_AUTH } from \"@/constants/urls\";\n\nconst onboardingStore = useOnboardingStore();\nconst facebookAuth = ref(FACEBOOK_AUTH);\n\nconst abandonedCartId = computed(() => onboardingStore.abandonedCartId);\n</script>\n<template>\n  <a\n    :href=\"`${facebookAuth}?abandoned_cart_id=${abandonedCartId}`\"\n    class=\"tw-mb-3 tw-rounded-[7px] tw-bg-[#3875EA] hover:tw-bg-[#3875EA]/80 tw-text-white tw-flex tw-h-10 tw-items-center tw-justify-center tw-w-full tw-font-bold tw-text-base tw-gap-2\"\n  >\n    <img class=\"tw-w-6\" src=\"/assets/images/ico-facebook.png\" alt=\"facebook\" />\n    <slot></slot>\n  </a>\n</template>\n<style scoped></style>\n","<script setup lang=\"ts\">\nimport { URL_ACCOUNT, URL_REACTIVATE_PAGE } from \"@/constants/urls\";\nimport { ROUTE_FORGOT_PASSWORD, ROUTE_SIGNUP } from \"@/constants/routes\";\nimport { GET_USER, LOGIN } from \"@/stores/actions\";\nimport Flash from \"@/models/Flash\";\nimport * as zod from \"zod\";\nimport {onMounted} from \"vue\";\nimport {parseISO} from \"date-fns\";\nimport AppStoreButtons from \"~/components/AppStoreButtons.vue\";\n\ndefinePageMeta({\n  layout: \"default-no-footer\",\n  middleware: [\"auth\"],\n});\n\nuseSeoMeta({\n  title: () => 'Login',\n  description: () => 'Login Page',\n  articleModifiedTime: () => parseISO('2022-01-01T00:00:00Z').toISOString(),\n  articlePublishedTime: () => parseISO('2022-01-01T00:00:00Z').toISOString(),\n})\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst authStore = useAuthStore();\nconst {subscription} = storeToRefs(authStore)\n\nconst error = ref(\"\");\nconst routeForgotPassword = ref(ROUTE_FORGOT_PASSWORD);\nconst routeSignup = ref(ROUTE_SIGNUP);\nconst innerRedirect = ref(URL_ACCOUNT);\nconst busy = ref(false);\n//TODO You need to create a composable for cases like this and replace it throughout the application\nconst focus = reactive<Record<string, boolean>>({\n  innerEmail: false,\n  password: false,\n});\n\nconst validationSchema = toTypedSchema(\n  zod.object({\n    innerEmail: zod\n      .string()\n      .email(\"Please enter a valid email address\")\n      .min(1, \"This field is required\")\n      .nullable(),\n    password: zod.string().min(1, \"This field is required\").nullable(),\n  })\n);\nconst { handleSubmit, errors } = useForm({\n  validationSchema,\n});\nconst { value: innerEmail, meta: innerEmailMeta } = useField<string | null>(\n  \"innerEmail\"\n);\nconst { value: password, meta: passwordMeta } = useField<string | null>(\n  \"password\"\n);\nconst serverErrors = ref();\n\nconst disabledState = computed(() => {\n  return (\n    !innerEmailMeta.valid ||\n    !passwordMeta.valid ||\n    errors?.value?.password ||\n    (serverErrors?.value?.password && serverErrors?.value?.password[0]) ||\n    errors.value.innerEmail ||\n    (serverErrors?.value?.email && serverErrors?.value?.email[0]) ||\n    busy.value\n  );\n});\n\nconst errorsEmailResult = computed(() => {\n  return (\n    (!hasFocus(\"innerEmail\") ? errors?.value?.innerEmail : null) ||\n    (serverErrors?.value?.email && serverErrors?.value?.email[0])\n  );\n});\n\nconst errorsPasswordResult = computed(() => {\n  return (\n    (!hasFocus(\"password\") ? errors?.value?.password : null) ||\n    (serverErrors?.value?.password && serverErrors?.value?.password[0])\n  );\n});\n\nconst submitLogin = handleSubmit(async () => {\n  if (busy.value) {\n    return;\n  }\n\n  busy.value = true;\n  try {\n    const responseData = await authStore[LOGIN]({\n      email: innerEmail.value,\n      password: password.value,\n    });\n    busy.value = false;\n    if (responseData.error) {\n      error.value = responseData.error;\n      return;\n    }\n    if (responseData.redirect === false) {\n      return;\n    }\n\n    await authStore[GET_USER]();\n    let newQueryString = (new URLSearchParams(window.location.search)).toString();\n    newQueryString = newQueryString ? \"?\" + newQueryString : \"\"\n\n    if (subscription.value?.status === \"cancelled\") {\n      window.location.href = URL_REACTIVATE_PAGE + newQueryString;\n    } else {\n      window.location.href = responseData.redirect\n        ? responseData.redirect\n        : (innerRedirect.value + newQueryString);\n    }\n  } catch (e) {\n    error.value = \"The email and password combination is incorrect\";\n  }\n  setTimeout(() => {\n    busy.value = false;\n  }, 1000);\n});\n\nfunction focusField(field: string) {\n  focus[field] = true;\n}\n\nfunction blurField(field: string) {\n  focus[field] = false;\n}\n\nfunction hasFocus(field: string) {\n  return focus[field] === true;\n}\n\nfunction clearFocusState() {\n  focus.password = false;\n  focus.innerEmail = false;\n}\n\nwatch([() => innerEmail.value, () => password.value], () => {\n  error.value = \"\";\n});\n\nonMounted(() => {\n  const { redirect, email, error } = route.query;\n  innerRedirect.value = redirect || URL_ACCOUNT;\n  if (email) {\n    innerEmail.value = email;\n    let query = Object.assign({}, route.query);\n    if (error) {\n      new Flash(error).error();\n      delete query.error;\n    }\n    delete query.email;\n    router.replace({ query });\n  }\n});\n</script>\n\n<template>\n  <div class=\"tw-overflow-hidden tw-flex-1 tw-flex tw-flex-col\">\n    <section\n      class=\"tw-max-w-screen-xxl tw-w-full tw-mx-auto tw-relative tw-overflow-hidden md:tw-overflow-visible tw-pt-[32px] md:tw-pt-[42px] tw-pb-4 lg:tw-pb-0 tw-z-10 tw-bg-[#f8f0e6]\"\n    >\n      <img\n        class=\"tw-hidden md:tw-block tw-absolute -tw-bottom-[100px] lg:tw-bottom-[-158px] tw-left-[20px] tw-w-[200px] lg:tw-w-[250px] min-[1024px]:tw-max-w-[330px] min-[1420px]:tw-max-w-[492px] min-[1024px]:tw-w-full\"\n        src=\"/assets/images/signup/left-illustration.png\"\n        alt=\"\"\n      />\n      <img\n        class=\"tw-hidden md:tw-block tw-absolute -tw-bottom-[120px] lg:-tw-bottom-[100px] min-[1420px]:-tw-bottom-[181px] tw-right-[20px] lg:tw-right-[50px] min-[1420px]:tw-right-[110px] tw-w-[200px] min-[1024px]:tw-max-w-[250px] min-[1420px]:tw-max-w-[390px] min-[1024px]:tw-w-full\"\n        src=\"/assets/images/signup/bottom-illustration.png\"\n        alt=\"\"\n      />\n      <img\n        class=\"tw-absolute -tw-top-[50px] md:-tw-top-2 -tw-top-2 -tw-right-1 min-[380px]:tw-right-2 md:-tw-right-[20px] lg:tw-right-[72px] tw-w-[180px] lg:tw-w-[21vw] tw-max-w-[283px] tw-pointer-events-none -tw-z-1\"\n        src=\"/assets/images/signup/top-illustration.png\"\n        alt=\"\"\n      />\n\n      <div class=\"tw-container\">\n        <div\n          class=\"tw-max-w-[308px] md:tw-max-w-none tw-mx-auto tw-pr-[110px] md:tw-pr-0\"\n        >\n          <h1\n            class=\"tw-text-[43px] md:tw-text-[46px] lg:tw-text-[60px] tw-font-black md:tw-text-center tw-leading-[1.04] md:tw-leading-normal tw-mb-[18px] md:tw-mb-1 tw-uppercase\"\n          >\n            Welcome Back!\n          </h1>\n        </div>\n\n        <div class=\"w-full tw-max-w-[308px] md:tw-max-w-[360px] tw-mx-auto\">\n          <div class=\"mx-auto mt-24 w-full px-36 sm:max-w-408\">\n            <form\n              @submit.prevent=\"submitLogin\"\n              class=\"w-full tw-max-w-[308px] md:tw-max-w-[360px] tw-mx-auto\"\n              method=\"post\"\n              action=\"#\"\n            >\n              <div>\n                <div class=\"tw-mb-[9px] email-input\">\n                  <input\n                    type=\"email\"\n                    placeholder=\"Email\"\n                    required\n                    @focus=\"focusField('innerEmail')\"\n                    @blur=\"blurField('innerEmail')\"\n                    v-model=\"innerEmail\"\n                    autocomplete=\"email\"\n                    :aria-invalid=\"\n                      (errors?.innerEmail && !hasFocus('innerEmail')) ||\n                      (serverErrors?.value?.email &&\n                        serverErrors?.value?.email[0])\n                        ? true\n                        : false\n                    \"\n                    aria-errormessage=\"error-email\"\n                    class=\"tw-h-10 tw-w-full tw-rounded-[7px] tw-px-4 tw-text-base tw-nl-green-100 placeholder:tw-text-nl-green-100/50 tw-shadow-nl-6 focus:tw-outline focus:tw-outline-1 focus:tw-outline-blue\"\n                    :class=\"{\n                      'input-error':\n                        (errors?.innerEmail && !hasFocus('innerEmail')) ||\n                        (serverErrors?.value?.email &&\n                          serverErrors?.value?.email[0]),\n                    }\"\n                  />\n                </div>\n                <div\n                  v-if=\"errorsEmailResult\"\n                  :id=\"`error-${errorsEmailResult}`\"\n                  aria-live=\"polite\"\n                  v-text=\"errorsEmailResult\"\n                  class=\"input-error-msg tw-mt-1 tw-mb-2\"\n                ></div>\n                <div class=\"tw-mb-[9px] zip-input\">\n                  <input\n                    @focus=\"focusField('password')\"\n                    @blur=\"blurField('password')\"\n                    required\n                    v-model=\"password\"\n                    @keyup.enter=\"submitLogin\"\n                    type=\"password\"\n                    name=\"password\"\n                    autocomplete=\"password\"\n                    placeholder=\"Password\"\n                    :aria-invalid=\"\n                      (errors?.password && !hasFocus('password')) ||\n                      (serverErrors?.value?.password &&\n                        serverErrors?.value?.password[0])\n                        ? true\n                        : false\n                    \"\n                    aria-errormessage=\"error-password\"\n                    class=\"tw-h-10 tw-w-full tw-rounded-[7px] tw-px-4 tw-text-base tw-nl-green-100 placeholder:tw-text-nl-green-100/50 tw-shadow-nl-6 focus:tw-outline focus:tw-outline-1 focus:tw-outline-blue\"\n                    :class=\"{\n                      'input-error':\n                        (errors?.password && !hasFocus('password')) ||\n                        (serverErrors?.value?.password &&\n                          serverErrors?.value?.password[0]),\n                    }\"\n                  />\n                </div>\n              </div>\n              <div>\n                <div\n                  v-if=\"errorsPasswordResult\"\n                  :id=\"`error-${errorsPasswordResult}`\"\n                  aria-live=\"polite\"\n                  v-text=\"errorsPasswordResult\"\n                  class=\"input-error-msg tw-mt-1\"\n                ></div>\n                <div v-if=\"error\" class=\"input-error-msg tw-mt-1\">\n                  {{ error }}\n                </div>\n              </div>\n              <div class=\"mt-38 sm:mt-20\">\n                <button\n                  type=\"submit\"\n                  :disabled=\"disabledState\"\n                  class=\"btn tw-w-full tw-mt-1.5 tw-flex tw-justify-center tw-items-center focus:tw-bg-nl-violet-200 tw-text-[16px] tw-p-2 tw-min-h-[45px] hover:tw-bg-nl-violet-200 tw-font-bold md:tw-font-semibold md:tw-py-[11px]\"\n                  :class=\"{\n                    'tw-pointer-events-none tw-bg-nl-violet-100/70':\n                      disabledState,\n                    'tw-bg-nl-violet-100': !disabledState,\n                  }\"\n                >\n                  <span v-if=\"!busy\"> Log In</span>\n                  <Loader position=\"absolute\" bg-color=\"white\" v-if=\"busy\" />\n                </button>\n\n                <div\n                  class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-font-bold tw-py-4\"\n                >\n                  <CaptureIconWave />\n                  OR\n                  <CaptureIconWave />\n                </div>\n\n                <ClientOnly>\n                  <AuthAppleLoginButton class=\"mt-16\"\n                    >Continue with Apple</AuthAppleLoginButton\n                  >\n                </ClientOnly>\n                <AuthGoogleLoginButton class=\"mt-16\"\n                  >Continue with Google</AuthGoogleLoginButton\n                >\n                <AuthFacebookLoginButton class=\"mt-16\"\n                  >Continue with Facebook</AuthFacebookLoginButton\n                >\n\n                <div\n                  class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-uppercase tw-text-[14px] tw-leading-[1.28] tw-gap-[6px] tw-mt-[15px]\"\n                >\n                  <router-link\n                    :to=\"routeForgotPassword\"\n                    class=\"tw-underline hover:tw-no-underline\"\n                    >Forgot Password</router-link\n                  >\n                  |\n                  <router-link\n                    :to=\"routeSignup\"\n                    @click.prevent=\"clearFocusState\"\n                    class=\"tw-underline hover:tw-no-underline\"\n                    >sign up</router-link\n                  >\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section\n      class=\"tw-flex-1 tw-bg-nl-green-400 tw-text-nl-yellow-100 tw-pt-11 sm:tw-pt-[100px] tw-pb-[60px] lg:tw-pt-[96px] sm:tw-pb-[85px] tw-text-left sm:tw-text-center tw-font-agenda sm:tw-mt-0 tw-relative tw-z-1 tw-overflow-hidden\"\n    >\n      <div\n        class=\"tw-absolute tw-top-[-2px] tw-left-0 -tw-right-[30px] md:tw-right-0 max-[479px]:tw-h-[38px] max-[767px]:tw-h-[50px] md:tw-h-[60px] lg:tw-h-[100px] tw-w-full tw-bg-greenwavedown-mb md:tw-bg-greenwavedown tw-bg-center lg:tw-bg-[calc(50%+118px)_top] md:tw-bg-[length:1223px_59px] tw-z-1 tw-bg-repeat-x max-md:tw-bg-cover\"\n      ></div>\n\n      <AppStoreButtons></AppStoreButtons>\n    </section>\n  </div>\n</template>\n<style scoped></style>\n"],"names":["_imports_0","publicAssetsURL","onboardingStore","useOnboardingStore","facebookAuth","ref","FACEBOOK_AUTH","abandonedCartId","computed","useHead","parseISO","route","useRoute","router","useRouter","authStore","useAuthStore","subscription","storeToRefs","error","routeForgotPassword","ROUTE_FORGOT_PASSWORD","routeSignup","ROUTE_SIGNUP","innerRedirect","URL_ACCOUNT","busy","focus","reactive","validationSchema","toTypedSchema","zod.object","zod.string","handleSubmit","errors","useForm","innerEmail","innerEmailMeta","useField","password","passwordMeta","serverErrors","disabledState","_a","_b","_c","_d","_e","errorsEmailResult","hasFocus","errorsPasswordResult","submitLogin","responseData","LOGIN","GET_USER","newQueryString","URL_REACTIVATE_PAGE","focusField","field","blurField","clearFocusState","watch","onMounted","redirect","email","error2","query","Flash"],"mappings":"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"}