{"id":3563,"date":"2024-06-14T06:29:29","date_gmt":"2024-06-14T06:29:29","guid":{"rendered":"https:\/\/vrai-dev.johnabbott.qc.ca\/?page_id=3563"},"modified":"2024-06-18T03:25:22","modified_gmt":"2024-06-18T03:25:22","slug":"edit-user","status":"publish","type":"page","link":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/edit-user\/","title":{"rendered":"Edit User"},"content":{"rendered":"<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\n    \/* Edit User Form\n* -------------  *\/\n    .edit-user-form {\n        border-radius: 12px;\n        padding: 1.8em;\n        margin: 0 auto;\n        width: 50%;\n        border: 1px solid black;\n        box-shadow: 0px 13px 18px -3px rgba(0, 0, 0, 0.1);\n    }\n\n    .edit-user-title {\n        font-weight: bold;\n        font-size: 24px;\n    }\n\n    .edit-user-form input[type=\"text\"],\n    .edit-user-form select {\n        color: black;\n        background-color: #f0f0f0;\n        border-radius: 8px;\n        width: 100%;\n        padding: 8px;\n        margin-bottom: 10px;\n    }\n\n    .edit-user-form input[type=\"submit\"] {\n        font-weight: bold;\n        width: 100%;\n        font-size: 18px;\n        border-radius: 8px;\n        background-color: #4472C4;\n    }\n\n    .input-control {\n        margin-bottom: 6px;\n    }\n\n    .input-control.error input {\n        border-color: #ff3860;\n    }\n\n    .input-control.success input {\n        border-color: #09C372;\n    }\n\n    .input-control .error {\n        color: #ff3860;\n        margin-bottom: 15px;\n        margin-top: 5px;\n        font-size: 11px;\n        font-weight: bold;\n        height: 13px;\n    }\n\n    .edit-success-message,\n    .edit-error-message {\n        display: none;\n        margin: 0 auto;\n        padding: 10px;\n        border-radius: 8px;\n        margin-top: 20px;\n        color: black;\n    }\n\n    .edit-success-message {\n        border-color: green;\n        background-color: #09C372;\n    }\n\n    .edit-error-message {\n        border-color: red;\n        background-color: #ff3860;\n    }\n\n    .edit-user-form button {\n        width: 48%;\n        padding: 10px;\n        font-size: 18px;\n        margin-top: 10px;\n        border-radius: 8px;\n        border: none;\n    }\n\n    .edit-user-form button.save-btn {\n        background-color: green;\n        color: white;\n    }\n\n    .edit-user-form button.cancel-btn {\n        background-color: grey;\n        color: white;\n    }\n\n    .edit-user-form .button-container {\n        display: flex;\n        justify-content: space-between;\n    }\n<\/style>\n\n<body>\n    <form class=\"edit-user-form\" id=\"edit-user-form\" action=\"\">\n        <p class=\"edit-user-title\">Edit User<\/p>\n\n        <div class=\"input-control\">\n            <input id=\"edit-first-name\" type=\"text\" name=\"firstName\" placeholder=\"\u0406\u043c&#039;\u044f\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <input id=\"edit-last-name\" type=\"text\" name=\"lastName\" placeholder=\"\u041f\u0440\u0456\u0437\u0432\u0438\u0449\u0435\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <input id=\"edit-email\" type=\"text\" name=\"email\" placeholder=\"\u0415\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430 \u043f\u043e\u0448\u0442\u0430\" \/>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <select id=\"edit-role\" name=\"role\">\n                <option value=\"1\">\u0432\u0447\u0438\u0442\u0435\u043b\u044c<\/option>\n                <option value=\"2\">Student<\/option>\n            <\/select>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div class=\"input-control\">\n            <select id=\"edit-status\" name=\"status\">\n                <option value=\"0\">Email Unconfirm<\/option>\n                <option value=\"1\">Activated<\/option>\n                <option value=\"2\">Teacher Role Pending<\/option>\n                <option value=\"-1\">Deleted<\/option>\n            <\/select>\n            <div class=\"error\"><\/div>\n        <\/div>\n\n        <div id=\"edit-success-message\" class=\"edit-success-message\">User updated successfully!<\/div>\n        <div id=\"edit-error-message\" class=\"edit-error-message\"><\/div>\n\n        <div class=\"button-container\">\n            <button type=\"button\" class=\"save-btn\" onclick=\"saveUser()\">Save<\/button>\n            <button type=\"button\" class=\"cancel-btn\" onclick=\"cancelEdit()\">Cancel<\/button>\n        <\/div>\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"ua\"\/><\/form>\n\n    <script>\n        const editForm = document.querySelector('#edit-user-form');\n        const firstNameInput = document.querySelector('#edit-first-name');\n        const lastNameInput = document.querySelector('#edit-last-name');\n        const emailInput = document.querySelector('#edit-email');\n        const roleInput = document.querySelector('#edit-role');\n        const statusInput = document.querySelector('#edit-status');\n        const editSuccessMessage = document.querySelector('#edit-success-message');\n        const editErrorMessage = document.querySelector('#edit-error-message');\n\n        let currentUserId = null; \/\/ Initialize currentUserId\n\n        function fillEditForm(user) {\n            firstNameInput.value = user.firstName;\n            lastNameInput.value = user.lastName;\n            emailInput.value = user.email;\n            roleInput.value = user.role;\n            statusInput.value = user.status;\n        }\n\n        async function saveUser() {\n            if (validateInputs() && confirm('Are you sure you want to save changes?')) {\n                try {\n                    const userId = currentUserId; \/\/ Assuming currentUserId is set when edit button is clicked\n                    const response = await fetch(`${API_URL}\/users\/${userId}`, {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                        },\n                        body: JSON.stringify({\n                            firstName: firstNameInput.value,\n                            lastName: lastNameInput.value,\n                            email: emailInput.value,\n                            role: roleInput.value,\n                            status: statusInput.value,\n                        }),\n                    });\n\n                    const data = await response.json();\n\n                    if (response.ok) {\n                        editSuccessMessage.style.display = 'block';\n                        setTimeout(() => {\n                            editSuccessMessage.style.display = 'none';\n                            window.location.href = '\/user-administration'; \/\/ Redirect to user administration page\n                        }, 3000);\n                    } else {\n                        editErrorMessage.style.display = 'block';\n                        editErrorMessage.innerText = data.message || 'Failed to update user';\n                        setTimeout(() => {\n                            editErrorMessage.style.display = 'none';\n                        }, 3000);\n                    }\n                } catch (error) {\n                    editErrorMessage.style.display = 'block';\n                    editErrorMessage.innerText = 'Error: ' + error;\n                    setTimeout(() => {\n                        editErrorMessage.style.display = 'none';\n                    }, 3000);\n                }\n            }\n        }\n\n        function cancelEdit() {\n            window.location.href = '\/user-administration'; \/\/ Redirect to user administration page\n        }\n         function validateInputs() {\n            let isValid = true;\n\n            \/\/ Validate first name\n            if (firstNameInput.value.trim() === '') {\n                setError(firstNameInput, 'First name is required');\n                isValid = false;\n            } else {\n                setSuccess(firstNameInput);\n            }\n\n            \/\/ Validate last name\n            if (lastNameInput.value.trim() === '') {\n                setError(lastNameInput, 'Last name is required');\n                isValid = false;\n            } else {\n                setSuccess(lastNameInput);\n            }\n\n            \/\/ Validate email\n            if (emailInput.value.trim() === '') {\n                setError(emailInput, 'Email is required');\n                isValid = false;\n            } else if (!isValidEmail(emailInput.value)) {\n                setError(emailInput, 'Provide a valid email address');\n                isValid = false;\n            } else {\n                setSuccess(emailInput);\n            }\n\n            return isValid;\n        }\n\n        function 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        function 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        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        \/\/ Add event listeners to clear error messages on input\n        firstNameInput.addEventListener('input', () => setSuccess(firstNameInput));\n        lastNameInput.addEventListener('input', () => setSuccess(lastNameInput));\n        emailInput.addEventListener('input', () => setSuccess(emailInput));\n        roleInput.addEventListener('input', () => setSuccess(roleInput));\n        statusInput.addEventListener('input', () => setSuccess(statusInput));\n\n        \/\/ This function will be called when edit button is clicked in user administration page\n        function getUser(userId) {\n            \/\/ Fetch user data by userId and fill the form\n            currentUserId = userId; \/\/ Store the userId for save operation\n            fetch(`${API_URL}\/users\/${userId}`)\n                .then(response => response.json())\n                .then(user => fillEditForm(user))\n                .catch(error => console.error('Error fetching user data:', error));\n        }\n         \/\/ User authentication and role check\n        const getTokenFromLocalStorage = () => {\n            return localStorage.getItem('authToken');\n        };\n\n        const getUserInfo = () => {\n            const token = getTokenFromLocalStorage();\n            if (token) {\n                try {\n                    const [, payload] = token.split('.');\n                    const decodedPayload = JSON.parse(atob(payload));\n                    return {\n                        email: decodedPayload.email,\n                        role: decodedPayload.role\n                    };\n                } catch (error) {\n                    console.error('Error decoding token:', error);\n                }\n            }\n            return null;\n        };\n\n        const setUpEditUserPage = () => {\n            const userInfo = getUserInfo();\n            if (!userInfo) {\n                alert('You need to log in to access this page.');\n                window.location.href = '\/login';\n            } else if (userInfo.role !== 0) {\n                alert('You do not have permission to access this page.');\n                window.location.href = '\/account';\n            } else {\n                const urlParams = new URLSearchParams(window.location.search);\n                const userId = urlParams.get('userId');\n                if (userId) {\n                    getUser(userId); \/\/ Fetch user data and fill the form\n                }\n            }\n        };\n\n        \/\/ Check user authentication and role on page load\n        document.addEventListener('DOMContentLoaded', setUpEditUserPage);\n    <\/script>\n<\/body>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Edit User TeacherStudent Email UnconfirmActivatedTeacher Role PendingDeleted User updated successfully! Save Cancel<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3563","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/pages\/3563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/comments?post=3563"}],"version-history":[{"count":10,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/pages\/3563\/revisions"}],"predecessor-version":[{"id":3585,"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/pages\/3563\/revisions\/3585"}],"wp:attachment":[{"href":"https:\/\/vrai-dev.johnabbott.qc.ca\/ua\/wp-json\/wp\/v2\/media?parent=3563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}