app/frontend/templates/pages/registration.html

{% extends "base.html" %}

{% block title %}
  <title>SignUp</title>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-center align-items-center vh-100" style="background-color: #111827; width: 100%;">
    <div class="card p-4" style="min-width: 360px; background-color: #1F2937; border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
        <div class="text-center mb-4">
            <div class="rounded-circle d-inline-flex align-items-center justify-content-center"
                 style="width: 60px; height: 60px; background-color: #19c37d;">
                <i class="bi bi-person-plus-fill text-white" style="font-size: 1.5rem;"></i>
            </div>
            <h3 class="mt-3 text-white">Create Account</h3>
            <p class="text-white small mt-1">Join our community</p>
        </div>

        <form id="registerForm">
            <div class="mb-3">
                <label class="form-label text-white">Email Address</label>
                <div class="input-group">
                    <input type="email" id="email" name="email"
                           class="form-control"
                           style="background-color: #374151; border: none; color: white; height: 44px;"
                           placeholder="your@email.com"
                           required>
                    <span class="input-group-text" style="background-color: #374151; border: none;">
                        <i class="bi bi-envelope text-muted"></i>
                    </span>
                </div>
                <div id="emailError" class="text-danger small mt-1"></div>
            </div>

            <div class="mb-3">
                <label class="form-label text-white">Password</label>
                <div class="input-group">
                    <input type="password" id="password" name="password"
                           class="form-control"
                           style="background-color: #374151; border: none; color: white; height: 44px;"
                           placeholder="••••••••"
                           required>
                    <span class="input-group-text" style="background-color: #374151; border: none;">
                        <i class="bi bi-lock text-muted"></i>
                    </span>
                </div>
                <div id="passwordError" class="text-danger small mt-1"></div>
            </div>

            <div class="mb-4">
                <label class="form-label text-white">Confirm Password</label>
                <div class="input-group">
                    <input type="password" id="confirmPassword" name="confirmPassword"
                           class="form-control"
                           style="background-color: #374151; border: none; color: white; height: 44px;"
                           placeholder="••••••••"
                           required>
                    <span class="input-group-text" style="background-color: #374151; border: none;">
                        <i class="bi bi-lock-fill text-muted"></i>
                    </span>
                </div>
                <div id="confirmPasswordError" class="text-danger small mt-1"></div>
            </div>

            <div class="d-grid mb-3">
                <button type="submit" class="btn rounded-pill py-2 fw-medium"
                        style="background-color: #19c37d; border: none; color: white;">
                    <i class="bi bi-person-plus me-2"></i> Sign Up
                </button>
            </div>

            <div class="text-center small text-white pt-2" style="border-top: 1px solid #374151;">
                Already registered?
                <a href="/login" class="text-success fw-medium" style="text-decoration: none;">Sign In</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block body_scripts %}
<script>
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        // Clear previous errors
        document.getElementById('emailError').textContent = '';
        document.getElementById('passwordError').textContent = '';
        document.getElementById('confirmPasswordError').textContent = '';

        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (password !== confirmPassword) {
            document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
            return;
        }

        try {
            const response = await fetch('/new_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email, password })
            });

            const data = await response.json();

            if (!response.ok) {
                if (data.detail) {
                    if (Array.isArray(data.detail)) {
                        data.detail.forEach(error => {
                            if (error.loc && error.loc.includes('email')) {
                                document.getElementById('emailError').textContent = error.msg;
                            }
                            if (error.loc && error.loc.includes('password')) {
                                document.getElementById('passwordError').textContent = error.msg;
                            }
                        });
                    } else {
                        alert(data.detail);
                    }
                }
                return;
            }

            alert('Registration successful!');
            window.location.href = '/last_user_chat';

        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred during registration');
        }
    });

    // Add password visibility toggle
    document.querySelectorAll('.input-group-text').forEach(icon => {
        icon.style.cursor = 'pointer';
        icon.addEventListener('click', function() {
            const input = this.parentElement.querySelector('input');
            if (input.type === 'password') {
                input.type = 'text';
                this.innerHTML = '<i class="bi bi-eye text-muted"></i>';
            } else {
                input.type = 'password';
                this.innerHTML = this.classList.contains('bi-lock-fill') ?
                    '<i class="bi bi-lock-fill text-muted"></i>' :
                    '<i class="bi bi-lock text-muted"></i>';
            }
        });
    });
</script>
{% endblock %}