<%- include('../partials/header_head.ejs') -%>

<link rel="stylesheet" href="/login/login.css">

<div onload="particles()" class="wrapper fadeInDown">
    <div id="formContent">
        <!-- Tabs Titles -->

        <!-- Icon -->
        <div class="fadeIn first">
            <a href="/"> <img id="form-logo" class="" src="https://www.pngall.com/wp-content/uploads/2016/05/Best-Quality-PNG.png" alt=""></a>
        </div>

        <!-- Login Form -->
        <form id="login_form" method="POST" action="">
            <input type="email" id="email" class="fadeIn second" name="email" placeholder="Your Email here" required>
            <br><input type="submit" class="fadeIn fourth" value="Send">
        </form>

        <div id="form_submitted_msg" class="alert alert-success" role="alert">
            Successfully sent, Please check your email.
        </div>
        <div id="failed_msg" class="alert alert-danger" role="alert">
            Something went wrong, Please make sure the email is correct.
        </div>

            </div>
            </div>
            
            <script>
$(".alert").hide();

$( "#login_form" ).submit(function( event ) {
  event.preventDefault();
  swal({ text: "Sending..", icon: "info", buttons: false });
  fetch("/send_email/reset_password", {
    method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email: $("#email").val() }),
    }).then(response => response.json())
        .then(data => {
            if (data.message == "success"){
                swal({ text: "Please check your email", icon: "success", });
                $("#form_submitted_msg").show();
                 $("#failed_msg").hide("fast");
            }
            else $("#failed_msg").show();
        });

});
            </script>

<%- include('../partials/footer') -%>