Change Password Screen view for first time login

Show different change password screen view for first time login

src/app/services/auth.service.ts

@@ -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;
           
         }

src/app/shared/components/side-nav/side-nav.component.html

@@ -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>

src/app/shared/components/side-nav/side-nav.component.ts

@@ -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 } 
+  });
+}
 }

src/app/user-management/change-password/change-password.component.html

@@ -1,6 +1,65 @@
+
 <div id="layout-wrapper">
     <div class="inner-pg-sp">
         <div class="container-fluid">
+            
+            <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">
@@ -8,10 +67,15 @@
                         </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,8 @@
                                                       
                                                     </form>
                                                 </div>
+                                                
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -116,7 +183,6 @@
                 </div>
             </div>
             </div>
-            
         </div>
     </div>
 </div>

src/app/user-management/change-password/change-password.component.ts

@@ -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';
+    }
+  }
+
+
 }

src/assets/css/app.min.css

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

src/styles.scss

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