Scribd
Upload
4 views41 pages

MyAccount HTML

The document is an HTML template for a user account page, featuring a structured layout with styles for modals, forms, and buttons. It includes CSS for responsive design, ensuring compatibility across devices, and styles for various UI elements like headers, columns, and buttons. The document also incorporates animations and hover effects to enhance user interaction.

Uploaded by

Steph
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views41 pages

MyAccount HTML

The document is an HTML template for a user account page, featuring a structured layout with styles for modals, forms, and buttons. It includes CSS for responsive design, ensuring compatibility across devices, and styles for various UI elements like headers, columns, and buttons. The document also incorporates animations and hover effects to enhance user interaction.

Uploaded by

Steph
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Account</title>
<link rel="stylesheet" href="[Link]" />
<link rel="stylesheet" href="[Link]" />
<link rel="stylesheet"
href="[Link]
<style>/*
==================================================
========================
Base Styles

==================================================
======================== */

/* [Link] */

.modal-overlay {
display: none; /* This hides it on page load */
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-window {
background: #fff;
border-radius: 12px;
width: 90%;
max-width: 400px;
padding: 30px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
animation: slideUp 0.3s ease-out;
position: relative;
text-align: left;
}

@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

.close-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}

.modal-window form {
display: flex;
flex-direction: column;
}

.modal-window label {
margin-top: 10px;
font-weight: bold;
font-size: 14px;
}

.modal-window input {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 6px;
}

.submit-button {
margin-top: 20px;
padding: 12px;
background: #ffa500;
border: none;
border-radius: 6px;
font-weight: bold;
color: #000;
cursor: pointer;
transition: background 0.3s ease;
}

.submit-button:hover {
background: #ffb733;
}
.message {
margin-bottom: 1rem;
font-size: 0.95rem;
padding: 0.5rem;
border-radius: 5px;
display: block;
text-align: center;
}

.[Link] {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}

.[Link] {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

/* Style for the confirmation modal */


#confirmModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Transparent background */
z-index: 1000; /* On top of other elements */
}

.modal-window {
background-color: white;
padding: 20px;
width: 300px;
margin: 100px auto;
border-radius: 8px;
text-align: left;
}

.confirm-buttons {
display: flex;
justify-content: center;
gap: 10px; /* Space between buttons */
}

.confirm-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
width: 90px; /* Equal width for both buttons */
}

.confirm-button:hover {
background-color: #f0f0f0;
}

#confirmYes {
background-color: #4CAF50; /* Green for 'Yes' */
color: white;
}

#confirmNo {
background-color: #f44336; /* Red for 'No' */
color: white;
}

#confirmYes:hover {
background-color: #45a049;
}

#confirmNo:hover {
background-color: #e32e2b;
}

body {
font-family: sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #d9d9d9; /* Page background */
}

/*
==================================================
========================
Header Styles

==================================================
======================== */

header {
padding-top: 10px;
width: 95%;
max-width: 1700px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
color: #060644;
}

.header-left {
text-align: left;
font-size: larger;
}

.header-left h1 {
margin-bottom: 5px;
}

