Undefined variable: userpass in C:\xampp\htdocs\8990API\login.php

Question

Notice: Undefined variable: userpass in C:\xampp\htdocs\8990API\login.php on line 33 {"status":"fail","message":"Your Login Username or Password is invalid","data":"{\n \"username\": \"dsdsd\",\n \"userpass\": \"sdfsfsf\"\n}"}

WHERE username = '$username' and userpass = '$userpass' "; is the line 33

login.php

<ion-list no-lines>
      <ion-item  >
        <ion-input  round type="text" placeholder="Username" name="username" #username></ion-input>
      </ion-item>

      <ion-item>
        <ion-input type="password" placeholder="Password" name="userpass" #userpass></ion-input>
      </ion-item>

      <button ion-button round block (click)="signIn()">Sign In</button>


      <button ion-button round outline block (click)="RegisterPage()">Register</button>

    </ion-list>

login.ts signIn() {

    //// check to confirm the username and userpass fields are filled

    if (this.username.value == "") {

      let alert = this.alertCtrl.create({

        title: "ATTENTION",
        subTitle: "Username field is empty",
        buttons: ['OK']
      });

      alert.present();
    } else

    if (this.userpass.value == "") {

      let alert = this.alertCtrl.create({

        title: "ATTENTION",
        subTitle: "Password field is empty",
        buttons: ['OK']
      });

      alert.present();

    } else {

      var headers = new Headers();
      headers.append("Accept", 'application/json');
      headers.append('Content-Type', 'application/json');
      let options = new RequestOptions({
        headers: headers
      });

      let data = {
        username: this.username.value,
        userpass: this.userpass.value
      };

      let loader = this.loading.create({
        content: 'Processing please wait...',
      });

      loader.present().then(() => {

        this.http.post('http://localhost/8990API/login.php', data, options)
          .map(res => res.json())
          .subscribe(res => {
            console.log(res)
            loader.dismiss()
            if (res == "Login successfully") {

              let alert = this.alertCtrl.create({
                title: "CONGRATS",
                subTitle: (res.message),
                buttons: ['OK']
              });

              alert.present();
              this.navCtrl.push(HomePage, data);
              this.navCtrl.push(TabsPage);
            } 
            else {
              let alert = this.alertCtrl.create({
                title: "Incorrect entry please try again.",
                subTitle: (res.message),
                buttons: ['OK']
              });
              alert.present();
            }
          });
      });
    }
  }

login.php

<?php
require "dbconnect.php";

$data = file_get_contents('php://input');
    if (isset($data['username'])) {
        $request = json_decode($data,true);
        $username = $request['username'];
        $userpass = $request['userpass'];
    }

$sql = "SELECT ID FROM useraccount 
        WHERE username = '$username' and userpass = '$userpass' ";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
$active = $row['active'];

$count = mysqli_num_rows($result);

// If result matched $username and $userpass, table row must be 1 row

if ($count > 0) {
    $status = "success";
    $message = "Login successfully";
} else {
    $status = "fail";
    $message = "Your Login Username or Password is invalid";

}

echo json_encode(array('status' => $status, 'message' => $message, 'data' => $data));

?>

WHERE username = '$username' and userpass = '$userpass' "; is the line 33