In my Angular application, users can log in with their email and password. I want to display the user's name in the dashboard menu as "Welcome James" when the current user is logged in. This information should be retrieved from localStorage and all user data is fetched from a MySQL database.
Code :
login.component.html :
<h1 style="text-align:center">
<img src="../../assets/images/logo.png">
</h1>
<div class="login-wrap">
<div class="login-html">
<div class='login'>
<div class='col-md-4 offset-4 mt-5' *ngIf='!this.isLogin'>
<h2 class="login-header">S'identifier</h2>
<form class="login-container" #myform="ngForm" (ngSubmit)="onSubmit(myform)">
<div class='form-group'>
<input class='form-control' type="email" name="email" placeholder="email" ngModel>
</div>
<div class='form-group'>
<input class='form-control' type="password" name="password" placeholder="Password"
[type]="hide ? 'password': 'text'" [(ngModel)]="passwordValue">
<span class="material-icons" matSuffix (click)="hide = !hide">
{{hide ? 'visibility': 'visibility_off'}}
</span>
</div>
<input class='btn btn-outline-info' type="submit" value="Login">
</form>
</div>
<div class='col-md-4 offset-4 mt-5' *ngIf='this.isLogin'>
<h1>You are logged in</h1>
<button class='btn btn-outline-info' (click)='logout()'>Log-out</button>
</div>
</div>
</div>
</div>
login.component.ts :
export class LoginComponent implements OnInit {
isLogin: boolean = false
errorMessage: any
hide =true;
passwordValue='';
constructor(
private _api: ApiService,
private _auth: AuthService,
private _router:Router, private toastr : ToastrService) { }
ngOnInit(){
this.isUserLogin();
}
onSubmit(form: NgForm) {
console.log('Your form data : ', form.value);
this._api.postTypeRequest('user/login', form.value).subscribe((res: any) => {
switch (res.status) {
case 0:
this.toastr.error("you have a problem","Erreur");
break;
case 1:
this._auth.setDataInLocalStorage('userData', JSON.stringify(res.data));
this._auth.setDataInLocalStorage('token', res.token);
this._router.navigate(['']);
break;
case 2:
this.toastr.warning("your email or password is incorrect","Warning");
this.passwordValue = '';
break;
}
})
}
isUserLogin(){
if(this._auth.getUserDetails() != null){
this.isLogin = true;
}
}
logout(){
this._auth.clearStorage()
this._router.navigate(['']);
}
}
app.component.html (menu) :
<nav class="menu">
<ol>
<li class="menu-item"><a routerLink="adherents">Adherents</a></li>
<li class="menu-item">
<a routerLink="factures">Factures</a>
</li>
<li class="menu-item">
<a routerLink="logs">Logs</a>
</li>
<li class="menu-item">
<a routerLink="regions">Regions</a>
</li>
<li class="menu-item">
<a routerLink="roles">Roles</a>
</li>
<li class="menu-item">
<img class="img" src="../assets/images/user.png">
<a>welcome james</a>
<ol class="sub-menu">
<li class="menu-item"><a routerLink="/login">LogOut</a></li>
</ol>
</li>
</ol>
</nav>
<router-outlet></router-outlet>
auth-guard.service.ts :
@Injectable({
providedIn: 'root'
})
export class AuthGuardService {
constructor( private _authService: AuthService,
private _router: Router) { }
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this._authService.getToken()) {
return true;
}
this._router.navigate(['/login']);
return false;
}
}
auth.service.ts:
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor() { }
getUserDetails() {
if(localStorage.getItem('userData')){
return localStorage.getItem('userData')
}else{
return null
}
}
setDataInLocalStorage(variableName, data) {
localStorage.setItem(variableName, data);
}
getToken() {
return localStorage.getItem('token');
}
clearStorage() {
localStorage.clear();
}
}