.header-right button {
padding: 10px 15px;
margin-left: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.header-right .cancel-button {
background-color: transparent; /* Transparent background */
color: #ffa500; /* Orange text color */
border: 1px solid #ffa500; /* Orange border */
}

.header-right .save-button {
background-color: #ffa500; /* Solid orange background */
color: #000; /* Black text color */
border: none; /* Remove default border */
}

/*
==================================================
========================
Main Content Styles

==================================================
======================== */
main {
background-color: #ffffff; /* Main content background */
border-radius: 50px;
width: 95%;
max-width: 1700px;
margin-top: 0;
display: flex;
gap: 20px;
}

/*
==================================================
========================
Left Column Styles

==================================================
======================== */

.left-column {
flex: 0.6;
padding: 20px;
border-radius: 50px;
background-color: #060644; /* Blue background */
}

.profile-section {
text-align: center;
margin-top: 10px;
margin-bottom: 130px;
}
.profile-image {
width: 200px; /* Or your desired size */
height: 200px; /* Or your desired size */
border-radius: 50%;
overflow: hidden; /* This is crucial to clip the image */
margin: 0 auto 10px;
}

/* Add this rule to style the image inside the container */


.profile-image img {
display: block; /* To prevent extra spacing below the image */
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the circle without distortion */
}

.account-name {
font-size: 30px;
margin-bottom: 5px;
color: #fff;
}

.left-column .username {
color: #999;
margin-top: 0px;
}

/* Left Column Action Buttons */


.left-column .actions {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}

.left-column .actions button {


display: block;
width: 100%;
padding: 10px 15px;
border: 1px solid #060644;
border-radius: 5px;
cursor: pointer;
text-align: left;
background-color: #060644;
color: #fff;
transition: border-color 0.3s ease;
font-size: 1em;
}

.left-column .actions button:hover {


border-color: #fff;
}

.edit-profile-button {
margin-bottom: 10px;
}

.left-column .change-password-button {
color: #6c757d;
padding-left: 15px;
margin-bottom: 120px;
}

/* Left Column Button Icons */


.left-column .actions button [Link]-img {
width: 40px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
padding-left: 10px;
}

/*
==================================================
========================
Right Column Styles

==================================================
======================== */

.right-column {
flex: 3;
padding: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #ffffff; /* White background */
border-radius: 10px;
box-sizing: border-box;
}
.right-column h1 {
margin-top: 0%;
color: #060644; /* Set color for "My Account" */
}

.right-column h2 {
font-size: 90px;
margin-bottom: 20px;
align-self: flex-start;
}

.user-info-header {
display: flex;
align-items: center;
margin-bottom: 20px;
width: 100%;
justify-content: flex-start;
}

/* Small Profile Image Container (NEW) */


.small-profile-image-container {
position: relative; /* ADDED THIS LINE */
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background-color: #ccc;
margin-right: 20px;
}
.small-profile-image-container img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Static Camera Icon (NEW) */


.camera-icon-static {
position: absolute;
bottom: 23px; /* Ensure units are included */
right: 36px; /* Ensure units are included */
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px;
border-radius: 50%;
font-size: 1em;
z-index: 1;
}

.camera-icon-static img {
width: 1em;
height: 1em;
vertical-align: middle;
}

.user-info-right {
display: flex;
align-items: center;
gap: 20px;
}

/* Right Column Button Group */


.button-group {
display: flex;
gap: 10px;
align-items: center;
margin-left: 10px;
}

.button-group button {
padding: 10px 15px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.button-group .upload-photo-button {
background-color: #ffa500;
background-image: linear-gradient(to right, #ffa500, #ffc107);
color: #000;
}

.button-group .cancel-button-small {
background-color: transparent;
color: #ffa500;
border: 1px solid #ffa500;
}
/*
==================================================
========================
Form Styles

==================================================
======================== */

.form-fields {
margin-top: 20px;
width: 100%;
box-sizing: border-box;
}

.form-fields .form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
width: 100%;
}

.form-fields .form-group {
flex: 1 1 0;
min-width: 250px;
display: flex;
flex-direction: column;
}

.form-fields label {
margin-bottom: 3px;
font-weight: bold;
font-size: 22px;
color: #7c7c78; /* Form label color */
}

.form-fields input[type="text"],
.form-fields input[type="email"],
.form-fields input[type="password"] {
padding: 20px;
font-size: 20px;
width: 100%;
border-radius: 6px;
box-sizing: border-box;
font-size: 16;
margin-bottom: 20px;
color: #060644; /* Form input text color */
border: 1px solid #060644; /* Form input border color */
min-height: 48px; /* Optional min-height */
}

/* Wider single input fields */


.form-fields > .form-group {
width: 100%;
}

/*
==================================================
========================
General Button Styles (applied in multiple sections)
==================================================
======================== */

.cancel-button,
.upload-photo-button,
.cancel-button-small {
padding: 10px 20px;
font-size: 20px;
}

.save-button {
background-color: #ffa500;
background-image: linear-gradient(to right, #ffa500, #ffc107);
color: #000;
border: none;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
transition: background-image 0.3s ease;
}

.small-profile-image-container {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background-color: #ccc;
margin-right: 20px;
}

/* This is the half-circle camera overlay */


.camera-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: rgba(0, 0, 0, 0.3); /* transparent background only */
}

.camera-overlay img {
width: 23px;
height: 23px;

/* Assuming the link is inside a div with a specific class or ID in the sidebar */
.left-column .create-account-container { /* Adjust selector if needed */
display: flex;
justify-content: center;
padding: 10px 0;
width: 100%; /* Very important for centering within the available space */
}

#createAccountLink {
text-decoration: underline;
cursor: pointer;
color: #fff;
/* Ensure it's not taking up block-level width that could push other elements */
display: inline-block; /* Or inline */
padding: 0;
margin: 0;
}

#createAccountLink:hover {
text-decoration: none;
}

#notificationModal .modal-window {
text-align: center;
padding: 30px;
}

