467 lines
28 KiB
Plaintext
467 lines
28 KiB
Plaintext
<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-number">✓</div> -->
|
|
<div class="step-text">Create Your Account</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">Business 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">Billing Address</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">Authorized Signatory</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">Payment Details</div>
|
|
<div class="step-connector"></div>
|
|
</div>
|
|
<div class="step" data-step="6" onclick="goToStep(6)">
|
|
<div class="step-number">6</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-number">✓</div> -->
|
|
<div class="step-text">Create Account</div>
|
|
</li>
|
|
<li class="step" data-step="2" onclick="goToStep(2)">
|
|
<div class="step-number">2</div>
|
|
<div class="step-text">Business Info</div>
|
|
</li>
|
|
<li class="step" data-step="3" onclick="goToStep(3)">
|
|
<div class="step-number">3</div>
|
|
<div class="step-text">Billing</div>
|
|
</li>
|
|
<li class="step" data-step="4" onclick="goToStep(4)">
|
|
<div class="step-number">4</div>
|
|
<div class="step-text">Signatory</div>
|
|
</li>
|
|
<li class="step" data-step="5" onclick="goToStep(5)">
|
|
<div class="step-number">5</div>
|
|
<div class="step-text">Payment</div>
|
|
</li>
|
|
<li class="step" data-step="6" onclick="goToStep(6)">
|
|
<div class="step-number">6</div>
|
|
<div class="step-text">Done</div>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Form container -->
|
|
<div class="form-container">
|
|
<h2 class="form-title-sec">Client Registration</h2>
|
|
<div class="form-card">
|
|
<!-- Step 1: Create Account -->
|
|
<div class="form-step active" id="step-1">
|
|
<h2 class="form-title">Create Your Account</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="text" id="first-name" class="input-field" placeholder=" " oninput="validateFirstName(this)" required>
|
|
<label for="first-name" class="input-label">First Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="first-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
First name should only contain letters, numbers, spaces, hyphens, apostrophes, ampersands, and periods
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="last-name" class="input-field" placeholder=" " oninput="validateLastName(this)" required>
|
|
<label for="last-name" class="input-label">Last Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="last-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Last name should only contain letters, numbers, spaces, hyphens, apostrophes, ampersands, and periods
|
|
</div>
|
|
</div>
|
|
<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 *</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> <!-- Empty div for spacing -->
|
|
<button type="button" class="btn btn-primary" onclick="handleNextStep(2)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 2: Business Information -->
|
|
<div class="form-step" id="step-2">
|
|
<h2 class="form-title">Business 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>
|
|
<form id="business-form">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="company-name" class="input-field" placeholder=" " oninput="validateCompanyName(this)" required>
|
|
<label for="company-name" class="input-label">Company Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="company-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Company name should only contain letters, numbers, spaces, hyphens, apostrophes, ampersands, and periods
|
|
</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="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="city" class="input-field" placeholder=" "
|
|
oninput="validateCity(this)" onkeypress="return preventInvalidCityChars(event)"
|
|
required>
|
|
<label for="city" class="input-label">City *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="city-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
City name should contain letters and cannot be only numbers or special characters
|
|
</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>
|
|
<option value="" disable selected style="display: none"></option>
|
|
<!-- States will be populated by JavaScript -->
|
|
</select>
|
|
<label for="state" class="input-label">State *</label>
|
|
<div class="location-loading" id="state-loading">Detecting your location...</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="zip" class="input-field" placeholder=" "
|
|
oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)"
|
|
maxlength="10" required>
|
|
<label for="zip" class="input-label">ZIP *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="zip-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Invalid Zip code
|
|
</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: Billing Address -->
|
|
<div class="form-step" id="step-3">
|
|
<h2 class="form-title">Billing Address</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="billing-form">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="use-business-address">
|
|
<label for="use-business-address">Use business details for billing address</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="billing-name" class="input-field" placeholder=" " required>
|
|
<label for="billing-name" class="input-label">Name *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="billing-address" class="input-field" placeholder=" " required>
|
|
<label for="billing-address" class="input-label">Address *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="billing-city" class="input-field" placeholder=" "
|
|
oninput="validateCity(this)" onkeypress="return preventInvalidCityChars(event)"
|
|
required>
|
|
<label for="billing-city" class="input-label">City *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="billing-city-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
City name should contain letters and cannot be only numbers or special characters
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<!-- <input type="text" id="billing-state" class="input-field" placeholder=" " required> -->
|
|
<select id="billing-state" class="select-field" required>
|
|
<option value="" disable selected style="display: none"></option>
|
|
<!-- States will be populated by JavaScript -->
|
|
</select>
|
|
<label for="billing-state" class="input-label">State *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="billing-zip" class="input-field" placeholder=" "
|
|
oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)"
|
|
maxlength="10" required>
|
|
<label for="billing-zip" class="input-label">ZIP *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="billing-zip-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
ZIP code should contain only numbers
|
|
</div>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="use-account-email">
|
|
<label for="use-account-email">Use account email as primary billing contact</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="email" id="billing-email" class="input-field" placeholder=" " required>
|
|
<label for="billing-email" class="input-label">Email Address *</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: Authorized Signatory -->
|
|
<div class="form-step" id="step-4">
|
|
<h2 class="form-title">Authorized Signatory</h2>
|
|
<div class="step-error-container" id="step-4-error" style="display: none;">
|
|
<div class="error-message" id="step-4-error-message"></div>
|
|
</div>
|
|
<p style="margin-bottom: 20px; color: #6b7280; font-size: 14px;">
|
|
We will use the details below in the agreement that we will send to your prior to starting the project.
|
|
</p>
|
|
<form id="signatory-form">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="position" class="input-field" placeholder=" "
|
|
oninput="validatePosition(this)"
|
|
onkeypress="return preventInvalidPositionChars(event)" required>
|
|
<label for="position" class="input-label">Position (Owner / CEO / Manager / etc.)
|
|
*</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="position-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Position should only contain letters, spaces, and common punctuation
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="signatory-name" class="input-field" placeholder=" "
|
|
oninput="validateSignatoryName(this)" onkeypress="return preventNumbers(event)"
|
|
required>
|
|
<label for="signatory-name" class="input-label">Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="signatory-name-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Name should not contain numbers
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="email" id="signatory-email" class="input-field" placeholder=" " required>
|
|
<label for="signatory-email" class="input-label">Email *</label>
|
|
</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="handleNextStep(5)">Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 5: Payment Details -->
|
|
<div class="form-step" id="step-5">
|
|
<h2 class="form-title">Payment Details</h2>
|
|
<div class="step-error-container" id="step-5-error" style="display: none;">
|
|
<div class="error-message" id="step-5-error-message"></div>
|
|
</div>
|
|
<form id="payment-form">
|
|
<div class="payment-option" onclick="selectPaymentOption('card')">
|
|
<h4>Credit or Debit Card</h4>
|
|
<p>Pay securely with your card</p>
|
|
</div>
|
|
<div id="card-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="card-number" class="input-field" placeholder=" " required>
|
|
<label for="card-number" class="input-label">Card Number *</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="expiry-date" class="input-field" placeholder=" "
|
|
required>
|
|
<label for="expiry-date" class="input-label">Expiry Date (MM/YY) *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="security-code" class="input-field" placeholder=" "
|
|
oninput="validateCVVVV(this)"
|
|
nkeypress="return preventInvalidCVVChars(event)" maxlength="4" required>
|
|
<label for="security-code" class="input-label">Security Code *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="security-code-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Please enter a valid security code
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="card-zip" class="input-field" placeholder=" "
|
|
oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)"
|
|
maxlength="10" required>
|
|
<label for="card-zip" class="input-label">ZIP Code *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="card-zip-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
ZIP code should contain only numbers
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="payment-option" onclick="selectPaymentOption('bank')">
|
|
<h4>Bank Account (ACH)</h4>
|
|
<p>Direct bank transfer</p>
|
|
</div>
|
|
<div id="bank-details" class="payment-details">
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="bank-name" class="input-field" placeholder=" "
|
|
oninput="validateBankName(this)"
|
|
onkeypress="return preventInvalidBankNameChars(event)" required>
|
|
<label for="bank-name" class="input-label">Bank Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="bank-name-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Bank name should contain letters and cannot be only numbers or special characters
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="account-number" class="input-field" placeholder=" "
|
|
oninput="validateAccountNumber(this)"
|
|
onkeypress="return preventInvalidAccountNumberChars(event)" required>
|
|
<label for="account-number" class="input-label">Account Number *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="account-number-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Please enter a valid account number
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="routing-number" class="input-field" placeholder=" " required>
|
|
<label for="routing-number" class="input-label">Routing Number *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<select id="account-type" class="select-field" required>
|
|
<option value="" disable selected style="display: none"></option>
|
|
<option value="checking">Checking</option>
|
|
<option value="savings">Savings</option>
|
|
</select>
|
|
<label for="account-type" class="input-label">Account Type *</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-container">
|
|
<input type="text" id="account-holder-name" class="input-field" placeholder=" "
|
|
oninput="validateAccountHolderName(this)"
|
|
onkeypress="return preventInvalidAccountHolderChars(event)" required>
|
|
<label for="account-holder-name" class="input-label">Account Holder Name *</label>
|
|
</div>
|
|
<div class="invalid-feedback" id="account-holder-name-error"
|
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
|
Account holder name should only contain letters and spaces
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="prevStep(4)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 6: Success -->
|
|
<div class="form-step" id="step-6">
|
|
<div class="success-message">
|
|
<div class="success-icon">✓</div>
|
|
<h3>Registration Complete!</h3>
|
|
<p>Your account has been successfully created. You will receive a confirmation email shortly.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/public/js/va-client-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> |