I need to make a login page that contains an APIkey that the user already owns.

On the Login page, the user enters his key and accesses the site. I don't know how to import the input value in service auth.

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private http: HttpClient) { }

  APIkey = `99535281c5b2c837479f8f91f82d88b3a3698072d1f8557b437` //this is the api I want to import from the input 
  signUpURL = `https://gorest.co.in/public/v2/users?access-token=${this.APIkey}`
  signInURL = `https://gorest.co.in/public/v2/users?access-token=${this.APIkey}`


  isLoggedIn = false; 


  isAuthenticated(){
    return this.isLoggedIn 
  }

  signUp(email: string, name: string, gender: string, status: string){
  return this.http.post(this.signUpURL,{email: email, name: name, gender: gender, status: status, returnSecureToken: true})
  }

  signIn(accesstoken: string){
    return this.http.post(this.signInURL,{accesstoken: accesstoken, returnSecureToken: true})
    }

}

signin.component.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent {
  constructor(private authService: AuthService){}
  
   //this is the function that the api gets from the input
   onSubmit(accesstoken: string) {
  console.log(accesstoken)
}
} 

signin.component.html

<h1>Login</h1>
<!-- <form #signinForm="ngForm" (ngSubmit)="onSubmit(signinForm)"> -->
  <form #signinForm="ngForm" (ngSubmit)="onSubmit(accesstoken.value)">

 <mat-form-field appearance="fill">
  <mat-label>Access Token</mat-label>
  <input matInput type="text" name="accesstoken" #accesstoken ngModel required>
 </mat-form-field>


 <button mat-raised-button color="primary" type="submit" [disabled]="!signinForm.valid">Send</button>
</form>

In short, I would like the APIkey variable present in auth.service.ts to be updated with the api entered by the user in the input. Can someone help me?

CodePudding user response：

I had to make changes in all parts of your code, e.g. I turned your form into a proper reactive form. Yet the biggest issue I found was in the Auth-Service:

signInURL = https://gorest.co.in/public/v2/users?access-token=${this.APIkey};

Inside this string this.APIkey will be assigned once and never gets updated again! That's why in my own code the final request-url gets assembled inside signUp() resp. signIn().

The relevant part of the SignIn-Component TS:

form: FormGroup;

constructor(private authService: AuthService) {
    // Initialize the form
    this.form = new FormGroup({
        accesstoken: new FormControl('', Validators.required)
    });
}

onSubmit() {
    console.log('Access-token entered by the user:', this.form.value.accesstoken);
    // Store API-Key entered by user to Auth-Service:
    this.authService.APIkey = this.form.value.accesstoken;
    // Reset form-inputs:
    this.form.reset();
    // Send API-Key entered by user to backend:
    this.authService.signIn(this.authService.APIkey).subscribe(
        data => {
            console.log('Data Returned from backend:', data);

            // TODO: Do something with the data returned from the backend               
        }
    );      
}

The SignIn-Component HTML:

<h1>Login</h1>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <mat-label>Access Token</mat-label>
      <input matInput type="text" formControlName="accesstoken" required>
    </mat-form-field>
    <button mat-raised-button type="submit" [disabled]="form.invalid">Submit</button>
</form>

The Auth-Service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

    // Important!
    // You basically shouldn't store a working default API-Key in your frontend!
    APIkey = '99535281c5b2c837479f8f91f82d88b3a3698072d1f8557b437';
    signUpURL = 'https://gorest.co.in/public/v2/users?access-token=';
    signInURL = 'https://gorest.co.in/public/v2/users?access-token=';
  
    isLoggedIn = false; 

    constructor(private http: HttpClient) { }
  
    isAuthenticated(){
        return this.isLoggedIn 
    }
  
    signUp(email: string, name: string, gender: string, status: string){
        // Assemble the final url here:
        const signUpUrl = this.signUpURL   this.APIkey;
        return this.http.post(signUpUrl,{email: email, name: name, gender: gender, status: status, returnSecureToken: true});
    }
  
    signIn(accesstoken: string){
        // Assemble the final url here:
        const signInUrl = this.signInURL   this.APIkey;
        return this.http.post(signInUrl,{accesstoken: accesstoken, returnSecureToken: true});
    }
}