blink/frontend/vanilla/html/userprofile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="../css/profile.css">
</head>
<body style="display: none;">
    <div class="container">
        <div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div>
        <header>
            <img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture">
            <h1 id="displayName">Name Surname</h1>
            <p id="profession">Web Developer</p>
        </header>
        <section>
            <h2>About Me</h2>
            <p id="aboutMe">I am a passionate web developer with experience in HTML, CSS, and JavaScript. I enjoy creating responsive and user-friendly websites.</p>
        </section>
        <section>
            <h2>Experience</h2>
            <div class="job">
                <h3>Web Developer</h3>
                <p>Blink Corporation: 2020-Present</p>
                <ul>
                    <li>Developed and maintained company website</li>
                    <li>Implemented new features using HTML, CSS, and JavaScript</li>
                    <li>Collaborated with designers to ensure UI/UX best practices</li>
                </ul>
            </div>
        </section>
        <section>
            <h2>Education</h2>
            <div class="education">
                <h3>Bachelor of Science in Computer Science</h3>
                <p>XYZ University: 2016-2020</p>
            </div>
        </section>
        <footer>
            <p id="email">Email: john.doe@example.com</p>
        </footer>
    </div>

    <script src="../js/constants.js"></script>
    <script src="../js/utils.js"></script>

    <script>
        window.addEventListener("load", async function() {
            loadProfile();
        });

        async function loadProfile (){
            
            const idToDisplay = new URLSearchParams(window.location.search).get('id');
            let response;

            // Retrieving the logged in user's profile
            if(!idToDisplay || idToDisplay === 'myself'){
                document.getElementById('editBadge').style.display = 'block'; // show edit button
                const token = getCookie('token');
                // Check whether the token exists
                if(!token){
                    window.location.href = 'login.html';
                }
                response = await fetch(`${API_URL}/person/myself`, {
                    headers: {
                        "Content-type": "application/json; charset=UTF-8",
                        "authorization": token
                    }
                });
            }
            else {
                response = await fetch(`${API_URL}/person/${idToDisplay}/details`, {
                    headers: {
                        "Content-type": "application/json; charset=UTF-8",
                    }
                });
            }

            const data = await response.json();
            if (response.ok){
                populateFields(data.display_name, data.email);
                document.body.style.display = 'block'; // Show page
            }
            else if (response.status == 401){
                console.error(data.error);
                window.location.href = 'login.html';
            }
            else{
                alert(`Unable to load profile. Error: ${data.error}`);
            }
        }

        function populateFields (displayName, email) {
            document.getElementById('displayName').textContent = displayName;
            document.title = `${displayName} - Blink`
            document.getElementById('email').textContent = email;
        }

        function editProfile () {
            alert('Editing');
        }

    </script>

</body>
</html>
add profile page 2024-02-20 22:16:54 +01:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Update userprofile.html 2024-02-28 16:04:00 +01:00			`<title>Page Title</title>`
add profile page 2024-02-20 22:16:54 +01:00			`<link rel="stylesheet" href="../css/profile.css">`
			`</head>`
Update userprofile.html 2024-02-28 16:04:00 +01:00			`<body style="display: none;">`
add profile page 2024-02-20 22:16:54 +01:00			`<div class="container">`
update 2024-02-29 15:10:57 +01:00			`<div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div>`
add profile page 2024-02-20 22:16:54 +01:00			`<header>`
			`<img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture">`
login and my profile 2024-02-28 15:51:21 +01:00			`<h1 id="displayName">Name Surname</h1>`
			`<p id="profession">Web Developer</p>`
add profile page 2024-02-20 22:16:54 +01:00			`</header>`
			`<section>`
			`<h2>About Me</h2>`
