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" >
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-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 >
< p id = "profession" > Web Developer< / p >
2024-02-20 22:16:54 +01:00
< / header >
< section >
< h2 > About Me< / h2 >
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 >
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 >
window.addEventListener("load", async function() {
2024-02-29 12:20:08 +01:00
loadProfile();
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
2024-02-29 12:20:08 +01:00
if(!idToDisplay || idToDisplay === 'myself'){
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
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 {
2024-02-29 12:20:08 +01:00
response = await fetch(`${API_URL}/person/${idToDisplay}/details`, {
2024-02-28 15:51:21 +01:00
headers: {
"Content-type": "application/json; charset=UTF-8",
}
});
}
const data = await response.json();
2024-02-28 16:04:00 +01:00
if(response.ok){
populateFields(data.display_name, data.email);
2024-02-29 15:10:57 +01:00
document.body.style.display = 'block'; // Show page
2024-02-28 16:04:00 +01:00
}
else{
alert(data.error);
}
2024-02-28 15:51:21 +01:00
}
2024-02-29 15:10:57 +01:00
function populateFields (displayName, email) {
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-02-29 15:10:57 +01:00
function editProfile () {
alert('Editing');
}
2024-02-28 15:51:21 +01:00
< / script >
2024-02-20 22:16:54 +01:00
< / body >
< / html >
