www_projectmycelium_io/poc_threefold/components/signup.html

<!-- Signup Modal -->
<div id="signupModal" class="modal">
    <div class="modal-content">
        <div class="login-box">
            <div class="login-header">
                <svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                </svg>
                <h2>Join ThreeFold</h2>
                <p>Create your ThreeFold account</p>
            </div>
            <form id="signup-form" onsubmit="return validateSignupForm(event)">
                <div class="form-group compact">
                    <label for="signup-name">Full Name</label>
                    <input 
                        type="text" 
                        id="signup-name" 
                        name="name" 
                        required 
                        placeholder="Enter your full name"
                        autocomplete="name"
                    >
                    <span class="error-message" id="signup-nameError"></span>
                </div>
                <div class="form-group compact">
                    <label for="signup-email">Email</label>
                    <input 
                        type="email" 
                        id="signup-email" 
                        name="email" 
                        required 
                        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                        placeholder="Enter your email"
                        autocomplete="email"
                    >
                    <span class="error-message" id="signup-emailError"></span>
                </div>
                <div class="form-group compact">
                    <label for="signup-password">Password</label>
                    <input 
                        type="password" 
                        id="signup-password" 
                        name="password" 
                        required 
                        minlength="8"
                        placeholder="Enter your password"
                        autocomplete="new-password"
                    >
                    <span class="error-message" id="signup-passwordError"></span>
                </div>
                <div class="form-group compact">
                    <label for="signup-tel">Phone Number</label>
                    <input 
                        type="tel" 
                        id="signup-tel" 
                        name="tel" 
                        required 
                        placeholder="Enter your phone number"
                        autocomplete="tel"
                    >
                    <span class="error-message" id="signup-telError"></span>
                </div>
                <div class="form-group compact">
                    <label for="signup-country">Country</label>
                    <select id="signup-country" name="country" required class="form-control">
                        <option value="">Select your country</option>
                    </select>
                    <span class="error-message" id="signup-countryError"></span>
                </div>
                <div class="form-group compact">
                    [[signup_interests]]
                    <span class="error-message" id="signup-interestsError"></span>
                </div>
                <button type="submit" class="submit-button">Sign Up</button>
            </form>
            <div class="signup-link">
                Already have an account? <a href="#" onclick="openLoginModal(); closeSignupModal();">Sign in</a>
            </div>
            <button class="close-button" onclick="closeSignupModal()">&times;</button>
        </div>
    </div>
</div>

<script>
    // Populate countries dropdown
    [[system/countries]]
    
    const countrySelect = document.getElementById('signup-country');
    countries.forEach(country => {
        const option = document.createElement('option');
        option.value = country;
        option.textContent = country;
        countrySelect.appendChild(option);
    });

    function openSignupModal() {
        const modal = document.getElementById('signupModal');
        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    function closeSignupModal() {
        const modal = document.getElementById('signupModal');
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('signupModal');
        if (event.target === modal) {
            closeSignupModal();
        }
    }

    // Real-time validation functions
    function validatePassword(password) {
        return password.length >= 8;
    }

    function validatePhoneNumber(phone) {
        return /^\+?[\d\s-]{10,}$/.test(phone);
    }

    function validateEmail(email) {
        return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
    }

    // Real-time validation event listeners
    document.getElementById('signup-password')?.addEventListener('input', function(e) {
        const passwordError = document.getElementById('signup-passwordError');
        if (this.value && !validatePassword(this.value)) {
            passwordError.textContent = 'Password must be at least 8 characters long';
        } else {
            passwordError.textContent = '';
        }
    });

    document.getElementById('signup-tel')?.addEventListener('input', function(e) {
        const telError = document.getElementById('signup-telError');
        if (this.value && !validatePhoneNumber(this.value)) {
            telError.textContent = 'Please enter a valid phone number (min 10 digits)';
        } else {
            telError.textContent = '';
        }
    });

    document.getElementById('signup-email')?.addEventListener('input', function(e) {
        const emailError = document.getElementById('signup-emailError');
        if (this.value && !validateEmail(this.value)) {
            emailError.textContent = 'Please enter a valid email address';
        } else {
            emailError.textContent = '';
        }
    });

    function validateSignupForm(event) {
        event.preventDefault();
        
        const name = document.getElementById('signup-name');
        const email = document.getElementById('signup-email');
        const password = document.getElementById('signup-password');
        const tel = document.getElementById('signup-tel');
        const country = document.getElementById('signup-country');
        const interests = document.querySelectorAll('input[name="interests"]:checked');
        
        const nameError = document.getElementById('signup-nameError');
        const emailError = document.getElementById('signup-emailError');
        const passwordError = document.getElementById('signup-passwordError');
        const telError = document.getElementById('signup-telError');
        const countryError = document.getElementById('signup-countryError');
        const interestsError = document.getElementById('signup-interestsError');
        
        // Reset error messages
        nameError.textContent = '';
        emailError.textContent = '';
        passwordError.textContent = '';
        telError.textContent = '';
        countryError.textContent = '';
        interestsError.textContent = '';
        
        let isValid = true;
        
        // Name validation
        if (name.value.trim().length < 2) {
            nameError.textContent = 'Please enter your full name';
            isValid = false;
        }
        
        // Email validation
        if (!validateEmail(email.value)) {
            emailError.textContent = 'Please enter a valid email address';
            isValid = false;
        }

        // Password validation
        if (!validatePassword(password.value)) {
            passwordError.textContent = 'Password must be at least 8 characters long';
            isValid = false;
        }
        
        // Phone validation
        if (!validatePhoneNumber(tel.value)) {
            telError.textContent = 'Please enter a valid phone number (min 10 digits)';
            isValid = false;
        }
        
        // Country validation
        if (!country.value) {
            countryError.textContent = 'Please select your country';
            isValid = false;
        }
        
        // Interests validation
        if (interests.length === 0) {
            interestsError.textContent = 'Please select at least one interest';
            isValid = false;
        }
        
        if (isValid) {
            // Here you would typically send the form data to your server
            console.log('Form is valid, ready to submit');
            closeSignupModal();
        }
        
        return false;
    }
</script>

<style>
    /* Additional styles for signup form */
    .form-group.compact {
        margin-bottom: 0.5rem;
    }

    .form-group.compact label {
        margin-bottom: 0;
        font-size: 0.85rem;
        display: block;
        line-height: 1.2;
    }

    .form-group.compact input,
    .form-group.compact select {
        margin-bottom: 0;
        height: 28px;
        padding: 0 0.5rem;
    }

    .checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        margin-top: 1rem;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        color: var(--modal-text);
        cursor: pointer;
        line-height: 1;
    }

    .checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        margin: 0.2;
    }

    select.form-control {
        width: 100%;
        padding: 0 0.5rem;
        border: 1px solid var(--input-border);
        border-radius: 4px;
        background: var(--body-background);
        color: var(--modal-text);
        font-size: 0.9rem;
        transition: all 0.3s;
        height: 35px;
        cursor: pointer;
    }

    select.form-control:focus {
        outline: none;
        border-color: #1a73e8;
        box-shadow: 0 0 0 2px #1A73E833;
    }

    .error-message {
        color: #dc3545;
        font-size: 0.8rem;
        margin: 0;
        display: block;
        min-height: 1rem;
        line-height: 1;
    }

    .modal-content {
        padding: 0.8rem;
    }

    .login-header {
        margin-bottom: 1rem;
    }

    .login-header h2 {
        margin-bottom: 0.2rem;
    }
</style>