xfarrow
/
blink
mirror of https://github.com/xfarrow/blink.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

userprofile update, profile-settings in testing

This commit is contained in:
xfarrow 2024-04-10 10:55:19 +02:00
parent 0efa83b107
commit 1956e981bb
3 changed files with 470 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
frontend/vanilla/html/testing/profile-settings.html Normal file
View File

@ -0,0 +1,259 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bs4 Profile Settings page - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
margin-top: 20px;
background: #F0F8FF;
}
.card {
margin-bottom: 1.5rem;
box-shadow: 0 1px 15px 1px rgba(52, 40, 104, .08);
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #e5e9f2;
border-radius: .2rem;
}
.card-header:first-child {
border-radius: calc(.2rem - 1px) calc(.2rem - 1px) 0 0;
}
.card-header {
border-bottom-width: 1px;
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
color: inherit;
background-color: #fff;
border-bottom: 1px solid #e5e9f2;
}
</style>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container p-0">
<h1 class="h3 mb-3">Settings</h1>
<div class="row">
<div class="col-md-5 col-xl-4">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Profile Settings</h5>
</div>
<div class="list-group list-group-flush" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#account"
role="tab">
Account
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#password"
role="tab">
Password
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#privacy-and-safety"
role="tab">
Privacy and safety
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
Email notifications
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
Web notifications
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
Widgets
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
Your data
</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#delete-account"
role="tab">
Delete account
</a>
</div>
</div>
</div>
<div class="col-md-7 col-xl-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="account" role="tabpanel">
<div class="card">
<div class="card-header">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-more-horizontal align-middle">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Personal information</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputUsername"
placeholder="Name">
</div>
<div class="form-group">
<label for="inputQualificatin">Qualification</label>
<input type="text" class="form-control" id="inputQualificatin"
placeholder="Qualification">
</div>
<div class="form-group">
<label for="aboutMe">About you</label>
<textarea rows="2" class="form-control" id="inputBio"
placeholder="Tell something about yourself"></textarea>
</div>
</div>
<div class="col-md-4">
<div class="text-center">
<img alt="Andrew Jones"
src="https://bootdey.com/img/Content/avatar/avatar1.png"
class="rounded-circle img-responsive mt-2" width="128" height="128">
<div class="mt-2">
<span class="btn btn-primary"><i class="fa fa-upload"></i></span>
</div>
<small>For best results, use an image at least 128px by 128px in .jpg
format</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-actions float-right">
<div class="dropdown show">
<a href="#" data-toggle="dropdown" data-display="static">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-more-horizontal align-middle">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Contact information</h5>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress"
placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2"
placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" id="password" role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title">Password</h5>
<form>
<div class="form-group">
<label for="inputPasswordCurrent">Current password</label>
<input type="password" class="form-control" id="inputPasswordCurrent">
<small><a href="#">Forgot your password?</a></small>
</div>
<div class="form-group">
<label for="inputPasswordNew">New password</label>
<input type="password" class="form-control" id="inputPasswordNew">
</div>
<div class="form-group">
<label for="inputPasswordNew2">Verify password</label>
<input type="password" class="form-control" id="inputPasswordNew2">
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" id="privacy-and-safety" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>

229
frontend/vanilla/html/testing/userprofile.html
View File

