docbrown/app/javascript/packs/confirmationEmail.js
Ridhwana 4337ce9d91
Creator Onboarding Confirmation Page (#14259)
* feat: add a first version of the confirmation page - still a wip

* feat: style the modal properly

* chore: update the text

* chore: update from master

* fix: add the correct text and layout for the feature flagged confirmation email

* feat: use the view_class functionality to assign some css styling to the confirmations class

* feat: add the Forem background

* feat: add some styling to "Click Here"

* feat: polish styles

* feat: the padding will be used for mobile

* chore: some blank lines

* feat: add some more styles

* feat; use media queries

* feat: add a callback to the modal

* feat: handle all javascript on the confirmation form

* feat: change back to a button

* feat; change from button to span for accessibility

* feat: add the callback in an if condition

* feat: add a main-content

* feat: update the confirmation page html

* feat: add Cypress test

* minimal seeded flows

* fix: rename the file

* feat: update confirm email spec

* fix: remove mistake

* refactor: rename the files appropriately

* feat: change some text

* fix: typo

* fix: update as per suggestions
2021-08-03 14:21:56 +02:00

35 lines
1 KiB
JavaScript

function showConfirmationEmailModal() {
window.Forem.showModal({
title: "Didn't get the email?",
contentSelector: '#confirm-email-modal',
overlay: true,
onOpen: attachHandlers,
});
}
function attachHandlers() {
const dismissModalButtons =
document.getElementsByClassName('js-dismiss-button');
// With the nature of how the modals are implemented,
// it duplicates the content of #confirm-email-modal and
// adds it to the window within #window-modal. This means
// that there are two of the same elements in the DOM,
// hence we use the last one that is added to the DOM.
if (dismissModalButtons.length > 1) {
dismissModalButtons[1].addEventListener(
'click',
hideConfirmationEmailModal,
);
}
}
function hideConfirmationEmailModal(event) {
event.preventDefault();
window.Forem.closeModal();
}
const confirmationButton = document.getElementsByClassName(
'js-confirmation-button',
)[0];
confirmationButton.addEventListener('click', showConfirmationEmailModal);