Inscription - MeetNotes


<style>
    .input-group {
        position: relative;
    }
    
    .input-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        transition: color 0.2s;
    }
    
    .input-success {
        color: #10b981;
    }
    
    .input-error {
        color: #ef4444;
    }
    
    .input-warning {
        color: #f59e0b;
    }
    
    .input-field {
        padding-right: 40px;
    }
    
    .validation-message {
        margin-top: 4px;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    .validation-message.show {
        opacity: 1;
    }
    
    .validation-message.success {
        color: #10b981;
    }
    
    .validation-message.error {
        color: #ef4444;
    }
    
    .validation-message.warning {
        color: #f59e0b;
    }
    
    .password-strength {
        margin-top: 4px;
        height: 4px;
        background: #e5e7eb;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .password-strength-bar {
        height: 100%;
        transition: width 0.3s ease, background-color 0.3s ease;
    }
    
    .password-strength-weak {
        width: 33%;
        background: #ef4444;
    }
    
    .password-strength-medium {
        width: 66%;
        background: #f59e0b;
    }
    
    .password-strength-strong {
        width: 100%;
        background: #10b981;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0.5rem;
    }
    
    .checkbox-group {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .btn-primary {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.75rem 1.5rem;
        border: 1px solid transparent;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
        position: relative;
    }
    
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }
    
    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }
    
    .btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    .btn-icon {
        margin-right: 0.5rem;
    }
    
    .loading-spinner {
        display: none;
        width: 16px;
        height: 16px;
        border: 2px solid #ffffff;
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .btn-primary.loading .btn-text {
        opacity: 0;
    }
    
    .btn-primary.loading .loading-spinner {
        display: inline-block;
    }
</style>



<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <div>
            <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-green-100 shadow-lg">
                <i class="fas fa-user-plus text-green-600 text-2xl"></i>
            </div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                Créez votre compte
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                Ou 
                <a href="/users/login/" class="font-medium text-green-600 hover:text-green-500 transition-colors">
                    connectez-vous à votre compte existant
                </a>
            </p>
        </div>
        
        <form id="signup-form" class="mt-8 space-y-6" method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="pIvror9g2xtGOsi9HQ7eOTdXKYlrykpv527kAerNXa1SyttelSk6aIgVc8WEvLrE">
            
            
            
            <div class="form-group">
                <label for="username" class="form-label">Nom d'utilisateur</label>
                <div class="input-group">
                    <input 
                        id="username" 
                        name="username" 
                        type="text" 
                        required 
                        class="input-field appearance-none block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent sm:text-sm" 
                        placeholder="Choisissez un nom d'utilisateur"
                        autocomplete="username"
                    >
                    <span id="username-icon" class="input-icon">
                        <i class="fas fa-user"></i>
                    </span>
                </div>
                <div id="username-validation" class="validation-message"></div>
            </div>

            <div class="form-group">
                <label for="email" class="form-label">Email</label>
                <div class="input-group">
                    <input 
                        id="email" 
                        name="email" 
                        type="email" 
                        required 
                        class="input-field appearance-none block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent sm:text-sm" 
                        placeholder="votre@email.com"
                        autocomplete="email"
                    >
                    <span id="email-icon" class="input-icon">
                        <i class="fas fa-envelope"></i>
                    </span>
                </div>
                <div id="email-validation" class="validation-message"></div>
            </div>

            <div class="form-group">
                <label for="password1" class="form-label">Mot de passe</label>
                <div class="input-group">
                    <input 
                        id="password1" 
                        name="password1" 
                        type="password" 
                        required 
                        class="input-field appearance-none block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent sm:text-sm" 
                        placeholder="Choisissez un mot de passe"
                        autocomplete="new-password"
                    >
                    <span id="password1-icon" class="input-icon">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
                <div id="password1-strength" class="password-strength">
                    <div class="password-strength-bar"></div>
                </div>
                <div id="password1-validation" class="validation-message"></div>
            </div>

            <div class="form-group">
                <label for="password2" class="form-label">Confirmer le mot de passe</label>
                <div class="input-group">
                    <input 
                        id="password2" 
                        name="password2" 
                        type="password" 
                        required 
                        class="input-field appearance-none block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent sm:text-sm" 
                        placeholder="Confirmez votre mot de passe"
                        autocomplete="new-password"
                    >
                    <span id="password2-icon" class="input-icon">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
                <div id="password2-validation" class="validation-message"></div>
            </div>

            <div class="checkbox-group">
                <input 
                    id="agree-terms" 
                    name="agree-terms" 
                    type="checkbox" 
                    required
                    class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                >
                <label for="agree-terms" class="ml-2 block text-sm text-gray-900">
                    J'accepte les 
                    <a href="#" class="text-green-600 hover:text-green-500">conditions d'utilisation</a>
                    et la 
                    <a href="#" class="text-green-600 hover:text-green-500">politique de confidentialité</a>
                </label>
            </div>

            <div>
                <button 
                    type="submit" 
                    id="signup-btn"
                    class="btn-primary bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200"
                >
                    <span class="btn-icon">
                        <i class="fas fa-user-plus"></i>
                    </span>
                    <span class="btn-text">Créer mon compte</span>
                    <div class="loading-spinner"></div>
                </button>
            </div>
        </form>

        <div class="mt-6">
            <div class="text-center text-sm text-gray-600">
                <p>En créant un compte, vous acceptez de recevoir des emails de notre part.</p>
            </div>
        </div>
    </div>
</div>

<script>
    // Validation en temps réel du nom d'utilisateur
    const usernameInput = document.getElementById('username');
    const usernameIcon = document.getElementById('username-icon');
    const usernameValidation = document.getElementById('username-validation');
    let usernameTimeout;

    usernameInput.addEventListener('input', function() {
        clearTimeout(usernameTimeout);
        const username = this.value.trim();
        
        if (username.length === 0) {
            hideValidation(usernameValidation);
            resetIcon(usernameIcon);
            return;
        }
        
        if (username.length < 3) {
            showValidation(usernameValidation, 'warning', 'Le nom d\'utilisateur doit contenir au moins 3 caractères');
            setIconState(usernameIcon, 'warning');
            return;
        }
        
        // Afficher l'icône de chargement
        setIconState(usernameIcon, 'loading');
        
        usernameTimeout = setTimeout(() => {
            checkUsername(username);
        }, 500);
    });

    // Validation en temps réel de l'email
    const emailInput = document.getElementById('email');
    const emailIcon = document.getElementById('email-icon');
    const emailValidation = document.getElementById('email-validation');
    let emailTimeout;

    emailInput.addEventListener('input', function() {
        clearTimeout(emailTimeout);
        const email = this.value.trim();
        
        if (email.length === 0) {
            hideValidation(emailValidation);
            resetIcon(emailIcon);
            return;
        }
        
        // Validation basique de l'email
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            showValidation(emailValidation, 'error', 'Format d\'email invalide');
            setIconState(emailIcon, 'error');
            return;
        }
        
        // Afficher l'icône de chargement
        setIconState(emailIcon, 'loading');
        
        emailTimeout = setTimeout(() => {
            checkEmail(email);
        }, 500);
    });

    // Validation du mot de passe
    const password1Input = document.getElementById('password1');
    const password1Icon = document.getElementById('password1-icon');
    const password1Validation = document.getElementById('password1-validation');
    const password1Strength = document.getElementById('password1-strength');
    const strengthBar = password1Strength.querySelector('.password-strength-bar');
    let password1Timeout;

    password1Input.addEventListener('input', function() {
        clearTimeout(password1Timeout);
        const password = this.value;
        
        if (password.length === 0) {
            hideValidation(password1Validation);
            resetIcon(password1Icon);
            strengthBar.className = 'password-strength-bar';
            return;
        }
        
        // Vérifier la force du mot de passe
        const strength = checkPasswordStrength(password);
        updatePasswordStrength(strength);
        
        if (password.length < 8) {
            showValidation(password1Validation, 'warning', 'Le mot de passe doit contenir au moins 8 caractères');
            setIconState(password1Icon, 'warning');
        } else if (strength < 3) {
            showValidation(password1Validation, 'warning', 'Mot de passe faible');
            setIconState(password1Icon, 'warning');
        } else {
            hideValidation(password1Validation);
            setIconState(password1Icon, 'success');
        }
    });

    // Validation de la confirmation du mot de passe
    const password2Input = document.getElementById('password2');
    const password2Icon = document.getElementById('password2-icon');
    const password2Validation = document.getElementById('password2-validation');
    let password2Timeout;

    password2Input.addEventListener('input', function() {
        clearTimeout(password2Timeout);
        const password = this.value;
        const password1 = password1Input.value;
        
        if (password.length === 0) {
            hideValidation(password2Validation);
            resetIcon(password2Icon);
            return;
        }
        
        if (password !== password1) {
            showValidation(password2Validation, 'error', 'Les mots de passe ne correspondent pas');
            setIconState(password2Icon, 'error');
        } else {
            showValidation(password2Validation, 'success', 'Les mots de passe correspondent');
            setIconState(password2Icon, 'success');
        }
    });

    function checkUsername(username) {
        fetch('/users/check-username/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: 'username=' + encodeURIComponent(username)
        })
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                showValidation(usernameValidation, 'error', data.message);
                setIconState(usernameIcon, 'error');
            } else {
                showValidation(usernameValidation, 'success', data.message);
                setIconState(usernameIcon, 'success');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la vérification du nom d\'utilisateur:', error);
            hideValidation(usernameValidation);
            resetIcon(usernameIcon);
        });
    }

    function checkEmail(email) {
        fetch('/users/check-email/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: 'email=' + encodeURIComponent(email)
        })
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                showValidation(emailValidation, 'error', data.message);
                setIconState(emailIcon, 'error');
            } else {
                showValidation(emailValidation, 'success', data.message);
                setIconState(emailIcon, 'success');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la vérification de l\'email:', error);
            hideValidation(emailValidation);
            resetIcon(emailIcon);
        });
    }

    function checkPasswordStrength(password) {
        let strength = 0;
        
        // Longueur
        if (password.length >= 8) strength++;
        if (password.length >= 12) strength++;
        
        // Contient des chiffres
        if (/\d/.test(password)) strength++;
        
        // Contient des lettres minuscules
        if (/[a-z]/.test(password)) strength++;
        
        // Contient des lettres majuscules
        if (/[A-Z]/.test(password)) strength++;
        
        // Contient des caractères spéciaux
        if (/[^a-zA-Z0-9]/.test(password)) strength++;
        
        return strength;
    }

    function updatePasswordStrength(strength) {
        strengthBar.className = 'password-strength-bar';
        
        if (strength <= 2) {
            strengthBar.classList.add('password-strength-weak');
        } else if (strength <= 4) {
            strengthBar.classList.add('password-strength-medium');
        } else {
            strengthBar.classList.add('password-strength-strong');
        }
    }

    function showValidation(element, type, message) {
        element.textContent = message;
        element.className = 'validation-message show ' + type;
    }

    function hideValidation(element) {
        element.className = 'validation-message';
        element.textContent = '';
    }

    function setIconState(icon, state) {
        icon.className = 'input-icon fas';
        
        if (state === 'success') {
            icon.classList.add('input-success');
            icon.innerHTML = '<i class="fas fa-check-circle"></i>';
        } else if (state === 'error') {
            icon.classList.add('input-error');
            icon.innerHTML = '<i class="fas fa-times-circle"></i>';
        } else if (state === 'warning') {
            icon.classList.add('input-warning');
            icon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
        } else if (state === 'loading') {
            icon.classList.add('fa-spin');
            icon.innerHTML = '<i class="fas fa-spinner"></i>';
        } else {
            icon.innerHTML = '<i class="fas fa-user"></i>';
        }
    }

    function resetIcon(icon) {
        icon.className = 'input-icon fas';
        icon.innerHTML = '<i class="fas fa-user"></i>';
    }

    // Gestion de la soumission du formulaire
    document.getElementById('signup-form').addEventListener('submit', function(e) {
        // Ne pas empêcher la soumission normale
        // Laisser Django gérer la soumission
        
        const btn = document.getElementById('signup-btn');
        const btnText = btn.querySelector('.btn-text');
        const btnIcon = btn.querySelector('.btn-icon');
        const spinner = btn.querySelector('.loading-spinner');
        
        // Désactiver le bouton et afficher le chargement
        btn.disabled = true;
        btnText.textContent = 'Inscription...';
        btnIcon.style.display = 'none';
        spinner.style.display = 'inline-block';
        btn.classList.add('loading');
        
        // Vérifier que les mots de passe correspondent avant la soumission
        const password1 = password1Input.value;
        const password2 = password2Input.value;
        
        if (password1 !== password2) {
            e.preventDefault(); // Empêcher la soumission si les mots de passe ne correspondent pas
            showValidation(password2Validation, 'error', 'Les mots de passe ne correspondent pas');
            setIconState(password2Icon, 'error');
            
            // Réactiver le bouton
            btn.disabled = false;
            btnText.textContent = 'Créer mon compte';
            btnIcon.style.display = 'inline-block';
            spinner.style.display = 'none';
            btn.classList.remove('loading');
            return false;
        }
        
        // Laisser le formulaire se soumettre normalement
        // Le message de succès sera affiché par Django après redirection
    });

    // Focus sur le premier champ au chargement
    document.addEventListener('DOMContentLoaded', function() {
        usernameInput.focus();
    });
</script>