<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Community Homepage</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h4><i class="fa-solid fa-user mr-2 fa-sm"></i>Login Form</h4>
          </div>
          <div class="card-body">
            <form action="/login" method="POST">
              <div class="form-group">
                <label for="userid">User ID:</label>
                <input type="text" class="form-control" id="userid" name="userid" required>
              </div>
              <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" class="form-control" id="password" name="password" required>
              </div>
              <button type="submit" class="btn btn-primary">
                <i class="fa-solid fa-right-to-bracket mr-2"></i>Login
              </button>
              <!-- Forgot Password Button -->
              <button class="btn btn-secondary mx-2" data-toggle="modal" data-target="#forgotPasswordModal">
                <i class="fa-solid fa-circle-question mr-2"></i>Forgot Password?
              </button>
            </form>
            <a href="/profile/create"><button class="btn btn-warning my-3">
              <i class="fa-solid fa-user-plus mr-2"></i>Register Now!</button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- Modal -->
<div class="modal fade invite-modal" id="forgotPasswordModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fa-solid fa-circle-question mr-2"></i>Forgot Password</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="forgotPassUser">User ID:</label>
                    <input type="text" id="forgotPassUser" class="form-control" placeholder="Enter User ID">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="forgotPassword(event)">Submit</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  function forgotPassword(event) {
    $('#forgotPasswordModal').modal('hide')
    const input=document.getElementById('forgotPassUser').value;
    if(input){
      fetch('/profile/passwordReset?userId='+input)
      .then((res)=>res.json())
      .then((res)=>{
            console.log(res);
            if(res.reset=='valid'){
              Swal.fire({
                title: 'Password Reset Successful!',
                text: 'Check Your Mail',
                icon: 'success',
                confirmButtonText: 'OK'
              })
            }
            else if (res.reset=='invalid')
              Swal.fire({
                title: 'Password Reset Failed!',
                text: 'Enter valid ID',
                icon: 'error',
                confirmButtonText: 'OK'
              })
            else
              Swal.fire({
                title: 'Server Error!',
                text: 'Something Went Wrong',
                icon: 'error',
                confirmButtonText: 'OK'
              })
      })
    }
  }
</script>

<script>
  const query=<%- query %>;

  if(query.registration=='success')
    Swal.fire({
      title: 'Successfully Registered!',
      text: 'Wait for Admin Approval',
      icon: 'success',
      confirmButtonText: 'OK'
    })

  if(query.registration=='failure')
    Swal.fire({
              title: 'Registration Failed!',
              text: 'Try Again Later or Contact Admin!',
              icon: 'error',
              confirmButtonText: 'OK'
            })

  if(query.login=='failure')
    Swal.fire({
              title: 'Login Failed!',
              text: 'Enter Valid Credentials!',
              icon: 'error',
              confirmButtonText: 'OK'
            })
  if(query.login=='notApproved')
    Swal.fire({
              title: 'Account Not Approved Yet!',
              text: 'Wait for Admin Approval.',
              icon: 'warning',
              confirmButtonText: 'OK'
            })
  
  if(query.adminCheck=='failure')
    Swal.fire({
                title: 'Admin Authentication Required!',
                text: 'Please login as Admin.',
                icon: 'warning',
                confirmButtonText: 'OK'
              })    
    
</script>
