685 lines
24 KiB
Plaintext
685 lines
24 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DocVA Client | Profile</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/public/css/dashboard.css">
|
|
<style>
|
|
.profile-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.profile-header {
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #e1e5e9;
|
|
}
|
|
|
|
.profile-title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin: 0;
|
|
}
|
|
|
|
.profile-sections {
|
|
display: grid;
|
|
gap: 30px;
|
|
}
|
|
|
|
.profile-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #e1e5e9;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #e1e5e9;
|
|
}
|
|
|
|
.section-icon {
|
|
font-size: 1.5rem;
|
|
color: #4299e1;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 500;
|
|
color: #4a5568;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-input {
|
|
padding: 12px;
|
|
border: 1px solid #e1e5e9;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
background: #f7fafc;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.empty-field {
|
|
color: #a0aec0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.password-section {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.change-password-btn {
|
|
background: #4299e1;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.change-password-btn:hover {
|
|
background: #3182ce;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px;
|
|
border-bottom: 1px solid #e1e5e9;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
color: #718096;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: #f7fafc;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.modal-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.modal-form .form-group {
|
|
gap: 8px;
|
|
}
|
|
|
|
.modal-form .form-label {
|
|
font-weight: 500;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.modal-form .form-input {
|
|
padding: 12px;
|
|
border: 1px solid #cbd5e0;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
background: white;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.modal-form .form-input:focus {
|
|
outline: none;
|
|
border-color: #4299e1;
|
|
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
|
|
}
|
|
|
|
.modal-form .form-input.error {
|
|
border-color: #e53e3e;
|
|
}
|
|
|
|
.error-message {
|
|
color: #e53e3e;
|
|
font-size: 0.875rem;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.success-message {
|
|
color: #38a169;
|
|
font-size: 0.875rem;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: flex-end;
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e1e5e9;
|
|
}
|
|
|
|
.save-btn {
|
|
background: #48bb78;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
background: #38a169;
|
|
}
|
|
|
|
.save-btn:disabled {
|
|
background: #a0aec0;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background: #e53e3e;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.cancel-btn:hover {
|
|
background: #c53030;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.modal-actions {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="dashboard-body">
|
|
<div id="root">
|
|
<nav class="dashboard-header">
|
|
<div class="header-content">
|
|
<div class="header-logo">
|
|
<div class="logo-container">
|
|
<h2 class="sidebar-title">DocVA Client Portal</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-nav">
|
|
<ul class="nav-list">
|
|
<li class="nav-item">
|
|
<a href="/client/dashboard" class="nav-button">
|
|
<i class="fas fa-chart-bar"></i>Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/client/virtual-assistants" class="nav-button">
|
|
<i class="fas fa-users"></i>Virtual Assistants
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/client/projects" class="nav-button">
|
|
<i class="fas fa-file-invoice"></i>Projects
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<button class="mobile-menu-button">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="dashboard-container">
|
|
<aside class="dashboard-sidebar">
|
|
<nav class="sidebar-nav">
|
|
<ul class="sidebar-list">
|
|
<li class="sidebar-item">
|
|
<a href="/client/dashboard" class="sidebar-link">
|
|
<i class="fas fa-chart-bar sidebar-icon"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/virtual-assistants" class="sidebar-link">
|
|
<i class="fas fa-users sidebar-icon"></i>
|
|
<span>Virtual Assistants</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/projects" class="sidebar-link">
|
|
<i class="fas fa-file-invoice sidebar-icon"></i>
|
|
<span>Projects</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/profile" class="sidebar-link active">
|
|
<i class="fas fa-user sidebar-icon"></i>
|
|
<span>Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="javascript:void(0);" class="sidebar-link" id="logoutButton">
|
|
<i class="fas fa-sign-out-alt sidebar-icon"></i>
|
|
<span>Logout</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
<main class="dashboard-main">
|
|
<div class="dashboard-content">
|
|
<div class="profile-container">
|
|
<div class="profile-header">
|
|
<h1 class="profile-title">Client Profile</h1>
|
|
</div>
|
|
|
|
<div class="profile-sections">
|
|
<!-- Personal Information -->
|
|
<div class="profile-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-user section-icon"></i>
|
|
<h2 class="section-title">Personal Information</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Full Name</label>
|
|
<input type="text" class="form-input" id="name" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input type="email" class="form-input" id="email" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Position</label>
|
|
<input type="text" class="form-input" id="position" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div class="profile-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-home section-icon"></i>
|
|
<h2 class="section-title">Address Information</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Address</label>
|
|
<input type="text" class="form-input" id="address" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">City</label>
|
|
<input type="text" class="form-input" id="city" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">State</label>
|
|
<input type="text" class="form-input" id="state" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">ZIP Code</label>
|
|
<input type="text" class="form-input" id="zip" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Change Section -->
|
|
<div class="profile-section">
|
|
<div class="password-section">
|
|
<button class="change-password-btn" id="changePasswordBtn">
|
|
<i class="fas fa-lock"></i>
|
|
Change Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Change Password Modal -->
|
|
<div id="passwordModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Change Password</h2>
|
|
<button class="modal-close" onclick="closePasswordModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="modal-form" id="passwordForm">
|
|
<div class="form-group">
|
|
<label class="form-label">Current Password</label>
|
|
<input type="password" class="form-input" id="currentPassword" required>
|
|
<div class="error-message" id="currentPasswordError"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">New Password</label>
|
|
<input type="password" class="form-input" id="newPassword" required>
|
|
<div class="error-message" id="newPasswordError"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Confirm New Password</label>
|
|
<input type="password" class="form-input" id="confirmPassword" required>
|
|
<div class="error-message" id="confirmPasswordError"></div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="cancel-btn" onclick="closePasswordModal()">Cancel</button>
|
|
<button type="submit" class="save-btn" id="savePasswordBtn">Change Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// API base URL
|
|
const API_BASE = '/api/v1/client';
|
|
|
|
// Auth token management
|
|
function getAuthToken() {
|
|
return localStorage.getItem('knoptpq');
|
|
}
|
|
|
|
async function fetchWithAuth(url, options = {}) {
|
|
const token = getAuthToken();
|
|
if (!token) {
|
|
window.location.href = '/client/login';
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(url, {
|
|
...options,
|
|
headers: {
|
|
'token': `${token}`,
|
|
'Content-Type': 'application/json',
|
|
...options.headers,
|
|
}
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
localStorage.removeItem('knoptpq');
|
|
localStorage.removeItem('refreshToken');
|
|
window.location.href = '/client/login';
|
|
return;
|
|
}
|
|
|
|
return response;
|
|
}
|
|
|
|
async function handleLogout() {
|
|
try {
|
|
await fetchWithAuth(`${API_BASE}/logout`, { method: 'POST' });
|
|
} catch (error) {
|
|
console.error('Logout API error:', error);
|
|
} finally {
|
|
localStorage.removeItem('knoptpq');
|
|
localStorage.removeItem('refreshToken');
|
|
window.location.href = '/client/login';
|
|
}
|
|
}
|
|
|
|
// Format empty fields
|
|
function formatEmptyFields() {
|
|
const inputs = document.querySelectorAll('.form-input');
|
|
inputs.forEach(input => {
|
|
if (!input.value.trim()) {
|
|
input.value = 'Not provided';
|
|
input.classList.add('empty-field');
|
|
} else {
|
|
input.classList.remove('empty-field');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Load profile data
|
|
async function loadProfileData() {
|
|
try {
|
|
const response = await fetchWithAuth(`${API_BASE}/profile`);
|
|
if (!response) return;
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const data = result.data;
|
|
|
|
// Populate only personal and address information
|
|
const fieldsToShow = ['name', 'email', 'position', 'address', 'city', 'state', 'zip'];
|
|
|
|
fieldsToShow.forEach(key => {
|
|
const element = document.getElementById(key);
|
|
if (element && data[key]) {
|
|
element.value = data[key];
|
|
}
|
|
});
|
|
|
|
formatEmptyFields();
|
|
|
|
} else {
|
|
console.error('Failed to load profile data:', result.message);
|
|
alert('Failed to load profile data');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading profile data:', error);
|
|
alert('Error loading profile data');
|
|
}
|
|
}
|
|
|
|
// Password Modal Functions
|
|
function openPasswordModal() {
|
|
const modal = document.getElementById('passwordModal');
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Clear form
|
|
document.getElementById('passwordForm').reset();
|
|
clearErrorMessages();
|
|
}
|
|
|
|
function closePasswordModal() {
|
|
const modal = document.getElementById('passwordModal');
|
|
modal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
|
|
// Clear form and errors
|
|
document.getElementById('passwordForm').reset();
|
|
clearErrorMessages();
|
|
}
|
|
|
|
function clearErrorMessages() {
|
|
document.getElementById('currentPasswordError').textContent = '';
|
|
document.getElementById('newPasswordError').textContent = '';
|
|
document.getElementById('confirmPasswordError').textContent = '';
|
|
}
|
|
|
|
// Change password
|
|
async function changePassword(event) {
|
|
event.preventDefault();
|
|
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
// Reset errors
|
|
clearErrorMessages();
|
|
|
|
let hasError = false;
|
|
|
|
if (!currentPassword) {
|
|
document.getElementById('currentPasswordError').textContent = 'Current password is required';
|
|
hasError = true;
|
|
}
|
|
|
|
if (!newPassword) {
|
|
document.getElementById('newPasswordError').textContent = 'New password is required';
|
|
hasError = true;
|
|
} else if (newPassword.length < 6) {
|
|
document.getElementById('newPasswordError').textContent = 'Password must be at least 6 characters';
|
|
hasError = true;
|
|
}
|
|
|
|
if (!confirmPassword) {
|
|
document.getElementById('confirmPasswordError').textContent = 'Please confirm your password';
|
|
hasError = true;
|
|
} else if (newPassword !== confirmPassword) {
|
|
document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
|
|
hasError = true;
|
|
}
|
|
|
|
if (hasError) return;
|
|
|
|
try {
|
|
const saveBtn = document.getElementById('savePasswordBtn');
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = 'Changing Password...';
|
|
|
|
const response = await fetchWithAuth(`${API_BASE}/profile`, {
|
|
method: 'PATCH',
|
|
body: JSON.stringify({
|
|
userDetails: {
|
|
currentPassword,
|
|
newPassword,
|
|
confirmPassword
|
|
}
|
|
})
|
|
});
|
|
|
|
if (!response) {
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Change Password';
|
|
return;
|
|
}
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
alert('Password changed successfully!');
|
|
closePasswordModal();
|
|
} else {
|
|
alert(result.message || 'Failed to change password');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error changing password:', error);
|
|
alert('Error changing password');
|
|
} finally {
|
|
const saveBtn = document.getElementById('savePasswordBtn');
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Change Password';
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadProfileData();
|
|
|
|
// Change password button
|
|
document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
|
|
|
|
// Password form submission
|
|
document.getElementById('passwordForm').addEventListener('submit', changePassword);
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('passwordModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closePasswordModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closePasswordModal();
|
|
}
|
|
});
|
|
|
|
// Mobile menu toggle
|
|
const menuToggle = document.querySelector('.mobile-menu-button');
|
|
const sidebar = document.querySelector('.dashboard-sidebar');
|
|
menuToggle.addEventListener('click', () => {
|
|
sidebar.classList.toggle('active');
|
|
});
|
|
|
|
// Logout button
|
|
document.getElementById('logoutButton').addEventListener('click', handleLogout);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |