<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log In or Sign Up | Crispy</title>
    <link rel="icon" type="image/png" href="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <meta name="description" content="Sign in or create an account on Crispy | it's Crispy Chicken">
    <meta property="og:site_name" content="Crispy-Chat">
    <meta property="og:title" content="Login or Sign Up | Crispy">
    <meta property="og:image" content="https://tallerthanshort.github.io/ut3.ggpht/icons/crispy.png">
    <meta property="og:description" content="Sign in or create an account on Crispy | it's Crispy Chicken">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <%- include('../partials/header') %>
    <div style="height: 100%; display: flex; color: #fff; align-items: center; flex-direction: column; justify-content: center; background-size: cover; background-position: center;">
        <div style="text-align: center; padding: 48px 26px 24px; overflow: visible; box-sizing: border-box;">
            <form id="login-form">
                <h2>Log In</h2>
                <div style="padding: 10px;">
                    <input type="email" name="email" placeholder="Email">
                    <input type="password" name="password" placeholder="Password" autocomplete="off">
                </div>
                <button type="submit">Log in</button>
              </form>
              <form id="signup-form">
                <h2>Sign Up</h2>
                <div style="padding: 10px;">
                    <input type="email" name="email" placeholder="Email">
                    <input type="text" name="username" placeholder="Username" autocomplete="off">
                    <input type="password" name="password" placeholder="Password" autocomplete="off">
                </div>
                <button type="submit">Sign up</button>
              </form>
              <h3 style="color: red;">By continuing, you <underline>agree</underline> to our <a style="text-decoration: underline;  cursor: pointer;" href="https://github.com/Common-Codes/crispy-chat/blob/main/legal/Terms%20of%20Service.md">Terms of Service</a> <underline><i>and</i></underline> <a style="text-decoration: underline; cursor: pointer;" href="https://github.com/Common-Codes/crispy-chat/blob/main/legal/Privacy%20Policy.md">Privacy Policy</a>.</h3>
        </div>
    </div>
      <script>
        const loginForm = document.getElementById('login-form');
        const signupForm = document.getElementById('signup-form');

        loginForm.addEventListener('submit', (event) => {
            event.preventDefault();
            const email = loginForm.email.value;
            const password = loginForm.password.value;
            fetch('/auth/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password })
            })
                .then(response => {
                if (response.ok) {
                    // User is authenticated
                    setTimeout(function(){window.location.href = '/app'},1000);
                } else {
                    // Authentication failed
                    response.text().then(errorMessage => {
                    console.error(errorMessage);
                    });
                }
                })
                .catch(error => {
                console.error(error);
                });
        });

        signupForm.addEventListener('submit', (event) => {
            event.preventDefault();
            const email = signupForm.email.value;
            const password = signupForm.password.value;
            const username = signupForm.username.value

            fetch('/auth/signup', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password, username })
            })
                .then(response => {
                if (response.ok) {
                    // User is authenticated
                    window.location.href = '/app';
                } else {
                    // Authentication failed
                    response.text().then(errorMessage => {
                    console.error(errorMessage);
                    });
                }
                })
                .catch(error => {
                console.error(error);
                });
        });

      </script>
</body>
</html>