{"id":609,"date":"2023-05-26T17:31:26","date_gmt":"2023-05-26T15:31:26","guid":{"rendered":"https:\/\/stoma-alert.eu\/register-for-the-app\/"},"modified":"2024-10-25T17:59:52","modified_gmt":"2024-10-25T15:59:52","slug":"register-for-the-app","status":"publish","type":"page","link":"https:\/\/stoma-alert.eu\/en\/register-for-the-app\/","title":{"rendered":"Register for the app"},"content":{"rendered":"<h1 class=\"text-dark-primary text-3xl lg:text-5xl font-bold mb-4 2xl:mb-11\">\n    Register for the app<\/h1>\n\n<p class=\"mb-4\">Create an account and get personal ostomy care on your phone 24\/7.<\/p>\n\n<p><b>Fill in all your information, then click the <span class=\"text-accent\">SEND<\/span> button at the bottom of the page.<\/b><\/p>\n\n<form class=\"mt-4\" id=\"appRegisterForm\" novalidate>\n    <div class=\"wrapper flex flex-col w-full mb-8\">\n        <label class=\"mb-2 font-bold relative\" for=\"appRegisterSurname\">Surname <span class=\"vc__error_text whitespace-nowrap hidden absolute ml-2 px-3 py-1 font-normal text-[11px] bg-[#FE5F55] text-white rounded\"><\/span><\/label>\n        <input data-vc-input data-vc-validators=\"required\" class=\"disabled:opacity-20 w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n            id=\"appRegisterSurname\" name=\"surname\" autocomplete=\"surname\" type=\"text\" novalidate required>\n    <\/div>\n    <div class=\"wrapper flex flex-col w-full mb-8\">\n        <label class=\"mb-2 font-bold relative\" for=\"appRegisterName\">First name <span class=\"vc__error_text whitespace-nowrap hidden absolute ml-2 px-3 py-1 font-normal text-[11px] bg-[#FE5F55] text-white rounded\"><\/span><\/label>\n        <input data-vc-input data-vc-validators=\"required\" class=\"disabled:opacity-20 w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n            id=\"appRegisterName\" name=\"name\" autocomplete=\"name\" type=\"text\" novalidate required>\n    <\/div>\n    <div class=\"wrapper flex flex-col w-full mb-8\">\n        <div class=\"vc__fake_label mb-2\">\n            <span class=\"mb-2 font-bold relative\">Gender <span class=\"vc__error_text whitespace-nowrap hidden absolute ml-2 px-3 py-1 font-normal text-[11px] bg-[#FE5F55] text-white rounded\"><\/span><\/span>\n        <\/div>\n        <div class=\"flex flex-row gap-4 flex-wrap content-stretch items-stretch justify-start\">\n            <div class=\"vc__radio_container\">\n                <input class=\"hidden w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n                    id=\"appGenderMan\" name=\"gender\" type=\"radio\" value=\"M\" novalidate checked required>\n                <label class=\"mb-2 flex flex-nowrap items-center\" for=\"appGenderMan\">\n                    <div class=\"vc__radio\">\n                        <div class=\"vc__radio_dot\"><\/div>\n                    <\/div>\n                    Male                <\/label>\n            <\/div>\n            <div class=\"vc__radio_container\">\n                <input class=\"hidden w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n                    id=\"appGenderWoman\" name=\"gender\" type=\"radio\" value=\"K\" novalidate required>\n                <label class=\"mb-2 flex flex-nowrap items-center\" for=\"appGenderWoman\">\n                    <div class=\"vc__radio\">\n                        <div class=\"vc__radio_dot\"><\/div>\n                    <\/div>\n                    Female                <\/label>\n            <\/div>\n            <div class=\"vc__radio_container\">\n                <input class=\"hidden w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n                    id=\"appGenderDifferent\" name=\"gender\" type=\"radio\" value=\"I\" novalidate required>\n                <label class=\"mb-2 flex flex-nowrap items-center\" for=\"appGenderDifferent\">\n                    <div class=\"vc__radio\">\n                        <div class=\"vc__radio_dot\"><\/div>\n                    <\/div>\n                    Other                <\/label>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"wrapper flex flex-col w-1\/2 mb-8\">\n        <label class=\"mb-2 font-bold relative\" for=\"appRegisterBirthDate\">Date of birth <span class=\"vc__error_text whitespace-nowrap hidden absolute ml-2 px-3 py-1 font-normal text-[11px] bg-[#FE5F55] text-white rounded\"><\/span><\/label>\n        <input data-vc-input data-vc-validators=\"required\" class=\"disabled:opacity-20 w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n            id=\"appRegisterBirthDate\" name=\"birthDate\" autocomplete=\"birth\" type=\"date\" novalidate required>\n    <\/div>\n    <div class=\"wrapper flex flex-col mb-8\">\n        <label class=\"mb-2 font-bold relative\" for=\"appRegisterEmail\">E-mail <span class=\"vc__error_text whitespace-nowrap hidden absolute ml-2 px-3 py-1 font-normal text-[11px] bg-[#FE5F55] text-white rounded\"><\/span><\/label>\n        <input data-vc-input data-vc-validators=\"required,email\" class=\"disabled:opacity-20 w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n            id=\"appRegisterEmail\" name=\"email\" autocomplete=\"email\" type=\"text\" novalidate required >\n        <span class=\"text-sm mt-2\"><b class=\"text-uppercase text-accent\">&nbsp;<\/span>\n    <\/div>\n    <div class=\"wrapper flex flex-col w-1\/2 mb-8\">\n        <label class=\"mb-2 font-bold relative\" for=\"appRegisterPhone\">Phone number <span class=\"vc__error_text whitespace-nowrap hidden absolute ml-2 px-3 py-1 font-normal text-[11px] bg-[#FE5F55] text-white rounded\"><\/span><\/label>\n        <input data-vc-input data-vc-validators=\"required,phone\" class=\"disabled:opacity-20 w-full leading-[45px] px-4 rounded-lg border-dark border focus-visible:outline-[var(--accent)]\"\n            id=\"appRegisterPhone\" name=\"phone\" autocomplete=\"phone\" type=\"text\" novalidate required>\n    <\/div>\n    <hr>\n    <p class=\"mt-3 font-bold\">I have read and agree<\/p>\n    <div class=\"vc__fake_checkbox my-2\">\n        <label class=\"flex flex-row gap-2 items-center\" for=\"termsOfService\">\n            <input data-vc-input data-vc-validators=\"required\" class=\"hidden\" type=\"checkbox\" name=\"terms-of-service\" id=\"termsOfService\" novalidate required>\n            <div class=\"vc__fake_checkbox--outer cursor-pointer min-w-[20px] min-h-[20px] w-[20px] h-[20px] border border-1 border-accent rounded flex items-center justify-center\">\n                <div class=\"vc__fake_checkbox--inner w-[12px] h-[12px] bg-accent opacity-0\"><\/div>\n            <\/div>\n            <span>Terms and conditions <a class=\"font-bold underline\" href=\"\" target=\"_blank\">(Read)<\/a><\/span>\n        <\/label>\n    <\/div>\n    <div class=\"vc__fake_checkbox mb-2\">\n        <label class=\"flex flex-row gap-2 items-center\" for=\"privacyPolicy\">\n            <input data-vc-input data-vc-validators=\"required\" class=\"hidden\" type=\"checkbox\" name=\"privacy-policy\" id=\"privacyPolicy\" novalidate required>\n            <div class=\"vc__fake_checkbox--outer cursor-pointer min-w-[20px] min-h-[20px] w-[20px] h-[20px] border border-1 border-accent rounded flex items-center justify-center\">\n                <div class=\"vc__fake_checkbox--inner w-[12px] h-[12px] bg-accent opacity-0\"><\/div>\n            <\/div>\n            <span>Privacy Policy <a class=\"font-bold underline\" href=\"\" target=\"_blank\">(Read)<\/a><\/span>\n        <\/label>\n    <\/div>\n\n    \n    <div class=\"wrapper mt-4\">\n        <button id=\"submitBtn\" class=\"block uppercase text-center bg-light border rounded-full font-[900] text-[20px] text-accent border-accent w-full leading-[46px] hover:bg-[var(--accent)] hover:text-[var(--light)] ease-in-out duration-100\" type=\"submit\">\n            <span id=\"submitBtnText\" class=\"inline\">Send<\/span>\n            <div id=\"submitBtnLoading\" class=\"hidden pulse-container h-[46px]\">\n                <div class=\"pulse-bubble pulse-bubble-1\"><\/div>\n                <div class=\"pulse-bubble pulse-bubble-2\"><\/div>\n                <div class=\"pulse-bubble pulse-bubble-3\"><\/div>\n            <\/div>\n        <\/button>\n    <\/div>\n\n    \n    <div id=\"registerInfoBox\" class=\"p-8 hidden rounded-lg border border-accent mt-8\" style=\"background: rgba(108, 190, 153, .1);\">\n        <div class=\"rounded-full inline-block aspect-ratio-1 bg-accent text-light leading-[50px] w-[50px] text-center text-3xl mb-4\"><span>i<\/span><\/div>\n        <div>\n            <p class=\"mb-6\">Thank you for submitting the form. Your information will be verified by our staff. We will call you or send you an e-mail.<\/p>\n            <p class=\"text-accent\"><b>After positive verification, you will get access to the STOMA ALERT application and instructions on how to proceed.<\/b><\/p>\n        <\/div>\n    <\/div>\n\n    \n    \n    <div id=\"appRegisterError\" class=\"p-8 hidden rounded-lg border border-[var(--wp--preset--color--vivid-red)] mt-8\" style=\"background: rgba(108, 190, 153, .1);\">\n        <div class=\"rounded-full inline-block aspect-ratio-1 bg-[var(--wp--preset--color--vivid-red)] text-light leading-[50px] w-[50px] text-center text-3xl mb-4\"><span>i<\/span><\/div>\n        <div>\n            <p id=\"appRegisterErrorText\" class=\"mb-6\">An unexpected error occurred. Please contact the site administrator or try again later.<\/p>\n            <p class=\"text-[var(--wp--preset--color--vivid-red)]\"><b>ERROR CODE: <span id=\"appRegisterErrorCode\">500<\/span><\/b><\/p>\n        <\/div>\n    <\/div>\n<\/form>\n\n\n<script>\n    \/\/ wp-json\/stomia\/v1\/shop\/register\n\n    \/\/ username,name,gender,birthDate,phone,email\n    const url = '\/wp-json\/stomia\/v1\/register';\n    const registerForm = document.getElementById('appRegisterForm');\n    const infoBox = document.getElementById('registerInfoBox');\n    const errContainer = document.getElementById('appRegisterError');\n    const errText = document.getElementById('appRegisterErrorText');\n    const errCode = document.getElementById('appRegisterErrorCode');\n    const inputs = document.querySelectorAll('[data-vc-input]');\n\n    const submitBtn = document.getElementById('submitBtn');\n    const submitBtnText = submitBtn.querySelectorAll('#submitBtnText')[0];\n    const submitBtnLoader = submitBtn.querySelectorAll('#submitBtnLoading')[0];\n\n    if (registerForm)\n      registerForm.addEventListener('submit', register);\n\n    async function postData(_data) {\n      const response = await fetch(url, {\n        method: \"POST\", \/\/ *GET, POST, PUT, DELETE, etc.\n        mode: \"cors\", \/\/ no-cors, *cors, same-origin\n        cache: \"no-cache\", \/\/ *default, no-cache, reload, force-cache, only-if-cached\n        credentials: \"same-origin\", \/\/ include, *same-origin, omit\n        headers: {\n          \"Content-Type\": \"application\/json\",\n          \/\/ 'Content-Type': 'application\/x-www-form-urlencoded',\n        },\n        redirect: \"follow\", \/\/ manual, *follow, error\n        referrerPolicy: \"no-referrer\", \/\/ no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url\n        body: JSON.stringify(_data), \/\/ body data type must match \"Content-Type\" header\n      });\n      return jsonData = await response.json();\n    }\n\n    [...inputs].forEach(input => {\n        if (input.type === 'radio' || input.type === 'checkbox') {\n            input.addEventListener('change', validateInput.bind(this, input));\n        } else {\n            input.addEventListener('blur', validateInput.bind(this, input));\n        }\n    });\n\n    function register(_event) {\n      _event.preventDefault();\n      _event.stopPropagation();\n      errContainer.classList.add('hidden');\n      const formData = new FormData(_event.target);\n      const formProps = Object.fromEntries(formData);\n\n      if (!registerForm.checkValidity()) {\n        validateInputs(inputs);\n        return;\n      }\n\n      enableLoading();\n\n      postData(formProps)\n        .then(res => {\n            if (res.code && res.code < 400) {\n                clearValidatorErrors(inputs);\n                registerForm.reset();\n                disableInputs();\n                infoBox.classList.remove('hidden');\n                disableLoading();\n                registerComplete();\n\n                jQuery('html, body').animate({\n                    scrollTop: submitBtn.offsetTop - 100\n                }, 500);\n            } else {\n                throw res;\n            }\n        })\n        .catch(err => {\n            console.error(err);\n            errContainer.classList.remove('hidden');\n            disableLoading();\n            \/\/ errText.innerHTML = err.message.error.message\n            \/\/ errCode.innerHTML = err.data.status\n        }\n        );\n    }\n\n    function validateInputs(_inputs) {\n        const inputWithErrors = [];\n\n        [..._inputs].forEach(input => {\n            if (input.type === 'checkbox') {\n                if (!input.checked) {\n                    input.parentNode.classList.add('vc__fake_checkbox_error');\n                    inputWithErrors.push(input.parentNode.offsetTop);\n                }\n            } else {\n                const errors = validatorFn(input);\n                if (errors.length) {\n                    const errorText = input.parentNode.querySelectorAll('.vc__error_text')[0];\n                    input.parentNode.classList.add('vc__error');\n                    errorText.classList.remove('hidden');\n                    errorText.textContent = errors[0];\n                    inputWithErrors.push(input.parentNode.offsetTop);\n                }\n            }\n        });\n\n        if (inputWithErrors.length)\n            jQuery('html, body').animate({\n                scrollTop: inputWithErrors[0]\n            }, 500);\n    }\n\n    function validateInput(_input) {\n        const parentNode = _input.parentNode;\n        const errorText = parentNode.querySelectorAll('.vc__error_text')[0];\n\n        if (_input.type === 'checkbox') {\n            if (!_input.checked) {\n                _input.parentNode.classList.add('vc__fake_checkbox_error');\n            } else {\n                _input.parentNode.classList.remove('vc__fake_checkbox_error');\n            }\n        } else {\n            const errors = validatorFn(_input);\n            if (errors.length) {\n                parentNode.classList.remove('vc__success');\n                parentNode.classList.add('vc__error');\n                errorText.classList.remove('hidden');\n                errorText.textContent = errors[0];\n            } else {\n                parentNode.classList.remove('vc__error');\n                parentNode.classList.add('vc__success');\n                errorText.classList.add('hidden');\n            }\n        }\n    }\n\n    function validatorFn(_input) {\n        const errors = [];\n        const validators = _input.dataset.vcValidators.split(',')\n\n        validators.forEach(validator => {\n            if (validator === 'required' && !_input.value.length)\n                errors.push('This field is required');\n\n            if (validator === 'email' && (!_input.value || !new RegExp(\/^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$\/).test(_input.value)))\n                errors.push('This is not a valid email address.');\n\n            if (validator === 'phone' && (!_input.value || !new RegExp(\/(?<!\\w)(\\(?(\\+|00)?48\\)?)?[ -]?\\d{3}[ -]?\\d{3}[ -]?\\d{3}(?!\\w)\/).test(_input.value)))\n                errors.push('This is not a valid phone number.');\n        });\n\n        return errors;\n    }\n\n    function clearValidatorErrors(_inputs) {\n        [..._inputs].forEach(input => {\n            \/\/ const parent = input.parentNode;\n            if (input.type === 'checkbox') {\n                input.parentNode.classList.remove('vc__fake_checkbox_error');\n            } else {\n                const errorText = input.parentNode.querySelectorAll('.vc__error_text')[0];\n                input.parentNode.classList.remove('vc__error');\n                input.parentNode.classList.remove('vc__success');\n                errorText.classList.add('hidden');\n            }\n        });\n    }\n\n    function disableInputs() {\n        [...document.querySelectorAll('input')].forEach(input => {\n            input.disabled = true;\n        });\n    }\n\n    function enableInputs() {\n        [...document.querySelectorAll('input')].forEach(input => {\n            input.disabled = false;\n        });\n    }\n\n    function enableLoading() {\n        submitBtn.classList.add('pointer-events-none');\n        submitBtnText.classList.add('hidden');\n        submitBtnLoader.classList.remove('hidden');\n        submitBtnLoader.classList.add('flex');\n    }\n\n    function disableLoading() {\n        submitBtn.classList.remove('pointer-events-none');\n        submitBtnText.classList.remove('hidden');\n        submitBtnLoader.classList.add('hidden');\n        submitBtnLoader.classList.remove('flex');\n    }\n\n    function registerComplete() {\n        submitBtn.classList.add('pointer-events-none');\n        submitBtn.classList.add('opacity-50');\n        submitBtnText.innerText = 'Registration completed'\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"1-5-template.blade.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-609","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/pages\/609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/comments?post=609"}],"version-history":[{"count":1,"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/pages\/609\/revisions"}],"predecessor-version":[{"id":610,"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/pages\/609\/revisions\/610"}],"wp:attachment":[{"href":"https:\/\/stoma-alert.eu\/en\/wp-json\/wp\/v2\/media?parent=609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}