<%- include('logintop') %>
<script type="text/javascript">
    app.auth.redirectIfLoggedIn();
</script>

<body>
    <section class="wrapper">
        <div class="form signup iot-card">
            <!--<div class="form signup card" -->
            <header>Signup</header>
            <!-- localhost/api/v0/user/register -->
            <!-- evalAjax Fires when status 200 is returned  -->
            <form action="auth/register" onsubmit="formAJAX(this)" evalAJAX="app.auth.logInRedirect();">
                <input type="text" name="firstname" placeholder="First Name" required />
                <input type="text" name="lastname" placeholder="Last Name" required />
                <input type="text" name="username" placeholder="Username" required />
                <input type="text" name="email" placeholder="Email" required />
                <input type="text" name="address" placeholder="Address" required />
                <input type="text" name="phone" placeholder="Phone Number" required />
                <input type="password" name="password" placeholder="Password" required />
                <input type="password" name="confirmPassword" placeholder="Confirm Password" required />
                <input type="submit" value="Signup" />
            </form>
        </div>

        <div class="form login iot-card">
            <header>Login</header>
            <div class="card-header shadow actionMessage" style="display:none"></div>
            <!-- evalAjax Fires when status 200 is returned  -->
            <form action="auth/login" onsubmit="formAJAX(this)" 
            evalAJAX="app.auth.homeRedirect();
            app.auth.setToken(data.token);
            app.auth.setUserId(data.userid);
            app.auth.setUsername(data.username);
            ">
            
                <input type="text" name="userInfo" placeholder="Email address | Username" required />
                <input type="password" name="password" placeholder="Password" required />
                <a href="/resetPassword">Forgot password?</a>
                <input type="submit" value="Login" />
            </form>
        </div>

        <script>
            const wrapper = document.querySelector(".wrapper"),
                signupHeader = document.querySelector(".signup header"),
                loginHeader = document.querySelector(".login header");

            loginHeader.addEventListener("click", () => {
                wrapper.classList.add("active");
            });
            signupHeader.addEventListener("click", () => {
                wrapper.classList.remove("active");
            });
        </script>
    </section>

</body>

</html>

