blink/frontend/vanilla/html/userprofile.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>
add profile page 2024-02-20 22:16:54 +01:00			`<!DOCTYPE html>`
			`<html lang="en">`
beautified 2024-03-04 16:49:36 +01:00
add profile page 2024-02-20 22:16:54 +01:00			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Update userprofile.html 2024-02-28 16:04:00 +01:00			`<title>Page Title</title>`
add profile page 2024-02-20 22:16:54 +01:00			`<link rel="stylesheet" href="../css/profile.css">`
add topnav 2024-03-20 16:40:35 +01:00			`<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">`
add profile page 2024-02-20 22:16:54 +01:00			`</head>`
beautified 2024-03-04 16:49:36 +01:00
Update userprofile.html 2024-03-21 08:41:25 +01:00			`<body style="display: none;">`
add topnav 2024-03-20 16:40:35 +01:00			`<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>`

fix 2024-03-21 09:36:16 +01:00			`<div class="container">`
update 2024-02-29 15:10:57 +01:00			`<div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div>`
add profile page 2024-02-20 22:16:54 +01:00			`<header>`
			`<img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture">`
login and my profile 2024-02-28 15:51:21 +01:00			`<h1 id="displayName">Name Surname</h1>`
Add qualification 2024-03-04 15:28:10 +01:00			`<p id="qualification">Title</p>`
add profile page 2024-02-20 22:16:54 +01:00			`</header>`
			`<section>`
			`<h2>About Me</h2>`
Add about me 2024-03-04 15:15:09 +01:00			`<p id="aboutMe">About me</p>`
add profile page 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>`
login and my profile 2024-02-28 15:51:21 +01:00			`<p id="email">Email: john.doe@example.com</p>`
add profile page 2024-02-20 22:16:54 +01:00			`</footer>`
			`</div>`
login and my profile 2024-02-28 15:51:21 +01:00
			`<script src="../js/constants.js"></script>`
			`<script src="../js/utils.js"></script>`

			`<script>`
beautified 2024-03-04 16:49:36 +01:00			`window.addEventListener("load", async function () {`
Show organization 2024-02-29 12:20:08 +01:00			`loadProfile();`
login and my profile 2024-02-28 15:51:21 +01:00			`});`

beautified 2024-03-04 16:49:36 +01:00			`async function loadProfile() {`

login and my profile 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`
Following API best practices 2024-03-06 10:19:37 +01:00			`if (!idToDisplay \|\| idToDisplay === 'me') {`
login and my profile 2024-02-28 15:51:21 +01:00			`const token = getCookie('token');`
			`// Check whether the token exists`
beautified 2024-03-04 16:49:36 +01:00			`if (!token) {`
login and my profile 2024-02-28 15:51:21 +01:00			`window.location.href = 'login.html';`
			`}`
Following API best practices 2024-03-06 10:19:37 +01:00			response = await fetch(`${API_URL}/persons/me`, {
update HTML for Bearer token update 2024-03-21 17:34:16 +01:00			`headers: createHeaders(token)`
login and my profile 2024-02-28 15:51:21 +01:00			`});`
Update userprofile.html 2024-03-21 08:41:25 +01:00			`document.getElementById('editBadge').style.display = 'block'; // show edit button`
beautified 2024-03-04 16:49:36 +01:00			`} else {`
Following API best practices 2024-03-06 10:19:37 +01:00			response = await fetch(`${API_URL}/persons/${idToDisplay}/details`, {
update HTML for Bearer token update 2024-03-21 17:34:16 +01:00			`headers: createHeaders(null)`
login and my profile 2024-02-28 15:51:21 +01:00			`});`
			`}`

			`const data = await response.json();`
beautified 2024-03-04 16:49:36 +01:00			`if (response.ok) {`
Add qualification 2024-03-04 15:28:10 +01:00			`populateFields(data.display_name, data.email, data.about_me, data.qualification);`
Update userprofile.html 2024-03-21 08:41:25 +01:00			`document.body.style.display = 'block'; // Show page`
beautified 2024-03-04 16:49:36 +01:00			`} else if (response.status == 401) {`
update frontend javascript 2024-03-04 09:22:33 +01:00			`window.location.href = 'login.html';`
beautified 2024-03-04 16:49:36 +01:00			`} else {`
update frontend javascript 2024-03-04 09:22:33 +01:00			alert(`Unable to load profile. Error: ${data.error}`);
Update userprofile.html 2024-02-28 16:04:00 +01:00			`}`
login and my profile 2024-02-28 15:51:21 +01:00			`}`

beautified 2024-03-04 16:49:36 +01:00			`function populateFields(displayName, email, aboutMe, qualification) {`
login and my profile 2024-02-28 15:51:21 +01:00			`document.getElementById('displayName').textContent = displayName;`
Update userprofile.html 2024-02-28 16:04:00 +01:00			document.title = `${displayName} - Blink`
login and my profile 2024-02-28 15:51:21 +01:00			`document.getElementById('email').textContent = email;`
Add about me 2024-03-04 15:15:09 +01:00			`document.getElementById('aboutMe').textContent = aboutMe;`
Add qualification 2024-03-04 15:28:10 +01:00			`document.getElementById('qualification').textContent = qualification;`
login and my profile 2024-02-28 15:51:21 +01:00			`}`

beautified 2024-03-04 16:49:36 +01:00			`function editProfile() {`
update 2024-02-29 15:10:57 +01:00			`alert('Editing');`
			`}`
add topnav 2024-03-20 16:40:35 +01:00
Update userprofile.html 2024-03-21 08:41:25 +01:00			`function onSearchButtonClick() {`
add topnav 2024-03-20 16:40:35 +01:00			`alert('Searching for something...');`
			`}`
login and my profile 2024-02-28 15:51:21 +01:00			`</script>`

add profile page 2024-02-20 22:16:54 +01:00			`</body>`

beautified 2024-03-04 16:49:36 +01:00			`</html>`