blink/frontend/vanilla/html/userprofile.html

100 lines
3.4 KiB
HTML
Raw Normal View History

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">
<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-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);
document.body.style.display = "block"; // Show page
}
else{
alert(data.error);
}
2024-02-28 15:51:21 +01:00
}
function populateFields(displayName, email){
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;
}
</script>
2024-02-20 22:16:54 +01:00
</body>
</html>