Is there a way to display the functionality after logging in without using session storage or implementing the logout function? The HTML for navigation is provided below.
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a *ngIf = "!invalidLogin" class="nav-link" routerLink="create">Add New Music</a>
{{!invalidLogin}}
</li>
<li class="nav-item">
<a *ngIf = "!invalidLogin" class="nav-link active" routerLink="list">Manage Items</a>
</li>
<li class="nav-item">
<a *ngIf = "!invalidLogin" class="nav-link" routerLink="customerlist">Manage Customers</a>
</li>
</ul>
<ul class="navbar-nav navbar-collapse justify-content-end">
<li class="nav-item">
<a class="nav-link" routerLink="addcustomer">SignUp</a>
</li>
<li class="nav-item">
<a *ngIf = "invalidLogin" class="nav-link" routerLink="login">Login</a>
</li>
</ul>
</nav>
The attempt to set invalidLogin to true in ngOnit() did not work. See the code snippets for Navigation Component and Customer Service below for insights on how this property handles the functionality.
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
invalidLogin: boolean = true;
constructor() { }
ngOnInit(): void {
// this.invalidLogin = true;
}
}
@Injectable({
providedIn: 'root'
})
export class CustomerService {
username: string = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e7eaf5fae2c3e4eee2eaefade0ecee">[email protected]</a>";
password: string = "divya123";
constructor(private http: HttpClient, private nav: NavigationComponent, private router: Router) { }
doLogin(user: Login){
let temp = false;
if((user.username === this.username) && (user.password === this.password)){
this.nav.invalidLogin = false;
temp = true;
}else{
temp = false;
// this.message = "Invalid Credientials"
}
return temp;
}
}
In the login component below, you can observe the service class being called to set the property "this.nav.invalidLogin = false", and the subsequent actions performed based on that.
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
login: Login;
message: string;
constructor(private router: Router, private nav : NavigationComponent, private custService: CustomerService) { }
ngOnInit(): void {
this.login = new Login();
}
doLogin(user: Login){
if(this.custService.doLogin(user)){
console.log("Invalid user : ",this.nav.invalidLogin);
this.router.navigate(["list"]);
}else{
this.message = "Invalid Credientials"
}
}
}