signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up - TalkCrate</title>
    <style>
    </style>
</head>
<body>

    <div class="container">
        <header>
            TalkCrate Sign Up
        </header>

        <form onsubmit="return validateForm()">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>

            <label for="newpassword">Password:</label>
            <input type="password" id="newpassword" name="newpassword" required>

            <button type="submit">Sign Up</button>
        </form>

        <p>Already have an account? <a href="index.html">Log in here</a>.</p>
    </div>

    <script>
        function validateForm() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("newpassword").value;
            fetch('https://https://talk-crate-d9uc.vercel.app//api/signup', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ username, password }),
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // Handle successful response from the server
                console.log('Success:', data);
            })
            .catch((error) => {
                // Handle error
                console.error('Error:', error);
            });

            return false; // Prevent the form from actually submitting
        }
    </script>

</body>
</html>