Hello, I am a beginner in Angular and struggling to make my code work. It seems like a basic functionality issue that I can't seem to figure out.
My goal is to send a post request to my .NET core API to register a user, and once that is done, navigate to a new component prompting the user to check their inbox for email confirmation.
Here is the code I have:
Component:
navigateToConfirm(): void {
this.router.navigate(['/confirm-email']);
}
Register(): void {
this.authenticationService.register(this.userid, this.email, this.password).then(this.navigateToConfirm);
}
Service:
public register(userId: string, email: string, password: string): Promise<GuestUser> {
const url = `${environment.apiHost}api/User/Register`;
return this.http.post<any>(url, { userId, email, password }).toPromise();
}
Component I'm trying to navigate to:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-confirm-email',
templateUrl: './confirm-email.component.html',
styleUrls: ['./confirm-email.component.css']
})
export class ConfirmEmailComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
API endpoint :
[HttpPost()]
[ResponseCache(Duration = 1)]
[AllowAnonymous]
[Route("Register")]
public async Task<IActionResult> Register(RegisterModel model)
{
var newUser = new GuestUser
{
UserName = model.UserId,
Email = model.Email,
Password = model.Password,
};
var result = await UserManager.CreateAsync(newUser, model.Password);
if (result.Succeeded)
{
var token = await UserManager.GenerateEmailConfirmationTokenAsync(newUser);
byte[] tokenGeneratedBytes = Encoding.UTF8.GetBytes(token);
var tokenEncoded = WebEncoders.Base64UrlEncode(tokenGeneratedBytes);
var link = Url.Action(nameof(VerifyEmail), "User", new { email = newUser.Email, tokenEncoded }, Request.Scheme, Request.Host.ToString());
MailRequest request = new MailRequest
{
ToEmail = newUser.Email,
Subject = "Email Verification",
Body = $"<h2>Thank you for registering, click the link below to verify your email! </ h2 >{link}>Verify Email</a>"
};
try
{
await MailService.SendEmailAsync(request);
return Ok();
}
catch
{
return BadRequest();
}
}
return BadRequest();
}
App-routing-module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/rou
ter';
import { LoginComponent } from './login/login.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { GeneralAdviceComponent } from './general-advice/general-advice.component';
import { AuthGuard } from './auth/auth.gaurd';
import { ContactTraceComponent } from './contact-trace/contact-trace.component';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
import { ConfirmEmailComponent } from './confirm-email/confirm-email.component'
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'general-advice',
canActivate: [AuthGuard],
component: GeneralAdviceComponent
},
{
path: 'questions',
canActivate: [AuthGuard],
component: QuestionnaireComponent
},
{
path: 'home',
canActivate: [AuthGuard],
component: HomeComponent
},
{
path: 'contact',
canActivate: [AuthGuard],
component: ContactTraceComponent
},
{
path: '',
canActivate: [AuthGuard],
component: HomeComponent
},
{
path: 'register',
component: RegisterComponent
},
{
path: 'confirm-email',
component: ConfirmEmailComponent
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }