{"id":1042,"date":"2023-10-25T03:26:02","date_gmt":"2023-10-25T03:26:02","guid":{"rendered":"https:\/\/vrai-dev.johnabbott.qc.ca\/?page_id=1042"},"modified":"2024-04-09T13:52:41","modified_gmt":"2024-04-09T13:52:41","slug":"student-registration","status":"publish","type":"page","link":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/student-registration\/","title":{"rendered":"Student Registration"},"content":{"rendered":"<style>\n       \/* -------------  *\/\n       \/*Student 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<\/style>\n\n<\/head>\n\n\n<body>\n    <form class=\"signup-form\" id=\"student-signup-form\" action=\"\">\n        <h2 class=\"signup-title\">Studente \u2013 Iscriviti<\/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=\"prefferedName\" name=\"prefferedName\" 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 id=\"password\" type=\"password\" name=\"password\" class=\"password\" placeholder=\"Password\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\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\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\n        <p class=\"user\">\n            Sei gi\u00e0 un utente? <a class=\"anchor\" href=\"\/it\/login\/\">Login<\/a>\n            <br \/>\n            Sei un insegnante? <a class=\"anchor-2\" href=\"\/it\/teacher-registration\/\">Iscrizione<\/a>\n        <\/p>\n\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('#student-signup-form');\n        const firstName = document.querySelector('#firstName');\n        const lastName = document.querySelector('#lastName');\n        const prefferedName = document.querySelector('#prefferedName');\n        const email = document.querySelector('#email');\n        const password = document.querySelector('#password');\n\tconst 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            try {\n                \/\/ Validate form inputs\n                if (validateInputs()) {\n                    \/\/ If inputs are valid, proceed with form submission\n                    console.log('Submitting form');\n\n                    \/\/ Use Fetch API to send data to the server\n                    const response = await fetch(`${API_URL}\/auth\/register\/student`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                        },\n                        body: JSON.stringify({\n                            firstName: firstName.value,\n                            lastName: lastName.value,\n                            preferedName: prefferedName.value,\n                            email: email.value,\n                            role: 2,\n                            password: password.value,\n                        }),\n                    });\n\n                    \/\/console.log('After fetch...');\n\n                    \/\/ Handle the server response\n                    const data = await response.json();\n                    \/\/ console.log('Server response:', data);\n                    if (response.ok) {\n                        form.reset();\n\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                        \/\/ 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                        \/\/ Registration failed, handle the error (e.g., display an error message)\n                        console.error('Registration failed:', data.msg);\n                    }\n                }\n            } catch (error) {\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                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        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 prefferedNameVal = prefferedName.value.trim();\n            const emailVal = email.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            if (prefferedNameVal === '') {\n                setError(prefferedName, 'Preffered Name is required');\n                return false;\n            } else {\n                setSuccess(prefferedName);\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 (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            if (confirmPassword.value.trim() === '') {\n    \t\t    setError(confirmPassword, 'Confirm password is required');\n    \t\treturn false;\n\t    } else if (passwordVal !== confirmPassword.value.trim()) {\n    \t\t    setError(confirmPassword, 'Passwords do not match');\n   \t \t    return false;\n\t    } else {\n    \t\t    setSuccess(confirmPassword);\n\t    }\n\n            \/\/ If all inputs are valid, return true\n            return true;\n        };\n\n\n        <\/script>\n<\/body>","protected":false},"excerpt":{"rendered":"<p>Student &#8211; Sign Up Registration successful! Confirmation link has been send to your email address! Already a user? Log In Are you a teacher? 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-1042","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages\/1042","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=1042"}],"version-history":[{"count":24,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages\/1042\/revisions"}],"predecessor-version":[{"id":3224,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/pages\/1042\/revisions\/3224"}],"wp:attachment":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/it\/wp-json\/wp\/v2\/media?parent=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}