#notificationMessage {
margin-bottom: 20px;
font-size: 1.2em;
}

/* Style for the confirmation modal */


#confirmModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Transparent background */
z-index: 1000; /* On top of other elements */
}

.modal-window {
background-color: white;
padding: 20px;
width: 300px;
margin: 100px auto;
border-radius: 8px;
text-align: center;
}

.confirm-buttons {
display: flex;
justify-content: flex-end; /* Align buttons to the right */
gap: 10px; /* Space between buttons */
}

.confirm-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.confirm-button:hover {
background-color: #f0f0f0;
}

/* No button: smaller and positioned on the left */


.confirm-no {
background-color: #f44336; /* Red for 'No' */
color: white;
font-size: 14px; /* Smaller font size */
padding: 8px 15px; /* Smaller padding */
flex-shrink: 0; /* Prevent shrinking */
}

/* Yes button: positioned on the right */


.confirm-yes {
background-color: #4CAF50; /* Green for 'Yes' */
color: white;
flex-shrink: 0; /* Prevent shrinking */
}

.confirm-no:hover {
background-color: #e32e2b;
}

.confirm-yes:hover {
background-color: #45a049;
}

@media screen and (max-width: 768px) {


main {
flex-direction: column;
padding: 10px;
}

.left-column,
.right-column {
width: 100%;
border-radius: 30px;
padding: 15px;
}

.user-info-header {
flex-direction: column;
align-items: center;
}

.button-group {
flex-direction: column;
align-items: center;
}

header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}

/* Input error border */


input:invalid {
border: 2px solid red;
}

input:valid {
border: 1px solid #060644;
}
.top-buttons {
position: absolute;
top: 20px;
right: 20px;
}

.top-buttons button {
margin-left: 10px;
padding: 8px 16px;
border: none;
background-color: #007BFF;
color: white;
border-radius: 4px;
cursor: pointer;
}

.top-buttons button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<div class="header-left">
<h1>My Account</h1>
<p class="subheading">Update your general information and manage your
account settings.</p>
</div>
<div class="header-right">
<button class="cancel-button">Cancel</button>
<button class="save-button">Save Changes</button>
</div>
</header>

<div class="top-buttons">
<button id="exitButton">Exit</button>
<button id="logoutButton">Logout</button>
</div>

