improve registration view
This commit is contained in:
timurgordon
parent
83dde53555
commit
2cfec627bf
@ -1,50 +1,644 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Register{% endblock %}
|
||||
{% block title %}Register for Digital Freezone Residence{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h4 class="mb-0">Register</h4>
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h4 class="mb-0"><i class="bi bi-person-plus me-1"></i> Register for Digital Freezone Residence</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if errors %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<ul class="mb-0">
|
||||
{% for error in errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/register" id="userRegistrationForm" enctype="multipart/form-data">
|
||||
<!-- Progress bar -->
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" id="progress-bar">Step 1 of 2</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if errors %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<ul class="mb-0">
|
||||
{% for error in errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<!-- Step indicators -->
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<div class="step-indicator active" id="step-indicator-1">
|
||||
<span class="badge rounded-pill bg-success">1</span> Personal Info
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/register">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Full Name</label>
|
||||
<div class="step-indicator" id="step-indicator-2">
|
||||
<span class="badge rounded-pill bg-secondary">2</span> Contracts & KYC
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Personal Information -->
|
||||
<div class="form-step" id="step-1">
|
||||
<h4 class="mb-3">Personal Information</h4>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Full Legal Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" value="{{ name | default(value='') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="email" name="email" value="{{ email | default(value='') }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
<div class="form-text">Password must be at least 8 characters long.</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="digital_id_key" class="form-label">Digital ID Public Key <a href="#" data-bs-toggle="modal" data-bs-target="#digitalIdModal"><i class="bi bi-question-circle text-muted"></i></a></label>
|
||||
<input type="text" class="form-control" id="digital_id_key" name="digital_id_key" value="{{ digital_id_key | default(value='') }}" placeholder="Enter your public key or connect wallet">
|
||||
<div class="form-text">Your digital identity for secure signing and blockchain transactions.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password_confirmation" class="form-label">Confirm Password</label>
|
||||
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
|
||||
<div class="col-md-6 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-outline-primary mb-2" onclick="connectWallet()">
|
||||
<i class="bi bi-wallet2 me-1"></i> Connect Wallet
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">Register</button>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="nationality" class="form-label">Nationality</label>
|
||||
<select class="form-select" id="nationality" name="nationality" required>
|
||||
<option value="" selected disabled>Select your country</option>
|
||||
<option value="Afghanistan">Afghanistan</option>
|
||||
<option value="Albania">Albania</option>
|
||||
<option value="Algeria">Algeria</option>
|
||||
<option value="Andorra">Andorra</option>
|
||||
<option value="Angola">Angola</option>
|
||||
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Armenia">Armenia</option>
|
||||
<option value="Australia">Australia</option>
|
||||
<option value="Austria">Austria</option>
|
||||
<option value="Azerbaijan">Azerbaijan</option>
|
||||
<option value="Bahamas">Bahamas</option>
|
||||
<option value="Bahrain">Bahrain</option>
|
||||
<option value="Bangladesh">Bangladesh</option>
|
||||
<option value="Barbados">Barbados</option>
|
||||
<option value="Belarus">Belarus</option>
|
||||
<option value="Belgium">Belgium</option>
|
||||
<option value="Belize">Belize</option>
|
||||
<option value="Benin">Benin</option>
|
||||
<option value="Bhutan">Bhutan</option>
|
||||
<option value="Bolivia">Bolivia</option>
|
||||
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
|
||||
<option value="Botswana">Botswana</option>
|
||||
<option value="Brazil">Brazil</option>
|
||||
<option value="Brunei">Brunei</option>
|
||||
<option value="Bulgaria">Bulgaria</option>
|
||||
<option value="Burkina Faso">Burkina Faso</option>
|
||||
<option value="Burundi">Burundi</option>
|
||||
<option value="Cabo Verde">Cabo Verde</option>
|
||||
<option value="Cambodia">Cambodia</option>
|
||||
<option value="Cameroon">Cameroon</option>
|
||||
<option value="Canada">Canada</option>
|
||||
<option value="Central African Republic">Central African Republic</option>
|
||||
<option value="Chad">Chad</option>
|
||||
<option value="Chile">Chile</option>
|
||||
<option value="China">China</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Comoros">Comoros</option>
|
||||
<option value="Congo">Congo</option>
|
||||
<option value="Costa Rica">Costa Rica</option>
|
||||
<option value="Croatia">Croatia</option>
|
||||
<option value="Cuba">Cuba</option>
|
||||
<option value="Cyprus">Cyprus</option>
|
||||
<option value="Czech Republic">Czech Republic</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
<option value="Djibouti">Djibouti</option>
|
||||
<option value="Dominica">Dominica</option>
|
||||
<option value="Dominican Republic">Dominican Republic</option>
|
||||
<option value="Ecuador">Ecuador</option>
|
||||
<option value="Egypt">Egypt</option>
|
||||
<option value="El Salvador">El Salvador</option>
|
||||
<option value="Equatorial Guinea">Equatorial Guinea</option>
|
||||
<option value="Eritrea">Eritrea</option>
|
||||
<option value="Estonia">Estonia</option>
|
||||
<option value="Eswatini">Eswatini</option>
|
||||
<option value="Ethiopia">Ethiopia</option>
|
||||
<option value="Fiji">Fiji</option>
|
||||
<option value="Finland">Finland</option>
|
||||
<option value="France">France</option>
|
||||
<option value="Gabon">Gabon</option>
|
||||
<option value="Gambia">Gambia</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Germany">Germany</option>
|
||||
<option value="Ghana">Ghana</option>
|
||||
<option value="Greece">Greece</option>
|
||||
<option value="Grenada">Grenada</option>
|
||||
<option value="Guatemala">Guatemala</option>
|
||||
<option value="Guinea">Guinea</option>
|
||||
<option value="Guinea-Bissau">Guinea-Bissau</option>
|
||||
<option value="Guyana">Guyana</option>
|
||||
<option value="Haiti">Haiti</option>
|
||||
<option value="Honduras">Honduras</option>
|
||||
<option value="Hungary">Hungary</option>
|
||||
<option value="Iceland">Iceland</option>
|
||||
<option value="India">India</option>
|
||||
<option value="Indonesia">Indonesia</option>
|
||||
<option value="Iran">Iran</option>
|
||||
<option value="Iraq">Iraq</option>
|
||||
<option value="Ireland">Ireland</option>
|
||||
<option value="Israel">Israel</option>
|
||||
<option value="Italy">Italy</option>
|
||||
<option value="Jamaica">Jamaica</option>
|
||||
<option value="Japan">Japan</option>
|
||||
<option value="Jordan">Jordan</option>
|
||||
<option value="Kazakhstan">Kazakhstan</option>
|
||||
<option value="Kenya">Kenya</option>
|
||||
<option value="Kiribati">Kiribati</option>
|
||||
<option value="Korea, North">Korea, North</option>
|
||||
<option value="Korea, South">Korea, South</option>
|
||||
<option value="Kosovo">Kosovo</option>
|
||||
<option value="Kuwait">Kuwait</option>
|
||||
<option value="Kyrgyzstan">Kyrgyzstan</option>
|
||||
<option value="Laos">Laos</option>
|
||||
<option value="Latvia">Latvia</option>
|
||||
<option value="Lebanon">Lebanon</option>
|
||||
<option value="Lesotho">Lesotho</option>
|
||||
<option value="Liberia">Liberia</option>
|
||||
<option value="Libya">Libya</option>
|
||||
<option value="Liechtenstein">Liechtenstein</option>
|
||||
<option value="Lithuania">Lithuania</option>
|
||||
<option value="Luxembourg">Luxembourg</option>
|
||||
<option value="Madagascar">Madagascar</option>
|
||||
<option value="Malawi">Malawi</option>
|
||||
<option value="Malaysia">Malaysia</option>
|
||||
<option value="Maldives">Maldives</option>
|
||||
<option value="Mali">Mali</option>
|
||||
<option value="Malta">Malta</option>
|
||||
<option value="Marshall Islands">Marshall Islands</option>
|
||||
<option value="Mauritania">Mauritania</option>
|
||||
<option value="Mauritius">Mauritius</option>
|
||||
<option value="Mexico">Mexico</option>
|
||||
<option value="Micronesia">Micronesia</option>
|
||||
<option value="Moldova">Moldova</option>
|
||||
<option value="Monaco">Monaco</option>
|
||||
<option value="Mongolia">Mongolia</option>
|
||||
<option value="Montenegro">Montenegro</option>
|
||||
<option value="Morocco">Morocco</option>
|
||||
<option value="Mozambique">Mozambique</option>
|
||||
<option value="Myanmar">Myanmar</option>
|
||||
<option value="Namibia">Namibia</option>
|
||||
<option value="Nauru">Nauru</option>
|
||||
<option value="Nepal">Nepal</option>
|
||||
<option value="Netherlands">Netherlands</option>
|
||||
<option value="New Zealand">New Zealand</option>
|
||||
<option value="Nicaragua">Nicaragua</option>
|
||||
<option value="Niger">Niger</option>
|
||||
<option value="Nigeria">Nigeria</option>
|
||||
<option value="North Macedonia">North Macedonia</option>
|
||||
<option value="Norway">Norway</option>
|
||||
<option value="Oman">Oman</option>
|
||||
<option value="Pakistan">Pakistan</option>
|
||||
<option value="Palau">Palau</option>
|
||||
<option value="Palestine">Palestine</option>
|
||||
<option value="Panama">Panama</option>
|
||||
<option value="Papua New Guinea">Papua New Guinea</option>
|
||||
<option value="Paraguay">Paraguay</option>
|
||||
<option value="Peru">Peru</option>
|
||||
<option value="Philippines">Philippines</option>
|
||||
<option value="Poland">Poland</option>
|
||||
<option value="Portugal">Portugal</option>
|
||||
<option value="Qatar">Qatar</option>
|
||||
<option value="Romania">Romania</option>
|
||||
<option value="Russia">Russia</option>
|
||||
<option value="Rwanda">Rwanda</option>
|
||||
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
|
||||
<option value="Saint Lucia">Saint Lucia</option>
|
||||
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
|
||||
<option value="Samoa">Samoa</option>
|
||||
<option value="San Marino">San Marino</option>
|
||||
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
|
||||
<option value="Saudi Arabia">Saudi Arabia</option>
|
||||
<option value="Senegal">Senegal</option>
|
||||
<option value="Serbia">Serbia</option>
|
||||
<option value="Seychelles">Seychelles</option>
|
||||
<option value="Sierra Leone">Sierra Leone</option>
|
||||
<option value="Singapore">Singapore</option>
|
||||
<option value="Slovakia">Slovakia</option>
|
||||
<option value="Slovenia">Slovenia</option>
|
||||
<option value="Solomon Islands">Solomon Islands</option>
|
||||
<option value="Somalia">Somalia</option>
|
||||
<option value="South Africa">South Africa</option>
|
||||
<option value="South Sudan">South Sudan</option>
|
||||
<option value="Spain">Spain</option>
|
||||
<option value="Sri Lanka">Sri Lanka</option>
|
||||
<option value="Sudan">Sudan</option>
|
||||
<option value="Suriname">Suriname</option>
|
||||
<option value="Sweden">Sweden</option>
|
||||
<option value="Switzerland">Switzerland</option>
|
||||
<option value="Syria">Syria</option>
|
||||
<option value="Taiwan">Taiwan</option>
|
||||
<option value="Tajikistan">Tajikistan</option>
|
||||
<option value="Tanzania">Tanzania</option>
|
||||
<option value="Thailand">Thailand</option>
|
||||
<option value="Timor-Leste">Timor-Leste</option>
|
||||
<option value="Togo">Togo</option>
|
||||
<option value="Tonga">Tonga</option>
|
||||
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
|
||||
<option value="Tunisia">Tunisia</option>
|
||||
<option value="Turkey">Turkey</option>
|
||||
<option value="Turkmenistan">Turkmenistan</option>
|
||||
<option value="Tuvalu">Tuvalu</option>
|
||||
<option value="Uganda">Uganda</option>
|
||||
<option value="Ukraine">Ukraine</option>
|
||||
<option value="United Arab Emirates">United Arab Emirates</option>
|
||||
<option value="United Kingdom">United Kingdom</option>
|
||||
<option value="United States">United States</option>
|
||||
<option value="Uruguay">Uruguay</option>
|
||||
<option value="Uzbekistan">Uzbekistan</option>
|
||||
<option value="Vanuatu">Vanuatu</option>
|
||||
<option value="Vatican City">Vatican City</option>
|
||||
<option value="Venezuela">Venezuela</option>
|
||||
<option value="Vietnam">Vietnam</option>
|
||||
<option value="Yemen">Yemen</option>
|
||||
<option value="Zambia">Zambia</option>
|
||||
<option value="Zimbabwe">Zimbabwe</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label">Phone Number</label>
|
||||
<input type="tel" class="form-control" id="phone" name="phone" value="{{ phone | default(value='') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="address" class="form-label">Current Address</label>
|
||||
<input type="text" class="form-control" id="address" name="address" value="{{ address | default(value='') }}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="date_of_birth" class="form-label">Date of Birth</label>
|
||||
<input type="date" class="form-control" id="date_of_birth" name="date_of_birth" value="{{ date_of_birth | default(value='') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button type="button" class="btn btn-success" onclick="nextStep(1)">Next <i class="bi bi-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<p class="mb-0">Already have an account? <a href="/login">Login</a></p>
|
||||
|
||||
<!-- Step 2: Contracts & KYC -->
|
||||
<div class="form-step" id="step-2" style="display: none;">
|
||||
<h4 class="mb-3">Contracts & KYC Verification</h4>
|
||||
|
||||
<!-- Required Contracts Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Required Contracts</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">The following contracts must be signed:</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%">Contract</th>
|
||||
<th style="width: 40%">Description</th>
|
||||
<th style="width: 20%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Common contracts for all users -->
|
||||
<tr>
|
||||
<td>Freezone Residence Terms & Conditions</td>
|
||||
<td>General terms and conditions for digital freezone residence</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="viewContract('residence-terms')">View</button>
|
||||
<div class="form-check ms-1">
|
||||
<input class="form-check-input" type="checkbox" id="contract-terms" name="contracts[]" value="terms" required>
|
||||
<label class="form-check-label" for="contract-terms">Sign</label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Data Protection Agreement</td>
|
||||
<td>Agreement on how your personal data will be processed</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="viewContract('data-protection')">View</button>
|
||||
<div class="form-check ms-1">
|
||||
<input class="form-check-input" type="checkbox" id="contract-data" name="contracts[]" value="data" required>
|
||||
<label class="form-check-label" for="contract-data">Sign</label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Digital Asset Compliance</td>
|
||||
<td>Compliance requirements for digital asset ownership</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="viewContract('compliance')">View</button>
|
||||
<div class="form-check ms-1">
|
||||
<input class="form-check-input" type="checkbox" id="contract-compliance" name="contracts[]" value="compliance" required>
|
||||
<label class="form-check-label" for="contract-compliance">Sign</label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="form-check mt-3">
|
||||
<input class="form-check-input" type="checkbox" id="contract-agreement" name="contract_agreement" required>
|
||||
<label class="form-check-label" for="contract-agreement">
|
||||
<strong>I have read and agree to all the required contracts</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KYC Verification Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="mb-0"><i class="bi bi-shield-check me-2"></i>KYC Verification</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>To complete your registration, you'll need to verify your identity through our KYC process.</p>
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i> You can complete the KYC verification after registration, but some features will be limited until verification is complete.
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="kyc-agreement" name="kyc_agreement">
|
||||
<label class="form-check-label" for="kyc-agreement">
|
||||
I understand that I need to complete KYC verification to access all features
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-success" onclick="startKycProcess()">
|
||||
<i class="bi bi-shield-check me-1"></i> Start KYC Process Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<button type="button" class="btn btn-outline-secondary" onclick="prevStep(2)"><i class="bi bi-arrow-left"></i> Previous</button>
|
||||
<button type="submit" class="btn btn-success btn-lg">
|
||||
<i class="bi bi-person-check me-1"></i> Complete Registration
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<p class="mb-0">Already have an account? <a href="/login">Login</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript for contract viewing, KYC process, and multi-step form -->
|
||||
<script>
|
||||
// Multi-step form navigation
|
||||
function nextStep(currentStep) {
|
||||
// Validate current step
|
||||
if (validateStep(currentStep)) {
|
||||
// Hide current step
|
||||
document.getElementById(`step-${currentStep}`).style.display = 'none';
|
||||
// Show next step
|
||||
document.getElementById(`step-${currentStep + 1}`).style.display = 'block';
|
||||
// Update progress bar
|
||||
updateProgressBar(currentStep + 1);
|
||||
// Update step indicators
|
||||
updateStepIndicators(currentStep + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep(currentStep) {
|
||||
// Hide current step
|
||||
document.getElementById(`step-${currentStep}`).style.display = 'none';
|
||||
// Show previous step
|
||||
document.getElementById(`step-${currentStep - 1}`).style.display = 'block';
|
||||
// Update progress bar
|
||||
updateProgressBar(currentStep - 1);
|
||||
// Update step indicators
|
||||
updateStepIndicators(currentStep - 1);
|
||||
}
|
||||
|
||||
function updateProgressBar(step) {
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const percentage = (step / 2) * 100;
|
||||
progressBar.style.width = `${percentage}%`;
|
||||
progressBar.setAttribute('aria-valuenow', percentage);
|
||||
progressBar.textContent = `Step ${step} of 2`;
|
||||
}
|
||||
|
||||
function updateStepIndicators(activeStep) {
|
||||
// Reset all indicators
|
||||
document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
|
||||
const stepNum = index + 1;
|
||||
indicator.classList.remove('active');
|
||||
const badge = indicator.querySelector('.badge');
|
||||
badge.classList.remove('bg-success');
|
||||
badge.classList.add('bg-secondary');
|
||||
});
|
||||
|
||||
// Set active indicator
|
||||
const activeIndicator = document.getElementById(`step-indicator-${activeStep}`);
|
||||
activeIndicator.classList.add('active');
|
||||
const activeBadge = activeIndicator.querySelector('.badge');
|
||||
activeBadge.classList.remove('bg-secondary');
|
||||
activeBadge.classList.add('bg-success');
|
||||
}
|
||||
|
||||
function validateStep(step) {
|
||||
if (step === 1) {
|
||||
// Validate personal information fields
|
||||
const name = document.getElementById('name').value;
|
||||
const email = document.getElementById('email').value;
|
||||
const nationality = document.getElementById('nationality').value;
|
||||
|
||||
if (!name || !email) {
|
||||
alert('Please fill in all required fields.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!nationality) {
|
||||
alert('Please select your nationality.');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return true; // No validation for other steps
|
||||
}
|
||||
|
||||
// Contract viewing function
|
||||
function viewContract(contractId) {
|
||||
// In a real application, this would open the contract document
|
||||
// For now, we'll just show an alert
|
||||
alert(`Viewing contract: ${contractId.replace(/-/g, ' ')}`);
|
||||
|
||||
// This would typically involve:
|
||||
// 1. Fetching the contract document from the server
|
||||
// 2. Opening it in a viewer or new tab
|
||||
// window.open(`/contracts/view/${contractId}`, '_blank');
|
||||
}
|
||||
|
||||
// KYC process function
|
||||
function startKycProcess() {
|
||||
alert('Starting KYC verification process. In a production environment, this would redirect to a secure KYC provider.');
|
||||
// This would typically redirect to a KYC provider or open a modal with KYC steps
|
||||
// window.location.href = '/kyc/start';
|
||||
}
|
||||
|
||||
// Wallet connection function
|
||||
function connectWallet() {
|
||||
// In a real implementation, this would connect to various wallet providers
|
||||
// For demonstration purposes, we'll simulate a successful connection
|
||||
|
||||
// Simulate wallet selection dialog
|
||||
const walletType = prompt('Select wallet type (MetaMask, Polkadot.js, TFConnect, or Other):', 'MetaMask');
|
||||
|
||||
if (!walletType) {
|
||||
return; // User cancelled
|
||||
}
|
||||
|
||||
// Simulate connection process
|
||||
setTimeout(() => {
|
||||
// Generate a sample public key (in a real app, this would come from the wallet)
|
||||
const samplePublicKey = generateSamplePublicKey(walletType);
|
||||
|
||||
// Update the digital ID field with the public key
|
||||
document.getElementById('digital_id_key').value = samplePublicKey;
|
||||
|
||||
// Show success message
|
||||
alert(`Successfully connected to ${walletType}! Your public key has been added to the form.`);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Helper function to generate a sample public key for demonstration
|
||||
function generateSamplePublicKey(walletType) {
|
||||
const prefixes = {
|
||||
'MetaMask': '0x',
|
||||
'Polkadot.js': '5',
|
||||
'TFConnect': 'twin',
|
||||
'Other': 'key'
|
||||
};
|
||||
|
||||
const prefix = prefixes[walletType] || prefixes['Other'];
|
||||
const randomChars = '0123456789abcdef';
|
||||
let key = prefix;
|
||||
|
||||
// Generate random characters
|
||||
for (let i = 0; i < 40; i++) {
|
||||
key += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
|
||||
}
|
||||
|
||||
return key;
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add event listener to ensure all contracts are checked when the agreement checkbox is checked
|
||||
const agreementCheckbox = document.getElementById('contract-agreement');
|
||||
const contractCheckboxes = document.querySelectorAll('input[name="contracts[]"]');
|
||||
|
||||
if (agreementCheckbox) {
|
||||
agreementCheckbox.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
// Verify all contracts are checked
|
||||
let allChecked = true;
|
||||
contractCheckboxes.forEach(checkbox => {
|
||||
if (!checkbox.checked) {
|
||||
allChecked = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!allChecked) {
|
||||
alert('Please read and sign all required contracts first.');
|
||||
this.checked = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Step indicator styling */
|
||||
.step-indicator {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-indicator.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Form step styling */
|
||||
.form-step {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Digital ID Explanation Modal -->
|
||||
<div class="modal fade" id="digitalIdModal" tabindex="-1" aria-labelledby="digitalIdModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title" id="digitalIdModalLabel"><i class="bi bi-key me-2"></i> Digital ID Public Key</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5>What is a Digital ID?</h5>
|
||||
<p>A Digital ID is a secure, blockchain-based identity that allows you to:</p>
|
||||
<ul>
|
||||
<li>Digitally sign documents and contracts</li>
|
||||
<li>Securely access digital services in the freezone</li>
|
||||
<li>Manage your digital assets and transactions</li>
|
||||
<li>Participate in governance and voting</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<h6><i class="bi bi-info-circle me-2"></i>How it works:</h6>
|
||||
<p>Your Digital ID consists of a pair of cryptographic keys:</p>
|
||||
<ul>
|
||||
<li><strong>Public Key</strong>: Shared with others and used to verify your identity</li>
|
||||
<li><strong>Private Key</strong>: Kept secret and used to sign documents and transactions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h5>How to Create Your Digital ID</h5>
|
||||
<p>You have two options to create your Digital ID:</p>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">Option 1: Connect an Existing Wallet</div>
|
||||
<div class="card-body">
|
||||
<p>If you already have a blockchain wallet (like MetaMask, Polkadot.js, or TFConnect), you can connect it to use as your Digital ID.</p>
|
||||
<button type="button" class="btn btn-primary" onclick="connectWallet()" data-bs-dismiss="modal">
|
||||
<i class="bi bi-wallet2 me-1"></i> Connect Existing Wallet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">Option 2: Create a New Digital ID</div>
|
||||
<div class="card-body">
|
||||
<p>If you don't have a wallet, we can help you create a new Digital ID:</p>
|
||||
<ol>
|
||||
<li>Click the button below to launch our secure Digital ID creator</li>
|
||||
<li>Follow the instructions to generate your keys</li>
|
||||
<li>Store your private key securely - it will never be stored on our servers</li>
|
||||
<li>Your public key will be automatically added to your registration form</li>
|
||||
</ol>
|
||||
<a href="/digital-id/create" class="btn btn-success" target="_blank">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Digital ID
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user