2024-02-20 22:16:54 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2024-03-04 16:49:36 +01:00
|
|
|
|
2024-02-20 22:16:54 +01:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-02-28 16:04:00 +01:00
|
|
|
<title>Page Title</title>
|
2024-02-20 22:16:54 +01:00
|
|
|
<link rel="stylesheet" href="../css/profile.css">
|
|
|
|
|
</head>
|
2024-03-04 16:49:36 +01:00
|
|
|
|
2024-02-28 16:04:00 +01:00
|
|
|
<body style="display: none;">
|
2024-02-20 22:16:54 +01:00
|
|
|
<div class="container">
|
2024-02-29 15:10:57 +01:00
|
|
|
<div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div>
|
2024-02-20 22:16:54 +01:00
|
|
|
<header>
|
|
|
|
|
<img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture">
|
2024-02-28 15:51:21 +01:00
|
|
|
<h1 id="displayName">Name Surname</h1>
|
2024-03-04 15:28:10 +01:00
|
|
|
<p id="qualification">Title</p>
|
2024-02-20 22:16:54 +01:00
|
|
|
</header>
|
|
|
|
|
<section>
|
|
|
|
|
<h2>About Me</h2>
|
2024-03-04 15:15:09 +01:00
|
|
|
<p id="aboutMe">About me</p>
|
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>
|
2024-02-28 15:51:21 +01:00
|
|
|
<p id="email">Email: john.doe@example.com</p>
|
2024-02-20 22:16:54 +01:00
|
|
|
</footer>
|
|
|
|
|
</div>
|
2024-02-28 15:51:21 +01:00
|
|
|
|
|
|
|
|
<script src="../js/constants.js"></script>
|
|
|
|
|
<script src="../js/utils.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-03-04 16:49:36 +01:00
|
|
|
window.addEventListener("load", async function () {
|
2024-02-29 12:20:08 +01:00
|
|
|
loadProfile();
|
2024-02-28 15:51:21 +01:00
|
|
|
});
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
async function loadProfile() {
|
|
|
|
|
|
2024-02-28 15:51:21 +01:00
|
|
|
const idToDisplay = new URLSearchParams(window.location.search).get('id');
|
|
|
|
|
let response;
|
|
|
|
|
|
|
|
|
|
// Retrieving the logged in user's profile
|
2024-03-06 10:19:37 +01:00
|
|
|
if (!idToDisplay || idToDisplay === 'me') {
|
2024-02-29 15:10:57 +01:00
|
|
|
document.getElementById('editBadge').style.display = 'block'; // show edit button
|
2024-02-28 15:51:21 +01:00
|
|
|
const token = getCookie('token');
|
|
|
|
|
// Check whether the token exists
|
2024-03-04 16:49:36 +01:00
|
|
|
if (!token) {
|
2024-02-28 15:51:21 +01:00
|
|
|
window.location.href = 'login.html';
|
|
|
|
|
}
|
2024-03-06 10:19:37 +01:00
|
|
|
response = await fetch(`${API_URL}/persons/me`, {
|
2024-02-28 15:51:21 +01:00
|
|
|
headers: {
|
|
|
|
|
"Content-type": "application/json; charset=UTF-8",
|
|
|
|
|
"authorization": token
|
|
|
|
|
}
|
|
|
|
|
});
|
2024-03-04 16:49:36 +01:00
|
|
|
} else {
|
2024-03-06 10:19:37 +01:00
|
|
|
response = await fetch(`${API_URL}/persons/${idToDisplay}/details`, {
|
2024-02-28 15:51:21 +01:00
|
|
|
headers: {
|
|
|
|
|
"Content-type": "application/json; charset=UTF-8",
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
2024-03-04 16:49:36 +01:00
|
|
|
if (response.ok) {
|
2024-03-04 15:28:10 +01:00
|
|
|
populateFields(data.display_name, data.email, data.about_me, data.qualification);
|
2024-02-29 15:10:57 +01:00
|
|
|
document.body.style.display = 'block'; // Show page
|
2024-03-04 16:49:36 +01:00
|
|
|
} else if (response.status == 401) {
|
2024-03-04 09:22:33 +01:00
|
|
|
window.location.href = 'login.html';
|
2024-03-04 16:49:36 +01:00
|
|
|
} else {
|
2024-03-04 09:22:33 +01:00
|
|
|
alert(`Unable to load profile. Error: ${data.error}`);
|
2024-02-28 16:04:00 +01:00
|
|
|
}
|
2024-02-28 15:51:21 +01:00
|
|
|
}
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
function populateFields(displayName, email, aboutMe, qualification) {
|
2024-02-28 15:51:21 +01:00
|
|
|
document.getElementById('displayName').textContent = displayName;
|
2024-02-28 16:04:00 +01:00
|
|
|
document.title = `${displayName} - Blink`
|
2024-02-28 15:51:21 +01:00
|
|
|
document.getElementById('email').textContent = email;
|
2024-03-04 15:15:09 +01:00
|
|
|
document.getElementById('aboutMe').textContent = aboutMe;
|
2024-03-04 15:28:10 +01:00
|
|
|
document.getElementById('qualification').textContent = qualification;
|
2024-02-28 15:51:21 +01:00
|
|
|
}
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
function editProfile() {
|
2024-02-29 15:10:57 +01:00
|
|
|
alert('Editing');
|
|
|
|
|
}
|
2024-02-28 15:51:21 +01:00
|
|
|
</script>
|
|
|
|
|
|
2024-02-20 22:16:54 +01:00
|
|
|
</body>
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
</html>
|
