app/frontend/templates/pages/registration.html

{% extends "base.html" %}

{% block title %}
    <title>User Registration</title>
{% endblock %}

{% block content %}
    <div class="login-body">
        <h1>Register New User</h1>
        <form id="registrationForm">
            <div class="form-group">
                <label class="login-label" for="email">Email:</label>
                <input class="input-field" type="email" id="email" name="email" required>
                <div id="emailError" class="error"></div>
            </div>
            <div class="form-group">
                <label class="login-label" for="password">Password (8-32 characters):</label>
                <input class="input-field" type="password" id="password" name="password" required minlength="8" maxlength="32">
                <div id="passwordError" class="error"></div>
            </div>
            <button class="login-button" type="submit">Register</button>
        </form>
    </div>
{% endblock %}

{% block body_scripts %}
    <script>
        document.getElementById('registrationForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Clear previous errors
            document.getElementById('emailError').textContent = '';
            document.getElementById('passwordError').textContent = '';
            
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch('/new_user', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        email: email,
                        password: password
                    })
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    // Handle validation errors from backend
                    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 {
                            // Handle single error message
                            alert(data.detail);
                        }
                    }
                    return;
                }
                
                // Registration successful
                alert('User registered successfully!');
                // Optionally redirect to login page or other page
                // window.location.href = '/login';
                
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred during registration');
            }
        });
    </script>
{% endblock %}