@ -1,229 +0,0 @@
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color: #ecf2fa;">
<div class="container py-5">
<!-- Person's name + profile picture card -->
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3.webp" alt="avatar"
class="rounded-circle img-fluid" style="width: 150px;">
<h5 class="my-3" id="display-name">John Doe</h5>
<p class="text-muted mb-2" id="qualification">Full Stack Developer</p>
<p class="text-muted mb-4" id="place-of-living">New York City, United States of America</p>
<p class="text-muted mb-4" id="about-me"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<div class="d-flex justify-content-center mb-2">
<!-- <button type="button" class="btn btn-primary">Follow</button> -->
<button type="button" class="btn btn-outline-primary ms-1">Message</button>
</div>
</div>
</div>
<!-- Person's contact infos -->
<div class="card mb-4 mb-lg-0">
<div class="card-body p-0">
<ul class="list-group list-group-flush rounded-3">
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fa-regular fa-envelope"></i>
<p class="mb-0"><a href="#" id="email">johndoe@proton.com</a></p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fas fa-globe fa-lg text-warning"></i>
<p class="mb-0"><a href="#">johndoe.com</a></p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-github fa-lg" style="color: #333333;"></i>
<p class="mb-0"><a href="https://github.com/xfarrow">johndoe</a></p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-twitter fa-lg" style="color: #55acee;"></i>
<p class="mb-0">@mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-instagram fa-lg" style="color: #ac2bac;"></i>
<p class="mb-0">mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-facebook-f fa-lg" style="color: #3b5998;"></i>
<p class="mb-0">mdbootstrap</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-8">
<!-- Experience -->
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title font-weight-bold mb-3 text-center">Experience</h4>
<h5 class="card-title font-weight-bold mb-0">Software Engineer</h5>
<p class="card-text mb-2 text-muted">Blink Inc.</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - present</p>
<hr>
<h5 class="card-title font-weight-bold mb-0">Software Engineer</h5>
<p class="card-text mb-2 text-muted">Blink Inc.</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - present</p>
</div>
</div>
<!-- Education -->
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title font-weight-bold mb-3 text-center">Education</h4>
<h5 class="card-title font-weight-bold mb-0">Bachelor's Degree in Computer Science</h5>
<p class="card-text mb-2 text-muted">University of Berkley</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - July 2024</p>
<hr>
<h5 class="card-title font-weight-bold mb-0">Bachelor's Degree in Computer Science</h5>
<p class="card-text mb-2 text-muted">University of Berkley</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - July 2024</p>
<hr>
<h5 class="card-title font-weight-bold mb-0">Bachelor's Degree in Computer Science</h5>
<p class="card-text mb-2 text-muted">University of Berkley</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - July 2024</p>
</div>
</div>
<!-- Skills -->
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title font-weight-bold mb-3 text-center">Skills</h4>
<p class="mb-1" style="font-size: .77rem;">Web Design</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%" aria-valuenow="72" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%" aria-valuenow="66" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</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;
// If it is the logged-in person
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)
});
} 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, data.place_of_living);
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, placeOfLiving) {
document.getElementById('display-name').textContent = displayName;
document.title = `${displayName} - Blink`
document.getElementById('email').textContent = email;
document.getElementById('about-me').textContent = aboutMe;
document.getElementById('qualification').textContent = qualification;
document.getElementById('place-of-living').textContent = placeOfLiving;
}
</script>
</body>
</html>

315
frontend/vanilla/html/userprofile.html
View File

