My current project involves integrating Google Firebase to handle the login functionality. I encountered an issue where the data inputted from the HTML page to the component.ts file was not being processed or reaching Firebase. However, when I initialized the variables, the connection worked smoothly.
components.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
//email:string = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73161e121a1f330a121b1c1c5d1501">[email protected]</a>';
//password:string = 'password'; // it connect when i initialize the var's
constructor(private authService: AuthService, private router:Router) { }
ngOnInit() {
}
seConnecter(email,password)
{
this.authService.signInUser(email,password).then(
() => {
alert('Welcome '+ email);
this.router.navigate(['']);
},
(error) => {
console.log('Connection Problem '+error);
alert('Account inaccessible');
}
);
}
}
component.html
<div class="container">
<h1>
log-In
</h1>
<form>
<div class="form-group">
<label for="name">E-mail :</label>
<input type="email" class="form-control" required id="email" #email>
</div>
<div class="form-group">
<label for="alterEgo">Password :</label>
<input type="password" class="form-control" required id="password" #password>
</div>
<button type="submit" class="btn btn-success" (click)='seConnecter(email,password)'>Submit</button>
</form>
</div>