<?php

session_start();

try {

    // connect to the database
    require 'connect.php';
    // data from the browser
    $sUserName = $_POST['txtEmailorPhoneNumber'];
    $sPassword = $_POST['txtPassword'];
    // create a query to compare data in the database with data from the browser
    $query = $conn->prepare("SELECT * FROM users WHERE userName=':userName' AND password=':password'");
    $query->bindParam( ':userName' , $sUserName );
    $query->bindParam( ':password' , $sPassword );
    // run query
    $bResult = $query->execute();
    $ajResult = $query->fetch(PDO::FETCH_ASSOC);
    // take each property one by one
    $sUserId = $ajResult['userId'];
    $_SESSION['sUserId'] = $sUserId;
    $sUserRole = $ajResult['userRoles_roleId'];
    $sUserName = $ajResult['userName'];
    $sFirstName = $ajResult['firstName'];
    $sLastName = $ajResult['lastName'];
    $sImagePath = $ajResult['image'];
    $sjResponse = $bResult ? '{"status":"ok", "userId":"'.$sUserId.'", "userRole":"'.$sUserRole.'", "userName":"'.$sUserName.'", "firstName":"'.$sFirstName.'", "lastName":"'.$sLastName.'", "image":"'.$sImagePath.'"}' : '{"status":"error"}';
    echo $sjResponse;
        } catch (Exception $e) {

            echo "ERROR";

        }
?>

function loginUser() {
      // it is not the OPTIMAL way to fix the reload issue and there
      var ajax = new XMLHttpRequest();
      ajax.onreadystatechange = function() {
          if ( this.readyState == 4 && this.status == 200 ) {

              ajUserDataFromServer = JSON.parse(this.responseText);
              console.log( "Response:", ajUserDataFromServer );

              if ( ajUserDataFromServer.status == "ok" ) {

                  //after login also sets key values to the sessionstorage
                  sessionStorage.setItem( 'status', 'loggedin' );
                  sessionStorage.setItem( 'userId', ajUserDataFromServer.userId );
                  sessionStorage.setItem( 'userRole', ajUserDataFromServer.userRole );
                  sessionStorage.setItem( 'userName', ajUserDataFromServer.userName );
                  sessionStorage.setItem( 'firstName', ajUserDataFromServer.firstName );
                  sessionStorage.setItem( 'lastName', ajUserDataFromServer.lastName );
                  sessionStorage.setItem( 'image', ajUserDataFromServer.image );

                  pageLogin.style.display = "none";

                  loggedin = true;


                  // for ADMIN view
                  if ( (loggedin === true ) && (sessionStorage.getItem( 'userRole' ) === "1" ) ) {


                      showWelcomeMessage();
                      showAdminInterface();
                      getProductData();
                      getUserData();
                      getSubriberData();


                  // for USER view
                  } else if (loggedin === true && sessionStorage.getItem('userRole') === "2") {

                      showWelcomeMessage();
                      showUserInterface();
                      getProductData();

                  }

              } else {

                  //console.log( "LOGIN FAIL - TRY AGAIN" );
                  pageLogin.style.display = "flex";
                  pageViewProducts.style.display = "none";
                  lblLoginErrorMessage.innerHTML = "";
                  var sLoginErrorMessage = "Login Failed - Try again";
                  lblLoginErrorMessage.insertAdjacentHTML('beforeend', sLoginErrorMessage );

              }
          }
      }


      ajax.open( "POST", "api_login_users.php", true );
      var jFrmLogin = new FormData( frmLogin );
      ajax.send( jFrmLogin );

  }

<!-- LOGIN for USERS and ADMIN -->
<div id="pageLogin" class="page popup">
    <div class="wrapper">
        <h3>LOGIN</h3>
        <form class="form" id="frmLogin">
           <input type="text" name="txtEmailorPhoneNumber" placeholder="Mobile number or Email" required>
           <input type="text" name="txtPassword" placeholder="Password" required>
           <button type="button" class="btnForm" id="btnLoginForm">Login</button>
            <div class="lblFormExtention">
              <p class="pnoAccount">Don´t have an account?</p>
              <button type="button" class="btnShowPage" id="btnSignup">Signup</button>
            </div>
        </form>
        <h3 class="lblErrorMessage" id="lblLoginErrorMessage"></h3>
    </div>
</div>