login and my profile 2024-02-28 15:51:21 +01:00			`<p id="aboutMe">I am a passionate web developer with experience in HTML, CSS, and JavaScript. I enjoy creating responsive and user-friendly websites.</p>`
add profile page 2024-02-20 22:16:54 +01:00			`</section>`
			`<section>`
			`<h2>Experience</h2>`
			`<div class="job">`
			`<h3>Web Developer</h3>`
			`<p>Blink Corporation: 2020-Present</p>`
			`<ul>`
			`<li>Developed and maintained company website</li>`
			`<li>Implemented new features using HTML, CSS, and JavaScript</li>`
			`<li>Collaborated with designers to ensure UI/UX best practices</li>`
			`</ul>`
			`</div>`
			`</section>`
			`<section>`
			`<h2>Education</h2>`
			`<div class="education">`
			`<h3>Bachelor of Science in Computer Science</h3>`
			`<p>XYZ University: 2016-2020</p>`
			`</div>`
			`</section>`
			`<footer>`
login and my profile 2024-02-28 15:51:21 +01:00			`<p id="email">Email: john.doe@example.com</p>`
add profile page 2024-02-20 22:16:54 +01:00			`</footer>`
			`</div>`
login and my profile 2024-02-28 15:51:21 +01:00
			`<script src="../js/constants.js"></script>`
			`<script src="../js/utils.js"></script>`

			`<script>`
			`window.addEventListener("load", async function() {`
Show organization 2024-02-29 12:20:08 +01:00			`loadProfile();`
login and my profile 2024-02-28 15:51:21 +01:00			`});`

			`async function loadProfile (){`

			`const idToDisplay = new URLSearchParams(window.location.search).get('id');`
			`let response;`

			`// Retrieving the logged in user's profile`
Show organization 2024-02-29 12:20:08 +01:00			`if(!idToDisplay \|\| idToDisplay === 'myself'){`
update 2024-02-29 15:10:57 +01:00			`document.getElementById('editBadge').style.display = 'block'; // show edit button`
login and my profile 2024-02-28 15:51:21 +01:00			`const token = getCookie('token');`
			`// Check whether the token exists`
			`if(!token){`
			`window.location.href = 'login.html';`
			`}`
			response = await fetch(`${API_URL}/person/myself`, {
			`headers: {`
			`"Content-type": "application/json; charset=UTF-8",`
			`"authorization": token`
			`}`
			`});`
			`}`
			`else {`
Show organization 2024-02-29 12:20:08 +01:00			response = await fetch(`${API_URL}/person/${idToDisplay}/details`, {
login and my profile 2024-02-28 15:51:21 +01:00			`headers: {`
			`"Content-type": "application/json; charset=UTF-8",`
			`}`
			`});`
			`}`

			`const data = await response.json();`
update frontend javascript 2024-03-04 09:22:33 +01:00			`if (response.ok){`
Update userprofile.html 2024-02-28 16:04:00 +01:00			`populateFields(data.display_name, data.email);`
update 2024-02-29 15:10:57 +01:00			`document.body.style.display = 'block'; // Show page`
Update userprofile.html 2024-02-28 16:04:00 +01:00			`}`
update frontend javascript 2024-03-04 09:22:33 +01:00			`else if (response.status == 401){`
			`console.error(data.error);`
			`window.location.href = 'login.html';`
			`}`
Update userprofile.html 2024-02-28 16:04:00 +01:00			`else{`
update frontend javascript 2024-03-04 09:22:33 +01:00			alert(`Unable to load profile. Error: ${data.error}`);
Update userprofile.html 2024-02-28 16:04:00 +01:00			`}`
login and my profile 2024-02-28 15:51:21 +01:00			`}`

update 2024-02-29 15:10:57 +01:00			`function populateFields (displayName, email) {`
login and my profile 2024-02-28 15:51:21 +01:00			`document.getElementById('displayName').textContent = displayName;`
Update userprofile.html 2024-02-28 16:04:00 +01:00			document.title = `${displayName} - Blink`
login and my profile 2024-02-28 15:51:21 +01:00			`document.getElementById('email').textContent = email;`
			`}`

update 2024-02-29 15:10:57 +01:00			`function editProfile () {`
			`alert('Editing');`
			`}`

login and my profile 2024-02-28 15:51:21 +01:00			`</script>`

add profile page 2024-02-20 22:16:54 +01:00			`</body>`
			`</html>`