{"id":2012,"date":"2023-12-06T21:23:56","date_gmt":"2023-12-06T21:23:56","guid":{"rendered":"https:\/\/vrai-dev.johnabbott.qc.ca\/?page_id=2012"},"modified":"2024-12-13T11:32:15","modified_gmt":"2024-12-13T15:32:15","slug":"account","status":"publish","type":"page","link":"https:\/\/vrai.johnabbott.qc.ca\/zh\/account\/","title":{"rendered":"\u5e10\u6237"},"content":{"rendered":"<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-bottom-color:#008000;border-bottom-width:3px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)\">\n    <h2 class=\"wp-block-heading alignfull has-text-align-center\">\u4eea\u8868\u677f<\/h2>\n    <\/div>\n    \n    \n    \n    <style>\n    \/* Import Google Fonts *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&display=swap');\n    \n    \/* General Styling *\/\n    body {\n        font-family: 'Roboto', sans-serif;\n        background-color: #f8f9fa; \/* Light gray background *\/\n        color: #333;\n        margin: 0;\n        padding: 0;\n    }\n    \n    \/* Dashboard Container *\/\n    #account-content {\n        margin: 40px auto;\n        max-width: 1200px;\n        padding: 20px;\n        background: #ffffff;\n        border-radius: 12px;\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n    }\n    \n    \/* Dashboard Header *\/\n    #account-details h2 {\n        font-size: 32px;\n        color: #008000;\n        margin-bottom: 20px;\n        text-align: center;\n    }\n    \n    #account-details p {\n        font-size: 18px;\n        margin: 8px 0;\n        text-align: center;\n    }\n    \n    \/* Grid Container for Cards *\/\n    .card-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 20px;\n        margin-top: 30px;\n    }\n    \n    \/* Card Styling *\/\n    .card {\n        background-color: #ffffff;\n        border-radius: 12px;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n        padding: 20px;\n        text-align: center;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n    \n    .card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\n    }\n    \n    .card h3 {\n        font-size: 20px;\n        margin-bottom: 12px;\n        color: #333;\n    }\n    \n    .card button {\n        background-color: #4CAF50;\n        border: none;\n        border-radius: 8px;\n        color: white;\n        padding: 12px 20px;\n        cursor: pointer;\n        font-size: 16px;\n        transition: background-color 0.3s ease, transform 0.2s ease;\n    }\n    \n    .card button:hover {\n        background-color: #45a049;\n    }\n    \n    .card button:active {\n        transform: scale(0.96);\n        background-color: #388e3c;\n    }\n    \n    \/* Logout Button *\/\n    .logout-section {\n        text-align: center;\n        margin-top: 40px;\n    }\n    \n    .logout-btn {\n        font-weight: bold;\n        border-radius: 8px;\n        color: white;\n        background-color: #4472C4;\n        padding: 10px 20px;\n        border: none;\n        cursor: pointer;\n        font-size: 16px;\n        transition: background-color 0.3s ease, transform 0.2s ease;\n    }\n    \n    .logout-btn:hover {\n        background-color: #6b8fd0;\n    }\n    \n    .logout-btn:active {\n        transform: scale(0.96);\n        background-color: #5644c4;\n    }\n    <\/style>\n    \n    <div id=\"account-content\">\n        <div id=\"account-details\">\n            <h2 id=\"welcome-title\">Welcome, User<\/h2>\n            <p id=\"user-role\">Role: <\/p>\n        <\/div>\n    \n        <div class=\"card-grid\" id=\"dashboard-cards\">\n            <!-- Cards will be dynamically populated -->\n        <\/div>\n    \n        <div class=\"logout-section\">\n            <button id=\"logout-btn\" class=\"logout-btn\">\u767b\u51fa<\/button>\n        <\/div>\n    <\/div>\n    \n    <script>\n        \/\/ Function to fetch user data from the backend\n        const fetchUserRole = async () => {\n            try {\n                const authToken = localStorage.getItem('authToken');\n                if (!authToken) {\n                    alert('No active session. Redirecting to login.');\n                    window.location.href = '\/login';\n                    return;\n                }\n                \n                const response = await fetch(`${API_URL}\/user\/self`, {\n                    method: 'GET',\n                    headers: {\n                        'Authorization': `Bearer ${authToken}`,\n                        'Content-Type': 'application\/json',\n                    },\n                });\n    \n                if (!response.ok) {\n                    throw new Error('Failed to fetch user data.');\n                }\n    \n                const user = await response.json();\n                populateDashboard(user);\n            } catch (error) {\n                console.error('Error fetching user data:', error);\n                alert('Failed to load account details. Please log in again.');\n                window.location.href = '\/login';\n            }\n        };\n    \n        \/\/ Function to populate the dashboard based on user data\n        const populateDashboard = (user) => {\n        const welcomeTitle = document.getElementById('welcome-title');\n        const userRole = document.getElementById('user-role');\n        const dashboardCards = document.getElementById('dashboard-cards');\n    \n        \/\/ Set user details\n        welcomeTitle.textContent = `Welcome, ${user.firstName} ${user.lastName}`;\n    \n        \/\/ Determine role (adjust for backend response format)\n        const isTeacher = user.role === 1 || user.role === 'Teacher' || user.role === 'teacher';\n        userRole.textContent = `Role: ${isTeacher ? \"Teacher\" : \"Administrator\"}`;\n        console.log(\"User Role from backend:\", user.role);\n    \n    \n        \/\/ Clear previous cards\n        dashboardCards.innerHTML = \"\";\n    \n        \/\/ Define functionalities based on role\n        const adminCards = [\n            { title: \"Teacher Management\", link: \"\/create-teacher\" },\n            { title: \"Course Management\", link: \"\/course\" },\n            { title: \"Rental Management\", link: \"\/rentals\" },\n            { title: \"Student List\", link: \"\/student-list\" }\n        ];\n    \n        const teacherCards = [\n            { title: \"Course Management\", link: \"\/course\" },\n            { title: \"Rental Management\", link: \"\/rentals\" },\n            { title: \"Student List\", link: \"\/student-list\" }\n        ];\n    \n        \/\/ Select cards based on role\n        const cards = isTeacher ? teacherCards : adminCards;\n    \n        \/\/ Populate cards\n        cards.forEach(card => {\n            const cardElement = document.createElement('div');\n            cardElement.className = \"card\";\n            cardElement.innerHTML = `\n                <h3>${card.title}<\/h3>\n                <button onclick=\"window.location.href='${card.link}'\">Go<\/button>\n            `;\n            dashboardCards.appendChild(cardElement);\n        });\n    };\n    \n    \n        \/\/ Handle logout\n        const handleLogout = () => {\n            localStorage.removeItem('authToken');\n            \/\/alert('You have successfully logged out.');\n            window.location.href = '\/login';\n        };\n    \n        document.getElementById('logout-btn').addEventListener('click', handleLogout);\n    \n        fetchUserRole();\n    <\/script>","protected":false},"excerpt":{"rendered":"<p>Dashboard Welcome, User Role: Logout<\/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-2012","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/pages\/2012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/comments?post=2012"}],"version-history":[{"count":90,"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/pages\/2012\/revisions"}],"predecessor-version":[{"id":3889,"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/pages\/2012\/revisions\/3889"}],"wp:attachment":[{"href":"https:\/\/vrai.johnabbott.qc.ca\/zh\/wp-json\/wp\/v2\/media?parent=2012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}