// Javascript async function signupFormHandler(event) { event.preventDefault(); const username = document.querySelector('#username-signup').value.trim(); const email = document.querySelector('#email-signup').value.trim(); const password = document.querySelector('#password-signup').value.trim(); if (username && email && password) { const response = await fetch('/api/users', { method: 'post', body: JSON.stringify({ username, email, password, }), headers: { 'Content-Type': 'application/json' }, }); if (response.ok) { console.log(response); } else { alert(response.statusText); } } } async function loginFormHandler(event) { event.preventDefault(); const email = document.querySelector('#email-signup').value.trim(); const password = document.querySelector('#password-signup').value.trim(); if (email && password) { const response = await fetch('/api/users/login', { method: 'post', body: JSON.stringify({ email, password, }), headers: { 'Content-Type': 'application/json' }, }); if (response.ok) { document.location.replace('/') } else { alert(response.statusText); } } } document.querySelector('.signup-form').addEventListener('submit', signupFormHandler); document.querySelector('.login-form').addEventListener('submit', loginFormHandler); <!-- HTML --> <form class='login-form'> <div> <label for='email-login'>email:</label> <input type='text' id='email-login' /> </div> <div> <label for='password-login'>password:</label> <input type='text' id='password-login' /> </div> <div> <button type='submit'>login</button> </div> </form> <form class='signup-form'> <div> <label for='username-signup'>username:</label> <input type='text' id='username-signup' /> </div> <div> <label for='email-signup'>email:</label> <input type='text' id='email-signup' /> </div> <div> <label for='password-signup'>password:</label> <input type='text' id='password-signup' /> </div> <div> <button type='submit'>login</button> </div> </form> <script src="/javascript/login.js"></script>