Whenever I attempt to log in, I face the issue of having to click twice. The first click does not work, but the second one does. Additionally, an error message pops up: TypeError: Cannot read properties of undefined (reading 'name'). I am unsure how to resolve this issue. After adding a console.log() in the submitLogin() function, it indicates that the user's name is not defined.
Here is my Component HTML:
<div class="center-container">
<ng-template #loadingPage>
<div *ngIf="!firstLoad">
<div class="flex justify-content-center">
<mat-progress-bar style="max-width: 400px;margin:10px" mode="indeterminate" color="primary"></mat-progress-bar>
</div>
</div>
</ng-template>
<mat-card class="login-card" >
<mat-card-header>
<div class="mt-4 text-center">
<img mat-card-image class="align-items-center" ngSrc="assets/main-logo.png" width="300" height="70" >
</div>
</mat-card-header>
<mat-card-content>
<form class="flex flex-wrap align-items-center justify-content-center mt-2 mb-4" [formGroup]="loginForm">
<div class="grid-form-login">
<mat-form-field class="input-form-login">
<mat-label>Login</mat-label>
<input matInput formControlName="identifier">
</mat-form-field>
<mat-form-field class="input-form-login">
<mat-label>Senha</mat-label>
<input matInput type="password" formControlName="password">
</mat-form-field>
<div class="flex justify-content-left">
<mat-checkbox class="example-margin" [checked]="rememberMe" [disabled]="loading" (click)="changeRememberMe()">Manter-se conectado</mat-checkbox>
</div>
<button mat-raised-button color="primary" style="width: 100%;" [disabled]="loading" (click)="submitLogin()">Entrar</button>
<button mat-raised-button color="basic" style="width: 100%;" [disabled]="loading" (click)="loginWithGoogle()">
Login com o google <mat-icon svgIcon="google" aria-hidden="false" ></mat-icon>
</button>
</div>
</form>
<mat-divider></mat-divider>
</mat-card-content>
<mat-card-footer>
<mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</div>
<p-toast></p-toast>
Check out my component.ts code snippet below:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MessageService } from 'primeng/api';
import { AuthService } from 'src/app/services/auth/auth.service';
import { UserService } from '../../services/user/user.service';
import { DomSanitizer, Title } from '@angular/platform-browser';
import { LoadingService } from '../../services/loading/loading.service';
import { MatIconRegistry } from '@angular/material/icon';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';
import { Ilogin } from 'src/app/interfaces/login';
// Google Icon SVG Content
const GOOGLE_ICON = `
<?xml version="1.0" encoding="UTF-8"?>
<!-- Include your SVG content here -->
`;
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent {
// Class properties
}
I would appreciate guidance on resolving the issue related to having to double-click for logging in and setting the 'name' property correctly.