diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index cf23db8c4..a95217cd0 100644 --- a/src/js/constants/selectors-map.ts +++ b/src/js/constants/selectors-map.ts @@ -100,6 +100,11 @@ export const mobileMenu = { specificChild: (param: string | undefined) => `.menu[data-id="${param}"]`, }; +export const guestPasswordToggle = { + checkbox: '.js-password-form__check', + passwordWrapper: '.js-password-form__input-wrapper', +}; + export const visiblePassword = { visiblePassword: '.js-visible-password', }; @@ -180,6 +185,7 @@ const selectorsMap = { languageSelector, searchBar, mobileMenu, + guestPasswordToggle, visiblePassword, desktopMenu, formValidation, diff --git a/src/js/guest-password-toggle.ts b/src/js/guest-password-toggle.ts new file mode 100644 index 000000000..75c8598cc --- /dev/null +++ b/src/js/guest-password-toggle.ts @@ -0,0 +1,36 @@ +/** + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +const initGuestPasswordToggle = () => { + const {Theme} = window; + const {guestPasswordToggle: GuestPasswordToggleMap} = Theme.selectors; + const guestCheckbox = document.querySelector(GuestPasswordToggleMap.checkbox); + const guestPasswordWrapper = document.querySelector(GuestPasswordToggleMap.passwordWrapper); + + if (guestCheckbox && guestPasswordWrapper) { + guestCheckbox.addEventListener('change', () => { + const passwordInput = guestPasswordWrapper.querySelector('input[type="password"]'); + + if (guestCheckbox.checked) { + guestPasswordWrapper.classList.remove('d-none'); + } else { + guestPasswordWrapper.classList.add('d-none'); + + if (passwordInput) { + const feedbackContainer = document.querySelector(Theme.selectors.passwordPolicy.container); + + passwordInput.value = ''; + passwordInput.classList.remove('border-success', 'border-danger', 'border'); + + if (feedbackContainer) { + feedbackContainer.classList.add('d-none'); + } + } + } + }); + } +}; + +export default initGuestPasswordToggle; diff --git a/src/js/theme.ts b/src/js/theme.ts index b7271d336..9d3f428b7 100644 --- a/src/js/theme.ts +++ b/src/js/theme.ts @@ -15,6 +15,7 @@ import initMobileMenu from './mobile-menu'; import initSearchbar from './modules/ps_searchbar'; import initLanguageSelector from './modules/ps_languageselector'; import initCurrencySelector from './modules/ps_currencyselector'; +import initGuestPasswordToggle from './guest-password-toggle'; import initVisiblePassword from './visible-password'; import initErrorHandler from './errors'; import useToast from './components/useToast'; @@ -43,6 +44,7 @@ $(() => { initLanguageSelector(); initCurrencySelector(); initMobileMenu(); + initGuestPasswordToggle(); initVisiblePassword(); initDesktopMenu(); initFormValidation(); @@ -79,6 +81,7 @@ export default { initLanguageSelector, initCurrencySelector, initMobileMenu, + initGuestPasswordToggle, initVisiblePassword, initDesktopMenu, }; diff --git a/templates/checkout/_partials/customer-form.tpl b/templates/checkout/_partials/customer-form.tpl index d2fd135ec..0c9a82176 100644 --- a/templates/checkout/_partials/customer-form.tpl +++ b/templates/checkout/_partials/customer-form.tpl @@ -6,12 +6,19 @@ {block "form_field"} {if $field.name === 'password' and $guest_allowed} -

- {l s='Create an account' d='Shop.Theme.Checkout'} {l s='(optional)' d='Shop.Theme.Checkout'} -
- {l s='And save time on your next order!' d='Shop.Theme.Checkout'} -

- {$smarty.block.parent} +
+
+ + +
+
+ {$smarty.block.parent} +
+
{else} {$smarty.block.parent} {/if} diff --git a/templates/checkout/_partials/steps/personal-information.tpl b/templates/checkout/_partials/steps/personal-information.tpl index 8f1140f4b..08fdf15c9 100644 --- a/templates/checkout/_partials/steps/personal-information.tpl +++ b/templates/checkout/_partials/steps/personal-information.tpl @@ -63,7 +63,11 @@ aria-controls="checkout-guest-form" aria-selected="{if !$show_login_form}true{else}false{/if}" > - {l s='New customer' d='Shop.Theme.Checkout'} + {if isset($guest_allowed) && $guest_allowed} + {l s='Order as a guest' d='Shop.Theme.Checkout'} + {else} + {l s='New customer' d='Shop.Theme.Checkout'} + {/if}