JSFiddle - React, Tailwind, and code Playground

by aslah

HTML

<form method="post" id="loginForm">
            <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Login</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        
                        <div class="modal-body">
                            <!-- login message from PHP file -->
                            <div id="loginMessage"></div>
                          
                            <div class="form-group">
                                <label for="loginEmail" class="sr-only">email</label>
                                <input type="email" class="form-control" id="loginEmail" name="loginEmail" class="form-control" placeholder="email" maxlength="50">
                            
                            </div>    
                            <div class="form-group">
                                <label for="loginPassword" class="sr-only">password</label>
                                <input type="password" class="form-control" id="loginPassword" name="loginPassword" class="form-control" placeholder="password" maxlength="30">
                            
                            </div>    
                            
                            <div class="checkbox">
                
                                <input type="checkbox" name="rememberme" id="rememberme">
                                <label for="checkbox">Remember me</label>

                                <a class="float-right" href="#forgotpasswordModal" data-toggle="modal"...

JavaScript

<?php
   
//starting the session
session_start();
//connecting to database
include('connection.php');
//check user inputs
// DEFINE ERROR MESSAGES //
$missingEmail = '<p><strong>Please enter your email address!</strong></p>';
$missingPassword = '<p><strong>Please enter a password!</strong></p>';

// $email = $_POST["loginEmail"]
// $password = $_POST["loginPassword"]

if(empty($_POST["loginEmail"])){
    $error .= $missingEmail;
}else{
    $email = filter_var($_POST["loginEmail"], FILTER_SANITIZE_EMAIL);
}
if(empty($_POST["loginPassword"])){
    $error .= $missingPassword;
}else{
    $password = filter_var($_POST["loginPassword"], FILTER_SANITIZE_STRING);
}

//If there are any ERRORS
if($error){
    $resultMessage = '<div class="alert alert-danger">'. $error .'</div>' ;
    echo $resultMessage ;
}else{
    $email = mysqli_real_escape_string($link, $email);
    $password = mysqli_real_escape_string($link, $password);
    // $password = md5($password); no secure
    $password = hash('sha256', $password); 


    //check if the user is registered by matching EMAIL & PASSWORD
    $sql = "SELECT * FROM users WHERE email = '$email' AND password = '$password' AND activation='activated' ";
    $result = mysqli_query($link, $sql);

    //if any errors while running the query
    if(!$result){
        echo '<div class="alert alert-danger"> Error running the query!</div>';
        exit;
    }

    //if login failed print ERROR
    $count = mysqli_num_rows($result);
    if($count !== 1){
        echo '<div class="alert alert-danger">Wrong username or password</div>';
    }else{

        
        $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
        $_SESSION['user_id'] = $row['user_id'];
        $_SESSION['username'] = $row['username'];   
        $_SESSION['email'] = $row['email'];

        //if remember me is not checked
        if(empty($_POST['rememberme'])){
            echo "success";
            
        }else{
            // if rememberme is checked 
           
 ...