{"id":1048,"date":"2023-10-25T03:27:43","date_gmt":"2023-10-25T03:27:43","guid":{"rendered":"https:\/\/vrai-dev.johnabbott.qc.ca\/?page_id=1048"},"modified":"2024-04-09T13:54:00","modified_gmt":"2024-04-09T13:54:00","slug":"teacher-registration","status":"publish","type":"page","link":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/teacher-registration\/","title":{"rendered":"Registrazione degli insegnanti"},"content":{"rendered":"<style>\n    \/* -------------  *\/\n    \/*Teacher Sign Up Form\n * -------------  *\/\n\n\n    .signup-form {\n        border-radius: 12px;\n        padding: 1.8em;\n        margin: 0 auto;\n        width: 50%;\n        border: 1px solid black;\n        \/* \tbox-shadow: 0px 13px 18px -3px rgba(0,0,0,0.1);; *\/\n        transform: scale(0.9)\n    }\n\n    .input-control {\n        width: 100%;\n        margin-bottom: 6px;\n    }\n\n    .signup-form input[type=\"text\"],\n    .signup-form input[type=\"password\"] {\n        color: black;\n        background-color: #f0f0f0;\n        width: 100%;\n        border-radius: 8px;\n        padding: 11px;\n        border: 2px solid #f0f0f0;\n    }\n\n    .signup-form input[type=\"submit\"] {\n        font-weight: bold;\n        width: 100%;\n        font-size: 18px;\n        border-radius: 8px;\n        background-color: #4472C4;\n        color: white;\n    }\n\n\n    .input-control.error input {\n        border-color: #ff3860;\n    }\n\n    .input-control.error {\n        margin-bottom: 15px;\n    }\n\n    .anchor-2 {\n        text-decoration: underline;\n        color: #0000EE;\n        font-weight: bold;\n    }\n\n    .input-control input:focus {\n        outline: 1px solid #09C372;\n    }\n\n    .input-control.success input {\n        border-color: #09C372;\n    }\n\n    .input-control .error {\n        color: #ff3860;\n        font-size: 12px;\n        height: 13px;\n        margin-top: 5px;\n    }\n\n    .register-success-message {\n        display: none;\n        margin: 0 auto;\n        border-color: green;\n        padding: 10px;\n        background-color: #09C372;\n        border-radius: 8px;\n        margin-top: 20px;\n        color: black;\n    }\n\n    .register-error-message {\n        display: none;\n        margin: 0 auto;\n        border-color: red;\n        padding: 10px;\n        background-color: #09C372;\n        border-radius: 8px;\n        margin-top: 20px;\n        background-color: #ff3860;\n        color: black;\n    }\n\n    @media only screen and (max-width: 600px) and (min-width: 375px) {\n        .signup-form {\n            width: 100%;\n        }\n\n\n    }\n<\/style>\n\n<\/head>\n\n    <form class=\"signup-form\" id=\"teacher-signup-form\" action=\"\">\n        <h2 class=\"login-title\">Registrazione degli insegnanti<\/h2>\n\n        <div class=\"input-control\">\n            <input type=\"text\" id=\"firstName\" name=\"firstName\" placeholder=\"Nome di battesimo\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <input type=\"text\" id=\"lastName\" name=\"lastName\" placeholder=\"Cognome\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <input type=\"text\" id=\"preferedName\" name=\"preferedName\" placeholder=\"Nome preferito\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <input id=\"email\" type=\"text\" name=\"email\" class=\"email\" placeholder=\"Indirizzo e-mail della scuola\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n        <div class=\"input-control\">\n            <input id=\"confirmPassword\" type=\"password\" name=\"confirmPassword\" class=\"password\" placeholder=\"Conferma password\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n        <!-- Add these div elements wherever you want to display messages -->\n        <div id=\"register-success-message\" class=\"register-success-message\">Registrazione riuscita! Il link di conferma \u00e8 stato inviato al tuo indirizzo email!<\/div>\n        <div id=\"register-error-message\" class=\"register-error-message\"><\/div>\n        <p class=\"user\">\n            Sei gi\u00e0 un utente? <a class=\"anchor\" href=\"\/it\/login\/\">Login<\/a>\n            <br \/>\n            Are you a student? <a class=\"anchor-2\" href=\"\/it\/student-registration\/\">Iscrizione<\/a>\n        <\/p>\n        <input type=\"submit\" value=\"Registro\" \/>\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"it\"\/><\/form>\n\n    <script>\n        const form = document.querySelector('#teacher-signup-form');\n        const firstName = document.querySelector('#firstName');\n        const lastName = document.querySelector('#lastName');\n        const email = document.querySelector('#email');\n        const preferedName= document.querySelector('#preferedName');\n        const password = document.querySelector('#password');\n        const confirmPassword = document.querySelector('#confirmPassword');\n        const registerSuccessMessage = document.querySelector('#register-success-message');\n        const registerErrorMessage = document.querySelector('#register-error-message');\n\n\n        form.addEventListener('submit', async (event) => {\n            event.preventDefault();\n\n\n            \/\/ Validate form inputs\n            if (validateInputs()) {\n                \/\/ If inputs are valid, proceed with form submission\n                console.log('Submitting form');\n\n                try {\n                    \/\/ Use Fetch API to send data to the server\n                    const response = await fetch(`${API_URL}\/auth\/register\/teacher`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                        },\n                        body: JSON.stringify({\n                            firstName: firstName.value,\n                            lastName: lastName.value,\n                            email: email.value,\n                            preferedName: preferedName.value,\n                            password: password.value,\n                            role: 1,\n                        }),\n                    });\n\n                    \/\/console.log('After fetch...');\n\n                    \/\/ Handle the server response\n                    const data = await response.json();\n                    \/\/console.log(data)\n                    if (response.ok) {\n                        form.reset();\n                        \/\/ Registration success, you might want to redirect or show a success message\n                        \/\/console.log('Registration successful');\n                        \/\/ Show success message for 3 seconds\n                        registerSuccessMessage.style.display = 'block';\n\n                        \/\/ setTimeout(() => {\n                        \/\/     registerSuccessMessage.style.display = 'none';\n                        \/\/     \/\/ Redirect after hiding the message\n                        \/\/     window.location.href = '\/login';\n                        \/\/ }, 3000);\n                    } else {\n                        \/\/ Registration failed, handle the error (e.g., display an error message)\n                        \/\/ Show error message for 3 seconds\n                        registerErrorMessage.style.display = 'block';\n                        registerErrorMessage.innerText = 'Registration failed. Please try again.';\n                        setTimeout(() => {\n                            registerErrorMessage.style.display = 'none';\n                        }, 3000);\n                    }\n                    console.error('Registration failed:', data.msg);\n                } catch (error) {\nregisterErrorMessage.style.display = 'block';\n                        registerErrorMessage.innerText = 'Registration failed. Please try again.';\n                        setTimeout(() => {\n                            registerErrorMessage.style.display = 'none';\n                        }, 3000);\n                    console.error('Error during registration:', error);\n                }\n            };\n        });\n        const setError = (element, message) => {\n            const inputControl = element.parentElement;\n            const errorDisplay = inputControl.querySelector('.error');\n\n            errorDisplay.innerText = message;\n            inputControl.classList.add('error');\n            inputControl.classList.remove('success');\n\n        }\n\n        const setSuccess = element => {\n            const inputControl = element.parentElement;\n            const errorDisplay = inputControl.querySelector('.error');\n\n            errorDisplay.innerText = '';\n            inputControl.classList.add('success');\n            inputControl.classList.remove('error');\n\n        }\n\n        function isValidPassword(password) {\n            var regex = \/^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$\/;\n            return regex.test(password);\n        }\n\n        function isValidEmail(email) {\n            var regex = \/^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$\/;\n            return regex.test(email);\n        }\n\n        const validateInputs = () => {\n            const firstNameVal = firstName.value.trim();\n            const lastNameVal = lastName.value.trim();\n            const emailVal = email.value.trim();\n            const preferedNameVal= preferedName.value.trim();\n            const passwordVal = password.value.trim();\n            const confirmPasswordVal = confirmPassword.value.trim();\n\n            \/\/ Validate each input field\n            if (firstNameVal === '') {\n                setError(firstName, 'First Name is required');\n                return false;\n            } else {\n                setSuccess(firstName);\n            }\n\n            if (lastNameVal === '') {\n                setError(lastName, 'Last Name is required');\n                return false;\n            } else {\n                setSuccess(lastName);\n            }\n\n            if (emailVal === '') {\n                setError(email, 'Email is required');\n                return false;\n            } else if (!isValidEmail(emailVal)) {\n                setError(email, 'Provide a valid email address');\n                return false;\n            } else {\n                setSuccess(email);\n            }\n\n            if (preferedNameVal === '') {\n                setError(preferedName, 'PreferedName is required');\n                return false;\n            } else {\n                setSuccess(preferedName);\n            }\n\n            if (passwordVal === '') {\n                setError(password, 'Password is required');\n                return false;\n            } else if (!isValidPassword(passwordVal)) {\n                setError(password, 'Password must be at least 8 characters long and contain at least one letter and one number');\n                return false;\n            } else {\n                setSuccess(password);\n            }\n\n            if (passwordVal === '') {\n                setError(password, 'Password is required');\n                return false;\n            } else if (!isValidPassword(passwordVal)) {\n                setError(password, 'Password must be at least 8 characters long and contain at least one letter and one number');\n                return false;\n            } else {\n                setSuccess(password);\n            }\n\n            if (confirmPassword.value.trim() === '') {\n                setError(confirmPassword, 'Confirm password is required');\n                return false;\n            } else if (passwordVal !== confirmPassword.value.trim()) {\n                setError(confirmPassword, 'Passwords do not match');\n                return false;\n            } else {\n                setSuccess(confirmPassword);\n            }\n\n            return true;\n        };\n\n\n    <\/script>\n<\/body>","protected":false},"excerpt":{"rendered":"<p>Teacher Registration Registration successful! Confirmation link has been send to your email address! Already a user? Log In Are you a student? Sign Up<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-page-banner-removed","meta":{"footnotes":""},"class_list":["post-1048","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages\/1048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/comments?post=1048"}],"version-history":[{"count":61,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages\/1048\/revisions"}],"predecessor-version":[{"id":3225,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages\/1048\/revisions\/3225"}],"wp:attachment":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/media?parent=1048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}