For the past week, I've been working on developing a service that can connect to a website and retrieve information from it, such as a list of machines.
I want to achieve this using TypeScript with Angular and utilizing Angular's HTTP client.
Here is what I am attempting to do:
var axios = require('axios').default
var email = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5933363137773d363c193a363429383720773a3634">[email protected]</a>'
var password = 'MYPASSWORD'
var auth_url = 'https://thisisthewebsitelink.com/api-token-auth/'
axios.post(auth_url, { email, password }).then(ret => {
var token = ret.data.token
// Create an instance with default authorization header set
var instance = axios.create({
baseURL: 'https://thisisthewebsitelink.com/api/',
headers: { Authorization: 'TOKEN ' + token },
})
// List machines
instance.get('/machines').then(ret => console.log(ret.data))
})
What I currently have:
httpservice.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { Identifiant } from './login';
const auth_url = 'https://thisisthewebsitelink.com/api-token-auth' ;
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: 'root'
})
export class HttpService {
constructor(private httpClient: HttpClient) { }
login(email : string, password: string): Observable<any> {
return this.httpClient.post(
auth_url,
{
email,
password,
},
httpOptions
)
}
}
app.component.ts
import { Component } from '@angular/core';
import { HttpService } from './Service/httpservice.service';
import { FormGroup, FormBuilder } from "@angular/forms";
import { AppModule } from './app.module';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: any = {
email: null,
password: null
};
isSuccessful = false;
isSignUpFailed = false;
errorMessage = '';
constructor(private authService: HttpService) { }
ngOnInit(): void {
}
onSubmit(): void {
const { email, password } = this.form;
this.authService.login(email, password).subscribe({
next: data => {
console.log(data);
this.isSuccessful = true;
this.isSignUpFailed = false;
},
error: err => {
this.errorMessage = err.error.message;
this.isSignUpFailed = true;
}
});
}
}
app.component.html
<div class="row justify-content-center mt-5">
<div class="col-md-4">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" formControlName="email" required>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" formControlName="password" required>
</div>
<br>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</div>
</form>
</div>
</div>
I have tried many other approaches but keep running into the same issue where it doesn't work. Right now, I'm getting the error ERROR TypeError: this.form.get is not a function.