<main>
<div class="left-column">
<div class="profile-section">
<div class="profile-image">
<img src="sidebar-icon/[Link]" alt="Big Profile Picture">
</div>
<h2 class="account-name"><?php echo $firstName . " " . $lastName;
?></h2>
<p class="username">@<?php echo $username; ?></p>
</div>
<div class="actions">
<button class="change-password-button" id="openModal">
<img src="sidebar-icon/[Link]" alt="Change Password"
class="icon-img">Update Password
</button>
</div>
<div class="create-account-container">
<div id="createAccountLink">Create New Account</div>
</div>
</div>
<div class="right-column">
<h1>General Information</h1>
<div class="user-info-header">
<div class="small-profile-image-container">
<img src="sidebar-icon/[Link]" alt="Small Profile Picture"
id="smallProfileImage">
<div class="camera-overlay">
<img src="sidebar-icon/[Link]" alt="Edit Profile Picture">
</div>
</div>
<div class="user-info-right">
<div class="button-group">
<input type="file" id="imageInput" style="display: none;">
<button class="upload-photo-button"
onclick="[Link]('imageInput').click();">Upload New
Photo</button>
<button class="cancel-button-small">Cancel Upload</button>
</div>
</div>
</div>

<div class="form-fields">
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="First Name"
value="<?php echo $firstName; ?>">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Last Name"
value="<?php echo $lastName; ?>">
</div>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username" value="<?
php echo $username; ?>">
</div>
<div class="form-group">
<label for="role">Role/s</label>
<input type="text" id="role" placeholder="Role" value="<?php echo
$roleName; ?>" readonly>
</div>
</div>
<input type="hidden" id="userId" value="<?php echo $userId; ?>">
</div>
</main>
<!-- Change Password Modal -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal-window">
<button class="close-modal" id="closeModal">&times;</button>
<h2>Change Password</h2>
<form>
<label for="current">Current Password</label>
<input type="password" id="current" placeholder="Current Password"
required>

<label for="new">New Password</label>


<input type="password" id="new" placeholder="New Password" required>

<label for="confirm">Confirm New Password</label>


<input type="password" id="confirm" placeholder="Re-type Password"
required>

<button type="submit" class="submit-button">Save Password</button>


</form>
</div>
</div>

<!-- Create New Account Modal -->


<div class="modal-overlay" id="createAccountModalOverlay">
<div class="modal-window">
<button class="close-modal" id="closeCreateAccountModal">&times;</button>
<h2>Create New Account</h2>
<form id="createAccountForm">
<label for="newFirstName">First Name</label>
<input type="text" id="newFirstName" placeholder="Enter First Name"
required>

<label for="newLastName">Last Name</label>


<input type="text " id="newLastName" placeholder="Enter Last Name"
required>
<label for="newUsername">Username</label>
<input type="text" id="newUsername" placeholder="Enter Username"
required>

<label for="newPassword">Password</label>
<input type="password" id="newPassword" placeholder="Enter Password"
required>

<label for="newRole">Role</label>
<select id="newRole" required>
<option value="Admin">Admin</option>
<option value="Employee">Employee</option>
</select>

<button type="submit" class="submit-button">Create Account</button>


</form>
</div>
</div>

<!-- Notification Modal -->


<div class="modal-overlay" id="notificationModal" style="display: none;">
<div class="modal-window">
<h3 id="notificationMessage">This is a notification</h3>
<button class="submit-button" id="closeNotification">OK</button>
</div>
</div>

<!-- Confirmation Modal -->


<div class="modal-overlay" id="confirmModal" style="display: none;">
<div class="modal-window">
<h3 id="confirmMessage">Are you sure?</h3>
<div style="display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;">
<button id="confirmNo" class="confirm-button confirm-no">No</button>
<button id="confirmYes" class="confirm-button confirm-yes">Yes</button>
</div>
</div>
</div>

<script src="[Link]"></script>

