Проект колледжа: добавьте подтверждение адреса электронной почты на странице регистрации, его можно использовать для входа в angular 6, внешний интерфейс

Question

Это страница регистрации в HTML. Я хочу, чтобы, когда пользователь нажимал кнопку регистрации, он отправлял электронное письмо со ссылкой для подтверждения, API для проверки электронной почты был «/ verify / email», и когда пользователь подтвердил эту ссылку с помощью токена, только тогда он сможет войти в систему.

Если пользователь не подтвердит эту ссылку, он не сможет войти в систему.

signup.component.html

<div class="login-wrapper">
  <form #f="ngForm" (submit)="onRegister(name.value, email.value, password.value, $event)">
  <div class="form-wrapper">
    <div class="row">
      <div class="col-xs-12">
        <div class="input-field">
          <input type="name" required name="name" placeholder="Full Name" name="name" id="admin-name" #name="ngModel" ngModel>
        </div>
        <div class="text-red" *ngIf="name.invalid && (name.dirty || name.touched)">
            *Name is required  
        </div>

      </div>

      <div class="col-xs-12">
        <div class="input-field">
          <input type="email" required name="email" placeholder="Email Address" name="email" id="admin-email" #email="ngModel" ngModel>
        </div>
        <div class="text-red" *ngIf="email.invalid && (email.dirty || email.touched)">
            *Email is required  
        </div>
      </div>

      <div class="col-xs-12">
        <div class="input-field">
          <div class="input-wrapper">
            <input type="password" required name="Password" placeholder="Password" #password="ngModel" id="password-input" ngModel>
            <div class="eye-password" (click)="showPassword()"> 
              <img src="./assets/images/auth/show.png" alt="">
            </div>
            <div class="text-red" *ngIf="password.invalid && (password.dirty || password.touched)">
            *Password is required  
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12">
        <div class="input-field">
          <div class="input-wrapper">
            <input type="password" required name="PasswordConfirm" placeholder="Confirm-Password" #pwConfirm="ngModel" compare="Password"  id="password-input1" ngModel>
            <div class="eye-password" (click)="showPassword1()">
              <img src="./assets/images/auth/show.png" alt="">
            </div>
            <div class="text-danger" *ngIf="pwConfirm.invalid && (pwConfirm.dirty || pwConfirm.touched)">
              <div class="text-red"> 
                <div *ngIf="pwConfirm.errors['required']">*Password Confirm is required</div>
                <div *ngIf="pwConfirm.errors['compare']">*Password Confirm do not match</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12">
        <div class="input-field submit-wrap">
          <button class="btn btn-pink" type="submit" id="register-btn">Register</button>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="input-field">
          <h4 class="text-white register-link">Already Registered</h4>
          <a [routerLink]="['/auth/login']" class="orange-link">Login Here!</a>
        </div>
      </div>
    </div>
  </div>
</form>
<br>
</div>

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { StorageService } from '../../services/storage.service';
import { Router} from "@angular/router";

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {

  constructor(
    private apiService: ApiService,
    private router: Router,
    private storage: StorageService) { 
  }

  ngOnInit() {
  }

  showPassword(){
    let passwordEle = document.getElementById('password-input') as HTMLInputElement;
    let crossEyeEle = document.getElementsByClassName('eye-password')[0]  as HTMLInputElement;
    if(passwordEle.type == 'text'){
      passwordEle.type = 'password';
      crossEyeEle.style.opacity= '0.5';
    }
    else{
      passwordEle.type = 'text';
      crossEyeEle.style.opacity= '1';
    }

  }

  showPassword1(){
    let passwordEle1 = document.getElementById('password-input1') as HTMLInputElement;
    let crossEyeEle1 = document.getElementsByClassName('eye-password')[0]  as HTMLInputElement;
    if(passwordEle1.type == 'text'){
      passwordEle1.type = 'password';
      crossEyeEle1.style.opacity= '0.5';
    }
    else{
      passwordEle1.type = 'text';
      crossEyeEle1.style.opacity= '1';
    }

  }

  onRegister(name, email, password, event: Event){
    event.preventDefault();
    let loginEle = document.getElementById('register-btn') as HTMLInputElement;
    // let token = this.storage.getItem('token');
    // console.log(token);
    loginEle.innerHTML = 'Registering...'
    // this.storage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1OWFkMThlN2RlN2I5YjI1MDg2NmNkNzUiLCJyb2xlIjo2LCJjb21wYW55SWQiOiI1OWE5NDY4NjViZmJhODk5ZjE4MTBlYTkiLCJib29rbWFya0lkIjpudWxsLCJpYXQiOjE1MTQ4NjY5NjQsImV4cCI6MTY2NDg2Njk2NH0.cbeTI_AiwBWE54V2TNuzTwc7P99l9snAbiNzxDMpMe4');
   //  this.storage.setItem('userId', '59ae3b20a8473d45d11987f8')
     //  this.router.navigate(['dashboard/program-running']);

    let parameters:any = {};
    parameters.method  = 'POST';    
    parameters.url = '/signup/spoc';
    // parameters.data = {
    //   email: email,
    //   password: password,
    //   // device_os: 'web',
    //   // device_identity: 'abcdef'
    // }
    parameters.token = undefined;
    parameters.data = {
        name: name,
      email: email,
      password: password,
      device_os: 'webapp',
      device_identity: '1' 
    }
    // = "email=" + email + "&password=" + password ;

    this.apiService.sendRequest(parameters, 'account')
      .subscribe(
        (data:any) => {
          this.router.navigate(['/auth/signin']);
          loginEle.innerHTML = 'Register'
        },
        (error:any) => {
          alert(error);
          loginEle.innerHTML = 'Register'
        }
      );
  }

}

Как добавить ссылку для проверки, чтобы, когда пользователь нажимает кнопку регистрации, токен вместе с URL-адресом передается для подтверждения электронной почты, а когда ссылка подтверждается, пользователь вводит адрес электронной почты и пароль, и с этого токена он может войти в систему.