{"branding":{"logoUrl":"https://s7media.vitaminshoppe.com/is/image/VitaminShoppe/TVS_Horizontal_RGB","faviconUrl":"https://www.vitaminshoppe.com/images/favicon.ico","brandName":"Vitamin Shoppe","siteTermsUrl":null,"privacyPolicyUrl":null,"copyright":null,"logoInFooter":false,"additionalTexts":{},"additionalContents":{"myaccount":{"header":{"html":"\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Back to My Account\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n
\r\n
","link":null},"footer":{"html":"","link":null}}},"additionalScripts":{"login":"/**\r\n * login-branding.js\r\n *\r\n * Strivacity CIAM integration: branding, UI overrides, analytics tagging,\r\n * WebAuthn/passkey safeguards and form validation for TVS auth flows (login,\r\n * registration, password reset, MFA, passkeys, remembered accounts,\r\n * complete-profile / checkout).\r\n *\r\n * Runs on the Strivacity-hosted journey, hooking the SDK's custom events\r\n * (`form-ready`, `block-ready`, `block-request`) plus native DOM events.\r\n *\r\n * Structure:\r\n * 1. Global state & feature detection (devicePasskeySupported)\r\n * 2. WebAuthn pending-request guard (IIFE)\r\n * 3. GA / analytics tagging (getPageType, login-method tracking, reportLogin)\r\n * 4. SVG assets (desktop/mobile graphics)\r\n * 5. DOM & flow helpers (findByText, hideHost/unhideHost, advancePast, handlerFor)\r\n * 6. Phone field formatting & locking (formatUsNationalDigits, lockCountryCodeValue)\r\n * 7. handleGlobalObserver: MutationObserver for dynamic UI customization\r\n * 8. form-ready: live field validation, submit gating, completeprofile patching\r\n * 9. block-ready: i18n overrides and per-block UI customizations\r\n * 10. block-request: global error banners, email error copy, remembered-account cleanup\r\n * 11. brandingLoaded: load hook\r\n * 12. Reset-link click interceptor (capture phase)\r\n * 13. Utilities: setupBackButton, checkoutStaticContent, displayWarningForSocialLogin,\r\n * setRememberedAccount, removeRememberedAccountsUI, removeAllRememberedAccount,\r\n * clearLocalAuthState\r\n */\r\n\r\nlet blockDetail = null;\r\nlet observerForScreen = null;\r\nlet observer = null;\r\nlet observerForRetry = null;\r\nlet emailControl = null;\r\n/** Short App Id is first 7 characters from Client ID in Edit URL of it */\r\nlet shortAppIdForBranding = \"29565bf\";\r\nif (window.location.href.includes(\"qa1.vitaminshoppe.com\") || window.location.href.includes(\"qa3.vitaminshoppe.com\") || window.location.href.includes(\"qa4.vitaminshoppe.com\")) {\r\n shortAppIdForBranding = \"43212f7\";\r\n}\r\nelse if (window.location.href.includes(\"www.vitaminshoppe.com\")) {\r\n shortAppIdForBranding = \"c38bc7a\";\r\n}\r\n\r\nconst devicePasskeySupported =\r\n window.isSecureContext &&\r\n typeof window.PublicKeyCredential !== 'undefined' &&\r\n typeof navigator.credentials?.get === 'function';\r\n\r\n/* -------------------------------------------------------------------------- */\r\n/* WebAuthn pending-request guard */\r\n/* -------------------------------------------------------------------------- */\r\n/*\r\n * Bug: the Sign In modal starts a passkey-autofill request\r\n * `navigator.credentials.get({ mediation: 'conditional' })` that stays pending\r\n * for the page lifetime (closing tvs-modal only hides ). Chrome\r\n * allows one in-flight WebAuthn ceremony per document, so a later\r\n * `credentials.create()` at passkey-enroll fails with \"A request is already\r\n * pending\" and the native passkey modal never appears.\r\n *\r\n * Fix: wrap navigator.credentials to (1) track conditional get() via linked\r\n * AbortControllers, (2) abort them before any create(), (3) also abort on\r\n * modal close (body loses `tvs-modal-open`) and on pagehide.\r\n */\r\n(function installWebAuthnPendingRequestGuard() {\r\n try {\r\n const creds = navigator.credentials;\r\n if (!creds || typeof creds.get !== 'function' || creds.__tvsWebAuthnGuard) {\r\n return;\r\n }\r\n creds.__tvsWebAuthnGuard = true;\r\n\r\n const origGet = creds.get.bind(creds);\r\n const origCreate = creds.create ? creds.create.bind(creds) : null;\r\n const pendingConditionalControllers = new Set();\r\n\r\n // AbortSignal.any (Chrome 116+) lets us keep the SDK's own abort signal\r\n // working while adding our own cancel channel. Fall back gracefully.\r\n const linkSignals = (existingSignal, ownSignal) => {\r\n if (!existingSignal) {\r\n return ownSignal;\r\n }\r\n if (typeof AbortSignal !== 'undefined' && typeof AbortSignal.any === 'function') {\r\n return AbortSignal.any([existingSignal, ownSignal]);\r\n }\r\n return existingSignal;\r\n };\r\n\r\n const abortPendingConditionalRequests = () => {\r\n if (!pendingConditionalControllers.size) {\r\n return;\r\n }\r\n console.debug('login-branding: aborting stale conditional WebAuthn request(s):', pendingConditionalControllers.size);\r\n pendingConditionalControllers.forEach((controller) => {\r\n try {\r\n controller.abort();\r\n } catch (e) {\r\n console.debug('login-branding: failed to abort conditional WebAuthn request', e);\r\n }\r\n });\r\n pendingConditionalControllers.clear();\r\n };\r\n\r\n // Expose for other integration code that may want to cancel explicitly.\r\n window.tvsAbortPendingWebAuthn = abortPendingConditionalRequests;\r\n\r\n creds.get = function patchedCredentialsGet(options) {\r\n try {\r\n if (options && options.mediation === 'conditional') {\r\n const controller = new AbortController();\r\n const patchedOptions = Object.assign({}, options, {\r\n signal: linkSignals(options.signal, controller.signal),\r\n });\r\n pendingConditionalControllers.add(controller);\r\n\r\n const request = origGet(patchedOptions);\r\n const cleanup = () => pendingConditionalControllers.delete(controller);\r\n request.then(cleanup, cleanup);\r\n return request;\r\n }\r\n } catch (e) {\r\n console.debug('login-branding: WebAuthn get() guard error, falling back', e);\r\n }\r\n return origGet(options);\r\n };\r\n\r\n if (origCreate) {\r\n creds.create = function patchedCredentialsCreate(options) {\r\n // A passkey ceremony is starting - make sure no stale conditional\r\n // request is holding the single WebAuthn slot, otherwise the native\r\n // modal is silently blocked with \"A request is already pending.\".\r\n abortPendingConditionalRequests();\r\n return origCreate(options);\r\n };\r\n }\r\n\r\n // Abort stale requests whenever a modal is (re)opened so only the freshly\r\n // opened flow keeps a live conditional request and Strivacity initializes\r\n // exactly one WebAuthn ceremony; also abort on close as a safety net.\r\n // tvs-modal toggles `tvs-modal-open` on while a modal is visible.\r\n const observeModalToggle = () => {\r\n if (typeof MutationObserver === 'undefined' || !document.body) {\r\n return;\r\n }\r\n let wasModalOpen = document.body.classList.contains('tvs-modal-open');\r\n const bodyClassObserver = new MutationObserver(() => {\r\n const isModalOpen = document.body.classList.contains('tvs-modal-open');\r\n if (isModalOpen !== wasModalOpen) {\r\n // Opening: abort leftovers from a previous modal BEFORE the new flow\r\n // starts its own conditional get(). Closing: abort what it left behind.\r\n abortPendingConditionalRequests();\r\n wasModalOpen = isModalOpen;\r\n }\r\n });\r\n bodyClassObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });\r\n };\r\n\r\n if (document.body) {\r\n observeModalToggle();\r\n } else {\r\n document.addEventListener('DOMContentLoaded', observeModalToggle, { once: true });\r\n }\r\n\r\n window.addEventListener('pagehide', abortPendingConditionalRequests);\r\n } catch (e) {\r\n console.debug('login-branding: failed to install WebAuthn pending-request guard', e);\r\n }\r\n})();\r\n\r\n/*\r\n======================\r\n START GA\r\n======================\r\n*/\r\n\r\n/**\r\n * Determines the current page type from the browser URL, based on the path\r\n * segment after the base URL (or a trailing segment / query param for some\r\n * pages). Check order matters - some rules are more specific than others.\r\n *\r\n * @returns Page type string (e.g. 'home', 'PLP', 'PDP', 'brand', 'cart',\r\n * 'checkout', 'thankYou', 'login', 'order-history-login', 'msi',\r\n * 'wishlist', 'myautodelivery', 'myAccount', 'registration',\r\n * 'purchaseHistory', 'completeprofile', 'LP'), or 'undefined'.\r\n */\r\nfunction getPageType() {\r\n if (typeof window === 'undefined' || !window.location) {\r\n return 'undefined';\r\n }\r\n\r\n const { pathname, search } = window.location;\r\n const path = (pathname || '').toLowerCase();\r\n const query = (search || '').toLowerCase();\r\n\r\n // Home page: base URL only (no meaningful path)\r\n if (path === '' || path === '/') {\r\n return 'home';\r\n }\r\n\r\n // completeprofile is identified via a query param named \"completeprofile\"\r\n if (query.includes('completeprofile') || path.includes('/completeprofile')) {\r\n return 'completeprofile';\r\n }\r\n\r\n // Segment-prefixed pages (segment right after base URL)\r\n if (path.startsWith('/c/')) {\r\n return 'PLP';\r\n }\r\n if (path.startsWith('/p/')) {\r\n return 'PDP';\r\n }\r\n if (path.startsWith('/b/')) {\r\n return 'brand';\r\n }\r\n if (path.startsWith('/lp/')) {\r\n return 'LP';\r\n }\r\n if (path.startsWith('/cart/')) {\r\n return 'cart';\r\n }\r\n\r\n // Trailing / contains segment pages\r\n if (path.includes('/checkout')) {\r\n return 'checkout';\r\n }\r\n if (path.includes('/thankyou')) {\r\n return 'thankYou';\r\n }\r\n if (path.includes('/login')) {\r\n return 'login';\r\n }\r\n if (path.includes('/order-history-login')) {\r\n return 'order-history-login';\r\n }\r\n if (path.includes('/msi')) {\r\n return 'msi';\r\n }\r\n // Both /wishlist and /saved-items map to 'wishlist'\r\n if (path.includes('/wishlist') || path.includes('/saved-items')) {\r\n return 'wishlist';\r\n }\r\n if (path.includes('/myautodelivery')) {\r\n return 'myautodelivery';\r\n }\r\n if (path.includes('/myaccount')) {\r\n return 'myAccount';\r\n }\r\n if (path.includes('/registration')) {\r\n return 'registration';\r\n }\r\n if (path.includes('/purchasehistory')) {\r\n return 'purchaseHistory';\r\n }\r\n if (path.includes('/rewardscenter')) {\r\n return 'MY_HEALTHY_AWARDS';\r\n }\r\n\r\n return 'HOME';\r\n}\r\n\r\nlet radioObserver; // module/outer scope, created once\r\nvar EVENT_TYPE = 'sty.ga.eventType';\r\nvar LOGIN_METHOD_STORAGE_KEY = 'sty.ga.lastLoginMethod';\r\nvar REPORTED_KEY = 'sty.ga.loginReported';\r\nvar PREFERRED_AUTH_METHOD_KEY = 'preferredAuthMethod';\r\n\r\n// Reported when the specific login/registration authentication method\r\n// cannot be identified.\r\nconst DEFAULT_LOGIN_METHOD = 'Strivacity';\r\n\r\nconst LOGIN_METHOD_BY_BLOCK = {\r\n password: () => 'password',\r\n passkey: () => 'passkey',\r\n otp: () => 'otp',\r\n passcode: () => 'passkey',\r\n externalLoginProvider: (request) =>\r\n `${String(request?.provider ?? 'unknown').replace(/^STV/, '').toLowerCase()}`,\r\n};\r\n\r\nfunction initLoginMethodTracking() {\r\n document.addEventListener('block-request', (event) => {\r\n const { block, request } = event.detail ?? {};\r\n const resolveMethod = LOGIN_METHOD_BY_BLOCK[block];\r\n if (resolveMethod) {\r\n const method = resolveMethod(request);\r\n sessionStorage.setItem(LOGIN_METHOD_STORAGE_KEY, method);\r\n console.debug(\"GA tagging logs: LOGIN_METHOD_STORAGE_KEY\", sessionStorage.getItem(LOGIN_METHOD_STORAGE_KEY));\r\n console.debug('GA tagging logs: Resolved method:', method, '-> stored under', LOGIN_METHOD_STORAGE_KEY);\r\n } else {\r\n console.debug('GA tagging logs: Block not in LOGIN_METHOD_BY_BLOCK:', block);\r\n }\r\n });\r\n}\r\n\r\nfunction reportLogin(pageType) {\r\n // if (sessionStorage.getItem(REPORTED_KEY)) {\r\n // console.debug(\"Returned without logging\");\r\n // return;\r\n // }\r\n console.debug(\"GA Tagging Logs: reportLogin: LOGIN_METHOD_STORAGE_KEY: \", sessionStorage.getItem(LOGIN_METHOD_STORAGE_KEY));\r\n const methodType = sessionStorage.getItem(LOGIN_METHOD_STORAGE_KEY); // Use this during login only so its optional and can be null\r\n const preferredAuthMethod = sessionStorage.getItem(PREFERRED_AUTH_METHOD_KEY); // Use this during registration only so its optional and can be null\r\n const e_Type = sessionStorage.getItem(EVENT_TYPE)\r\n\r\n let e_Method = methodType || \"\";\r\n if (e_Type === \"sign_up\") {\r\n if (methodType !== null && (methodType.includes('apple') || methodType.includes('google'))) {\r\n // Registration with social methods\r\n e_Method = methodType\r\n } else {\r\n // Registration with passkey || passowrd\r\n e_Method = preferredAuthMethod\r\n }\r\n } else if (e_Type == \"e_login\") {\r\n // Login flow\r\n e_Method = methodType\r\n }\r\n\r\n console.debug(\"Returned without logging 1: \", e_Method);\r\n\r\n if (methodType.includes('apple') || methodType.includes('google')) {\r\n\r\n console.debug(\"Returned without logging 2\");\r\n localStorage.setItem('socialLoginProviderInfoCIAM', methodType);\r\n }\r\n\r\n // Fallback: when the specific login/registration authentication method cannot\r\n // be identified (null/undefined/empty), report the generic provider instead.\r\n if (e_Method === null || e_Method === undefined || String(e_Method).trim() === \"\") {\r\n e_Method = DEFAULT_LOGIN_METHOD;\r\n }\r\n console.debug(\"Returned without logging 2: \", e_Method);\r\n sessionStorage.setItem(REPORTED_KEY, '1');\r\n sessionStorage.removeItem(LOGIN_METHOD_STORAGE_KEY);\r\n sessionStorage.removeItem(EVENT_TYPE);\r\n sessionStorage.removeItem(PREFERRED_AUTH_METHOD_KEY);\r\n // debugger;\r\n console.debug(\"Returned without logging 3: \", e_Method);\r\n console.debug(\"GA tagging logs: payload\", {\r\n event: e_Type,\r\n method: e_Method,\r\n page_type: pageType,\r\n });\r\n\r\n sty.webAnalyticsService.track(e_Type, {\r\n method: e_Method,\r\n page_type: pageType,\r\n });\r\n console.debug(\"GA event fired\");\r\n}\r\n\r\nfunction setupRadioObserver() {\r\n if (radioObserver) {\r\n radioObserver.disconnect(); // clear all previous observations\r\n }\r\n radioObserver = new MutationObserver((mutations) => {\r\n mutations.forEach((m) => {\r\n const el = m.target;\r\n if (el.tagName === 'STY-RADIO' && el.getAttribute('aria-checked') === 'true') {\r\n console.debug('aria-checked mutation ->', el.getAttribute('value'));\r\n sessionStorage.setItem(PREFERRED_AUTH_METHOD_KEY, el.getAttribute('value'));\r\n }\r\n });\r\n });\r\n\r\n document.querySelectorAll('sty-radio').forEach((el) => {\r\n radioObserver.observe(el, { attributes: true, attributeFilter: ['aria-checked'] });\r\n });\r\n}\r\n\r\ninitLoginMethodTracking();\r\n\r\n/*\r\n======================\r\n END GA\r\n======================\r\n*/\r\n\r\n/* ----------------------------------- */\r\n/* SVGs for Desktop and Mobile */\r\n/* ----------------------------------- */\r\n\r\nconst desktopSvg = `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n`\r\n\r\nconst mobileSvg = `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n`\r\n\r\n/* ----------------------------------- */\r\n/* Helper functions */\r\n/* ----------------------------------- */\r\n\r\n// Find an element of `selector` whose visible text contains `text` (case-insensitive).\r\nfunction findByText(selector, text) {\r\n const needle = text.toLowerCase();\r\n return Array.from(document.querySelectorAll(selector)).find((el) => (el.textContent || '').trim().toLowerCase().includes(needle));\r\n}\r\n\r\n// Hide the login panel during an auto-advance round-trip so the user doesn't\r\n// see (or double-click) the dead screen. The next block-ready unhides, as does\r\n// the safety timer, so a silently failed advance restores the screen.\r\nlet unhideTimer = null;\r\n\r\nfunction hideHost() {\r\n const host = document.querySelector('sty-login');\r\n if (host) {\r\n host.style.setProperty('visibility', 'hidden', 'important');\r\n }\r\n window.clearTimeout(unhideTimer);\r\n unhideTimer = window.setTimeout(unhideHost, 4000);\r\n}\r\n\r\nfunction unhideHost() {\r\n window.clearTimeout(unhideTimer);\r\n unhideTimer = null;\r\n const host = document.querySelector('sty-login');\r\n if (host) {\r\n host.style.removeProperty('visibility');\r\n }\r\n}\r\n\r\n// Click `selector` inside `container` (scoped to the current block so a\r\n// leftover button from the previous block isn't hit). Returns false while the\r\n// button isn't ready (the retry observer keeps calling). Hides only on click.\r\nfunction advancePast(container, selector) {\r\n const button = container.querySelector(selector);\r\n if (!button || button.hasAttribute('disabled') || button.hasAttribute('loading')) {\r\n return false;\r\n }\r\n\r\n hideHost();\r\n // sty-button handles click on its host element (submit types call\r\n // form.requestSubmit(), action buttons run their @click handler).\r\n button.click();\r\n return true;\r\n}\r\n\r\n// Decide what (if anything) to do for the block that just became ready.\r\n// Returns an apply-function for the retry loop, or null to leave the screen\r\n// alone. Gates read block-ready state (not the DOM), so a screen with a real\r\n// decision (multiple targets/methods) or a non-success result is never skipped.\r\nfunction handlerFor(state) {\r\n console.debug(\"Handle For:\", state);\r\n\r\n if (state.activeBlock === 'mfaEnrollTargetSelect') {\r\n const data = (state.blocks && state.blocks.mfaEnrollTargetSelect) || {};\r\n const targets = (data.availableTargets || []).length;\r\n const methods = (data.availableMethods || []).length;\r\n console.debug(\"Target and Methods available\", targets, methods);\r\n if (targets === 1 && methods <= 1) {\r\n console.debug(\"Target and Methods available\", targets, methods);\r\n // The block pre-selects the single target/method in form-ready, which\r\n // runs AFTER block-ready. Submitting before that fails `required`\r\n // validation and stalls the flow, so wait for the checked radio.\r\n return () => {\r\n const block = document.querySelector('[data-block=\"mfaEnrollTargetSelect\"]');\r\n if (!block || !block.querySelector('sty-radio[checked]')) {\r\n return false;\r\n }\r\n return advancePast(block, 'sty-button[data-button=\"submit\"]');\r\n };\r\n }\r\n return null;\r\n }\r\n if (state.activeBlock === 'genericResult') {\r\n console.debug(\"genericResult state: \", state)\r\n console.debug(\"genericResult: \", state.activeBlock)\r\n\r\n const data = (state.blocks && state.blocks.genericResult) || {};\r\n if (data.result === 'success' && data.actionButton) {\r\n return () => {\r\n const block = document.querySelector('[data-block=\"genericResult\"]');\r\n if (!block) {\r\n return false;\r\n }\r\n return advancePast(block, 'sty-button[data-button=\"actionButton\"]');\r\n };\r\n }\r\n return null;\r\n }\r\n\r\n return null;\r\n}\r\n\r\n/**\r\n * Formats up to 10 national digits the exact way sty-input-phone formats them\r\n * as the user types: \"8888888888\" -> \"888 888 8888\". Partial lengths are\r\n * grouped the same way so intermediate values still match the component.\r\n */\r\nfunction formatUsNationalDigits(digits) {\r\n const d = (digits || '').replace(/\\D/g, '').slice(0, 10);\r\n if (d.length <= 3) return d;\r\n if (d.length <= 6) return `${d.slice(0, 3)} ${d.slice(3)}`;\r\n return `${d.slice(0, 3)} ${d.slice(3, 6)} ${d.slice(6)}`;\r\n}\r\n\r\n/**\r\n * Locks the US country code (+1) prefix in phone input fields.\r\n * Prevents user from deleting the prefix and re-asserts it on re-renders.\r\n */\r\nfunction lockCountryCodeValue(phoneInput) {\r\n // Re-assert the \"+1 \" prefix on EVERY run - sty-input-phone can re-render and\r\n // revert the value, so this must keep winning that tug-of-war.\r\n //\r\n // WC1-3558: in complete-profile the number is prefilled from the backend and\r\n // held in the host's `.value`, but the visible inner input can briefly be\r\n // empty mid-render. Blindly setting '+1 ' wiped that prefill, so PRESERVE\r\n // existing digits (from the visible input, else the host) and only fall back\r\n // to a bare \"+1 \" when there is genuinely nothing to keep.\r\n if (!phoneInput.value.startsWith('+1 ')) {\r\n const inputDigits = (phoneInput.value || '').replace(/\\D/g, '');\r\n const host = phoneInput.closest('sty-input-phone');\r\n const hostDigits = host ? (host.value || '').replace(/\\D/g, '') : '';\r\n\r\n // National number = digits without a leading US country code (\"1\").\r\n let national = inputDigits.replace(/^1/, '');\r\n // If the visible input has lost the number (fewer than 10 national digits),\r\n // recover it from the host component, which is the source of truth.\r\n if (national.length < 10 && hostDigits) {\r\n national = hostDigits.replace(/^1/, '');\r\n }\r\n\r\n phoneInput.value = national ? ('+1 ' + national) : '+1 ';\r\n }\r\n\r\n // WC1-3558 (prefill validity): the backend prefills unformatted, e.g.\r\n // \"+1 8888888888\". That already starts with \"+1 \" so the block above leaves\r\n // it alone - but sty-input-phone's internal validator only accepts its own\r\n // spaced format (\"+1 888 888 8888\"), so the field shows \"Please enter a valid\r\n // phone number\" and blocks submit until manually edited. Normalize the\r\n // prefill ONCE into the spaced format and dispatch a real input event so the\r\n // component re-parses and clears its error, exactly as a manual edit would.\r\n // One-time flag keeps it from fighting the formatter while the user types.\r\n if (phoneInput.dataset.prefillNormalized !== 'true') {\r\n const host = phoneInput.closest('sty-input-phone');\r\n const rawDigits = (phoneInput.value || (host && host.value) || '').replace(/\\D/g, '');\r\n const national = rawDigits.replace(/^1/, '').slice(0, 10);\r\n\r\n // Only act on a complete 10-digit prefill; partial/empty values are left\r\n // for the user (and the component) to handle normally.\r\n if (national.length === 10) {\r\n const canonical = '+1 ' + formatUsNationalDigits(national);\r\n phoneInput.dataset.prefillNormalized = 'true';\r\n if (phoneInput.value !== canonical) {\r\n phoneInput.value = canonical;\r\n // Mimic a manual edit so the component re-parses, reformats and clears\r\n // its internal validity error (and our own button-state revalidation\r\n // picks it up via the form's input listener).\r\n phoneInput.dispatchEvent(new Event('input', { bubbles: true }));\r\n phoneInput.dispatchEvent(new Event('change', { bubbles: true }));\r\n }\r\n }\r\n }\r\n\r\n // The MutationObserver below calls this function again on almost every\r\n // re-render of sty-input-phone (nearly every keystroke). Only the\r\n // *listener setup* below needs to run once — guard just that part, so\r\n // we don't stack duplicate keydown/input handlers over time.\r\n if (phoneInput.dataset.countryLockInit === 'true') {\r\n return;\r\n }\r\n phoneInput.dataset.countryLockInit = 'true';\r\n\r\n // Prevent user from backspacing into \"+1 \"\r\n phoneInput.addEventListener('keydown', (e) => {\r\n if ((e.key === 'Backspace' || e.key === 'ArrowLeft') && phoneInput.selectionStart <= 3) {\r\n e.preventDefault();\r\n }\r\n });\r\n\r\n // Re-enforce prefix on paste/input\r\n phoneInput.addEventListener('input', (e) => {\r\n if (!e.target.value.startsWith('+1 ')) {\r\n e.target.value = '+1 ';\r\n }\r\n });\r\n}\r\n\r\nfunction handleGlobalObserver(mutationsList) {\r\n for (const mutation of mutationsList) {\r\n if (\r\n (blockDetail.state.activeBlock === \"password\" ||\r\n blockDetail.state.activeBlock === \"passwordEnroll\") &&\r\n mutation.target.localName === \"sty-input-password\"\r\n ) {\r\n const passwordInputs = document.querySelectorAll(\"sty-input-password\");\r\n passwordInputs.forEach(input => {\r\n console.debug(\"Password Inputs\", input);\r\n const passwordSvgIcon = input.shadowRoot\r\n ?.querySelector(\"div[part='button-toggle']\")\r\n ?.querySelector(\"svg\");\r\n\r\n if (passwordSvgIcon) {\r\n passwordSvgIcon.style.height = \"22px\";\r\n passwordSvgIcon.style.color = \"var(--sty-text-secondary)\"\r\n }\r\n });\r\n }\r\n if (mutation.target.localName === 'sty-block-external-login-provider') {\r\n mutation.target.style.setProperty(\"margin-block-start\", \"0\");\r\n let externalLoginProviderEle = mutation.target.children;\r\n [...externalLoginProviderEle].forEach((externalEle, index) => {\r\n // Common styles for all external login buttons\r\n Object.assign(externalEle.style, {\r\n marginBlockStart: index === 0 ? '0' : '16px',\r\n boxShadow: '0 0 6px 0 rgba(0, 0, 0, 0.25)',\r\n height: '40px',\r\n color: '#666',\r\n fontFamily: 'Lato, sans-serif',\r\n fontSize: '14px',\r\n lineHeight: '1.2',\r\n fontWeight: '700',\r\n padding: '11px 16px'\r\n });\r\n\r\n const dataButtonValue = (externalEle.getAttribute('data-button') || '').toLowerCase();\r\n const labelSpan = externalEle.querySelector('span');\r\n const isSignIn = blockDetail.state.activeBlock === 'identifier';\r\n\r\n // Provider-specific customization\r\n if (dataButtonValue.includes('facebook')) {\r\n externalEle.style.color = '#fff';\r\n if (labelSpan) {\r\n labelSpan.innerHTML = isSignIn ? 'Sign In with Facebook' : 'Continue with Facebook';\r\n labelSpan.style.setProperty('display', 'block');\r\n labelSpan.style.setProperty('margin-inline-start', '16px');\r\n }\r\n } else if (dataButtonValue.includes('google')) {\r\n if (labelSpan) {\r\n labelSpan.innerHTML = isSignIn ? 'Sign In with Google' : 'Continue with Google';\r\n labelSpan.style.setProperty('display', 'block');\r\n labelSpan.style.setProperty('margin-inline-start', '16px');\r\n }\r\n } else if (dataButtonValue.includes('apple')) {\r\n externalEle.style.color = '#fff';\r\n if (labelSpan) {\r\n labelSpan.innerHTML = isSignIn ? 'Sign In with Apple' : 'Continue with Apple';\r\n labelSpan.style.setProperty('display', 'block');\r\n labelSpan.style.setProperty('margin-inline-start', '16px');\r\n }\r\n }\r\n });\r\n\r\n }\r\n\r\n if (mutation.target.localName === \"sty-external-provider-icon\") {\r\n mutation.target.style.setProperty(\"margin-inline-end\", \"0\");\r\n if (mutation.target.renderRoot.children.length > 0) {\r\n mutation.target.renderRoot.children[0].style.setProperty(\"width\", \"18px\", \"important\");\r\n mutation.target.renderRoot.children[0].style.setProperty(\"height\", \"18px\", \"important\");\r\n }\r\n }\r\n\r\n if (mutation.target.localName === \"sty-input-text\" && document.querySelector(\"sty-input-text\")) {\r\n let errorShadowEleIcon = document.querySelector(\"sty-input-text\").shadowRoot.querySelector(\"div[part='error-icon']\");\r\n if (errorShadowEleIcon) {\r\n errorShadowEleIcon.style.display = \"none\";\r\n }\r\n }\r\n\r\n if (mutation.target.localName === \"sty-input-phone\" && mutation.target.shadowRoot) {\r\n const phoneInput = document.querySelector('input[name=\"attributes.phoneNumbers.primaryPhoneNumber\"]');\r\n if (phoneInput) {\r\n lockCountryCodeValue(phoneInput);\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n// Code to trigger field errors and handle disabled state of submit buttons\r\ndocument.addEventListener('form-ready', (event) => {\r\n const form = event.target;\r\n\r\n if (form.has('email')) {\r\n emailControl = form.get('email');\r\n }\r\n\r\n const submitButton = form.querySelector('sty-button[type=\"submit\"]');\r\n const isLoginForm = form.closest('sty-block-identifier') !== null;\r\n\r\n const DEBUG = true;\r\n const log = (...args) => { if (DEBUG) console.debug('[form-validation]', ...args); };\r\n\r\n // ---- your existing checkout / completeprofile logic, unchanged ----\r\n if (form.closest('sty-block-registration')) {\r\n if (window.location.href.includes(\"/twa/checkout\")) {\r\n form.patchValue({ \"attributes.checkoutHiddenAttribute\": 'checkout' });\r\n }\r\n if (window.location.href.includes(\"/s/completeprofile\")) {\r\n form.patchValue({ \"attributes.isCompletProfileFlow\": 'true' });\r\n if (form.getRawValue()) {\r\n const v = form.getRawValue();\r\n if (v.email) {\r\n const el = document.querySelector(\"sty-input-text[data-field='attribute-email']\");\r\n el.setAttribute(\"disabled\", true);\r\n el.classList.add(\"complete-profile-email\");\r\n el.parentElement.classList.add(\"ciam-complete-profile-email\");\r\n }\r\n if (v.attributes.name.givenName) {\r\n const el = document.querySelector(\"sty-input-text[data-field='attribute-attributes.name.givenName']\");\r\n setTimeout(() => {\r\n el.setAttribute(\"disabled\", true);\r\n }, 0);\r\n el.classList.add(\"complete-profile-input-bg\");\r\n }\r\n if (v.attributes.name.familyName) {\r\n const el = document.querySelector(\"sty-input-text[data-field='attribute-attributes.name.familyName']\");\r\n setTimeout(() => {\r\n el.setAttribute(\"disabled\", true);\r\n }, 0);\r\n el.classList.add(\"complete-profile-input-bg\");\r\n }\r\n if (v.attributes.phoneNumbers.primaryPhoneNumber) {\r\n const el = document.querySelector(\"sty-input-phone[data-field='attribute-attributes.phoneNumbers.primaryPhoneNumber']\");\r\n setTimeout(() => {\r\n el.setAttribute(\"disabled\", true);\r\n }, 0);\r\n el.classList.add(\"complete-profile-input-bg\");\r\n }\r\n if (v.attributes.addresses.primary.postalCode) {\r\n const el = document.querySelector(\"sty-input-text[data-field='attribute-attributes.addresses.primary.postalCode']\");\r\n setTimeout(() => {\r\n el.setAttribute(\"disabled\", true);\r\n }, 0);\r\n el.classList.add(\"complete-profile-input-bg\");\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Live check for the phone field: bypasses the component's cached validity.\r\n const isPhoneLiveValid = (phoneControl) => {\r\n const inner = phoneControl.querySelector('input[slot=\"input\"]');\r\n if (!inner) return false;\r\n const digits = (inner.value || '').replace(/\\D/g, '');\r\n // US is the default in the DOM; 10 digits is the standard NANP length.\r\n // If required is not set, treat empty as valid.\r\n const required = phoneControl.hasAttribute('required');\r\n if (!required && digits.length === 0) return true;\r\n return digits.length === 11;\r\n };\r\n\r\n // ---- Strict email live-validity, same pattern as the phone check above ----\r\n // Requires local-part@domain.tld (.com/.org/.co.uk pass; \"name@host\" fails)\r\n\r\n const EMAIL_RE = /^[A-Za-z0-9](?:[A-Za-z0-9._%-]*[A-Za-z0-9])?@(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\\.)+[A-Za-z]{2,}$/;\r\n\r\n const isEmailLiveValid = (emailControl) => {\r\n const inner = emailControl.querySelector('input[slot=\"input\"]');\r\n const value = ((inner ? inner.value : emailControl.value) || '').trim();\r\n const required = emailControl.hasAttribute('required');\r\n\r\n if (!required && value.length === 0) return true;\r\n if (value.length === 0) return false;\r\n if (value.includes('..')) return false; // extra guard against consecutive dots\r\n return EMAIL_RE.test(value);\r\n };\r\n\r\n // Detect an email field by type=\"email\", name containing \"email\", or a\r\n // data-field attribute containing \"email\".\r\n const isEmailField = (control) => {\r\n const name = (control.getAttribute('name') || '').toLowerCase();\r\n const type = (control.getAttribute('type') || '').toLowerCase();\r\n const dataField = (control.getAttribute('data-field') || '').toLowerCase();\r\n return type === 'email' || name.includes('email') || dataField.includes('email');\r\n };\r\n\r\n // ---- Password live-validity, same pattern as the phone/email checks above ----\r\n // FIREFOX FIX: sty-input-password.checkValidity() reads a cached state that\r\n // Firefox only recomputes on the next Lit update - i.e. AFTER the `input`\r\n // event - so typing/pasting/autofill returned stale `false` and the button\r\n // only enabled on blur. Reading the inner is synchronous and current.\r\n // Scoped to sty-block-password (sign-in) on purpose: registration/reset blocks\r\n // own strength rules that MUST keep flowing through control.checkValidity().\r\n const isPasswordField = (control) => {\r\n if (!control.closest('sty-block-password')) return false;\r\n const tag = (control.tagName || '').toLowerCase();\r\n const name = (control.getAttribute('name') || '').toLowerCase();\r\n const dataField = (control.getAttribute('data-field') || '').toLowerCase();\r\n return tag === 'sty-input-password'\r\n || name.includes('password')\r\n || dataField.includes('password');\r\n };\r\n\r\n const isPasswordLiveValid = (passwordControl) => {\r\n const inner = passwordControl.querySelector('input[slot=\"input\"]')\r\n || passwordControl.querySelector('input');\r\n const value = ((inner ? inner.value : passwordControl.value) || '');\r\n return value.length > 0;\r\n };\r\n\r\n const computeFormValidity = async () => {\r\n const rows = [];\r\n const promises = [];\r\n form.controls.forEach((control) => {\r\n const name = control.getAttribute('name');\r\n if (control.tagName && control.tagName.toLowerCase() === 'sty-input-phone') {\r\n const v = isPhoneLiveValid(control);\r\n rows.push(`${name}=${v}(live)`);\r\n promises.push(Promise.resolve(v));\r\n } else if (isEmailField(control)) {\r\n const v = isEmailLiveValid(control);\r\n rows.push(`${name}=${v}(live-email)`);\r\n promises.push(Promise.resolve(v));\r\n } else if (isPasswordField(control)) {\r\n const v = isPasswordLiveValid(control);\r\n rows.push(`${name}=${v}(live-password)`);\r\n promises.push(Promise.resolve(v));\r\n } else {\r\n promises.push(\r\n Promise.resolve(control.checkValidity()).then((v) => {\r\n rows.push(`${name}=${v}`);\r\n return v;\r\n })\r\n );\r\n }\r\n });\r\n const values = await Promise.all(promises);\r\n log(' per-control:', rows.join(', '));\r\n return values.every(Boolean);\r\n };\r\n\r\n // Guards against out-of-order async validation results: two overlapping\r\n // revalidations (e.g. fast paste + the component's own change event) could let\r\n // a slower earlier run resolve last and clobber the newer state - seen in\r\n // Firefox as \"button → ENABLED\" followed by a stale \"button → disabled\".\r\n let buttonStateToken = 0;\r\n\r\n const updateButtonState = async () => {\r\n if (isLoginForm) return;\r\n const token = ++buttonStateToken;\r\n const isValid = await computeFormValidity();\r\n if (token !== buttonStateToken) {\r\n log(' stale validation result discarded');\r\n return;\r\n }\r\n log(`button → ${isValid ? 'ENABLED' : 'disabled'}`);\r\n isValid ? submitButton.removeAttribute('disabled') : submitButton.setAttribute('disabled', '');\r\n };\r\n\r\n const revalidate = async (control, reason) => {\r\n const name = control.getAttribute('name');\r\n const isTouched = control.getAttribute('data-touch-gated') === 'touched';\r\n log(`revalidate ${name} reason=${reason} touched=${isTouched}`);\r\n try {\r\n if (isTouched) await control.validate();\r\n } catch (err) { log(` revalidate error: ${err.message}`); }\r\n await updateButtonState();\r\n };\r\n\r\n const attachedControls = new Set();\r\n const attachValidation = (control) => {\r\n if (attachedControls.has(control)) return;\r\n attachedControls.add(control);\r\n control.setAttribute('data-touch-gated', 'untouched');\r\n log(`attached: ${control.getAttribute('name')} (${control.tagName})`);\r\n\r\n // NEW: give email fields a proper inline error message via the built-in\r\n // validator system, in addition to the live gating above.\r\n if (isEmailField(control) && typeof control.addValidators === 'function') {\r\n control.addValidators([\r\n {\r\n type: 'strictEmailFormat',\r\n fn: ({ control: c }) => {\r\n const value = (c.value || '').trim();\r\n if (!c.hasAttribute('required') && value.length === 0) return true;\r\n if (value.includes('..')) return false;\r\n return EMAIL_RE.test(value);\r\n },\r\n message: 'Please enter a valid email address (e.g. name@example.com)',\r\n },\r\n ]);\r\n }\r\n\r\n control.addEventListener('change', () => revalidate(control, 'host-change'));\r\n\r\n // Browser autofill / password managers can populate the inner without\r\n // a trusted `input` event reaching our capture listener (Firefox fills\r\n // credentials silently). Poll the raw value briefly after attach so the\r\n // submit button unlocks without needing a focus/blur.\r\n const innerInput = control.querySelector('input[slot=\"input\"]')\r\n || control.querySelector('input');\r\n if (innerInput) {\r\n let lastSeenValue = innerInput.value || '';\r\n const AUTOFILL_POLL_MS = 250;\r\n const AUTOFILL_WINDOW_MS = 5000;\r\n const startedAt = Date.now();\r\n const autofillPoll = setInterval(() => {\r\n if (!control.isConnected || Date.now() - startedAt > AUTOFILL_WINDOW_MS) {\r\n clearInterval(autofillPoll);\r\n return;\r\n }\r\n const current = innerInput.value || '';\r\n if (current !== lastSeenValue) {\r\n lastSeenValue = current;\r\n log(`autofill detected → ${control.getAttribute('name')}`);\r\n revalidate(control, 'autofill-poll');\r\n }\r\n }, AUTOFILL_POLL_MS);\r\n }\r\n\r\n control.addEventListener('focusout', async (e) => {\r\n if (!control.contains(e.relatedTarget)) {\r\n control.setAttribute('data-touch-gated', 'touched');\r\n log(`${control.getAttribute('name')} → touched`);\r\n try { await control.validate(); } catch (err) { log(` focusout error: ${err.message}`); }\r\n await updateButtonState();\r\n }\r\n });\r\n };\r\n\r\n form.addEventListener('input', (e) => {\r\n let matched = null;\r\n form.controls.forEach((control) => {\r\n if (!matched && control.contains && control.contains(e.target)) matched = control;\r\n });\r\n if (matched) {\r\n log(`form-capture input → ${matched.getAttribute('name')}`);\r\n revalidate(matched, 'form-capture-input');\r\n }\r\n }, true);\r\n\r\n form.controls.forEach((control) => attachValidation(control));\r\n form.controls.subscribe(({ value }) => { if (value) attachValidation(value); });\r\n\r\n updateButtonState();\r\n});\r\n\r\n\r\ndocument.addEventListener('block-ready', (event) => {\r\n blockDetail = event.detail;\r\n console.debug(\"Block Details\", blockDetail);\r\n console.debug(\"active block: \", blockDetail.state.activeBlock);\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n \"common.attributes.general.errors.required\": \"Please enter a valid {displayName}\",\r\n \"blocks.forgottenUsername.fields.email.errors.required\": \"Please enter a valid email address\",\r\n \"blocks.identifier.fields.identifier.errors.required.email\": \"Please enter a valid email address\",\r\n \"blocks.mfaEnrollTargetSelect.fields.target.errors.required.add.email\": \"Please enter a valid email address\",\r\n \"common.attributes.email.errors.required\": \"Please enter a valid email address\",\r\n \"common.attributes.emailList.errors.required\": \"Please enter a valid email address\",\r\n\r\n \"blocks.forgottenUsername.fields.email.errors.invalid\": \"Please enter a valid email address\",\r\n \"blocks.identifier.fields.identifier.errors.invalid.email\": \"Please enter a valid email address\",\r\n \"blocks.mfaEnrollTargetSelect.fields.target.errors.invalid.email\": \"Please enter a valid email address\",\r\n \"common.attributes.email.errors.invalid\": \"Please enter a valid email address\",\r\n\r\n \"blocks.password.fields.password.errors.required\": \"Please enter your password\",\r\n \"common.attributes.password.errors.required\": \"Please enter your password\",\r\n\r\n \"common.attributes.passwordConfirmation.errors.required\": \"Please enter your password again\",\r\n \"common.attributes.passwordConfirmation.errors.sameAs\": \"The passwords do not match\",\r\n\r\n \"common.attributes.password.errors.restrictedCharacters\": \"Password must not contain empty spaces anywhere\",\r\n \"blocks.identifier.signInWithPasskey\": \"Sign in with Passkey\"\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n\r\n document.querySelectorAll(\r\n 'sty-input-text input, sty-input-phone input, sty-input-password input, sty-input-passcode input'\r\n ).forEach(input => {\r\n input.style.setProperty('padding-block-start', '12px', 'important');\r\n });\r\n\r\n document.querySelectorAll(\r\n 'sty-input-text, sty-input-phone, sty-input-password, sty-input-passcode'\r\n ).forEach(el => {\r\n el.removeAttribute('variant');\r\n });\r\n\r\n let keepMeLoggedInContainer = document.querySelectorAll(\"sty-checkbox[data-field='keepMeLoggedIn']\");\r\n keepMeLoggedInContainer.forEach(ele => {\r\n if (ele !== null && ele.renderRoot !== null) {\r\n // Add tooltip icon next to \"Keep me logged in\" label if not already added\r\n if (!ele.querySelector('.keep-logged-in-tooltip-wrapper')) {\r\n const labelSlot = ele.shadowRoot.querySelector('div[part=\"label\"]');\r\n console.debug(\"labelSlot\", labelSlot);\r\n if (labelSlot && labelSlot.querySelector(\".keep-logged-in-tooltip-wrapper\") === null) {\r\n console.debug(\"labelSlot\", labelSlot);\r\n const originalText = labelSlot.textContent;\r\n labelSlot.innerHTML = `\r\n \r\n ${originalText}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Check this box to stay signed in and reduce future logins. Do not use this option on shared or public devices.\r\n
\r\n \r\n \r\n \r\n `;\r\n\r\n const icon = ele.shadowRoot.querySelector(\r\n '.keep-logged-in-tooltip-icon'\r\n );\r\n\r\n icon.addEventListener('mouseenter', () => {\r\n ele.setAttribute('tooltip-visible', '');\r\n });\r\n\r\n icon.addEventListener('mouseleave', () => {\r\n ele.removeAttribute('tooltip-visible');\r\n });\r\n\r\n icon.addEventListener('focus', () => {\r\n ele.setAttribute('tooltip-visible', '');\r\n });\r\n\r\n icon.addEventListener('blur', () => {\r\n ele.removeAttribute('tooltip-visible');\r\n });\r\n }\r\n }\r\n }\r\n });\r\n\r\n let emailInputText = document.querySelectorAll(\"sty-login sty-input-text[data-field='identifier']\");\r\n emailInputText.forEach(emailEle => {\r\n if (emailEle !== null && emailEle.renderRoot !== null) {\r\n console.debug(\"email ele\", emailEle);\r\n let shadowRootEle = emailEle.shadowRoot.querySelector(\"div[part='container']\");\r\n let shadowWrapperDivEle = shadowRootEle.querySelector(\"div[part='wrapper']\");\r\n shadowRootEle.style.setProperty(\"display\", \"block\");\r\n emailEle.renderRoot.children[0].style.setProperty(\"border\", \"none\");\r\n emailEle.renderRoot.children[0].style.setProperty(\"background\", \"none\");\r\n\r\n if (shadowWrapperDivEle) {\r\n console.debug(\"shadowWrapperDivEle\", shadowWrapperDivEle);\r\n shadowWrapperDivEle.style.setProperty(\"paddingInline\", \"0\");\r\n }\r\n let emailInputTextLabel = emailEle.querySelector(\"label\");\r\n emailInputTextLabel.innerHTML = \"Email*\";\r\n }\r\n });\r\n\r\n\r\n\r\n if (event.detail.state.activeBlock === 'identifier') {\r\n sessionStorage.setItem(EVENT_TYPE, \"e_login\");\r\n console.debug(\"GA tagging logs: EVENT_TYPE\", sessionStorage.getItem(EVENT_TYPE));\r\n\r\n console.debug(\"devicePasskeySupported\", devicePasskeySupported);\r\n if (typeof devicePasskeySupported !== 'undefined' && !devicePasskeySupported) {\r\n document.querySelectorAll(\"sty-block-identifier sty-button[data-button='passkeyLogin']\").forEach((passkeyBtn) => {\r\n passkeyBtn.remove();\r\n });\r\n }\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n 'blocks.identifier.submit': 'Sign In'\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n let forgottenUsernameEle = document.querySelector(\"a[data-button='forgottenUsername']\");\r\n if (forgottenUsernameEle)\r\n forgottenUsernameEle.style.display = \"none\";\r\n\r\n let registrationFormLinkEle = document.querySelectorAll(\"sty-login sty-i18n[keypath='blocks.identifier.registration']\");\r\n\r\n registrationFormLinkEle.forEach(ele => {\r\n ele.childNodes.forEach((node) => {\r\n if (node.nodeType === Node.TEXT_NODE) {\r\n node.remove();\r\n }\r\n });\r\n let registrationFormLink = ele.querySelector(\"a\");\r\n if (registrationFormLink) {\r\n registrationFormLink.classList.add(\"primary-btn\");\r\n registrationFormLink.textContent = \"Create My Account\";\r\n }\r\n console.debug(\"Before login footer upate\");\r\n if (ele.querySelectorAll(\"sty-login .user-login__footer\").length === 0) {\r\n console.debug(\"Inside login footer upate\");\r\n ele.insertAdjacentHTML('afterbegin', '

Join Now

');\r\n if (!document.querySelector(\"#turnToLoginModalUpgrade\") || !document.querySelector(\"#turnToLoginModalUpgrade\").contains(ele)) {\r\n ele.insertAdjacentHTML('beforeend', '
');\r\n }\r\n\r\n }\r\n console.debug(\"After login footer upate\");\r\n if (document.querySelectorAll(\".modal-close-link\").length > 0) {\r\n document.addEventListener(\"click\", (e) => {\r\n console.debug(\"check execution\", (e.target.classList));\r\n if (e.target.classList.contains(\"modal-close-link\")) {\r\n const parentModalEle = e.target.closest('tvs-modal');\r\n let modalCloseEvent = new CustomEvent(\"strivacity-modal-close\", {\r\n detail: {\r\n modalClose: true,\r\n modalId: parentModalEle ? parentModalEle.id : \"\"\r\n }\r\n });\r\n document.dispatchEvent(modalCloseEvent);\r\n\r\n // Fire the checkout-as-guest-event\r\n document.dispatchEvent(new CustomEvent(\"checkout-as-guest-event\"));\r\n console.debug(\"continue as guest checkout events fired\")\r\n }\r\n })\r\n }\r\n });\r\n\r\n const createMyAccLinkArr = document.querySelectorAll('sty-login sty-block-identifier sty-i18n a[data-button=\"registration\"]')\r\n createMyAccLinkArr.forEach(createMyAccLinkEle => {\r\n createMyAccLinkEle.addEventListener('click', () => {\r\n console.debug('loading create my acc btn: ', createMyAccLinkEle)\r\n\r\n const submitButton = document.querySelector('[data-button=\"submit\"]');\r\n console.debug('loading identifier submit btn: ', submitButton)\r\n\r\n const observer = new MutationObserver((mutationsList) => {\r\n console.debug('loading mutationsList: ', mutationsList)\r\n\r\n for (const mutation of mutationsList) {\r\n console.debug('loading mutation: ', mutation)\r\n if (mutation?.attributeName === 'loading') {\r\n submitButton.removeAttribute('loading');\r\n }\r\n }\r\n });\r\n\r\n observer.observe(submitButton, {\r\n childList: false,\r\n attributes: true,\r\n subtree: false\r\n });\r\n });\r\n });\r\n\r\n const identifierBlock = document.querySelectorAll(\"sty-login sty-block-identifier\");\r\n\r\n identifierBlock.forEach(identifier => {\r\n let inputField = identifier.querySelector(\"sty-input-text input\");\r\n if (inputField) {\r\n inputField.placeholder = \"Ex.example@mail.com\";\r\n }\r\n });\r\n if (window.location.href.includes(\"/twa/checkout\")) {\r\n checkoutStaticContent();\r\n }\r\n }\r\n\r\n if (blockDetail.state.activeBlock === 'password') {\r\n sessionStorage.setItem(EVENT_TYPE, \"e_login\");\r\n console.debug(\"GA tagging logs: EVENT_TYPE\", sessionStorage.getItem(EVENT_TYPE));\r\n\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n 'blocks.password.title': 'Sign In',\r\n 'blocks.password.fields.password.label': 'Password',\r\n 'blocks.password.submit': 'Sign In with Password',\r\n 'blocks.password.forgottenPassword': 'Forgot Password'\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n console.debug(\"sty Account Infor Reset Link\");\r\n\r\n let styAccountInfoEles = document.querySelectorAll(\"sty-block-password[data-block='password'] sty-account-info\");\r\n\r\n styAccountInfoEles.forEach(styAccountInfo => {\r\n if (styAccountInfo && document.querySelector(\"sty-block-password[data-block='password']\") && styAccountInfo.parentElement.querySelector(':scope > .sign-in-password-text') === null) {\r\n styAccountInfo.insertAdjacentHTML(\"beforebegin\", \"

Signing in as

\");\r\n let styAccountInfoResetLink = styAccountInfo.querySelector(\"a[data-button='reset']\");\r\n if (styAccountInfoResetLink) {\r\n styAccountInfoResetLink.classList.add(\"account-info-reset-link\");\r\n console.debug(\"sty Account Infor Reset Link\", styAccountInfoResetLink);\r\n styAccountInfoResetLink.querySelector(\"span\").innerHTML = \"Use another email\";\r\n styAccountInfoResetLink.querySelector(\"span\").classList.add(\"account-info-reset-link-text\");\r\n }\r\n }\r\n })\r\n\r\n let passwordSvgIcon = document.querySelector(\"sty-input-password\").shadowRoot.querySelector(\"div[part='button-toggle']\").querySelector(\"svg\");\r\n if (passwordSvgIcon) {\r\n console.debug(\"Inside password svg icon\", passwordSvgIcon);\r\n passwordSvgIcon.style.height = \"24px\";\r\n }\r\n let styCheckboxUi = document.querySelector(\"sty-block-password sty-checkbox\")?.shadowRoot.querySelector(\"[part=input]:before\");\r\n if (styCheckboxUi) {\r\n console.debug(\"styCheckboxUi\", styCheckboxUi);\r\n styCheckboxUi.style.border = \"1.5px solid #333\";\r\n }\r\n let forgottenPasswordEle = document.createElement(\"a\");\r\n forgottenPasswordEle.role = \"button\";\r\n forgottenPasswordEle.classList.add(\"tvs--forgotten-password\");\r\n forgottenPasswordEle.innerText = \"Forgot Password\";\r\n document.querySelectorAll(\"sty-login sty-block-password\").forEach(passwordBlock => {\r\n if (!passwordBlock.querySelector(\".tvs--forgotten-password\")) {\r\n passwordBlock.appendChild(forgottenPasswordEle);\r\n let passwordInputField = passwordBlock.querySelector(\"sty-input-password input\");\r\n if (passwordInputField) {\r\n passwordInputField.placeholder = \"Enter Password\";\r\n }\r\n }\r\n\r\n // WC-XXXX: Chrome hijacks the header search bar for username autofill.\r\n injectAutofillUsernameDecoy(passwordBlock);\r\n });\r\n document.addEventListener('click', (e) => {\r\n if (e.target.classList.contains(\"tvs--forgotten-password\")) {\r\n e.preventDefault();\r\n localStorage.setItem(\"forgotPasswordEmail\", blockDetail.state.account.identifier);\r\n if (window.location.hostname.split('.')[0].includes('account') || window.location.hostname.split('.')[0].includes('qa1-account')) {\r\n window.location.href = `${document.referrer}twa/password-reset`\r\n } else {\r\n window.location.href = \"/twa/password-reset\";\r\n }\r\n }\r\n });\r\n\r\n document.querySelectorAll(\"a[data-button='forgottenPassword']\").forEach(styForgotPasswordEle => styForgotPasswordEle.remove());\r\n\r\n\r\n }\r\n\r\n /*\r\n REGISTRATION BLOCK\r\n */\r\n if (blockDetail.state.activeBlock === 'registration') {\r\n sessionStorage.setItem(EVENT_TYPE, \"sign_up\");\r\n console.debug(\"GA tagging logs: EVENT_TYPE\", sessionStorage.getItem(EVENT_TYPE));\r\n\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n \"common.attributes.phone.errors.invalid\": \"Please enter a valid phone number\",\r\n \"common.attributes.phone.errors.required\": \"Please enter a valid phone number\",\r\n \"common.attributes.general.errors.unique\": \"This email is already associated with an account. Please sign in, or use a different email address to continue.\"\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n\r\n // Check target pages early\r\n const isInRegistrationUpgrade = !!document.querySelector('vshoppe-registration-upgrade sty-block-registration');\r\n const isInThankYou = !!document.querySelector('thank-you-create-account sty-block-registration');\r\n const isInModal = !!document.querySelector('tvs-modal sty-block-registration');\r\n\r\n const isTargetPage = (isInRegistrationUpgrade || isInThankYou) && !isInModal;\r\n\r\n if (isTargetPage) {\r\n // Remove elements for target pages\r\n const elementsToRemove = [\r\n 'sty-block-registration [data-t-id=\"blocks.registration.title\"]',\r\n 'sty-block-registration .registration-subtitle',\r\n 'sty-block-registration [data-separator=\"login\"]'\r\n ];\r\n\r\n elementsToRemove.forEach(selector => {\r\n const nodes = document.querySelectorAll(selector);\r\n nodes.forEach(node => {\r\n if (node?.parentNode) {\r\n node.parentNode.removeChild(node);\r\n }\r\n });\r\n });\r\n\r\n // Style submit button\r\n const submitButtons = document.querySelectorAll(\r\n 'sty-block-registration sty-button[type=\"submit\"]'\r\n );\r\n submitButtons.forEach(btn => {\r\n btn.style.cssText = `\r\n bottom: -10%;\r\n width: 225px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n `;\r\n });\r\n\r\n // Style methods section\r\n const methodsSections = document.querySelectorAll(\r\n 'sty-block-registration div[data-section=\"methods\"][role=\"list\"]'\r\n );\r\n methodsSections.forEach(section => {\r\n section.style.marginBottom = '64px';\r\n });\r\n }\r\n\r\n // Normal registration flow for other pages\r\n // Change title\r\n let registrationTitles = document.querySelectorAll(\"sty-block-registration [data-block-title]\");\r\n registrationTitles.forEach(registrationTitle => {\r\n registrationTitle.textContent = \"Join Now\";\r\n if (window.location.href.includes('/s/completeprofile')) {\r\n registrationTitle.textContent = \"Complete Your Profile\";\r\n }\r\n\r\n // Add subtitle\r\n if (registrationTitle.parentElement?.querySelectorAll(\".registration-subtitle\").length === 0) {\r\n registrationTitle.insertAdjacentHTML('afterend', `\r\n
\r\n Ready to get your V.I.P. on? Fill out the info below and we'll kickstart your membership with 25 FREE bonus points towards a Cash Back Award.\r\n
\r\n `);\r\n }\r\n });\r\n\r\n let inputTexts = document.querySelectorAll(\"sty-input-text\");\r\n inputTexts.forEach(inputText => {\r\n let errorShadowEleIcon = inputText.shadowRoot?.querySelector(\"div[part='error-icon']\");\r\n if (errorShadowEleIcon) {\r\n errorShadowEleIcon.style.display = \"none\";\r\n }\r\n });\r\n\r\n // Save the preffered method of registration for GA\r\n setupRadioObserver();\r\n\r\n const radioConfigs = [\r\n {\r\n selector: 'sty-radio[value=\"passkey\"]',\r\n subtitle: 'Sign up without a password using your fingerprint, face ID or a PIN.',\r\n isRecommended: true\r\n },\r\n {\r\n selector: 'sty-radio[value=\"password\"]',\r\n subtitle: 'Sign up securely using a traditional password.'\r\n }\r\n ];\r\n\r\n radioConfigs.forEach(config => {\r\n let radios = document.querySelectorAll(config.selector);\r\n\r\n radios.forEach(radio => {\r\n if (radio?.shadowRoot) {\r\n const shadowRoot = radio.shadowRoot;\r\n const labelDiv = shadowRoot.querySelector('div[part=\"label\"]');\r\n\r\n if (labelDiv) {\r\n // Handle \"Recommended\" inside slot (INLINE with label text)\r\n if (config.isRecommended) {\r\n const slot = shadowRoot.querySelector('slot[name=\"label\"]');\r\n\r\n if (slot) {\r\n const assignedNodes = slot.assignedNodes({ flatten: true });\r\n\r\n assignedNodes.forEach(node => {\r\n if (node.nodeType === Node.TEXT_NODE) {\r\n const text = node.textContent.trim();\r\n\r\n if (text && !text.includes('Recommended')) {\r\n const wrapper = document.createElement('span');\r\n wrapper.textContent = text + ' ';\r\n\r\n const recommended = document.createElement('span');\r\n recommended.className = 'passkey-recommended';\r\n recommended.textContent = 'Recommended';\r\n recommended.style.cssText = `\r\n margin-left: 8px;\r\n color: #008935;\r\n font-family: var(--sty-font-family);\r\n font-size: var(--sty-font-size-xs);\r\n font-weight: 400;\r\n `;\r\n\r\n const mq = window.matchMedia('(max-width: 418px)');\r\n\r\n const updateStyles = (e) => {\r\n recommended.style.wordBreak = e.matches ? 'keep-all' : '';\r\n recommended.style.marginLeft = e.matches ? '0' : '8px';\r\n };\r\n\r\n updateStyles(mq); // Run once immediately\r\n mq.addEventListener('change', updateStyles);\r\n\r\n wrapper.appendChild(recommended);\r\n node.replaceWith(wrapper);\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n // Subtitle\r\n if (!labelDiv.querySelector('[data-subtitle=\"true\"]')) {\r\n const subtitle = document.createElement('span');\r\n subtitle.setAttribute('data-subtitle', 'true');\r\n subtitle.className = 'radio-subtitle';\r\n subtitle.style.cssText = `\r\n color: rgba(102, 102, 102, 1);\r\n font-family: 'Lato', sans-serif;\r\n font-size: 12px;\r\n font-weight: 400;\r\n display: block;\r\n line-height: 1.4;\r\n word-break: normal;\r\n `;\r\n subtitle.textContent = config.subtitle;\r\n labelDiv.appendChild(subtitle);\r\n }\r\n }\r\n }\r\n });\r\n });\r\n\r\n // Update submit button text\r\n const isCompleteProfile = window.location.href.includes(\"/s/completeprofile\")\r\n let submitButtons = document.querySelectorAll('sty-block-registration sty-button[data-button=\"submit\"]');\r\n submitButtons.forEach(submitButton => {\r\n submitButton.textContent = isCompleteProfile ? \"Complete Profile\" : \"Create My Account\";\r\n });\r\n\r\n // ===== ADD LEGAL DISCLAIMER =====\r\n let externalLoginSections = document.querySelectorAll('sty-block-registration sty-block-external-login-provider');\r\n externalLoginSections.forEach(externalLoginSection => {\r\n if (!externalLoginSection.nextElementSibling?.classList.contains('registration-legal-disclaimer')) {\r\n externalLoginSection.insertAdjacentHTML('afterend', `\r\n

\r\n By creating an account, you agree to the \r\n Healthy Awards Terms and Conditions, \r\n Auto Delivery Terms and Conditions, and the Vitamin Shoppe's \r\n Terms of Use, and \r\n Privacy Policy. \r\n If you are a California or Colorado resident, \r\n you agree that you are enrolling in a financial incentive/loyalty program \r\n and acknowledge that you have read and understand the \r\n Financial Incentive and Loyalty Program Notice.\r\n

\r\n `);\r\n }\r\n });\r\n\r\n // Setting up the < Back button\r\n setupBackButton('sty-block-registration a[data-button=\"login\"]');\r\n\r\n let inputFields = document.querySelectorAll('sty-input-text[name=\"attributes.addresses.primary.postalCode.postalCode\"]');\r\n inputFields.forEach(inputField => {\r\n const clearButton = inputField.shadowRoot?.querySelector('div[part=\"suffix\"]');\r\n if (clearButton) {\r\n clearButton.style.display = 'none';\r\n }\r\n });\r\n if (window.location.href.includes(\"/s/completeprofile\")) {\r\n displayWarningForSocialLogin();\r\n scrollToTopForCompleteProfile();\r\n }\r\n }\r\n\r\n /*\r\n REGISTRATION AND PROGRESSIVE PROFILING BLOCK\r\n */\r\n if (blockDetail.state.activeBlock === 'registration' || blockDetail.state.activeBlock === 'progressiveProfiling') {\r\n /** Phone number input field updates for country code issue resolution */\r\n const phone = document.querySelector('sty-input-phone');\r\n phone.shadowRoot.querySelector(\"div[part='country-code-list']\").remove();\r\n\r\n setTimeout(() => {\r\n phone.setAttribute('autocomplete', false);\r\n phone.setAttribute('lookupCountryCode', false);\r\n phone.countryCode = 'US';\r\n });\r\n }\r\n\r\n /* ============================================================\r\n SHARED HELPERS\r\n ============================================================ */\r\n\r\n /**\r\n * Sets the common label + resend section text (identical across all 3 blocks).\r\n */\r\n function applyCommonPasscodeText() {\r\n const passcodeLabel = document.querySelector('sty-input-passcode label[slot=\"label\"]');\r\n if (passcodeLabel && !passcodeLabel.hasAttribute('data-customized')) {\r\n passcodeLabel.textContent = 'Enter 6 digit code';\r\n passcodeLabel.setAttribute('data-customized', 'true');\r\n }\r\n\r\n const resendContainer = document.querySelector('sty-i18n[data-section=\"resend\"]');\r\n if (resendContainer && !resendContainer.hasAttribute('data-customized')) {\r\n const resendLink = resendContainer.querySelector('a[data-button=\"resend\"]');\r\n if (resendLink) {\r\n resendContainer.childNodes.forEach(node => {\r\n if (node.nodeType === Node.TEXT_NODE && node.textContent.includes(\"Didn't\")) {\r\n node.textContent = \"Didn't Get a Code? \";\r\n }\r\n });\r\n resendLink.textContent = 'Resend Code';\r\n resendContainer.setAttribute('data-customized', 'true');\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Updates the \"sent your code to \" text container used by the\r\n * MFA enroll challenge and MFA passcode blocks.\r\n */\r\n function applyEmailSentText(blockSelector, keypath) {\r\n const textContainer = document.querySelector(\r\n `${blockSelector} sty-i18n[keypath=\"${keypath}\"]`\r\n );\r\n if (!textContainer || textContainer.hasAttribute('data-customized')) return;\r\n\r\n const emailStrong = textContainer.querySelector('strong[data-target]');\r\n if (emailStrong) {\r\n const emailText = emailStrong.textContent;\r\n textContainer.innerHTML = '';\r\n\r\n const message = document.createElement('div');\r\n message.textContent = blockSelector === 'sty-block-mfa-passcode' ? \"To sign in to your account, we've sent your code to\" : \"To create your account, we've sent your code to\";\r\n\r\n const emailLine = document.createElement('div');\r\n emailLine.innerHTML = `${emailText}`;\r\n\r\n textContainer.appendChild(message);\r\n textContainer.appendChild(emailLine);\r\n }\r\n textContainer.setAttribute('data-customized', 'true');\r\n\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n [keypath]: \"To create your account, we've sent your code to: {target}\",\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n }\r\n\r\n /**\r\n * Builds the 6-box passcode UI, wires up all keyboard/paste/error/timer\r\n * behaviour, and syncs the combined value back to the real hidden input.\r\n * Identical across all 3 blocks.\r\n */\r\n function initSixBoxPasscodeUI() {\r\n const styInputPasscode = document.querySelector('sty-input-passcode');\r\n if (!styInputPasscode || styInputPasscode.querySelector('.passcode-boxes-wrapper')) return;\r\n\r\n // FIX 1: Best-effort autofocus removal before component acts on it\r\n styInputPasscode.removeAttribute('autofocus');\r\n\r\n const realInput = styInputPasscode.querySelector('input[slot=\"input\"]');\r\n if (realInput) {\r\n realInput.style.cssText =\r\n 'position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;';\r\n }\r\n\r\n // FIX 1: Suppress observer reactions during initial focus setup\r\n let isInitializing = true;\r\n // FIX 3: Track whether a server-side error has occurred\r\n let hadError = false;\r\n // Suppress Strivacity's own error text until a real error occurs\r\n styInputPasscode.classList.add('suppress-feedback');\r\n\r\n styInputPasscode.insertAdjacentHTML('beforeend', `\r\n
\r\n
\r\n ${''.repeat(6)}\r\n
\r\n
Code Expires in 6:00
\r\n
\r\n `);\r\n\r\n const boxes = Array.from(styInputPasscode.querySelectorAll('.passcode-box'));\r\n const timerEl = styInputPasscode.querySelector('#passcode-timer');\r\n\r\n const syncToRealInput = () => {\r\n if (!realInput) return;\r\n const combined = boxes.map(b => b.value).join('');\r\n realInput.value = combined;\r\n realInput.dispatchEvent(new Event('input', { bubbles: true }));\r\n realInput.dispatchEvent(new Event('change', { bubbles: true }));\r\n\r\n // FIX 3: Re-trigger submission after a prior error\r\n if (combined.length === 6 && hadError) {\r\n hadError = false;\r\n setTimeout(() => {\r\n const shadowBtn = styInputPasscode?.shadowRoot?.querySelector('button');\r\n if (shadowBtn) return shadowBtn.click();\r\n\r\n const form = realInput.closest('form');\r\n if (form) {\r\n try { return form.requestSubmit(); } catch (e) { /* fall through */ }\r\n }\r\n realInput.dispatchEvent(new KeyboardEvent('keydown', {\r\n key: 'Enter', keyCode: 13, bubbles: true, cancelable: true,\r\n }));\r\n }, 50);\r\n }\r\n };\r\n\r\n const setErrorState = () => {\r\n hadError = true;\r\n styInputPasscode.classList.remove('suppress-feedback');\r\n boxes.forEach(b => {\r\n b.classList.add('error');\r\n b.classList.remove('filled');\r\n });\r\n };\r\n\r\n const clearErrorState = () => boxes.forEach(b => b.classList.remove('error'));\r\n\r\n boxes.forEach((box, i) => {\r\n box.addEventListener('keydown', e => {\r\n if (e.key === 'Backspace') {\r\n clearErrorState();\r\n if (box.value) {\r\n box.value = '';\r\n box.classList.remove('filled');\r\n } else if (i > 0) {\r\n boxes[i - 1].focus();\r\n boxes[i - 1].value = '';\r\n boxes[i - 1].classList.remove('filled');\r\n }\r\n syncToRealInput();\r\n e.preventDefault();\r\n }\r\n if (e.key === 'ArrowLeft' && i > 0) boxes[i - 1].focus();\r\n if (e.key === 'ArrowRight' && i < 5) boxes[i + 1].focus();\r\n });\r\n\r\n box.addEventListener('input', e => {\r\n clearErrorState();\r\n const val = e.target.value.replace(/\\D/g, '');\r\n box.value = val ? val[0] : '';\r\n if (box.value) {\r\n box.classList.add('filled');\r\n if (i < 5) boxes[i + 1].focus();\r\n } else {\r\n box.classList.remove('filled');\r\n }\r\n syncToRealInput();\r\n });\r\n\r\n box.addEventListener('paste', e => {\r\n e.preventDefault();\r\n clearErrorState();\r\n const pasted = (e.clipboardData || window.clipboardData)\r\n .getData('text')\r\n .replace(/\\D/g, '')\r\n .slice(0, 6);\r\n pasted.split('').forEach((ch, j) => {\r\n if (boxes[i + j]) {\r\n boxes[i + j].value = ch;\r\n boxes[i + j].classList.add('filled');\r\n }\r\n });\r\n boxes[Math.min(i + pasted.length, 5)].focus();\r\n syncToRealInput();\r\n });\r\n\r\n box.addEventListener('focus', () => box.select());\r\n });\r\n\r\n const feedback = styInputPasscode.querySelector('sty-feedback');\r\n if (feedback) {\r\n new MutationObserver(() => {\r\n if (isInitializing) return;\r\n if (styInputPasscode.hasAttribute('invalid')) setErrorState();\r\n }).observe(feedback, { attributes: true, childList: true, subtree: true });\r\n }\r\n\r\n new MutationObserver(() => {\r\n if (isInitializing) return;\r\n if (styInputPasscode.hasAttribute('invalid') && boxes.some(b => b.value)) {\r\n setErrorState();\r\n }\r\n }).observe(styInputPasscode, { attributes: true, attributeFilter: ['invalid'] });\r\n\r\n let secs = 360;\r\n const timerInterval = setInterval(() => {\r\n secs--;\r\n if (secs <= 0) {\r\n clearInterval(timerInterval);\r\n timerEl.textContent = 'Code Expired';\r\n timerEl.classList.add('expiring');\r\n setErrorState();\r\n return;\r\n }\r\n const m = Math.floor(secs / 60);\r\n const s = secs % 60;\r\n timerEl.textContent = `Code Expires in ${m}:${String(s).padStart(2, '0')}`;\r\n if (secs <= 30) timerEl.classList.add('expiring');\r\n }, 1000);\r\n\r\n setTimeout(() => {\r\n boxes[0].focus();\r\n setTimeout(() => { isInitializing = false; }, 400);\r\n }, 100);\r\n }\r\n\r\n /**\r\n * Sets the block title (once), the submit button label, and the back button.\r\n */\r\n function applyBlockChrome({ blockSelector, backSelector, title = 'Email Verification', submitText = 'Verify Code' }) {\r\n const titleElement = document.querySelector(`${blockSelector} [data-block-title]`);\r\n if (titleElement && !titleElement.hasAttribute('data-customized')) {\r\n titleElement.textContent = title;\r\n titleElement.setAttribute('data-customized', 'true');\r\n }\r\n\r\n setupBackButton(`${blockSelector} ${backSelector}`);\r\n\r\n const submitButton = document.querySelector(`${blockSelector} sty-button[data-button=\"submit\"]`);\r\n if (submitButton) submitButton.textContent = submitText;\r\n }\r\n\r\n /* ============================================================\r\n BLOCK DISPATCH\r\n ============================================================ */\r\n\r\n const activeBlock = blockDetail.state.activeBlock;\r\n\r\n /* --- PASSCODE (email verification) --- */\r\n if (activeBlock === 'passcode' || activeBlock === 'passcode-verification') {\r\n\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n \"blocks.passcode.fields.passcode.errors.exactLength\": \"Please enter a valid 6-digit passcode\",\r\n \"blocks.passcode.fields.passcode.errors.invalid\": \"Please enter a valid 6-digit passcode\",\r\n \"blocks.passcode.fields.passcode.errors.required\": \"Please enter a valid 6-digit passcode\",\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n\r\n applyBlockChrome({\r\n blockSelector: 'sty-block-passcode',\r\n backSelector: 'a[data-button=\"login\"]',\r\n });\r\n\r\n // Simple paragraph sub-text (unique to this block)\r\n const textSubText = document.querySelector('[data-text] p');\r\n if (textSubText && !textSubText.hasAttribute('data-customized')) {\r\n textSubText.textContent = \"To create your account, we've sent your code to\";\r\n textSubText.setAttribute('data-customized', 'true');\r\n }\r\n\r\n applyCommonPasscodeText();\r\n initSixBoxPasscodeUI();\r\n }\r\n\r\n /* --- PASSKEY MFA ENROLL CHALLENGE --- */\r\n if (activeBlock === 'mfaEnrollChallenge') {\r\n\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n \"blocks.mfaEnrollChallenge.fields.passcode.errors.exactLength\": \"Please enter a valid 6-digit passcode\",\r\n \"blocks.mfaEnrollChallenge.fields.passcode.errors.invalid\": \"Please enter a valid 6-digit passcode\",\r\n \"blocks.mfaEnrollChallenge.fields.passcode.errors.required\": \"Please enter a valid 6-digit passcode\",\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n\r\n applyBlockChrome({\r\n blockSelector: 'sty-block-mfa-enroll-challenge',\r\n backSelector: 'a[data-button=\"login\"]',\r\n });\r\n applyEmailSentText('sty-block-mfa-enroll-challenge', 'blocks.mfaEnrollChallenge.email.text');\r\n applyCommonPasscodeText();\r\n initSixBoxPasscodeUI();\r\n }\r\n\r\n /* --- PASSCODE MFA --- */\r\n if (activeBlock === 'mfaPasscode') {\r\n\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n \"blocks.mfaPasscode.fields.passcode.errors.exactLength\": \"Please enter a valid 6-digit passcode\",\r\n \"blocks.mfaPasscode.fields.passcode.errors.invalid\": \"Please enter a valid 6-digit passcode\",\r\n \"blocks.mfaPasscode.fields.passcode.errors.required\": \"Please enter a valid 6-digit passcode\",\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n\r\n applyBlockChrome({\r\n blockSelector: 'sty-block-mfa-passcode',\r\n backSelector: 'a[data-button=\"login\"]',\r\n });\r\n applyEmailSentText('sty-block-mfa-passcode', 'blocks.mfaPasscode.text.email.passcode');\r\n applyCommonPasscodeText();\r\n initSixBoxPasscodeUI();\r\n }\r\n\r\n\r\n /*\r\n PASSWORD ENROLL BLOCK (PASSWORD CREATION AT THE TIME OF REGISTRATION)\r\n */\r\n if (blockDetail.state.activeBlock === 'passwordEnroll') {\r\n const emailText = document.querySelector(\"sty-block-password-enroll sty-account-info span[data-item='identifier']\")\r\n if (emailText && !emailText.hasAttribute('data-customized')) {\r\n emailText.insertAdjacentHTML('afterbegin', `\r\n Set up a secure password for \r\n `)\r\n emailText.setAttribute('data-customized', 'true'); // Prevent duplicate updates\r\n }\r\n\r\n // Testing password strength indicator\r\n const waitForElement = setInterval(() => {\r\n const requirementsEl = document.querySelector('sty-input-password-requirements');\r\n const passwordInput = document.querySelector('sty-input-password');\r\n\r\n if (requirementsEl && requirementsEl.shadowRoot && passwordInput) {\r\n clearInterval(waitForElement);\r\n initCustomPasswordUI(requirementsEl, passwordInput);\r\n }\r\n }, 200);\r\n\r\n function initCustomPasswordUI(requirementsEl, passwordInput) {\r\n\r\n console.debug('[Password UI] Initializing...');\r\n\r\n // 1. Hide default Strivacity UI\r\n requirementsEl.style.display = 'none';\r\n\r\n // 2. Inject Custom UI\r\n if (!document.querySelector('.custom-password-wrapper')) {\r\n passwordInput.insertAdjacentHTML('afterend', `\r\n
\r\n\r\n
Password Strength
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
Password must contain:
\r\n\r\n
    \r\n
  • \r\n ${crossIcon()} At least one number\r\n
    • \r\n
  • \r\n ${crossIcon()} Uppercase letters\r\n
    • \r\n
  • \r\n ${crossIcon()} Lowercase letters\r\n
    • \r\n
  • \r\n ${crossIcon()} 8 or more characters\r\n
    • \r\n
\r\n\r\n
\r\n `);\r\n }\r\n\r\n // 3. Observe Shadow DOM changes\r\n const observerForPassword = new MutationObserver(() => {\r\n syncUI(requirementsEl);\r\n });\r\n console.debug(\"requirementsEl: \", requirementsEl);\r\n observerForPassword.observe(requirementsEl.shadowRoot, {\r\n subtree: true,\r\n attributes: true,\r\n childList: true\r\n });\r\n\r\n // Initial sync\r\n syncUI(requirementsEl);\r\n }\r\n\r\n function syncUI(requirementsEl) {\r\n console.debug(\"requirementsE1l : \", requirementsEl);\r\n const shadowItems = requirementsEl.shadowRoot.querySelectorAll('[data-requirement]');\r\n let metCount = 0;\r\n\r\n shadowItems.forEach(item => {\r\n const rule = item.getAttribute('data-requirement');\r\n\r\n // IMPORTANT: confirm this class in DevTools\r\n const isMet = item.classList.contains('valid') || item.classList.contains('met');\r\n\r\n const customItem = document.querySelector(`.requirements-list li[data-rule=\"${rule}\"]`);\r\n\r\n if (customItem) {\r\n const iconContainer = customItem.querySelector('.icon');\r\n\r\n if (isMet) {\r\n customItem.classList.add('met');\r\n customItem.classList.remove('unmet');\r\n iconContainer.innerHTML = checkIcon();\r\n metCount++;\r\n } else {\r\n customItem.classList.add('unmet');\r\n customItem.classList.remove('met');\r\n iconContainer.innerHTML = crossIcon();\r\n }\r\n }\r\n });\r\n\r\n updateStrengthBars(metCount);\r\n updateStrengthText(metCount);\r\n\r\n console.debug('[Password UI] Met Count:', metCount);\r\n }\r\n\r\n function updateStrengthBars(count) {\r\n const bars = document.querySelectorAll('.strength-bars .bar');\r\n\r\n bars.forEach((bar, index) => {\r\n bar.classList.remove('active', 'strong');\r\n\r\n if (index < count) {\r\n bar.classList.add('active');\r\n\r\n if (count === 4) {\r\n bar.classList.add('strong');\r\n }\r\n }\r\n });\r\n }\r\n\r\n function updateStrengthText(count) {\r\n const text = document.querySelector('.strength-text');\r\n\r\n if (!text) return;\r\n\r\n if (count === 0) {\r\n text.textContent = 'Password Strength: -';\r\n text.style.color = '#666';\r\n } else if (count < 4) {\r\n text.textContent = 'Password Strength: Weak';\r\n text.style.color = '#c41c1c';\r\n } else {\r\n text.textContent = 'Password Strength: Strong';\r\n text.style.color = '#008000';\r\n }\r\n }\r\n\r\n function checkIcon() {\r\n return `\r\n \r\n \r\n \r\n \r\n \r\n `;\r\n }\r\n\r\n function crossIcon() {\r\n return `\r\n \r\n \r\n \r\n \r\n \r\n `;\r\n }\r\n }\r\n\r\n if (blockDetail.state.activeBlock === \"passkeyEnroll\") {\r\n sty.i18nService.overrides = {\r\n 'en-US': {\r\n 'blocks.passkeyEnroll.create': 'Add Passkey',\r\n 'blocks.passkeyEnroll.submit': 'Add Passkey'\r\n },\r\n };\r\n sty.i18nService.mergeLocaleMessage();\r\n if (blockDetail.previousState.activeBlock === \"genericResult\") {\r\n let hideSkipForNowElements = document.querySelectorAll(\"sty-login sty-block-passkey-enroll[data-block='passkeyEnroll'] a[data-button='skip']\");\r\n console.debug(\"hideSkipForNowElements: \", hideSkipForNowElements);\r\n hideSkipForNowElements.forEach(hideSkipForNowEle => {\r\n if (hideSkipForNowEle) {\r\n hideSkipForNowEle.classList.add(\"hide-skip-now\");\r\n }\r\n\r\n })\r\n }\r\n\r\n console.debug(\"blockDetail.previousState.activeBlock: \", blockDetail.previousState.activeBlock)\r\n\r\n // Adding custom loader\r\n const isPasskeyEnrollArr = document.querySelectorAll(\r\n 'sty-login.passkeyEnroll'\r\n );\r\n\r\n console.debug('isPasskeyEnrollArr: ', isPasskeyEnrollArr)\r\n\r\n if (isPasskeyEnrollArr.length) {\r\n const loaderHTML = `\r\n \r\n `;\r\n\r\n isPasskeyEnrollArr.forEach((isPasskeyEnroll) => {\r\n // Insert loader before the element\r\n console.debug('isPasskeyEnroll: ', isPasskeyEnroll)\r\n console.debug('isPasskeyEnroll adding the loader: ')\r\n\r\n const parent = isPasskeyEnroll.parentElement;\r\n const existingLoader = parent?.querySelector('.temp-passkey-loader') || parent?.querySelector('sty-loader');\r\n\r\n if (!existingLoader) {\r\n isPasskeyEnroll.insertAdjacentHTML('beforebegin', loaderHTML);\r\n }\r\n });\r\n\r\n }\r\n\r\n if (blockDetail.previousState.activeBlock === \"passwordEnroll\" || blockDetail.previousState.activeBlock === \"genericResult\" || blockDetail.previousState.activeBlock === \"password\") {\r\n let passkeyEnrollTitles = document.querySelectorAll(\"sty-login sty-block-passkey-enroll [data-block-title]\");\r\n passkeyEnrollTitles.forEach(passkeyEnrollTitle => {\r\n passkeyEnrollTitle.textContent = \"Introducing Passkeys\";\r\n\r\n // Add subtitle\r\n if (passkeyEnrollTitle.parentElement.querySelectorAll(\".passkey-enroll-subtitle\").length === 0) {\r\n passkeyEnrollTitle.insertAdjacentHTML('afterend', `\r\n
\r\n Simplify your sign-in experience\r\n
\r\n `);\r\n\r\n // Removing the loader\r\n setTimeout(() => {\r\n console.debug('isPasskeyEnroll removing the loader: ')\r\n document\r\n .querySelectorAll('.temp-passkey-loader')\r\n .forEach((loader) => loader.remove());\r\n }, 2500)\r\n }\r\n });\r\n\r\n // Remove all \r\n document.querySelectorAll('sty-login sty-block-passkey-enroll sty-account-info')\r\n .forEach(el => el.remove());\r\n\r\n // Remove all \r\n document.querySelectorAll('sty-login sty-block-passkey-enroll sty-icon')\r\n .forEach(el => el.remove());\r\n\r\n // Remove all elements with data-t-id starting with \"blocks.passkeyEnroll.explanation.\"\r\n document.querySelectorAll('sty-login sty-block-passkey-enroll [data-t-id^=\"blocks.passkeyEnroll.explanation.\"]')\r\n .forEach(el => el.remove());\r\n\r\n // Add custom image + content after subtitle\r\n let subtitles = document.querySelectorAll(\r\n 'sty-login sty-block-passkey-enroll .passkey-enroll-subtitle'\r\n );\r\n\r\n subtitles.forEach(subtitle => {\r\n if (subtitle) {\r\n // Prevent duplicate insertion\r\n if (!subtitle.parentElement.querySelectorAll('.passkey-custom-content').length) {\r\n subtitle.insertAdjacentHTML('afterend', `\r\n
\r\n
\r\n
\r\n \r\n ${desktopSvg}\r\n
\r\n
\r\n \r\n ${mobileSvg}\r\n
\r\n
\r\n

Use your fingerprint, face, or PIN to securely sign in as a passkey.

\r\n

Passkeys offer enhanced security and convenience over traditional passwords, while still allowing you to sign in with your password if needed.

\r\n

Click 'Add Passkey' to get started, then follow the prompts on your device or browser.

\r\n
\r\n `);\r\n }\r\n }\r\n });\r\n\r\n // Listen to Add Passkey button click\r\n let addPasskeyButtons = document.querySelectorAll(\r\n 'sty-login sty-block-passkey-enroll sty-button[data-button=\"create\"]'\r\n );\r\n\r\n addPasskeyButtons.forEach(btn => {\r\n if (btn) {\r\n btn.addEventListener('click', () => {\r\n // Remove all custom content blocks\r\n document.querySelectorAll(\r\n 'sty-login sty-block-passkey-enroll .passkey-custom-content'\r\n ).forEach(el => el.remove());\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * ============================================================\r\n * Social Login Pop up close redirect message update\r\n * ============================================================\r\n */\r\n\r\n if (blockDetail.state.activeBlock === \"redirect\") {\r\n console.debug(\"Back button not clicked\");\r\n if (!observerForRetry) {\r\n observerForRetry = new MutationObserver(() => {\r\n if (document.querySelector(\"sty-block-redirect sty-button[data-button='retry']\")) {\r\n console.debug(\"Loader:\", document.querySelector(\"sty-block-redirect sty-loader\"));\r\n document.querySelector(\"sty-block-redirect sty-loader\").remove();\r\n document.querySelector(\"sty-block-redirect\").insertAdjacentHTML(\"afterbegin\",\r\n `

Sign-in didn't complete

\r\n

We couldn’t confirm your sign-in. Please retry, or refresh the page to see other sign-in options.

`\r\n )\r\n observerForRetry.disconnect();\r\n observerForRetry = null;\r\n }\r\n });\r\n }\r\n else {\r\n observerForRetry.disconnect();\r\n }\r\n document.querySelectorAll(\"sty-block-redirect\").forEach(styBlockRedirect => {\r\n observerForRetry.observe(styBlockRedirect, { attributes: true, childList: true, subtree: true });\r\n });\r\n\r\n // GA - Google analytics from registration\r\n if (blockDetail.state.blocks.redirect.mode === \"finish\") {\r\n console.debug(\"GA tagging logs: Calling report login\");\r\n const pageType = getPageType();\r\n reportLogin(pageType);\r\n }\r\n\r\n //alert for safari pop up blocked\r\n if (blockDetail.state.blocks.redirect.mode === \"popup\") {\r\n const originalWindowOpen = window.open;\r\n\r\n window.open = function (...args) {\r\n const popup = originalWindowOpen.apply(this, args);\r\n\r\n if (!popup) {\r\n // Safari/browser blocked the popup\r\n showPopupBlockedAlert();\r\n }\r\n\r\n return popup;\r\n };\r\n\r\n function showPopupBlockedAlert() {\r\n alert(\r\n 'Pop-up blocked. Please allow pop-ups for this website in Safari and try again.'\r\n );\r\n }\r\n }\r\n }\r\n\r\n if (blockDetail.state.activeBlock === \"rememberedAccount\" && blockDetail.state.blocks.rememberedAccount?.accounts?.length > 1) {\r\n removeRememberedAccountsUI(event.detail.state.blocks.rememberedAccount?.accounts?.length);\r\n }\r\n\r\n if (blockDetail.state.activeBlock === \"rememberedAccount\") {\r\n if (document.querySelector(\"[data-t-id='blocks.rememberedAccount.useDifferent']\")) {\r\n document.querySelector(\"[data-t-id='blocks.rememberedAccount.useDifferent']\").addEventListener(\"click\", () => {\r\n console.debug(\"Login different account clicked\");\r\n localStorage.removeItem(\"ctProfileData\");\r\n });\r\n }\r\n }\r\n\r\n if (!observer) {\r\n observer = new MutationObserver((mutationsList) => {\r\n handleGlobalObserver(mutationsList);\r\n });\r\n }\r\n else {\r\n observer.disconnect();\r\n }\r\n document.querySelectorAll(\"sty-login\").forEach((targetNode) => {\r\n observer.observe(targetNode, { attributes: true, childList: true, subtree: true });\r\n });\r\n\r\n if (observerForScreen) {\r\n observerForScreen.disconnect();\r\n observerForScreen = null;\r\n }\r\n const apply = handlerFor(blockDetail.state);\r\n if (!apply) {\r\n return;\r\n }\r\n if (!apply()) {\r\n observerForScreen = new MutationObserver(() => {\r\n if (apply()) {\r\n observerForScreen.disconnect();\r\n observerForScreen = null;\r\n }\r\n });\r\n observerForScreen.observe(document.body, { childList: true, subtree: true, attributes: true });\r\n }\r\n});\r\n\r\ndocument.addEventListener('block-request', async (event) => {\r\n console.debug('global error', event)\r\n\r\n const globalMessage = event.detail.state?.messages?.global;\r\n console.debug('globalMessage: ', globalMessage)\r\n\r\n if (globalMessage?.type === 'error' && (event.detail.state.activeBlock === 'registration' || event.detail.state.activeBlock === 'identifier')) {\r\n console.debug('globalMessage if check globalMessage?.type: ', globalMessage?.type)\r\n console.debug('globalMessage if check event.detail.state.activeBlock: ', event.detail.state.activeBlock)\r\n\r\n // Inline alert ABOVE heading\r\n const heading = document.querySelector('[data-block-title][data-t-id=\"blocks.registration.title\"]') ||\r\n document.querySelector('sty-block-registration') ||\r\n document.querySelector('[data-block-title][data-t-id=\"blocks.identifier.title\"]') ||\r\n document.querySelector('sty-block-identifier')\r\n\r\n console.debug('globalMessage heading', heading)\r\n\r\n if (heading) {\r\n console.debug('globalMessage heading if check', heading)\r\n // Prevents duplicates\r\n document.querySelectorAll('.custom-global-error').forEach(el => el.remove());\r\n\r\n let messageText = globalMessage?.text;\r\n if (globalMessage?.text === \"Invalid passkey\") messageText = \"Passkey not recognized\";\r\n if (globalMessage?.text === \"Account with same identifier already exists. Please try to login with that.\") messageText = \"This email is already associated with an account. Please sign in, or use a different email address to continue.\";\r\n\r\n heading.insertAdjacentHTML('beforebegin', `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ${messageText}\r\n \r\n `);\r\n\r\n // Scroll to the error message at the top\r\n requestAnimationFrame(() => {\r\n const targetHeader = document.querySelector('sty-alert.custom-global-error');\r\n\r\n if (targetHeader) {\r\n targetHeader.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'end'\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n // New code added to update the error message copy of email field level error on form submit\r\n if (\r\n event.detail.state.activeBlock === 'registration' &&\r\n event.detail.previousState.activeBlock === 'registration' &&\r\n !globalMessage &&\r\n event.detail.state.messages?.email &&\r\n emailControl\r\n ) {\r\n console.debug('globalMessage email message emailControl: ', emailControl)\r\n emailControl.setValidity(\r\n { customError: false },\r\n 'This email is already associated with an account. Please sign in, or use a different email address to continue.'\r\n );\r\n // Scroll to the error message at the email field\r\n requestAnimationFrame(() => {\r\n const targetField = document.querySelector('sty-block-registration sty-input-text[name=\"email\"]');\r\n\r\n if (targetField) {\r\n targetField.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'center'\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (event.detail.state.activeBlock === \"rememberedAccount\" && event.detail.state.blocks.rememberedAccount?.accounts?.length > 1) {\r\n setRememberedAccount(event.detail);\r\n }\r\n});\r\n\r\nwindow.addEventListener('brandingLoaded', (event) => {\r\n console.debug(\"Branding Loaded now\");\r\n scrollToTopForCompleteProfile();\r\n});\r\n\r\nlet replayingResetClick = false;\r\n\r\nwindow.addEventListener(\r\n \"click\",\r\n async (event) => {\r\n const link = event.target.closest(\r\n 'a.account-info-reset-link[data-button=\"reset\"]'\r\n );\r\n\r\n if (!link) {\r\n return;\r\n }\r\n\r\n // Allow our programmatically generated click through\r\n if (replayingResetClick) {\r\n return;\r\n }\r\n\r\n // Block third-party execution for the original click\r\n event.preventDefault();\r\n event.stopImmediatePropagation();\r\n\r\n try {\r\n console.debug(\"block details:\", blockDetail);\r\n\r\n // Delete remembered account if accountId is available\r\n const result = await removeAllRememberedAccount();\r\n console.debug(\"Result awaited\", result);\r\n // Only clear local auth state if an account was actually deleted\r\n if (result.deleted) {\r\n console.debug(\"Remembered account deleted:\", result.data);\r\n clearLocalAuthState();\r\n } else {\r\n console.debug(\"No remembered account found. Continuing normally.\");\r\n }\r\n\r\n // Let the third-party functionality execute\r\n replayingResetClick = true;\r\n link.click();\r\n\r\n } catch (error) {\r\n console.error(\"Pre-reset API failed:\", error);\r\n\r\n // If your API fails, don't execute the third-party action.\r\n // Remove this return if you want the original action to continue.\r\n } finally {\r\n replayingResetClick = false;\r\n }\r\n },\r\n true // capture phase\r\n);\r\n\r\n/*\r\n UTILITY FUNCTIONS\r\n*/\r\n\r\n/**\r\n * Prevents Chrome from autofilling the site-wide header search bar with the\r\n * saved username on the remembered-account password step.\r\n *\r\n * Root cause: that step's has only static account text\r\n * () and the password field - no username .\r\n *\r\n * Fix: insert a decoy right before the password\r\n * input in the same . Off-screen, aria-hidden, tabindex -1 and out of\r\n * validation, so users never see or tab to it; Chrome fills it instead.\r\n *\r\n * @param {Element} passwordBlock The element for this step.\r\n */\r\nfunction injectAutofillUsernameDecoy(passwordBlock) {\r\n if (!passwordBlock) return;\r\n\r\n const form = passwordBlock.querySelector('sty-form') || passwordBlock;\r\n const passwordInput = form.querySelector('sty-input-password');\r\n if (!passwordInput) return;\r\n\r\n // Only one decoy per form.\r\n if (form.querySelector('.tvs-autofill-decoy-username')) return;\r\n\r\n const identifier =\r\n (blockDetail &&\r\n blockDetail.state &&\r\n blockDetail.state.account &&\r\n blockDetail.state.account.identifier) ||\r\n '';\r\n\r\n const decoy = document.createElement('input');\r\n decoy.type = 'text';\r\n decoy.name = 'username';\r\n decoy.setAttribute('autocomplete', 'username');\r\n decoy.className = 'tvs-autofill-decoy-username';\r\n decoy.tabIndex = -1;\r\n decoy.setAttribute('aria-hidden', 'true');\r\n // Keep it out of assistive tech and submission while staying in the rendered\r\n // layout (display:none/visibility:hidden fields are skipped by Chrome's\r\n // autofill heuristic, so position it off-screen instead).\r\n decoy.style.cssText =\r\n 'position:absolute!important;left:-9999px!important;top:0!important;' +\r\n 'width:1px!important;height:1px!important;opacity:0!important;' +\r\n 'pointer-events:none!important;';\r\n decoy.value = identifier;\r\n\r\n // Insert as the field immediately preceding the password input so Chrome\r\n // treats it as the username half of the credential pair.\r\n passwordInput.parentElement.insertBefore(decoy, passwordInput);\r\n console.debug(\r\n 'tvs-web-frontend: strivacity-ciam: login-branding: injectAutofillUsernameDecoy: decoy inserted for identifier:',\r\n identifier\r\n );\r\n}\r\n\r\nfunction setupBackButton(selector, label = 'Back', className = 'sty-btn-link') {\r\n const buttons = document.querySelectorAll(selector);\r\n\r\n buttons.forEach(button => {\r\n if (!button) return;\r\n\r\n // Add utility class\r\n button.classList.add(className);\r\n\r\n // Check if icon already exists\r\n let icon = button.querySelector('.back-arrow-icon');\r\n\r\n // Set label (this resets content)\r\n button.innerHTML = label;\r\n\r\n // Recreate icon if it didn't exist\r\n if (!icon) {\r\n icon = document.createElement('span');\r\n icon.className = 'back-arrow-icon';\r\n icon.setAttribute('aria-hidden', 'true'); // Decorative only\r\n }\r\n\r\n // Always ensure icon is at the start\r\n button.insertBefore(icon, button.firstChild);\r\n });\r\n}\r\n\r\n/**\r\n * Scrolls to the top on /s/completeprofile, where the page jumps down on block\r\n * transitions (e.g. registration → passwordEnroll).\r\n */\r\nfunction scrollToTopForCompleteProfile() {\r\n if (!window.location.href.includes('/s/completeprofile')) {\r\n return;\r\n }\r\n\r\n if ('scrollRestoration' in history) {\r\n history.scrollRestoration = 'manual';\r\n }\r\n\r\n const scroller = document.scrollingElement || document.documentElement;\r\n\r\n const toTop = () => {\r\n if (scroller) scroller.scrollTop = 0;\r\n window.scrollTo(0, 0);\r\n document.querySelectorAll('.body-container').forEach((el) => {\r\n el.scrollTop = 0;\r\n });\r\n };\r\n\r\n toTop();\r\n requestAnimationFrame(toTop);\r\n [50, 150, 300, 600].forEach((delay) => window.setTimeout(toTop, delay));\r\n}\r\n\r\n// Standalone hook so every block transition on /s/completeprofile re-asserts\r\n// scroll position; kept out of the main block-ready handler so it can't end up\r\n// inside a per-block branch.\r\ndocument.addEventListener('block-ready', scrollToTopForCompleteProfile);\r\n\r\n//checkout specific styling added for passcode timer \r\nfunction applyCheckoutMobilePasscodeTimerStyle() {\r\n const mql = window.matchMedia('(max-width: 767px)');\r\n const sync = () => {\r\n let el = document.getElementById('tvs-checkout-mobile-passcode-timer-style');\r\n if (getPageType() === 'checkout' && mql.matches) {\r\n if (!el) {\r\n el = document.createElement('style');\r\n el.id = 'tvs-checkout-mobile-passcode-timer-style';\r\n el.textContent = '.passcode-timer{top:127%;white-space:nowrap;}';\r\n document.head.appendChild(el);\r\n }\r\n } else if (el) {\r\n el.remove();\r\n }\r\n };\r\n mql.addEventListener('change', sync);\r\n sync();\r\n}\r\n\r\napplyCheckoutMobilePasscodeTimerStyle();\r\n\r\nfunction checkoutStaticContent() {\r\n let socialLoginContainer = document.querySelector(\"sty-block-identifier sty-block-external-login-provider\");\r\n if (document.querySelector(\".sign-in-content--create-account-secured-login\")) {\r\n socialLoginContainer.insertAdjacentHTML('afterend', \"\");\r\n let noGuestCheckoutContent = \"
Guest Checkout isn't available for AUTO-DELIVERY subscription orders.
\";\r\n let createAccountContainer = document.querySelector(\".sign-in-content--create-account-secured-login sty-login sty-block-identifier [data-separator='registration']\");\r\n createAccountContainer.insertAdjacentHTML('beforebegin', noGuestCheckoutContent);\r\n }\r\n}\r\nfunction displayWarningForSocialLogin() {\r\n let externalLoginProvider = document.querySelector(\".ciam-complete-profile-container sty-block-external-login-provider\");\r\n if (externalLoginProvider) {\r\n // Prevent duplicate warning messages\r\n if (externalLoginProvider.parentElement?.querySelector('.social-login-warning-message')) {\r\n return;\r\n }\r\n\r\n const warningHTML = `\r\n \r\n `;\r\n\r\n externalLoginProvider.insertAdjacentHTML('beforebegin', warningHTML);\r\n }\r\n}\r\n/**\r\n * Clears excess remembered accounts, keeping only the most recent one.\r\n * Called from block-request event when multiple remembered accounts exist.\r\n */\r\nasync function setRememberedAccount(eventDetail) {\r\n const state = eventDetail?.state;\r\n if (state?.activeBlock !== 'rememberedAccount') return;\r\n\r\n const accounts = state.blocks?.rememberedAccount?.accounts;\r\n if (!accounts || accounts.length <= 1) return;\r\n\r\n console.debug('Multiple accounts detected, clearing extras:', accounts);\r\n\r\n // Delete all but the last (most recent) account\r\n for (let i = 0; i < accounts.length - 1; i++) {\r\n console.debug('Deleting remembered account at index', i);\r\n try {\r\n const response = await fetch(`https://account.vitaminshoppe.com/a/${shortAppIdForBranding}/login/api/v2/rememberedAccount`, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify({\r\n accountId: accounts[i]?.accountId,\r\n action: 'delete'\r\n })\r\n });\r\n const result = await response.json();\r\n console.debug('rememberedAccounts delete result:', result);\r\n } catch (err) {\r\n console.debug('Failed to delete remembered account:', err);\r\n }\r\n }\r\n}\r\n\r\nfunction removeRememberedAccountsUI(rememberedAccountLength) {\r\n let styBlockAccounts = document.querySelectorAll(\"sty-block-remembered-account ul\");\r\n console.debug(\"jdshfkjsh\", styBlockAccounts);\r\n styBlockAccounts.forEach((rememberAccounts) => {\r\n console.debug(\"tetggjhgjgjj\", rememberAccounts.querySelectorAll(\"li\"));\r\n rememberAccounts.querySelectorAll(\"li\").forEach((accountList, index) => {\r\n if (index < rememberedAccountLength - 1) {\r\n accountList.remove();\r\n }\r\n });\r\n });\r\n}\r\nasync function removeAllRememberedAccount() {\r\n console.debug(\"Remembered Account\", blockDetail);\r\n var accountId =\r\n blockDetail &&\r\n blockDetail.state &&\r\n blockDetail.state.account &&\r\n blockDetail.state.account.accountId;\r\n\r\n if (!accountId) {\r\n var remembered =\r\n blockDetail &&\r\n blockDetail.previousState &&\r\n blockDetail.previousState.blocks &&\r\n blockDetail.previousState.blocks.rememberedAccount;\r\n\r\n if (\r\n remembered &&\r\n remembered.accounts &&\r\n remembered.accounts.length &&\r\n remembered.accounts[0]\r\n ) {\r\n accountId = remembered.accounts[0].accountId;\r\n }\r\n }\r\n\r\n if (!accountId) {\r\n return { deleted: false, data: null };\r\n }\r\n\r\n var response = await fetch(\r\n `https://account.vitaminshoppe.com/a/${shortAppIdForBranding}/login/api/v2/rememberedAccount`,\r\n {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n body: JSON.stringify({\r\n accountId: accountId,\r\n action: \"delete\"\r\n })\r\n }\r\n );\r\n\r\n if (!response.ok) {\r\n throw new Error(\"Failed to delete remembered account: \" + response.status);\r\n }\r\n\r\n return {\r\n deleted: true,\r\n data: await response.json()\r\n };\r\n}\r\n\r\nfunction clearLocalAuthState() {\r\n // Cookies: reset authToken, drop name/email cookies (path=/ so they actually clear).\r\n document.cookie = 'authToken=initial; path=/; max-age=86400';\r\n for (const name of ['firstN', 'lastN', 'eMail']) {\r\n document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;\r\n }\r\n localStorage.removeItem('ctProfileData');\r\n}\r\n","myaccount":"// 1. Create the base element\r\n// const baseElement = document.createElement('base');\r\n\r\n// // 2. Set the base URL and default link targeting\r\n// baseElement.href = '/';\r\n// baseElement.target = '_blank'; // Optional: opens all relative links in a new tab\r\n\r\n// // 3. Prepend it to the head so it appears first\r\n// document.head.prepend(baseElement);\r\n\r\n// let preloadMicrofeHeaderJSLink = document.createElement(\"link\");\r\n// preloadMicrofeHeaderJSLink.href = \"https://qa5.vitaminshoppe.com/microfe/header/tvs-header.js\";\r\n// preloadMicrofeHeaderJSLink.as = \"script\";\r\n// preloadMicrofeHeaderJSLink.rel = \"preload\";\r\n\r\n// let preloadMicrofeHeaderCSSLink = document.createElement(\"link\");\r\n// preloadMicrofeHeaderCSSLink.href = \"https://qa5.vitaminshoppe.com/microfe/header/tvs-header.css\";\r\n// preloadMicrofeHeaderCSSLink.as = \"style\";\r\n// preloadMicrofeHeaderCSSLink.rel = \"preload\";\r\n\r\n// document.head.appendChild(preloadMicrofeHeaderJSLink);\r\n// document.head.appendChild(preloadMicrofeHeaderCSSLink);\r\n\r\n// let preloadMicrofeFooterJSLink = document.createElement(\"link\");\r\n// preloadMicrofeFooterJSLink.href = \"https://qa5.vitaminshoppe.com/microfe/footer/tvs-footer.js\";\r\n// preloadMicrofeFooterJSLink.as = \"script\";\r\n// preloadMicrofeFooterJSLink.rel = \"preload\";\r\n\r\n// let preloadMicrofeFooterCSSLink = document.createElement(\"link\");\r\n// preloadMicrofeFooterCSSLink.href = \"https://qa5.vitaminshoppe.com/microfe/footer/tvs-footer.css\";\r\n// preloadMicrofeFooterCSSLink.as = \"style\";\r\n// preloadMicrofeFooterCSSLink.rel = \"preload\";\r\n\r\n// document.head.appendChild(preloadMicrofeFooterJSLink);\r\n// document.head.appendChild(preloadMicrofeFooterCSSLink);\r\n\r\n// let preloadMicrofeCMSJSLink = document.createElement(\"link\");\r\n// preloadMicrofeCMSJSLink.href = \"https://qa5.vitaminshoppe.com/microfe/cmscomponent/tvs-cms-component.js\";\r\n// preloadMicrofeCMSJSLink.as = \"script\";\r\n// preloadMicrofeCMSJSLink.rel = \"preload\";\r\n\r\n// let preloadMicrofeCMSCSSLink = document.createElement(\"link\");\r\n// preloadMicrofeCMSCSSLink.href = \"https://qa5.vitaminshoppe.com/microfe/cmscomponent/tvs-cms-component.css\";\r\n// preloadMicrofeCMSCSSLink.as = \"style\";\r\n// preloadMicrofeCMSCSSLink.rel = \"preload\";\r\n\r\n// document.head.appendChild(preloadMicrofeCMSJSLink);\r\n// document.head.appendChild(preloadMicrofeCMSCSSLink);\r\n\r\n// let preloadMicrofeHeaderPrequesiteJSLink = document.createElement(\"link\");\r\n// preloadMicrofeHeaderPrequesiteJSLink.href = \"https://qa5.vitaminshoppe.com/microfe/header/tvs-header-prerequisite.js\";\r\n// preloadMicrofeHeaderPrequesiteJSLink.as = \"script\";\r\n// preloadMicrofeHeaderPrequesiteJSLink.rel = \"preload\";\r\n\r\n// document.head.appendChild(preloadMicrofeHeaderPrequesiteJSLink);\r\n\r\n// let insertMicrofeHeaderJSLink = document.createElement(\"script\");\r\n// insertMicrofeHeaderJSLink.src = \"https://qa5.vitaminshoppe.com/microfe/header/tvs-header.js\";\r\n\r\n// let insertMicrofeHeaderCSSLink = document.createElement(\"link\");\r\n// insertMicrofeHeaderCSSLink.href = \"https://qa5.vitaminshoppe.com/microfe/header/tvs-header.css\";\r\n// insertMicrofeHeaderCSSLink.as = \"style\";\r\n// insertMicrofeHeaderCSSLink.rel = \"stylesheet\";\r\n\r\n// document.head.appendChild(insertMicrofeHeaderJSLink);\r\n// document.head.appendChild(insertMicrofeHeaderCSSLink);\r\n\r\n// let insertMicrofeHeaderPrerequisiteJSLink = document.createElement(\"script\");\r\n// insertMicrofeHeaderPrerequisiteJSLink.src = \"https://qa5.vitaminshoppe.com/microfe/header/tvs-header-prerequisite.js\";\r\n// document.head.appendChild(insertMicrofeHeaderPrerequisiteJSLink);\r\n\r\n// let insertMicrofeFooterJSLink = document.createElement(\"script\");\r\n// insertMicrofeFooterJSLink.src = \"https://qa5.vitaminshoppe.com/microfe/footer/tvs-footer.js\";\r\n\r\n// let insertMicrofeFooterCSSLink = document.createElement(\"link\");\r\n// insertMicrofeFooterCSSLink.href = \"https://qa5.vitaminshoppe.com/microfe/footer/tvs-footer.css\";\r\n// insertMicrofeFooterCSSLink.as = \"style\";\r\n// insertMicrofeFooterCSSLink.rel = \"stylesheet\";\r\n\r\n// document.head.appendChild(insertMicrofeFooterJSLink);\r\n// document.head.appendChild(insertMicrofeFooterCSSLink);\r\n\r\n// let insertMicrofeCMSJSLink = document.createElement(\"script\");\r\n// insertMicrofeCMSJSLink.src = \"https://qa5.vitaminshoppe.com/microfe/cmscomponent/tvs-cms-component.js\";\r\n\r\n// let insertMicrofeCMSCSSLink = document.createElement(\"link\");\r\n// insertMicrofeCMSCSSLink.href = \"https://qa5.vitaminshoppe.com/microfe/cmscomponent/tvs-cms-component.css\";\r\n// insertMicrofeCMSCSSLink.as = \"style\";\r\n// insertMicrofeCMSCSSLink.rel = \"stylesheet\";\r\n\r\n// document.head.appendChild(insertMicrofeCMSJSLink);\r\n// document.head.appendChild(insertMicrofeCMSCSSLink);\r\n/* =====================================================================\r\n * Strivacity My Account portal — Additional Script\r\n *\r\n * Land on the \"Security settings\" page instead of the default\r\n * \"Personal information\" page on first load after login. Subsequent\r\n * in-app navigation is unaffected (the user can move freely afterward).\r\n *\r\n * The My Account portal exposes nav items as \">.\r\n * We click the Security item once the sidenav renders. The sidenav can appear a\r\n * beat after load, so a short-lived MutationObserver retries until it's there.\r\n * ===================================================================== */\r\n\r\nconsole.debug(\"Referrer\", document.referrer);\r\n(function () {\r\n let landed = false;\r\n let observer = null;\r\n\r\n // The Security settings menu item. Prefer the page id; fall back to the label.\r\n function findSecurityMenuItem() {\r\n const byId = document.querySelector('[data-menu-item=\"security\"]');\r\n if (byId) {\r\n return byId;\r\n }\r\n return Array.from(document.querySelectorAll('[data-menu-item]')).find((el) => /security/i.test(el.textContent || ''));\r\n }\r\n\r\n // True if the portal is already showing the Security page (avoid a needless click).\r\n function alreadyOnSecurity() {\r\n const app = document.getElementById('app');\r\n return !!app && app.classList.contains('security');\r\n }\r\n\r\n function landOnSecurity() {\r\n if (landed) {\r\n return;\r\n }\r\n if (alreadyOnSecurity()) {\r\n landed = true;\r\n stop();\r\n return;\r\n }\r\n const item = findSecurityMenuItem();\r\n console.debug(\"Item for security\", item);\r\n if (item) {\r\n landed = true;\r\n // item.click();\r\n\r\n // WC1-3546: FE | My Account Profile | Strivacity | On clicking browser back, control redirects to Strivacity Personal Information page instead of TVS My Account Profile page\r\n //window.location.href = \"/myaccount/#/security\"\r\n window.location.replace(\"/myaccount/#/security\");\r\n\r\n stop();\r\n }\r\n }\r\n\r\n function stop() {\r\n if (observer) {\r\n observer.disconnect();\r\n observer = null;\r\n }\r\n }\r\n\r\n // Watch the DOM until the sidenav (and its Security item) renders.\r\n observer = new MutationObserver(landOnSecurity);\r\n observer.observe(document.documentElement, { childList: true, subtree: true });\r\n landOnSecurity();\r\n\r\n // Safety: stop observing after a few seconds even if nothing matched.\r\n setTimeout(stop, 8000);\r\n})();\r\n\r\nif (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', init);\r\n} else {\r\n init();\r\n}\r\n\r\nfunction init() {\r\n console.debug('Initialize here');\r\n let baseHref = document.querySelector(\"base\");\r\n console.debug(\"Base href\", baseHref);\r\n // baseHref.href = \"https://qa5.vitaminshoppe.com\";\r\n document.addEventListener(\"click\", (event) => {\r\n if (event.target.closest(\".ciam-header-content a.back-arrow\")) {\r\n let baseTVSURL = \"https://www.vitaminshoppe.com/\";\r\n if (document.referrer) {\r\n let referrer = document.referrer\r\n switch (referrer) {\r\n case \"https://qa1.vitaminshoppe.com/\":\r\n baseTVSURL = \"https://qa1.vitaminshoppe.com/\";\r\n break;\r\n case \"https://qa3.vitaminshoppe.com/\":\r\n baseTVSURL = \"https://qa3.vitaminshoppe.com/\";\r\n break;\r\n case \"https://qa4.vitaminshoppe.com/\":\r\n baseTVSURL = \"https://qa4.vitaminshoppe.com/\";\r\n break;\r\n case \"https://qa5.vitaminshoppe.com/\":\r\n baseTVSURL = \"https://qa5.vitaminshoppe.com/\";\r\n break;\r\n case \"https://uat.vitaminshoppe.com/\":\r\n baseTVSURL = \"https://uat.vitaminshoppe.com/\";\r\n break;\r\n default:\r\n baseTVSURL = \"https://www.vitaminshoppe.com/\";\r\n break;\r\n }\r\n\r\n }\r\n window.location.href = `${baseTVSURL}s/myAccount/myAccount`;\r\n }\r\n });\r\n}\r\n\r\ndocument.addEventListener('form-ready', (event) => {\r\n console.debug(\"Element to Update Confirm Password Label on SSP\", document.querySelector(\"sty-dialog[data-dialog='changePassword'] sty-input-password[data-field='newPasswordConfirmation'] label\"));\r\n if (document.querySelector(\"sty-dialog[data-dialog='changePassword'] sty-input-password[data-field='newPasswordConfirmation'] label\")) {\r\n document.querySelector(\"sty-dialog[data-dialog='changePassword'] sty-input-password[data-field='newPasswordConfirmation'] label\").innerText = \"Confirm New Password\";\r\n }\r\n\r\n})"},"supportText":null,"loginUrl":null,"websiteUrl":null},"webAnalytics":{}}