From 2cfec627bfbaeff31791fac3dad3a037e5c66e89 Mon Sep 17 00:00:00 2001
From: timurgordon <timurgordon@gmail.com>
Date: Mon, 19 May 2025 14:49:06 +0300
Subject: [PATCH] improve registration view

---
 actix_mvc_app/src/views/auth/register.html | 660 +++++++++++++++++++--
 1 file changed, 627 insertions(+), 33 deletions(-)

diff --git a/actix_mvc_app/src/views/auth/register.html b/actix_mvc_app/src/views/auth/register.html
index 20527f4..a2f030f 100644
--- a/actix_mvc_app/src/views/auth/register.html
+++ b/actix_mvc_app/src/views/auth/register.html
@@ -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>