Aurelia - Unable to access variables in my template - aurelia

Question

Simple question.
I have a login template - a form for username and password:
<template>
<section>
<h2>${heading}</h2>
<form role="form" submit.delegate="login()">
<div class="form-group">
<label for="userName">User Name</label>
<input type="text" value.bind="userName" class="form-control" id="userName" placeholder="User Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" value.bind="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="button" click.delegate="submitLogin()" class="btn btn-default">Login</button>
</form>
<hr>
<div class="alert alert-danger" if.bind="loginError">${loginError}</div>
</section>
I have looked around to find out how I can access these variables in my login.ts file.
In particular I want to eventually send them to the api once the button login has been pressed.
I have a submitLogin() function but I dont know how you access the variables username and password.
Can someone show me how these variable are accessed.
I get a red underscore for username and password..
import { HttpClient } from "aurelia-fetch-client";
import { autoinject } from "aurelia-framework";
import { TokenService } from "../tokenService";
#autoinject
export class Login {
http: HttpClient;
tokenService: TokenService;
heading = "Login";
constructor(tokenService: TokenService, http: HttpClient, ) {
this.tokenService = tokenService;
this.http = http;
}
public submitLogin(): void {
console.log("userName, Password", this. userName, this.password);
}
}

Answer 1

form submit logic can be bound to <form> itself having given the button type submit
<form role="form" submit.delegate="submitLogin()">
<div class="form-group">
<label for="username">User Name</label>
<input type="text" value.bind="username" class="form-control" id="username" placeholder="User Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" value.bind="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
you can make your class fields accessible from the view or otherwise as below
import { HttpClient } from "aurelia-fetch-client"
import { autoinject } from "aurelia-framework"
import { TokenService } from "../tokenService"
#autoinject
export class Login {
heading: string = "Login"
username: string = ''
password: string = '' // these are pubic fields available in your view unless you add 'private' in front of them
constructor(private tokenService: TokenService, private http: HttpClient) { // this way you can keep them private since they are not needed in the view
}
submitLogin() {
const { username, password } = this
if (!!username && !!password) { // or your validations
this.tokenService.login({ username, password })
}
}
}