<%- include('partials/header'); -%>
 <form class="form">
    <h2>Sign up</h2>
    <label for="username"class="labelT">Username</label>
    <input type="text" name="username" required class="inputT">
    <div class="username error"></div>
    <label for="password"class="labelT">Password</label>
    <input type="password" name="password" required class="inputT">
    <div class="password error"></div>
    <button class="button">Sign up</button>
 </form>


 <script>
    const form = document.querySelector('form')
    const passwordError = document.querySelector('.password.error').textContent
    const usernameError = document.querySelector('.username.error')


    form.addEventListener('submit', async (e) => {
        e.preventDefault()

 
        passwordError.textContent = ''
        usernameError.textContent = ''

        const username = form.username.value
        const password = form.password.value

        try {
            const res = await fetch('/signup', { 
        method: 'POST', 
        body: JSON.stringify({ password, username }),
        headers: {'Content-Type': 'application/json'}
      });
            const data = await res.json()
            if (data.errors) {
                passwordError.textContent = data.errors.password
                usernameError.textContent = data.errors.username
            }
            if (data.user) {
                const ras = await fetch('/wishDeclare', {
                method: 'POST',
                body: JSON.stringify({username}),
                headers: {'Content-Type': 'application/json'}
            })
                location.assign('/')
            }


        } catch (error) {
            console.log(error);
        }


    })
 </script>
<%- include('partials/footer'); -%>