blink/frontend/vanilla/html/userprofile.html

122 lines
4.4 KiB
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">
<link rel="stylesheet" href="../css/topnav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="display: none;">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#contact">Discover</a>
<a href="#contact">Your Job Applications</a>
<a href="#contact">Messages</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="button" onclick="onSearchButtonClick()"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<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="qualification">Title</p>
</header>
<section>
<h2>About Me</h2>
<p id="aboutMe">About me</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 === 'me') {
const token = getCookie('token');
// Check whether the token exists
if (!token) {
window.location.href = 'login.html';
}
response = await fetch(`${API_URL}/persons/me`, {
headers: createHeaders(token)
});
document.getElementById('editBadge').style.display = 'block'; // show edit button
} else {
response = await fetch(`${API_URL}/persons/${idToDisplay}/details`, {
headers: createHeaders(null)
});
}
const data = await response.json();
if (response.ok) {
populateFields(data.display_name, data.email, data.about_me, data.qualification);
document.body.style.display = 'block'; // Show page
} else if (response.status == 401) {
window.location.href = 'login.html';
} else {
alert(`Unable to load profile. Error: ${data.error}`);
}
}
function populateFields(displayName, email, aboutMe, qualification) {
document.getElementById('displayName').textContent = displayName;
document.title = `${displayName} - Blink`
document.getElementById('email').textContent = email;
document.getElementById('aboutMe').textContent = aboutMe;
document.getElementById('qualification').textContent = qualification;
}
function editProfile() {
alert('Editing');
}
function onSearchButtonClick() {
alert('Searching for something...');
}
</script>
</body>
</html>