Login form, Angular 5 and nodeJS - node.js

Question

I'm trying to implement a form using Angular5 and NodeJS
The original form, I was given, is set up as:
<form action="https://www.myUrl.co.uk/signin" method="post">
<table border="0">
<tbody>
<tr>
<td>Username:</td>
<td><input id="Username" name="email" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input id="Password" name="password" type="password" /></td>
</tr>
<tr>
<td></td>
<td><input name="submit" type="submit" value="Login" /></td>
</tr>
</tbody>
</table>
</form>
I've noticed that in the headers the form Data sends:
email=some#email.co.uk&password=omsmmsms&submit=Login
In order to use it within Angular I've set app as follows
template form:
<form name="clientForm" id="clientForm" novalidate [formGroup]='clientForm' (ngSubmit)="submitForm()">
<div class="row control-group">
<label for="userName">UserName</label>
<input formControlName="userName" type="text" class="form-control" placeholder="UserName" id="userName">
<label for="password">Password</label>
<input formControlName="password" type="password" class="form-control" placeholder="password" id="password">
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-lg" >Send</button>
</div>
</div>
</div>
</form>
The component file:
submitForm() {
const userName = this.clientForm.get('userName').value;
const password = this.clientForm.get('password').value;
this.contactService.client(userName, password)
.subscribe((response) => {
if (response.msg === 'sent') {
this.success = response.sucess;
this.clientForm.reset();
}
});
}
This subscribes to a observable function in a service:
public client(userName, password): Observable<any> {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/X-www-form-urlencoded',
})
};
let body = "Username="+userName+"&password="+password;
return this.http.post(this.url+'contact/client', body, httpOptions)
.map((response) => {
//window.open('https://www.accountancymanager.co.uk/myinfo', '_blank');
return response;
})
.catch((error: Response) => Observable.throw(error.json()) )
}
The service connect to a NodeJS route below:
router.post('/client', function (req, res) {
var options = {
url: 'https://www.accountancymanager.co.uk/signin',
method: 'POST', // Don't forget this line
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-MicrosoftAjax': 'Delta=true',
'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:24.0) Gecko/20100101 Firefox/24.0',
},
form: {
'Username' :req.body.Username,
'Password' :req.body.password
}
};
request(options, (err, response, body) => {
if (err) {
console.log(err);
} else {
res.json('something')
console.log(options.form);
}
});
});
I get no errors from the above, but how do I send the user in the Angular app to the login page after success?
Simply redirecting doesn't work.
Or is there another way?
Maybe sending all data from the service, no NodeJS?
Let me know if unclear

Answer 1

put this in your code:
import {Router} from '#angular/router';
constructor(private router: Router) {
}
submitForm() {
const userName = this.clientForm.get('userName').value;
const password = this.clientForm.get('password').value;
this.contactService.client(userName, password)
.subscribe((response) => {
if (response.msg === 'sent') {
this.success = response.sucess;
// this.clientForm.reset();
this.router.navigate(['your route']);
}
});
}