<script>
[Link]("DOMContentLoaded", () => {
const showNotification = (message) => {
const modal = [Link]("notificationModal");
const msg = [Link]("notificationMessage");
[Link] = message;
[Link] = "flex";
};

const closeNotificationBtn = [Link]("closeNotification");


if (closeNotificationBtn) {
[Link]("click", () => {
[Link]("notificationModal").[Link] = "none";
});
}

// --- Change Password Modal ---


const openModalBtn = [Link]("openModal");
const modalOverlay = [Link]("modalOverlay");
const closeModalBtn = [Link]("closeModal");
const form = [Link]("form");
const newPass = [Link]("new");
const confirmPass = [Link]("confirm");
const currentPass = [Link]("current");

if (openModalBtn) {
[Link]("click", () => {
[Link] = "flex";
});
}

if (closeModalBtn) {
[Link]("click", () => {
[Link] = "none";
if (form) [Link]();
});
}

if (modalOverlay) {
[Link]("click", (e) => {
if ([Link] === modalOverlay) {
[Link] = "none";
if (form) [Link]();
}
});
}

if (form) {
[Link]("submit", (e) => {
[Link]();
if ([Link] < 8) {
showNotification("New password must be at least 8 characters long.");
return;
}
if ([Link] !== [Link]) {
showNotification("New password and confirmation do not match.");
return;
}

const formData = new FormData();


[Link]("action", "change_password");
[Link]("currentPassword", [Link]);
[Link]("newPassword", [Link]);
[Link]("userId", [Link]("userId").value);

fetch("", {
method: "POST",
body: formData,
})
.then((response) => {
if (![Link]) throw new Error(`HTTP error! status: $
{[Link]}`);
return [Link]();
})
.then((data) => {
if ([Link]) {
showNotification([Link]);
[Link] = "none";
[Link]();
} else {
showNotification([Link]);
}
})
.catch((error) => {
showNotification("An error occurred while changing the password: " +
[Link]);
});
});
}

// --- Create New Account Modal ---


const openCreateAccountModalBtn =
[Link]("createAccountLink");
const createAccountModalOverlay =
[Link]("createAccountModalOverlay");
const closeCreateAccountModalBtn =
[Link]("closeCreateAccountModal");
const createAccountForm = [Link]("createAccountForm");

if (openCreateAccountModalBtn) {
[Link]("click", () => {
[Link] = "flex";
});
}

if (closeCreateAccountModalBtn) {
[Link]("click", () => {
[Link] = "none";
if (createAccountForm) [Link]();
});
}
if (createAccountModalOverlay) {
[Link]("click", (e) => {
if ([Link] === createAccountModalOverlay) {
[Link] = "none";
if (createAccountForm) [Link]();
}
});
}

if (createAccountForm) {
[Link]("submit", (e) => {
[Link]();
const newFirstName = [Link]("newFirstName").value;
const newLastName = [Link]("newLastName").value;
const newUsername = [Link]("newUsername").value;
const newPassword = [Link]("newPassword").value;
const newRole = [Link]("newRole").value;

if (!newFirstName || !newLastName || !newUsername || !newPassword || !


newRole) {
showNotification("All fields are required to create a new account.");
return;
}

if ([Link] < 8) {
showNotification("Password must be at least 8 characters long.");
return;
}
const formData = new FormData();
[Link]("action", "create_account");
[Link]("newFirstName", newFirstName);
[Link]("newLastName", newLastName);
[Link]("newUsername", newUsername);
[Link]("newPassword", newPassword);
[Link]("newRole", newRole);

fetch("", {
method: "POST",
body: formData,
})
.then((response) => {
if (![Link]) throw new Error(`HTTP error! status: $
{[Link]}`);
return [Link]();
})
.then((data) => {
if ([Link]) {
showNotification([Link]);
[Link] = "none";
[Link]();
} else {
showNotification([Link]);
}
})
.catch((error) => {
showNotification("An error occurred while creating the account: " +
[Link]);
});
});
}

// --- Profile Photo Upload ---


const profileImage = [Link](".profile-image img");
const smallProfileImage = [Link](".small-profile-image-
container img");
const uploadPhotoButton = [Link](".upload-photo-button");
const cancelUploadButton = [Link](".cancel-button-small");
const imageInput = [Link]("imageInput");
const userIdInput = [Link]("userId");

let selectedImageData = null;


let originalSmallImageSrc = [Link];

if (uploadPhotoButton && imageInput) {


[Link]("click", (event) => {
[Link]();
[Link]();
});

[Link]("change", () => {
const file = [Link][0];
if (file) {
const reader = new FileReader();
[Link] = (e) => {
[Link] = [Link];
[Link] = [Link];
selectedImageData = [Link](",")[1];
};
[Link](file);
} else {
selectedImageData = null;
}
});
}

const showConfirm = (message, callback) => {


const confirmModal = [Link]("confirmModal");
const confirmMessage = [Link]("confirmMessage");
const confirmYesBtn = [Link]("confirmYes");
const confirmNoBtn = [Link]("confirmNo");

[Link] = message;
[Link] = "flex";

const yesHandler = () => {


[Link] = "none";
callback();
[Link]("click", yesHandler);
[Link]("click", noHandler);
};

const noHandler = () => {


[Link] = "none";
[Link]("click", yesHandler);
[Link]("click", noHandler);
};

[Link]("click", yesHandler);
[Link]("click", noHandler);
};

if (cancelUploadButton) {
[Link]("click", () => {
showConfirm("Cancel photo upload and revert to previous image?", () => {
[Link] = [Link] || [Link];
[Link] = [Link] ||
originalSmallImageSrc;
[Link] = "";
selectedImageData = null;
});
});
}

// --- Save / Cancel General Info ---


const saveButton = [Link](".save-button");
const cancelButton = [Link](".cancel-button");

const firstNameInput = [Link]("firstName");


const lastNameInput = [Link]("lastName");
const usernameInput = [Link]("username");
const roleInput = [Link]("role");

let originalFirstName = [Link];


let originalLastName = [Link];
let originalUsername = [Link];
let originalRole = [Link];
let originalImageSrc = [Link];
let originalSmallImageSrcOnLoad = [Link];
if (!originalSmallImageSrc) {
originalSmallImageSrc = originalSmallImageSrcOnLoad;
}

if (saveButton) {
[Link]("click", () => {
showConfirm("Save changes to your profile?", () => {
const formData = new FormData();
[Link]("action", "save_profile");
[Link]("userId", [Link]);
[Link]("firstName", [Link]);
[Link]("lastName", [Link]);
[Link]("username", [Link]);

if (selectedImageData) {
[Link]("profileImage", selectedImageData);
}

fetch("", {
method: "POST",
body: formData,
})
.then((response) => {
if (![Link]) throw new Error(`HTTP error! status: $
{[Link]}`);
return [Link]();
})
.then((responseText) => {
try {
const data = [Link](responseText);
if (data && [Link] === true) {
originalFirstName = [Link];
originalLastName = [Link];
originalUsername = [Link];
originalImageSrc = [Link];
originalSmallImageSrc = [Link];
[Link] = [Link];
[Link] = [Link];
showNotification([Link]);
} else {
showNotification(data ? [Link] : "An error occurred while
saving.");
}
} catch (error) {
showNotification("An error occurred: Invalid server response.");
}
})
.catch((error) => {
showNotification("An error occurred while saving: " + [Link]);
});
});
});
}

if (cancelButton) {
[Link]("click", () => {
showConfirm("Are you sure you want to cancel your changes?", () => {
[Link] = originalFirstName;
[Link] = originalLastName;
[Link] = originalUsername;
[Link] = originalRole;
[Link] = originalImageSrc;
[Link] = originalSmallImageSrc;
[Link] = "";
selectedImageData = null;
});
});
}
});

[Link]("exitButton").addEventListener("click", () => {
[Link] = "[Link]"; // Go to dashboard
});

[Link]("logoutButton").addEventListener("click", () => {
[Link] = "[Link]"; // Go to login page
});
</script>

</body>
</html>

You might also like