@ -1,121 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<html>
<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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</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>
<body style="background-color: #ecf2fa; display: none;">
<div class="container py-5">
<!-- Person's name + profile picture card -->
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3.webp" alt="avatar"
class="rounded-circle img-fluid" style="width: 150px;">
<h5 class="my-3" id="display-name">John Doe</h5>
<p class="text-muted mb-2" id="qualification">Full Stack Developer</p>
<p class="text-muted mb-4" id="place-of-living">New York City, United States of America</p>
<p class="text-muted mb-4" id="about-me"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<div class="d-flex justify-content-center mb-2">
<!-- <button type="button" class="btn btn-primary">Follow</button> -->
<button type="button" class="btn btn-outline-primary ms-1">Message</button>
</div>
</div>
</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>
<!-- Person's contact infos -->
<div class="card mb-4 mb-lg-0">
<div class="card-body p-0">
<ul class="list-group list-group-flush rounded-3">
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fa-regular fa-envelope"></i>
<p class="mb-0"><a href="#" id="email">johndoe@proton.com</a></p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fas fa-globe fa-lg text-warning"></i>
<p class="mb-0"><a href="#">johndoe.com</a></p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-github fa-lg" style="color: #333333;"></i>
<p class="mb-0"><a href="https://github.com/xfarrow">johndoe</a></p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-twitter fa-lg" style="color: #55acee;"></i>
<p class="mb-0">@mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-instagram fa-lg" style="color: #ac2bac;"></i>
<p class="mb-0">mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-facebook-f fa-lg" style="color: #3b5998;"></i>
<p class="mb-0">mdbootstrap</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-8">
<!-- Experience -->
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title font-weight-bold mb-3 text-center">Experience</h4>
<h5 class="card-title font-weight-bold mb-0">Software Engineer</h5>
<p class="card-text mb-2 text-muted">Blink Inc.</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - present</p>
<hr>
<h5 class="card-title font-weight-bold mb-0">Software Engineer</h5>
<p class="card-text mb-2 text-muted">Blink Inc.</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - present</p>
</div>
</div>
<!-- Education -->
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title font-weight-bold mb-3 text-center">Education</h4>
<h5 class="card-title font-weight-bold mb-0">Bachelor's Degree in Computer Science</h5>
<p class="card-text mb-2 text-muted">University of Berkley</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - July 2024</p>
<hr>
<h5 class="card-title font-weight-bold mb-0">Bachelor's Degree in Computer Science</h5>
<p class="card-text mb-2 text-muted">University of Berkley</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - July 2024</p>
<hr>
<h5 class="card-title font-weight-bold mb-0">Bachelor's Degree in Computer Science</h5>
<p class="card-text mb-2 text-muted">University of Berkley</p>
<p class="card-text mb-2 text-muted">Sint fuga et eligendi at sint sequi. Odio dolorum aperiam consectetur
minima voluptatem. Eligendi adipisci earum ut officia. Aperiam laboriosam consequatur aut repudiandae nam
et. Est hic perspiciatis minus molestias delectus.
Eos suscipit quia similique qui suscipit cum sequi similique. Assumenda rem quis quidem velit. In ut a sed
sit blanditiis. Eaque ipsum placeat aut ut aspernatur provident et aut.</p>
<p class="card-text mb-2 text-muted" style="text-align: center;">February 2020 - July 2024</p>
</div>
</div>
<!-- Skills -->
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title font-weight-bold mb-3 text-center">Skills</h4>
<p class="mb-1" style="font-size: .77rem;">Web Design</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</section>
<section>
<h2>Education</h2>
<div class="education">
<h3>Bachelor of Science in Computer Science</h3>
<p>XYZ University: 2016-2020</p>
<p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%" aria-valuenow="72" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</section>
<footer>
<p id="email">Email: john.doe@example.com</p>
</footer>
<p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%" aria-valuenow="66" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/constants.js"></script>
<script src="../js/utils.js"></script>
<script src="../../js/constants.js"></script>
<script src="../../js/utils.js"></script>
<script>
window.addEventListener("load", async function () {
loadProfile();
});
<script>
window.addEventListener("load", async function () {
loadProfile();
async function loadProfile() {
const idToDisplay = new URLSearchParams(window.location.search).get('id');
let response;
// If it is the logged-in person
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)
});
} else {
response = await fetch(`${API_URL}/persons/${idToDisplay}/details`, {
headers: createHeaders(null)
});
}
async function loadProfile() {
const data = await response.json();
if (response.ok) {
populateFields(data.display_name, data.email, data.about_me, data.qualification, data.place_of_living);
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}`);
}
}
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>
function populateFields(displayName, email, aboutMe, qualification, placeOfLiving) {
document.getElementById('display-name').textContent = displayName;
document.title = `${displayName} - Blink`
document.getElementById('email').textContent = email;
document.getElementById('about-me').textContent = aboutMe;
document.getElementById('qualification').textContent = qualification;
document.getElementById('place-of-living').textContent = placeOfLiving;
}
</script>
</body>