The home page and user page contents are both displayed on the home page itself. In the header section, I have a SignIn and SignUp form from the home.html file. Additionally, there is another Signup form from the user page. This form includes 3 buttons: one for signing up with Facebook, another for signing up with Google, and the third for traditional SignUp using name, email, and password. When signing up using either Facebook or Google, the content of the home page changes dynamically from "SignIn and SignUp" to "User and SignOut," while hiding the SignUp form from the user page.
However, this functionality does not work as expected when just using the regular SignUp process with name, email, and password.
I have attempted to use an emit emitter as well, but it doesn't seem to work with the standard SignUp method. Can anyone provide guidance?
Home.html:
<ul>
<li class="signUp" *ngIf = "loggedIn">{{userName}}</li>
<li class="signIn" (click)="signOut()" *ngIf = "loggedIn">Sign Out</li>
<li class="signUp" (click)="openSignUp(user)" *ngIf = "!loggedIn">Sign Up</li>
<li class="signIn" (click)="openSignIn(logedin)" *ngIf = "!loggedIn">Sign In</li>
</ul>
User.html:
<div class="favorite" *ngIf="!loggedIn">
<h1>User</h1>
<hr />
<div class="backImage">
<form name="signUpForm" class="signUpForm" #signUpForm="ngForm" novalidate>
<div class="form-group">
<h3>Sign Up</h3>
</div>
<div class="form-group input">
<mat-form-field>
<mat-icon>perm_identity</mat-icon>
<input matInput type="text" placeholder="Name" name="name" [(ngModel)]="name" #Name="ngModel" required>
</mat-form-field>
</div>
<div class="form-group input">
<mat-form-field>
<mat-icon>email</mat-icon>
<input matInput type="email" placeholder="Email" name="email" [(ngModel)]="user.email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
</mat-form-field>
</div>
<div class="form-group input">
<mat-form-field>
<mat-icon>lock</mat-icon>
<input matInput type="password" placeholder="Password" name="password" [(ngModel)]="user.password" #Password="ngModel" required>
</mat-form-field>
</div>
</form>
</div>
</div>
User.ts:
this.ApiService
.checklogin()
.subscribe(
user => {
this.loggedIn = localStorage.getItem("loggedin");
this.user_id = user.data[0].user_id;
this.userName = user.data[0].name;
}, error => {
console.log(error);
});
newUser(user, _id) {
this.isLoadingSignUp = true;
user.role_id = this._id
var data = {
"user":{
email:user.email,
password:user.password,
active:user.active,
role_id:this._id,
name:user.name
}
}
this.ApiService
.signUp(data)
.subscribe(
signUser => {
this.userName = user.name;
localStorage.setItem('loggedin', 'true');
this.loggedIn = true;
this.isLoadingSignUp = false;
this.router.navigate(['/home']);
this.toasterService.pop('success', 'SignUp Successfully');
this.ApiService.getUserData(user.data);
}, error => {
this.isLoadingSignUp = false;
this.ApiService.getUserData(error);
if(error.data && error.data.length > 0) {
this.toasterService.pop('error', error.data);
} else {
this.toasterService.pop('error', 'Something went wrong!');
}
})
}