350 lines
19 KiB
Plaintext
350 lines
19 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Virtual Assistant Registration</title>
|
|
|
|
<link href="/public/css/va-register.css" rel="stylesheet">
|
|
|
|
<style>
|
|
select option:disabled {
|
|
display: none;
|
|
}
|
|
|
|
select {
|
|
background-color: white;
|
|
color: #2d2d2d;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<!-- Sidebar for desktop -->
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<div class="logo-placeholder">
|
|
<h2>DocTracker</h2>
|
|
</div>
|
|
</div>
|
|
<nav class="progress-steps">
|
|
<div class="step active" data-step="1" onclick="goToStep(1)">
|
|
<div class="step-number">1</div>
|
|
<div class="step-text">Account Setup</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="2" onclick="goToStep(2)">
|
|
<div class="step-number">2</div>
|
|
<div class="step-text">Personal Information</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="3" onclick="goToStep(3)">
|
|
<div class="step-number">3</div>
|
|
<div class="step-text">Contact Information</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="4" onclick="goToStep(4)">
|
|
<div class="step-number">4</div>
|
|
<div class="step-text">Payment Details</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="5" onclick="goToStep(5)">
|
|
<div class="step-number">5</div>
|
|
<div class="step-text">Done</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="main-content">
|
|
<!-- Mobile progress indicator -->
|
|
<div class="mobile-progress">
|
|
<ol>
|
|
<li class="step active" data-step="1" onclick="goToStep(1)">
|
|
<div class="step-number">1</div>
|
|
<div class="step-text">Account</div>
|
|
</li>
|
|
<li class="step" data-step="2" onclick="goToStep(2)">
|
|
<div class="step-number">2</div>
|
|
<div class="step-text">Personal</div>
|
|
</li>
|
|
<li class="step" data-step="3" onclick="goToStep(3)">
|
|
<div class="step-number">3</div>
|
|
<div class="step-text">Contact</div>
|
|
</li>
|
|
<li class="step" data-step="4" onclick="goToStep(4)">
|
|
<div class="step-number">4</div>
|
|
<div class="step-text">Payment</div>
|
|
</li>
|
|
<li class="step" data-step="5" onclick="goToStep(5)">
|
|
<div class="step-number">5</div>
|
|
<div class="step-text">Done</div>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Form container -->
|
|
<div class="form-container">
|
|
<h2 class="form-title-sec">Virtual Assistant Registration</h2>
|
|
<div class="form-card">
|
|
<!-- Step 1: Account Setup -->
|
|
<div class="form-step active" id="step-1">
|
|
<h2 class="form-title">Account Setup</h2>
|
|
<div class="step-error-container" id="step-1-error" style="display: none;">
|
|
<div class="error-message" id="step-1-error-message"></div>
|
|
</div>
|
|
<form id="account-form">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="email" id="email" class="input-field" placeholder=" " value="<%= email %>" readonly disabled required>
|
|
<label for="email" class="input-label">Email Address *</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="password" id="password" class="input-field" placeholder=" " required autocomplete="new-password">
|
|
<label for="password" class="input-label">Create Password *</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="password" id="confirmPassword" class="input-field" placeholder=" " required autocomplete="new-password">
|
|
<label for="confirmPassword" class="input-label">Confirm Password *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="password-match-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">Passwords do not match</div>
|
|
<div class="password-actions">
|
|
<button type="button" class="password-toggle" onclick="togglePasswordVisibility()">Show Password</button>
|
|
<button type="button" class="password-generate" onclick="generatePassword()">Generate Strong Password</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<div></div>
|
|
<button type="button" class="btn btn-primary" onclick="handleNextStep(2)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 2: Personal Information -->
|
|
<div class="form-step" id="step-2">
|
|
<h2 class="form-title">Personal Information</h2>
|
|
<div class="step-error-container" id="step-2-error" style="display: none;">
|
|
<div class="error-message" id="step-2-error-message"></div>
|
|
</div>
|
|
<div class="profile-incomplete" id="profile-incomplete" style="display: none;">
|
|
Profile is not yet complete, first name is missing
|
|
</div>
|
|
|
|
<form id="personal-form">
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="firstName" class="input-field" placeholder=" " required>
|
|
<label for="firstName" class="input-label">First Name *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="lastName" class="input-field" placeholder=" " required>
|
|
<label for="lastName" class="input-label">Last Name *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="number" id="age" class="input-field" placeholder=" " min="18" max="100">
|
|
<label for="age" class="input-label">Age</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="date" id="dob" class="input-field dob" placeholder=" " onchange="handleDOBChange()">
|
|
<label for="dob" class="input-label">Date of Birth</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="address" class="input-field" placeholder=" " required>
|
|
<label for="address" class="input-label">Address *</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="city" class="input-field" placeholder=" " required>
|
|
<label for="city" class="input-label">City / Town *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<select id="country" class="select-field" required onchange="handleChangeSelect(this)">
|
|
<option value="" disabled selected></option>
|
|
</select>
|
|
<label for="country" class="input-label">Country *</label>
|
|
<!-- <div class="location-loading" id="country-loading" style="display: none;">Detecting your location...</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="state" class="input-field" placeholder=" " required>
|
|
<!-- <select id="state" class="select-field" required onchange="handleChangeSelect(this)">
|
|
<option value=""></option>
|
|
</select> -->
|
|
<label for="state" class="input-label">State / Region *</label>
|
|
<!-- <div class="location-loading" id="state-loading">Loading states...</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<select id="status" class="select-field" required>
|
|
<option value="FULLTIME" selected>Full Time</option>
|
|
<option value="PARTTIME">Part Time</option>
|
|
</select>
|
|
<label for="status" class="input-label">Status *</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(1)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="handleNextStep(3)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 3: Contact Information -->
|
|
<div class="form-step" id="step-3">
|
|
<h2 class="form-title">Contact Information</h2>
|
|
<div class="step-error-container" id="step-3-error" style="display: none;">
|
|
<div class="error-message" id="step-3-error-message"></div>
|
|
</div>
|
|
<form id="contact-form">
|
|
<div class="form-group">
|
|
<label for="phone" class="input-label">Phone Number *</label>
|
|
<div class="input-container">
|
|
<input type="tel" id="phone" class="input-field" placeholder=" " pattern="[0-9]*" minlength="10" maxlength="15" oninput="validatePhoneNumber(this)" required>
|
|
<label for="phone" class="input-label">Phone Number</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="phone-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Please enter a valid phone number (10-15 digits)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="skype" class="input-field" placeholder=" " oninput="validateSkypeId(this)">
|
|
<label for="skype" class="input-label">Skype ID</label>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(2)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="handleNextStep(4)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 4: Payment Details -->
|
|
<div class="form-step" id="step-4">
|
|
<h2 class="form-title">Payment Details</h2>
|
|
<div class="step-error-container" id="step-4-error" style="display: none;">
|
|
<div class="error-message" id="step-4-error-message"></div>
|
|
</div>
|
|
<form id="payment-form">
|
|
<div class="form-group">
|
|
<!-- <div class="payment-option" onclick="selectPaymentMethod('payoneer')">
|
|
<h4>Payoneer</h4>
|
|
<p>Receive payments via Payoneer</p>
|
|
</div>
|
|
<div id="payoneer-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="payoneerAccount" class="input-field" placeholder=" " minlength="5" maxlength="20" oninput="validatePayoneerAccount(this)" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
|
|
<label for="payoneerAccount" class="input-label">Payoneer Account Number *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="payoneer-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Account number must be 5-20 characters
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="payment-option" onclick="selectPaymentMethod('veem')">
|
|
<h4>Veem</h4>
|
|
<p>Receive payments via Veem</p>
|
|
</div>
|
|
<div id="veem-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="veemAccount" class="input-field" placeholder=" " minlength="8" maxlength="25" oninput="validateVeemAccount(this)" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
|
|
<label for="veemAccount" class="input-label">Veem Account Number *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="veem-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Account number must be 8-25 characters
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-option" onclick="selectPaymentMethod('wise')">
|
|
<h4>Wise</h4>
|
|
<p>Receive payments via Wise</p>
|
|
</div>
|
|
<div id="wise-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="email" id="wiseEmail" class="input-field" placeholder=" " oninput="validateWiseEmail(this)" required>
|
|
<label for="wiseEmail" class="input-label">Wise Email Address *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="wise-email-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Please enter a valid email address for Wise
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(3)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitForm()">Complete Registration</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 5: Success -->
|
|
<div class="form-step" id="step-5">
|
|
<div class="success-message">
|
|
<div class="success-icon">✓</div>
|
|
<h3>Registration Complete!</h3>
|
|
<p>Your Virtual Assistant account has been successfully created..</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/public/js/va-register.js"></script>
|
|
<script>
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
function getSystemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
// Initialize theme
|
|
const savedTheme = getSystemTheme();
|
|
setTheme(savedTheme);
|
|
</script>
|
|
</body>
|
|
</html>
|