aConnect
/
aConnect-UX
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change Password Screen view for first time login

Browse Source 
Show different change password screen view for first time login
mazdak/UX-1461
Mazdak Gibran 1 week ago
parent 9a10b8d37f
commit 7fa0ee6a76
7 changed files with 112 additions and 13 deletions
Show Stats Download Patch File Download Diff File

1
src/app/services/auth.service.ts
Unescape Escape View File

@ -39,6 +39,7 @@ export class AuthService {
localStorage.setItem('userId', res.user.userId);
localStorage.setItem('token', res.token);
this.firstLogin = response.requiresPasswordChange;
this.storageService.setItem('firstLogin', this.firstLogin ? 'true' : 'false');
return res;
}

2
src/app/shared/components/side-nav/side-nav.component.html
Unescape Escape View File

@ -30,7 +30,7 @@
</a>
</li>
<li>
<a routerLink="/home/changePassword" routerLinkActive="mm-active">
<a routerLink="/home/changePassword" routerLinkActive="mm-active" (click)="navigateToChangePassword()" style="cursor: pointer">
<span> {{ 'changePassword' | translate }}</span>
</a>
</li>

10
src/app/shared/components/side-nav/side-nav.component.ts
Unescape Escape View File

@ -5,6 +5,7 @@ import { StorageService } from '../../services/storage.service';
import { isPlatformBrowser } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule } from '@angular/router';
import { Router } from '@angular/router';
@Component({
selector: 'app-side-nav',
@ -22,7 +23,8 @@ export class SideNavComponent {
constructor(
private sidebarService: SidebarService,
@Inject(PLATFORM_ID) private platformId: Object,
private storageService: StorageService
private storageService: StorageService,
private router: Router
) {
// this.credentialService.getPermission().forEach((permission: any) => {
// this.permissions[permission.name] = permission.checked;
@ -98,4 +100,10 @@ export class SideNavComponent {
this.storageService.setItem('currentSubModule', lastRoutePart);
}
}
navigateToChangePassword() {
this.router.navigate(['/home/changePassword'], {
state: { fromMenu: true }
});
}
}

78
src/app/user-management/change-password/change-password.component.html
Unescape Escape View File

@ -1,17 +1,81 @@
<div id="layout-wrapper">
<div class="inner-pg-sp">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
<div *ngIf="isFirstLogin" class="auth-page d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5 col-xl-4">
<div class="bg-primary bg-soft text-center py-3 mt-2">
<img src="assets/images/logo.png" class="img-fluid mb-2" height="120" width="150" alt="Logo">
</div>
<div class="card">
<div class="card-header bg-primary bg-soft text-center py-3">
<h5 class="mb-0 text-dark">{{'changePassword' | translate}}</h5>
</div>
<div class="card-body">
<form>
<!-- New Password -->
<div class="mb-3">
<label for="newPassword" class="form-label">
{{"newPasswordStatic" | translate}}<span class="mandatory">*</span>
</label>
<div class="input-group auth-pass-inputgroup">
<input type="{{passwordType1}}" class="form-control" id="newPassword"
placeholder="{{'enterNewPassword' | translate}}" appNoWhitespaces>
<app-password-hide-show #psh1 [showPassword]="true"
(onEyeClick)="togglePasswordType1()">
</app-password-hide-show>
</div>
</div>
<!-- Confirm Password -->
<div class="mb-3">
<label for="confirmPassword" class="form-label">
{{"confirmPassword" | translate}}<span class="mandatory">*</span>
</label>
<div class="input-group auth-pass-inputgroup">
<input type="{{passwordType2}}" class="form-control" id="confirmPassword"
placeholder="{{'confirmPassword' | translate}}" appNoWhitespaces>
<app-password-hide-show #psh2 [showPassword]="true"
(onEyeClick)="togglePasswordType2()">
</app-password-hide-show>
</div>
</div>
<!-- Submit Button -->
<div class="mt-3 d-grid">
<button class="btn btn-primary waves-effect waves-light" type="submit">
{{'save' | translate}}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!isFirstLogin" class="full-width-page">
<div class="row">
<div class="col-12">
<div class="d-sm-flex align-items-center justify-content-between navbar-header p-0">
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-xl-12 mt-4">
<div class="card border">
<div class="card-body">
<div class="table-section">
<div class="row">
<div class="col-lg-12">
@ -22,6 +86,7 @@
{{'changePassword' | translate}}
</div>
<div class="card-body">
<form>
<div class="row g-3 mb-3">
<div class="col-md-6">
@ -107,6 +172,7 @@
</form>
</div>
</div>
</div>
</div>
@ -116,7 +182,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

30
src/app/user-management/change-password/change-password.component.ts
Unescape Escape View File

@ -1,17 +1,27 @@
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
import { StorageService } from '../../shared/services/storage.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-change-password',
imports: [TranslateModule, FormsModule, ReactiveFormsModule, CommonModule, PasswordHideShowComponent],
imports: [TranslateModule, FormsModule, ReactiveFormsModule, CommonModule, PasswordHideShowComponent,],
templateUrl: './change-password.component.html',
styleUrl: './change-password.component.scss'
})
export class ChangePasswordComponent {
export class ChangePasswordComponent{
isFirstLogin = false;
loginForm!: FormGroup;
currentLanguage = new FormControl();
httpService: any;
constructor(private storageService: StorageService, private router: Router){}
onLangChange() {
throw new Error('Method not implemented.');
}
passwordType: string = 'password';
passwordType1: string = 'password';
passwordType2: string = 'password';
@ -20,7 +30,6 @@ passwordType2: string = 'password';
@ViewChild('psh1') passwordHideShow1 ?: PasswordHideShowComponent;
@ViewChild('psh2') passwordHideShow2 ?: PasswordHideShowComponent;
togglePasswordType() {
this.passwordType = this.passwordHideShow?.showPassword ? 'password' : 'text';
}
@ -31,4 +40,15 @@ passwordType2: string = 'password';
this.passwordType2 = this.passwordHideShow2?.showPassword ? 'password' : 'text';
}
ngOnInit(): void {
const fromMenu = history.state?.['fromMenu'];
if(fromMenu){
this.isFirstLogin = false;
}else{
const firstLoginFlag = this.storageService.getItem('firstLogin');
this.isFirstLogin = firstLoginFlag === 'true';
}
}
}

1
src/assets/css/app.min.css vendored
Unescape Escape View File

@ -4757,6 +4757,7 @@ button.btn.btn-primary{
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
.card-header {

3
src/styles.scss
Unescape Escape View File

@ -155,4 +155,7 @@ ng-select.form-select-sm {
.password-eye * {
font-size: 18px;
}
.card-header{
border: none !important;
}

Write Preview
Loading…
Cancel
Save