WEB-233: Improve the OIDC integration with 2FA (#2602)

2025-08-22 21:49:18 -06:00
parent c00a3bd059
commit 9745643456
50 changed files with 3248 additions and 132 deletions
@@ -2,7 +2,13 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpBackend, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  HttpBackend,
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  HTTP_INTERCEPTORS
+} from '@angular/common/http';

 /** Environment Configuration */

@@ -47,6 +53,11 @@ import {
 } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';

+import { AuthenticationInterceptor as TokenInterceptor } from './core/authentication/authentication.interceptor';
+import { TokenInterceptor as ZitadelTokenInterceptor } from './zitadel/token.interceptor';
+import { AuthService } from './zitadel/auth.service';
+import { environment } from '../environments/environment';
+
 export class CustomMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams): string {
    // Remove the 'labels.catalogs.' prefix and return the fallback value
@@ -112,6 +123,21 @@ export function HttpLoaderFactory(http: HttpClient) {
  ],
  providers: [
    DatePipe,
-    provideHttpClient(withInterceptorsFromDi())]
+    AuthService,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: !(
+        environment.OIDC.oidcServerEnabled === false ||
+        environment.OIDC.oidcServerEnabled === 'false' ||
+        environment.OIDC.oidcServerEnabled === 0 ||
+        environment.OIDC.oidcServerEnabled === '0' ||
+        environment.OIDC.oidcServerEnabled === null ||
+        environment.OIDC.oidcServerEnabled === undefined
+      )
+        ? TokenInterceptor
+        : ZitadelTokenInterceptor,
+      multi: true
+    }
+  ]
 })
 export class AppModule {}
@@ -105,15 +105,12 @@ export class AuthenticationService {
      httpParams = httpParams.set('grant_type', 'password');
      let headers = new HttpHeaders();
      headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');
-      return this.http
-        .disableApiPrefix()
-        .post(`${environment.oauth.serverUrl}/token`, httpParams.toString(), { headers: headers })
-        .pipe(
-          map((tokenResponse: OAuth2Token) => {
-            this.getUserDetails(tokenResponse);
-            return of(true);
-          })
-        );
+      return this.http.post(`${environment.oauth.serverUrl}/token`, httpParams.toString(), { headers: headers }).pipe(
+        map((tokenResponse: OAuth2Token) => {
+          this.getUserDetails(tokenResponse);
+          return of(true);
+        })
+      );
    } else {
      return this.http
        .post('/authentication', { username: loginContext.username, password: loginContext.password })
@@ -137,7 +134,6 @@ export class AuthenticationService {
    let headers = new HttpHeaders();
    headers = headers.set('Authorization', 'bearer ' + tokenResponse.access_token);
    this.http
-      .disableApiPrefix()
      .get(`${environment.serverUrl}/userdetails`, { headers: headers })
      .subscribe((credentials: Credentials) => {
        this.onLoginSuccess(credentials);
@@ -174,7 +170,6 @@ export class AuthenticationService {
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');
    return this.http
-      .disableApiPrefix()
      .post(`${environment.oauth.serverUrl}/token`, httpParams.toString(), { headers: headers })
      .subscribe((tokenResponse: OAuth2Token) => {
        this.storage.setItem(this.oAuthTokenDetailsStorageKey, JSON.stringify(tokenResponse));
@@ -241,7 +236,6 @@ export class AuthenticationService {
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');
    return this.http
-      .disableApiPrefix()
      .post(`${environment.oauth.serverUrl}/logout`, httpParams.toString(), { headers: headers })
      .subscribe();
  }
@@ -318,6 +312,14 @@ export class AuthenticationService {
    }
  }

+  public saveZitadelCredentials(credentials: Credentials): void {
+    this.setCredentials(credentials);
+  }
+
+  public saveZitadeloAuthTokenDetailsStorageKey(tokenResponse: OAuth2Token): void {
+    this.storage.setItem(this.oAuthTokenDetailsStorageKey, JSON.stringify(tokenResponse));
+  }
+
  /**
   * Following functions are for two factor authentication and require
   * first level authorization headers to be setup for the requests.
@@ -24,6 +24,10 @@ import { MatIcon } from '@angular/material/icon';
 import { MatLine } from '@angular/material/grid-list';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** Environment Configuration and Zitadel*/
+import { environment } from '../../../../environments/environment';
+import { AuthService } from 'app/zitadel/auth.service';
+
 /**
 * Sidenav component.
 */
@@ -59,6 +63,17 @@ export class SidenavComponent implements OnInit, AfterViewInit {
  /** Collection of possible frequent activities */
  frequentActivities: any[] = frequentActivities;

+  /** Zitadel oidcServerEnabled */
+  public environment = environment;
+  oidcServerEnabled = !(
+    (window as any)?.env?.oidcServerEnabled === false ||
+    (window as any)?.env?.oidcServerEnabled === 'false' ||
+    (window as any)?.env?.oidcServerEnabled === 0 ||
+    (window as any)?.env?.oidcServerEnabled === '0' ||
+    (window as any)?.env?.oidcServerEnabled === null ||
+    (window as any)?.env?.oidcServerEnabled === undefined
+  );
+
  /* Refernce of logo */
  @ViewChild('logo') logo: ElementRef<any>;
  /* Template for popover on logo */
@@ -82,7 +97,8 @@ export class SidenavComponent implements OnInit, AfterViewInit {
    private authenticationService: AuthenticationService,
    private settingsService: SettingsService,
    private configurationWizardService: ConfigurationWizardService,
-    private popoverService: PopoverService
+    private popoverService: PopoverService,
+    private authService: AuthService
  ) {
    this.userActivity = JSON.parse(localStorage.getItem('mifosXLocation'));
  }
@@ -100,7 +116,11 @@ export class SidenavComponent implements OnInit, AfterViewInit {
   * Logs out the authenticated user and redirects to login page.
   */
  logout() {
-    this.authenticationService.logout().subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
+    if (this.oidcServerEnabled) {
+      this.authenticationService.logout().subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
+    } else {
+      this.authService.logout();
+    }
  }

  /**
@@ -41,6 +41,10 @@ import { NotificationsTrayComponent as NotificationsTrayComponent_1 } from '../.
 import { ThemeToggleComponent } from '../../../shared/theme-toggle/theme-toggle.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** Environment Configuration and Zitadel*/
+import { environment } from '../../../../environments/environment';
+import { AuthService } from 'app/zitadel/auth.service';
+
 /**
 * Toolbar component.
 */
@@ -83,6 +87,17 @@ export class ToolbarComponent implements OnInit, AfterViewInit, AfterContentChec
  /** Sets the initial state of sidenav as collapsed. Not collapsed if false. */
  sidenavCollapsed = true;

+  /** Zitadel oidcServerEnabled */
+  public environment = environment;
+  oidcServerEnabled = !(
+    (window as any)?.env?.oidcServerEnabled === false ||
+    (window as any)?.env?.oidcServerEnabled === 'false' ||
+    (window as any)?.env?.oidcServerEnabled === 0 ||
+    (window as any)?.env?.oidcServerEnabled === '0' ||
+    (window as any)?.env?.oidcServerEnabled === null ||
+    (window as any)?.env?.oidcServerEnabled === undefined
+  );
+
  /** Instance of sidenav. */
  @Input() sidenav: MatSidenav;
  /** Sidenav collapse event. */
@@ -103,7 +118,8 @@ export class ToolbarComponent implements OnInit, AfterViewInit, AfterContentChec
    private popoverService: PopoverService,
    private configurationWizardService: ConfigurationWizardService,
    private dialog: MatDialog,
-    private changeDetector: ChangeDetectorRef
+    private changeDetector: ChangeDetectorRef,
+    private authService: AuthService
  ) {}

  /**
@@ -140,10 +156,11 @@ export class ToolbarComponent implements OnInit, AfterViewInit, AfterContentChec
   * Logs out the authenticated user and redirects to login page.
   */
  logout() {
-    this.authenticationService.logout().subscribe(() => {
-      this.notificationsTray.destroy();
-      this.router.navigate(['/login'], { replaceUrl: true });
-    });
+    if (this.oidcServerEnabled) {
+      this.authenticationService.logout().subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
+    } else {
+      this.authService.logout();
+    }
  }

  /**
@@ -1,55 +1,72 @@
-<form class="layout-column" [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
-  <mat-form-field class="login-input flex-align-center">
-    <span matPrefix class="m-r-10">
-      <fa-icon icon="user-circle" size="lg"></fa-icon>
-    </span>
-    <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
-    <input matInput type="text" autocomplete="off" formControlName="username" />
-    <mat-error *ngIf="loginForm.controls.username.hasError('required')">
-      {{ 'labels.inputs.Username' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
-    </mat-error>
-  </mat-form-field>
+<div *ngIf="oidcServerEnabled">
+  <form class="layout-column" [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
+    <mat-form-field class="login-input flex-align-center">
+      <span matPrefix class="m-r-10">
+        <fa-icon icon="user-circle" size="lg"></fa-icon>
+      </span>
+      <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+      <input matInput type="text" autocomplete="off" formControlName="username" />
+      <mat-error *ngIf="loginForm.controls.username.hasError('required')">
+        {{ 'labels.inputs.Username' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field class="login-input flex-align-center">
+      <span matPrefix class="m-r-10">
+        <fa-icon icon="lock" size="lg"></fa-icon>
+      </span>
+      <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+      <input matInput type="{{ passwordInputType }}" formControlName="password" />
+      <button
+        type="button"
+        matSuffix
+        *ngIf="loginForm.controls.password.value && !loading"
+        mat-icon-button
+        (mousedown)="togglePasswordVisibility()"
+        (mouseup)="togglePasswordVisibility()"
+      >
+        <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
+        <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
+      </button>
+      <mat-error *ngIf="loginForm.controls.password.hasError('required')">
+        {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.pass is required' | translate }}</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-checkbox formControlName="remember" class="m-t-10 flex-align-center">{{
+      'labels.inputs.Remember me' | translate
+    }}</mat-checkbox>
+
+    <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+
+    <button mat-raised-button color="primary" class="login-button flex-align-center" [disabled]="!loginForm.valid">
+      {{ 'labels.buttons.Login' | translate }}
+      <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
+    </button>

-  <mat-form-field class="login-input flex-align-center">
-    <span matPrefix class="m-r-10">
-      <fa-icon icon="lock" size="lg"></fa-icon>
-    </span>
-    <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-    <input matInput type="{{ passwordInputType }}" formControlName="password" />
    <button
      type="button"
-      matSuffix
-      *ngIf="loginForm.controls.password.value && !loading"
-      mat-icon-button
-      (mousedown)="togglePasswordVisibility()"
-      (mouseup)="togglePasswordVisibility()"
+      mat-button
+      class="login-button flex-align-center"
+      (click)="forgotPassword()"
+      [disabled]="loading"
    >
-      <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
-      <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
+      {{ 'labels.links.Forgot Password?' | translate }}
    </button>
-    <mat-error *ngIf="loginForm.controls.password.hasError('required')">
-      {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.pass is required' | translate }}</strong>
-    </mat-error>
-  </mat-form-field>
+  </form>
+</div>

-  <mat-checkbox formControlName="remember" class="m-t-10 flex-align-center">{{
-    'labels.inputs.Remember me' | translate
-  }}</mat-checkbox>
-
-  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
-
-  <button mat-raised-button color="primary" class="login-button flex-align-center" [disabled]="!loginForm.valid">
-    {{ 'labels.buttons.Login' | translate }}
-    <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
-  </button>
-
-  <button
-    type="button"
-    mat-button
-    class="login-button flex-align-center"
-    (click)="forgotPassword()"
-    [disabled]="loading"
-  >
-    {{ 'labels.links.Forgot Password?' | translate }}
-  </button>
-</form>
+<div *ngIf="!oidcServerEnabled" class="container container-margin">
+  <div *ngIf="!isLoggedIn">
+    <button mat-raised-button color="primary" class="login-button-z" (click)="loginOIDC()">
+      {{ 'labels.buttons.Login' | translate }}
+      <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
+    </button>
+  </div>
+  <div *ngIf="isLoggedIn">
+    <p>Welcome! You are logged in.</p>
+    <button (click)="logout()">Logout</button>
+    <button (click)="loadProtectedData()">Load Protected Data</button>
+    <pre>{{ protectedData | json }}</pre>
+  </div>
+</div>
@@ -18,3 +18,8 @@
 ::ng-deep .mat-mdc-form-field-infix {
  width: 144px !important;
 }
+
+.container-margin {
+  margin-top: 8rem;
+  margin-bottom: 8rem;
+}
@@ -15,6 +15,10 @@ import { MatProgressBar } from '@angular/material/progress-bar';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** Ruta de seguridad Zitadel*/
+import { AuthService } from '../../zitadel/auth.service';
+import { environment } from '../../../environments/environment';
+
 /**
 * Login form component.
 */
@@ -40,13 +44,24 @@ export class LoginFormComponent implements OnInit {
  /** True if loading. */
  loading = false;

+  public environment = environment;
+  oidcServerEnabled = !(
+    (window as any)?.env?.oidcServerEnabled === false ||
+    (window as any)?.env?.oidcServerEnabled === 'false' ||
+    (window as any)?.env?.oidcServerEnabled === 0 ||
+    (window as any)?.env?.oidcServerEnabled === '0' ||
+    (window as any)?.env?.oidcServerEnabled === null ||
+    (window as any)?.env?.oidcServerEnabled === undefined
+  );
+
  /**
   * @param {FormBuilder} formBuilder Form Builder.
   * @param {AuthenticationService} authenticationService Authentication Service.
   */
  constructor(
    private formBuilder: FormBuilder,
-    private authenticationService: AuthenticationService
+    private authenticationService: AuthenticationService,
+    private authService: AuthService
  ) {}

  /**
@@ -78,6 +93,22 @@ export class LoginFormComponent implements OnInit {
      .subscribe();
  }

+  /**
+   * Authenticates the user if the credentials are valid to Zitadel.
+   */
+
+  loginOIDC() {
+    this.authService.login();
+  }
+
+  getUsers() {
+    this.authService.getUsers();
+  }
+
+  logout() {
+    this.authService.logout();
+  }
+
  /**
   * Toggles the visibility of the password input field.
   *
@@ -7,6 +7,9 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { SystemService } from '../../system.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** Custom Service Zitadel */
+import { AuthService } from 'app/zitadel/auth.service';
+
 /**
 * Add Role Component.
 */
@@ -32,7 +35,8 @@ export class AddRoleComponent implements OnInit {
    private formBuilder: UntypedFormBuilder,
    private systemService: SystemService,
    private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private authService: AuthService
  ) {}

  /**
@@ -64,6 +68,7 @@ export class AddRoleComponent implements OnInit {
   */
  submit() {
    this.systemService.createRole(this.roleForm.value).subscribe((response: any) => {
+      this.authService.createRole(response.resourceId, this.roleForm.value.name, this.roleForm.value.description);
      this.router.navigate(['../'], { relativeTo: this.route });
    });
  }
@@ -7,6 +7,9 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SystemService } from '../../system.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** Custom Service Zitadel */
+import { AuthService } from 'app/zitadel/auth.service';
+
 /**
 * Edit Role Description Component.
 */
@@ -35,7 +38,8 @@ export class EditRoleComponent implements OnInit {
    private formBuilder: UntypedFormBuilder,
    private systemService: SystemService,
    private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private authService: AuthService
  ) {
    this.route.data.subscribe((data: { role: any }) => {
      this.roleData = data.role;
@@ -71,6 +75,7 @@ export class EditRoleComponent implements OnInit {
   */
  submit() {
    this.systemService.updateRole(this.roleForm.value, this.roleData.id).subscribe(() => {
+      this.authService.updateRole(this.roleData.id, this.roleForm.get('name')?.value, this.roleForm.value.description);
      this.router.navigate(['../../'], { relativeTo: this.route });
    });
  }
@@ -18,6 +18,9 @@ import { MatDivider } from '@angular/material/divider';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** Custom Service Zitadel */
+import { AuthService } from 'app/zitadel/auth.service';
+
 /**
 * View Role and Permissions Component
 */
@@ -84,7 +87,8 @@ export class ViewRoleComponent implements OnInit {
    private router: Router,
    private formBuilder: UntypedFormBuilder,
    private translateService: TranslateService,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private authService: AuthService
  ) {
    this.route.data.subscribe((data: { roledetails: any }) => {
      this.rolePermissionService = data.roledetails;
@@ -281,6 +285,7 @@ export class ViewRoleComponent implements OnInit {
    deleteRoleDialogRef.afterClosed().subscribe((response: any) => {
      if (response.delete) {
        this.systemService.deleteRole(this.roleId).subscribe(() => {
+          this.authService.deleteRole(this.roleId);
          this.router.navigate(['/system/roles-and-permissions']);
        });
      } else {
@@ -16,51 +16,115 @@ import { UsersResolver } from './users.resolver';
 import { UsersTemplateResolver } from './users-template.resolver';
 import { UserResolver } from './user.resolver';

-/** Users Routes */
+/** Custom Resolvers for Zitadel */
+import { UsersZitadelResolver } from '../zitadel/users/usersZitadel.resolver';
+import { UsersZitadelTemplateResolver } from '../zitadel/users/usersZitadel-template.resolver';
+import { UserZitadelResolver } from '../zitadel/users/userZitadel.resolver';
+
+/** Custom Components for Zitadel */
+import { UsersComponent as UserZitadelComponent } from '../zitadel/users/users.component';
+import { ViewUserComponent as ViewUserZitadelComponent } from '../zitadel/users/view-user/view-user.component';
+import { CreateUserComponent as CreateUserZitadelComponent } from '../zitadel/users/create-user/create-user.component';
+import { EditUserComponent as EditUserZitadelComponent } from '../zitadel/users/edit-user/edit-user.component';
+
+/** Environment */
+import { environment } from 'environments/environment';
+
+/** Users Routes for Mifos */
+const mifosRoutes: Routes = [
+  {
+    path: '',
+    component: UsersComponent,
+    resolve: { users: UsersResolver }
+  },
+  {
+    path: 'create',
+    component: CreateUserComponent,
+    data: { title: 'Create User', breadcrumb: 'Create User' },
+    resolve: { usersTemplate: UsersTemplateResolver }
+  },
+  {
+    path: ':id',
+    data: { title: 'View User', routeParamBreadcrumb: 'id' },
+    children: [
+      {
+        path: '',
+        component: ViewUserComponent,
+        resolve: { user: UserResolver }
+      },
+      {
+        path: 'edit',
+        component: EditUserComponent,
+        data: { title: 'Edit User', breadcrumb: 'Edit', routeResolveBreadcrumb: false },
+        resolve: {
+          user: UserResolver,
+          usersTemplate: UsersTemplateResolver
+        }
+      }
+    ]
+  }
+];
+
+/**
+ * Route definition for Zitadel
+ */
+const zitadelRoutes: Routes = [
+  {
+    path: '',
+    component: UserZitadelComponent,
+    resolve: { users: UsersZitadelResolver }
+  },
+  {
+    path: 'create',
+    component: CreateUserZitadelComponent,
+    data: { title: 'Create User', breadcrumb: 'Create User' },
+    resolve: { usersTemplate: UsersTemplateResolver }
+  },
+  {
+    path: ':id',
+    data: { title: 'View User', routeParamBreadcrumb: 'id' },
+    children: [
+      {
+        path: '',
+        component: ViewUserZitadelComponent,
+        resolve: { user: UserZitadelResolver }
+      },
+      {
+        path: 'edit',
+        component: EditUserZitadelComponent,
+        data: { title: 'Edit User', breadcrumb: 'Edit', routeResolveBreadcrumb: false },
+        resolve: {
+          user: UserZitadelResolver,
+          usersTemplate: UsersZitadelTemplateResolver
+        }
+      }
+    ]
+  }
+];
+
+/**
+ * Choose the correct route set according to the environment
+ */
+const isOidcEnabled = !(
+  (window as any)?.env?.oidcServerEnabled === false ||
+  (window as any)?.env?.oidcServerEnabled === 'false' ||
+  (window as any)?.env?.oidcServerEnabled === 0 ||
+  (window as any)?.env?.oidcServerEnabled === '0' ||
+  (window as any)?.env?.oidcServerEnabled === null ||
+  (window as any)?.env?.oidcServerEnabled === undefined
+);
+
+const selectedRoutes = isOidcEnabled ? mifosRoutes : zitadelRoutes;
+
+/**
+ * Final routes with the shell
+ */
 const routes: Routes = [
  Route.withShell([
    {
      path: 'appusers',
      data: { title: 'Users', breadcrumb: 'Users' },
-      children: [
-        {
-          path: '',
-          component: UsersComponent,
-          resolve: {
-            users: UsersResolver
-          }
-        },
-        {
-          path: 'create',
-          component: CreateUserComponent,
-          data: { title: 'Create User', breadcrumb: 'Create User' },
-          resolve: {
-            usersTemplate: UsersTemplateResolver
-          }
-        },
-        {
-          path: ':id',
-          data: { title: 'View User', routeParamBreadcrumb: 'id' },
-          children: [
-            {
-              path: '',
-              component: ViewUserComponent,
-              resolve: {
-                user: UserResolver
-              }
-            },
-            {
-              path: 'edit',
-              component: EditUserComponent,
-              data: { title: 'Edit User', breadcrumb: 'Edit', routeResolveBreadcrumb: false },
-              resolve: {
-                user: UserResolver,
-                usersTemplate: UsersTemplateResolver
-              }
-            }
-          ]
-        }
-      ]
+      children: selectedRoutes
    }
  ])

@@ -77,7 +141,10 @@ const routes: Routes = [
  providers: [
    UsersResolver,
    UsersTemplateResolver,
-    UserResolver
+    UserResolver,
+    UsersZitadelResolver,
+    UserZitadelResolver,
+    UsersZitadelTemplateResolver
  ]
 })
 export class UsersRoutingModule {}
@@ -11,6 +11,12 @@ import { CreateUserComponent } from './create-user/create-user.component';
 import { ViewUserComponent } from './view-user/view-user.component';
 import { EditUserComponent } from './edit-user/edit-user.component';

+/** Custom Components of Zitadel */
+import { ViewUserComponent as ViewUserZitadelComponent } from '../zitadel/users/view-user/view-user.component';
+import { EditUserComponent as EditUserZitadelComponent } from '../zitadel/users/edit-user/edit-user.component';
+import { CreateUserComponent as CreateUserZitadelComponent } from '../zitadel/users/create-user/create-user.component';
+import { UsersComponent as UserZitadelComponent } from '../zitadel/users/users.component';
+
 /**
 * Users Module
 *
@@ -23,7 +29,12 @@ import { EditUserComponent } from './edit-user/edit-user.component';
    UsersComponent,
    CreateUserComponent,
    ViewUserComponent,
-    EditUserComponent
+    EditUserComponent,
+    // Users Zitadel
+    UserZitadelComponent,
+    ViewUserZitadelComponent,
+    EditUserZitadelComponent,
+    CreateUserZitadelComponent
  ]
 })
 export class UsersModule {}
@@ -32,6 +32,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { I18nService } from './core/i18n/i18n.service';
 import { ThemingService } from './shared/theme-toggle/theming.service';

+import { AuthService } from './zitadel/auth.service';
+
 /** Initialize Logger */
 const log = new Logger('MifosX');

@@ -90,6 +92,17 @@ export class WebAppComponent implements OnInit {

  i18nService: I18nService;

+  oidcServerEnabled = !(
+    (window as any)?.env?.oidcServerEnabled === false ||
+    (window as any)?.env?.oidcServerEnabled === 'false' ||
+    (window as any)?.env?.oidcServerEnabled === 0 ||
+    (window as any)?.env?.oidcServerEnabled === '0' ||
+    (window as any)?.env?.oidcServerEnabled === null ||
+    (window as any)?.env?.oidcServerEnabled === undefined
+  );
+
+  isLoggedIn = false;
+
  /**
   * @param {Router} router Router for navigation.
   * @param {ActivatedRoute} activatedRoute Activated Route.
@@ -117,7 +130,8 @@ export class WebAppComponent implements OnInit {
    private themingService: ThemingService,
    private dateUtils: Dates,
    private idle: IdleTimeoutService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private authService: AuthService
  ) {}

  @HostBinding('class') public cssClass: string;
@@ -133,7 +147,20 @@ export class WebAppComponent implements OnInit {
   *
   * 4) Alerts
   */
+
+  login() {
+    this.authService.login();
+  }
+
  ngOnInit() {
+    let code = localStorage.getItem('auth_code');
+
+    if (code) {
+      const codeVerifier = localStorage.getItem('code_verifier');
+      this.authService.exchangeCodeForTokens(code, codeVerifier);
+      this.isLoggedIn = !this.isLoggedIn;
+    }
+
    this.themingService.theme.subscribe((value: string) => {
      this.cssClass = value;
    });
@@ -222,14 +249,18 @@ export class WebAppComponent implements OnInit {
    // Subscribe to session timeout If IdleTimeout is higher than 0 (zero)
    if (environment.session.timeout.idleTimeout > 0) {
      this.idle.$onSessionTimeout.subscribe(() => {
-        if (this.authenticationService.getUserLoggedIn()) {
-          this.alertService.alert({
-            type: 'Session timeout',
-            message: this.translateService.instant('labels.text.Session timed out')
-          });
-          this.dialog.open(SessionTimeoutDialogComponent);
-          this.logout();
-        }
+        this.alertService.alert({
+          type: 'Session timeout',
+          message: this.translateService.instant('labels.text.Session timed out')
+        });
+        this.dialog.open(SessionTimeoutDialogComponent);
+        setTimeout(() => {
+          if (this.oidcServerEnabled) {
+            this.logout();
+          } else {
+            this.authService.logout();
+          }
+        }, 1000);
      });
    }
  }
@@ -0,0 +1,10 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router, UrlTree, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from './auth.service';
+
+export const authGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  return true;
+};
@@ -0,0 +1,414 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { AuthenticationService } from '../core/authentication/authentication.service';
+import { Credentials } from '../core/authentication/credentials.model';
+import { OAuth2Token } from '../core/authentication/o-auth2-token.model';
+import { environment } from 'environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private baseUrl = environment.OIDC.oidcBaseUrl;
+  private authUrl = `${this.baseUrl}oauth/v2/authorize`;
+  private tokenUrl = `${this.baseUrl}oauth/v2/token`;
+  private clientId = environment.OIDC.oidcClientId;
+  private api = environment.OIDC.oidcApiUrl;
+  private frontUrl = environment.OIDC.oidcFrontUrl;
+  private redirectUri = `${this.frontUrl}#/login`;
+  private refreshTimeoutId: any = null;
+
+  constructor(
+    private authenticationService: AuthenticationService,
+    private http: HttpClient,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  async login() {
+    const codeVerifier = this.generateRandomString();
+    const codeChallenge = await this.generateCodeChallenge(codeVerifier);
+    localStorage.setItem('code_verifier', codeVerifier);
+    const url =
+      `${this.authUrl}` +
+      `?client_id=${encodeURIComponent(this.clientId)}` +
+      `&redirect_uri=${encodeURIComponent(this.redirectUri)}` +
+      `&response_type=code` +
+      `&scope=openid profile email offline_access` +
+      `&code_challenge=${codeChallenge}` +
+      `&code_challenge_method=S256`;
+    window.location.href = url;
+  }
+
+  logout() {
+    //return;
+    const idToken = localStorage.getItem('id_token');
+    const postLogoutRedirectUri = this.frontUrl + '#/login';
+
+    if (this.refreshTimeoutId) {
+      clearTimeout(this.refreshTimeoutId);
+      this.refreshTimeoutId = null;
+    }
+
+    if (!idToken) {
+      //console.warn('No id_token found. Redirecting to login.');
+      window.location.href = postLogoutRedirectUri;
+      return;
+    }
+
+    sessionStorage.removeItem('mifosXCredentials');
+    sessionStorage.removeItem('mifosXZitadelTokenDetails');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('expires_in');
+    localStorage.removeItem('id_token');
+    localStorage.removeItem('refresh_token');
+    localStorage.removeItem('refresh_expires_in');
+    localStorage.removeItem('token_start_time');
+    localStorage.removeItem('code_verifier');
+    localStorage.removeItem('mifosXZitadel');
+    localStorage.removeItem('auth_code');
+
+    const logoutUrl = `${this.baseUrl}/oidc/v1/end_session?id_token_hint=${idToken}&post_logout_redirect_uri=${encodeURIComponent(postLogoutRedirectUri)}`;
+    window.location.href = logoutUrl;
+  }
+
+  getAccessToken(): string | null {
+    const rawToken = sessionStorage.getItem('mifosXZitadelTokenDetails');
+
+    if (rawToken) {
+      const parsedToken: OAuth2Token = JSON.parse(rawToken);
+      return parsedToken.access_token;
+    }
+
+    return null;
+  }
+
+  generateRandomString(length = 128) {
+    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      result += charset.charAt(Math.floor(Math.random() * charset.length));
+    }
+    return result;
+  }
+
+  async generateCodeChallenge(verifier: string): Promise<string> {
+    const data = new TextEncoder().encode(verifier);
+    const digest = await crypto.subtle.digest('SHA-256', data);
+    const base64 = btoa(String.fromCharCode(...new Uint8Array(digest)))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+    return base64;
+  }
+
+  exchangeCodeForTokens(code: string, codeVerifier: string | null) {
+    const payload = {
+      code: code,
+      code_verifier: codeVerifier || ''
+    };
+
+    fetch(this.api + 'authentication/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(payload)
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`Error exchanging code: ${res.status} ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then(
+        (tokens: {
+          access_token: string;
+          id_token: string;
+          refresh_token: string;
+          expires_in: number;
+          token_type: string;
+        }) => {
+          const token: OAuth2Token = {
+            access_token: tokens.access_token,
+            token_type: tokens.token_type,
+            refresh_token: tokens.refresh_token,
+            expires_in: tokens.expires_in,
+            scope: 'Bearer'
+          };
+
+          localStorage.setItem('id_token', tokens.id_token);
+          localStorage.setItem('mifosXZitadel', 'true');
+          sessionStorage.setItem('mifosXZitadelTokenDetails', JSON.stringify(token));
+          localStorage.setItem('refresh_token', tokens.refresh_token);
+          this.scheduleRefresh(tokens.expires_in);
+          localStorage.removeItem('auth_code');
+          localStorage.removeItem('code_verifier');
+          this.userdetails();
+        }
+      )
+      .catch((error) => {
+        //console.error('Error exchanging the code for tokens:', error);
+        localStorage.removeItem('auth_code');
+        localStorage.removeItem('code_verifier');
+      });
+  }
+
+  userdetails() {
+    const accessToken = this.getAccessToken();
+    if (!accessToken) {
+      //console.error('No access token found');
+      return;
+    }
+
+    fetch(this.api + 'authentication/userdetails', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ token: accessToken })
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Error retrieving user data from backend');
+        }
+        return res.json();
+      })
+      .then((userInfo) => {
+        const user = userInfo.object;
+        const credentials: Credentials = user;
+        this.authenticationService.saveZitadelCredentials(credentials);
+        window.location.href = '/#/home';
+      })
+      .catch((error) => {
+        //console.error('Error consuming backend:', error);
+      });
+  }
+
+  // Delete
+  public deletUser(userId: string) {
+    fetch(`${this.api}authentication/user/${userId}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      }
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        //console.log(data);
+        if (data.status === 200) {
+          this.router.navigate(['/appusers']);
+        } else {
+          alert(data.msg);
+        }
+      })
+      .catch((error) => {
+        alert(error.msg);
+      });
+  }
+
+  // Activar
+  public activeUser(userId: string) {
+    fetch(`${this.api}authentication/user/act/${userId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      },
+      body: JSON.stringify({ userId })
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        window.location.reload();
+      })
+      .catch((error) => {
+        alert(error.msg);
+        //console.error('Error activating user:', error);
+      });
+  }
+
+  // Desactive
+  public desactiveUser(userId: string) {
+    fetch(`${this.api}authentication/user/des/${userId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      }
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        window.location.reload();
+      })
+      .catch((error) => {
+        alert(error.msg);
+        //console.error('Error deactivating user:', error);
+      });
+  }
+
+  public getUsers() {
+    let getUsers: any[] = [];
+    fetch(`${this.api}authentication/user`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      }
+    })
+      .then((res) => res.json())
+      .then((response) => {
+        const users = response.data?.result;
+        if (Array.isArray(users)) {
+          users.forEach((element: { human: any }) => {
+            const human = element.human;
+            if (human) {
+              getUsers.push(human);
+            }
+          });
+          //console.log(getUsers);
+        } else {
+          //console.error('The response does not contain valid users');
+        }
+      })
+      .catch((error) => console.error(`Error retrieving users: ${error}`));
+  }
+
+  /*** CRUD to Role */
+  public createRole(roleKey: string, displayName: string, group: string) {
+    fetch(`${this.api}authentication/role`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      },
+      body: JSON.stringify({ roleKey, displayName, group })
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        // Registro exitoso
+      })
+      .catch((error) => {
+        alert(error.msg);
+        //console.error('Error creating Role:', error);
+      });
+  }
+
+  public updateRole(roleKey: string, displayName: string, group: string) {
+    fetch(`${this.api}authentication/role`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      },
+      body: JSON.stringify({ roleKey, displayName, group })
+    })
+      .then((res) => res.json())
+      .then((data) => {})
+      .catch((error) => {
+        alert(error.msg);
+        //console.error('Error updating Role:', error);
+      });
+  }
+
+  public deleteRole(roleKey: string) {
+    fetch(`${this.api}authentication/role/${roleKey}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.getAccessToken()}`
+      },
+      body: JSON.stringify({ roleKey })
+    })
+      .then((res) => res.json())
+      .then((data) => {})
+      .catch((error) => {
+        alert(error.msg);
+        //console.error(error.msg);
+      });
+  }
+
+  refreshToken(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const rt = localStorage.getItem('refresh_token');
+
+      if (!rt) {
+        //console.warn('No refresh_token exists in localStorage. You must log in again.');
+        //console.log("logout from refreshToken");
+        //this.logout();
+        return reject('Sin refresh_token');
+      }
+
+      const payload = new URLSearchParams();
+      payload.set('grant_type', 'refresh_token');
+      payload.set('refresh_token', rt);
+      payload.set('client_id', this.clientId);
+
+      //console.log('Iniciando refreshToken()');
+
+      fetch(this.tokenUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: payload.toString()
+      })
+        .then((res) => {
+          if (!res.ok) {
+            //console.error(`Error HTTP en refresh: ${res.status} ${res.statusText}`);
+            return res.text().then((text) => {
+              //console.error('Cuerpo de error:', text);
+              throw new Error(text);
+            });
+          }
+          return res.json();
+        })
+        .then((tokens) => {
+          //console.log('Respuesta del token refresh:', tokens);
+
+          if (!tokens || !tokens.access_token || !tokens.expires_in) {
+            throw new Error("The server's response does not contain the expected fields.");
+          }
+
+          localStorage.setItem('access_token', tokens.access_token);
+          localStorage.setItem('id_token', tokens.id_token ?? '');
+          localStorage.setItem('refresh_token', tokens.refresh_token ?? '');
+          localStorage.setItem('expires_in', tokens.expires_in.toString());
+          localStorage.setItem('refresh_expires_in', tokens.refresh_expires_in?.toString() ?? '');
+          localStorage.setItem('token_start_time', Date.now().toString());
+
+          this.scheduleRefresh(tokens.expires_in);
+          resolve();
+        })
+        .catch((err) => {
+          //console.warn('refreshToken failed, forcing logout in 2 seconds');
+          //console.warn('→ Error:', err);
+          //console.warn('→ refresh_token usado:', rt);
+          setTimeout(() => {
+            //console.log('Forcing logout after refreshToken error');
+            //this.logout();
+          }, 300000);
+
+          reject(err);
+        });
+    });
+  }
+
+  private scheduleRefresh(expiresIn: number) {
+    const refreshInMs = (expiresIn - 3539) * 1000;
+    if (refreshInMs <= 0) {
+      //console.log('expiresIn too small or negative, refreshing immediately');
+      this.refreshToken();
+      return;
+    }
+
+    if (this.refreshTimeoutId) {
+      clearTimeout(this.refreshTimeoutId);
+    }
+
+    this.refreshTimeoutId = setTimeout(() => {
+      this.refreshToken();
+    }, refreshInMs);
+  }
+}
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AuthService } from '../auth.service';
+
+@Component({
+  selector: 'mifosx-callback',
+  template: `<p>Processing callback...</p>`
+})
+export class CallbackComponent implements OnInit {
+  constructor(
+    private route: ActivatedRoute,
+    private authService: AuthService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      const code = params['code'];
+      if (code) {
+        const codeVerifier = localStorage.getItem('code_verifier');
+        this.authService.exchangeCodeForTokens(code, codeVerifier);
+      } else {
+        console.warn('No code was received in the URL');
+      }
+    });
+  }
+}
@@ -0,0 +1,42 @@
+<h1 mat-dialog-title>{{ 'labels.heading.Change Password' | translate }}</h1>
+
+<div mat-dialog-content>
+  <form [formGroup]="changePasswordForm" class="layout-column" (ngSubmit)="onSubmit()">
+    <!-- Contraseña actual -->
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>{{ 'labels.inputs.Password Current' | translate }}</mat-label>
+      <input matInput type="password" formControlName="currentPassword" required />
+      <mat-error *ngIf="changePasswordForm.get('currentPassword')?.hasError('required')">
+        {{ 'inputs.currentPasswordRequired' | translate }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- Nueva contraseña -->
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>{{ 'labels.inputs.Password New' | translate }}</mat-label>
+      <input matInput type="password" formControlName="password" required />
+      <mat-error *ngIf="changePasswordForm.get('password')?.errors">
+        {{ 'labels.commons.Password validation' | translate: { minchar: minPasswordLength } }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- Confirmar contraseña -->
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
+      <input matInput type="password" formControlName="repeatPassword" required />
+      <mat-error *ngIf="changePasswordForm.get('repeatPassword')?.hasError('notequal')">
+        {{ 'inputs.passwordsDoNotMatch' | translate }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- Botones de acción dentro del formulario -->
+    <mat-dialog-actions align="center">
+      <button mat-raised-button color="warn" type="button" (click)="dialogRef.close()">
+        {{ 'labels.buttons.Cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary" type="submit" [disabled]="!changePasswordForm.valid">
+        {{ 'labels.buttons.Confirm' | translate }}
+      </button>
+    </mat-dialog-actions>
+  </form>
+</div>
@@ -0,0 +1,8 @@
+.error {
+  color: red;
+}
+
+mat-dialog-content {
+  min-width: 240px;
+  width: 240px;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangePasswordDialogComponent } from './change-password-dialog.component';
+
+describe('ChangePasswordDialogComponent', () => {
+  let component: ChangePasswordDialogComponent;
+  let fixture: ComponentFixture<ChangePasswordDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChangePasswordDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangePasswordDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,111 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogActions } from '@angular/material/dialog';
+import { UntypedFormBuilder, Validators, AbstractControl, ValidationErrors, FormGroup } from '@angular/forms';
+import { confirmPasswordValidator } from 'app/login/reset-password/confirm-password.validator';
+import { HttpClient } from '@angular/common/http';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { environment } from '../../../../environments/environment';
+
+/**
+ * Change Password Dialog component.
+ */
+@Component({
+  selector: 'mifosx-change-password-dialog',
+  templateUrl: './change-password-dialog.component.html',
+  styleUrls: ['./change-password-dialog.component.scss'],
+  standalone: true,
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogActions
+  ]
+})
+export class ChangePasswordDialogComponent implements OnInit {
+  minPasswordLength: number = environment.minPasswordLength || 12;
+  changePasswordForm: FormGroup;
+
+  constructor(
+    public dialogRef: MatDialogRef<ChangePasswordDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private formBuilder: UntypedFormBuilder,
+    private http: HttpClient
+  ) {}
+
+  private api = environment.OIDC.oidcApiUrl;
+
+  ngOnInit(): void {
+    this.createChangePasswordForm();
+    this.setupPasswordMatchValidation();
+  }
+
+  createChangePasswordForm(): void {
+    this.changePasswordForm = this.formBuilder.group(
+      {
+        currentPassword: [
+          '',
+          Validators.required
+        ],
+        password: [
+          '',
+          [
+            Validators.required,
+            Validators.minLength(this.minPasswordLength),
+            Validators.maxLength(50),
+            Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).+$/)]
+        ],
+        repeatPassword: [
+          '',
+          Validators.required
+        ]
+      },
+      { validators: confirmPasswordValidator }
+    );
+  }
+
+  setupPasswordMatchValidation(): void {
+    this.changePasswordForm.get('password')?.valueChanges.subscribe(() => {
+      this.changePasswordForm.get('repeatPassword')?.updateValueAndValidity();
+    });
+
+    this.changePasswordForm.get('repeatPassword')?.setValidators([
+      Validators.required,
+      this.matchOtherControl('password')]);
+  }
+
+  matchOtherControl(controlNameToMatch: string) {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const parent = control?.parent;
+      if (!parent) return null;
+
+      const matchingControl = parent.get(controlNameToMatch);
+      if (!matchingControl) return null;
+
+      return control.value === matchingControl.value ? null : { notequal: true };
+    };
+  }
+
+  onSubmit(): void {
+    if (this.changePasswordForm.invalid) return;
+
+    const requestBody = {
+      userId: this.data.id,
+      currentPassword: this.changePasswordForm.value.currentPassword,
+      newPassword: {
+        password: this.changePasswordForm.value.password,
+        changeRequired: false
+      }
+    };
+
+    console.log('JSON a enviar:', requestBody);
+
+    this.http.put(this.api + 'authentication/user/password', requestBody).subscribe({
+      next: (res) => {
+        //console.log('Contraseña actualizada', res);
+        this.dialogRef.close(true);
+      },
+      error: (err) => {
+        console.log(err);
+        alert(err + 'No es posible actualizar contraseña');
+      }
+    });
+  }
+}
@@ -0,0 +1,34 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+// Angular Material Modules
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ChangePasswordDialogComponent } from './change-password-dialog/change-password-dialog.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatTooltipModule,
+    ChangePasswordDialogComponent
+  ],
+  exports: [
+    ChangePasswordDialogComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SharedModule {}
@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError, from } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { AuthService } from './auth.service';
+import { environment } from 'environments/environment';
+
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+  public environment = environment;
+  FINERACT_PLATFORM_TENANT_IDENTIFIER = environment.fineractPlatformTenantId;
+
+  constructor(private authService: AuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const token = this.authService.getAccessToken();
+    let headersConfig: { [key: string]: string } = {
+      'Fineract-Platform-TenantId': this.FINERACT_PLATFORM_TENANT_IDENTIFIER,
+      'Content-Type': req.headers.get('Content-Type') || 'application/json'
+    };
+    const publicEndpoints = [
+      '/auth/test',
+      '/health'
+    ];
+    const isPublicEndpoint = publicEndpoints.some((url) => req.url.includes(url));
+
+    if (token && !isPublicEndpoint) {
+      headersConfig['Authorization'] = `Bearer ${token}`;
+    }
+
+    const authReq = req.clone({ setHeaders: headersConfig });
+
+    return next.handle(authReq).pipe(
+      catchError((err) => {
+        if (err instanceof HttpErrorResponse && err.status === 401 && !isPublicEndpoint) {
+          return from(this.handle401Error(authReq, next));
+        }
+        return throwError(() => err);
+      })
+    );
+  }
+
+  private async handle401Error(request: HttpRequest<any>, next: HttpHandler): Promise<HttpEvent<any>> {
+    try {
+      await this.authService.refreshToken();
+      const newToken = this.authService.getAccessToken();
+      if (newToken) {
+        const retriedReq = request.clone({
+          setHeaders: {
+            Authorization: `Bearer ${newToken}`,
+            'Fineract-Platform-TenantId': this.FINERACT_PLATFORM_TENANT_IDENTIFIER,
+            'Content-Type': request.headers.get('Content-Type') || 'application/json'
+          }
+        });
+        return next.handle(retriedReq).toPromise() as Promise<HttpEvent<any>>;
+      } else {
+        throw new Error('No new access token obtained after refresh');
+      }
+    } catch (e) {
+      console.error('Error in handle401Error, forcing logout');
+      throw e;
+    }
+  }
+}
@@ -0,0 +1,205 @@
+<div class="container">
+  <mat-card>
+    <form [formGroup]="userForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div class="layout-row-wrap layout-lt-md-column gap-2percent">
+          <!-- Username -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+            <input matInput required formControlName="username" />
+            <mat-error *ngIf="userForm.controls.username.hasError('required')">
+              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Email -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+            <input matInput required formControlName="email" />
+            <mat-error *ngIf="userForm.controls.email.hasError('email')">
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.invalid' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="userForm.controls.email.hasError('required')">
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <!-- First Name -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput formControlName="firstName" required />
+          </mat-form-field>
+
+          <!-- Last Name -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput formControlName="lastName" required />
+          </mat-form-field>
+
+          <!-- Preferred Language -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
+            <mat-select formControlName="preferredLanguage" required>
+              <mat-option value="es">{{ 'languages.es-MX' | translate }}</mat-option>
+              <mat-option value="en">{{ 'languages.en-US' | translate }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <!-- Gender -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
+            <mat-select formControlName="gender" required>
+              <mat-option value="GENDER_MALE">{{ 'labels.catalogs.male' | translate }}</mat-option>
+              <mat-option value="GENDER_FEMALE">{{ 'labels.catalogs.female' | translate }}</mat-option>
+              <mat-option value="GENDER_OTHER">{{ 'labels.catalogs.other' | translate }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <!-- Country code and phone -->
+          <div class="flex items-center gap-2">
+            <mat-form-field class="flex-48">
+              <mat-label>{{ 'labels.inputs.Code' | translate }}</mat-label>
+              <mat-select formControlName="countryCode" required>
+                <mat-option *ngFor="let country of countryCodes" [value]="country.code">
+                  {{ 'countries.' + country.key | translate }} ({{ country.code }})
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field class="flex-48">
+              <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+              <input matInput formControlName="phoneNumber" required maxlength="12" minlength="4" />
+            </mat-form-field>
+          </div>
+
+          <mat-form-field class="flex-20">
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+            <mat-select required formControlName="officeId">
+              <mat-option *ngFor="let office of officesData" [value]="office.id">
+                {{ office.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="userForm.controls.officeId.hasError('required')">
+              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field class="flex-20">
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <!-- Password -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
+            <input matInput type="password" formControlName="password" required />
+            <mat-error *ngIf="userForm.get('password')?.hasError('required')">
+              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="userForm.get('password')?.hasError('minlength')">
+              {{ 'labels.commons.Password should be at least' | translate }}
+              <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="userForm.get('password')?.hasError('maxlength')">
+              {{ 'labels.commons.Password should not be more than' | translate }}
+              <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
+            </mat-error>
+            <mat-error
+              *ngIf="
+                userForm.get('password')?.hasError('pattern') &&
+                !userForm.get('password')?.hasError('minlength') &&
+                !userForm.get('password')?.hasError('maxlength')
+              "
+            >
+              {{ 'labels.commons.Password should include a' | translate }}
+              <strong>{{ 'labels.commons.numeral' | translate }}</strong>
+              {{ 'labels.commons.and at' | translate }}
+              <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong
+              >,
+              <strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Repeat password -->
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
+            <input matInput type="password" formControlName="repeatPassword" required />
+            <mat-error *ngIf="userForm.get('repeatPassword')?.hasError('required')">
+              {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Passwords do not match -->
+          <p
+            class="flex-98 reset-password-error"
+            *ngIf="
+              userForm.errors?.passwordsDoNotMatch &&
+              !userForm.get('password')?.hasError('required') &&
+              !userForm.get('repeatPassword')?.hasError('required')
+            "
+          >
+            {{ 'labels.inputs.Passwords' | translate }}
+            <strong>{{ 'labels.commons.do not match' | translate }}</strong>
+          </p>
+
+          <!-- Roles -->
+          <mat-form-field class="flex-20">
+            <mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
+            <mat-select formControlName="roles" required multiple>
+              <mat-option *ngFor="let role of rolesData" [value]="role.id">
+                {{ role.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="userForm.controls.roles.hasError('required')">
+              {{ 'labels.commons.At least one role' | translate }}
+              <strong>{{ 'labels.commons.must be selected' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
+      </mat-card-content>
+
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
+        <button type="button" mat-raised-button [routerLink]="['../']">
+          {{ 'labels.buttons.Cancel' | translate }}
+        </button>
+        <button mat-raised-button color="primary" [disabled]="userForm.invalid">
+          {{ 'labels.buttons.Submit' | translate }}
+        </button>
+      </mat-card-actions>
+    </form>
+  </mat-card>
+</div>
+
+<ng-template #templateUserFormRef let-popover="popover">
+  <h2>{{ 'labels.heading.Create User' | translate }}</h2>
+  <p class="mw400">
+    {{ 'labels.text.Filling Details' | translate }}:
+    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141740/Users" target="_blank">{{
+      'labels.inputs.Users' | translate
+    }}</a>
+  </p>
+  <div class="layout-row align-end gap-2px responsive-column">
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close()">
+      {{ 'labels.buttons.Create User' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
+  </div>
+</ng-template>
@@ -0,0 +1,13 @@
+.password-never-expires-wrapper {
+  padding: 17.5px 0;
+}
+
+.send-password-to-email-wrapper {
+  padding: 17.5px 0;
+}
+
+.reset-password-error {
+  color: #f44336;
+  font-size: 80%;
+  margin: 0;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateUserComponent } from './create-user.component';
+
+describe('CreateUserComponent', () => {
+  let component: CreateUserComponent;
+  let fixture: ComponentFixture<CreateUserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateUserComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,489 @@
+/** Angular Imports */
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import {
+  UntypedFormGroup,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  Validators,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+//import { UsersService } from '../users.service';
+import { UsersServiceZitadel } from '../usersZitadel.service';
+import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
+
+/** Custom Dialog Component */
+import { PasswordsUtility } from 'app/core/utils/passwords-utility';
+import { confirmPasswordValidator } from 'app/login/reset-password/confirm-password.validator';
+import { ConfigurationWizardService } from 'app/configuration-wizard/configuration-wizard.service';
+import { ContinueSetupDialogComponent } from 'app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
+import { UsersService } from 'app/users/users.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * Create user component.
+ */
+@Component({
+  selector: 'mifosx-create-user',
+  templateUrl: './create-user.component.html',
+  styleUrls: ['./create-user.component.scss'],
+  standalone: true,
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
+})
+export class CreateUserComponent implements OnInit, AfterViewInit {
+  /** User form. */
+  userForm: UntypedFormGroup;
+  /** Offices data. */
+  officesData: any;
+  /** Roles data. */
+  rolesData: any;
+  /** Staff data. */
+  staffData: any;
+
+  countryCodes = [
+    { code: '+93', key: 'AF' },
+    { code: '+355', key: 'AL' },
+    { code: '+213', key: 'DZ' },
+    { code: '+376', key: 'AD' },
+    { code: '+244', key: 'AO' },
+    { code: '+54', key: 'AR' },
+    { code: '+374', key: 'AM' },
+    { code: '+61', key: 'AU' },
+    { code: '+43', key: 'AT' },
+    { code: '+994', key: 'AZ' },
+    { code: '+973', key: 'BH' },
+    { code: '+880', key: 'BD' },
+    { code: '+375', key: 'BY' },
+    { code: '+32', key: 'BE' },
+    { code: '+591', key: 'BO' },
+    { code: '+387', key: 'BA' },
+    { code: '+55', key: 'BR' },
+    { code: '+359', key: 'BG' },
+    { code: '+226', key: 'BF' },
+    { code: '+257', key: 'BI' },
+    { code: '+855', key: 'KH' },
+    { code: '+237', key: 'CM' },
+    { code: '+1', key: 'CA' },
+    { code: '+56', key: 'CL' },
+    { code: '+86', key: 'CN' },
+    { code: '+57', key: 'CO' },
+    { code: '+506', key: 'CR' },
+    { code: '+385', key: 'HR' },
+    { code: '+53', key: 'CU' },
+    { code: '+357', key: 'CY' },
+    { code: '+420', key: 'CZ' },
+    { code: '+45', key: 'DK' },
+    { code: '+20', key: 'EG' },
+    { code: '+503', key: 'SV' },
+    { code: '+34', key: 'ES' },
+    { code: '+372', key: 'EE' },
+    { code: '+251', key: 'ET' },
+    { code: '+358', key: 'FI' },
+    { code: '+33', key: 'FR' },
+    { code: '+995', key: 'GE' },
+    { code: '+49', key: 'DE' },
+    { code: '+233', key: 'GH' },
+    { code: '+30', key: 'GR' },
+    { code: '+502', key: 'GT' },
+    { code: '+504', key: 'HN' },
+    { code: '+36', key: 'HU' },
+    { code: '+354', key: 'IS' },
+    { code: '+91', key: 'IN' },
+    { code: '+62', key: 'ID' },
+    { code: '+964', key: 'IQ' },
+    { code: '+98', key: 'IR' },
+    { code: '+353', key: 'IE' },
+    { code: '+972', key: 'IL' },
+    { code: '+39', key: 'IT' },
+    { code: '+81', key: 'JP' },
+    { code: '+962', key: 'JO' },
+    { code: '+7', key: 'KZ' },
+    { code: '+254', key: 'KE' },
+    { code: '+965', key: 'KW' },
+    { code: '+996', key: 'KG' },
+    { code: '+371', key: 'LV' },
+    { code: '+961', key: 'LB' },
+    { code: '+218', key: 'LY' },
+    { code: '+370', key: 'LT' },
+    { code: '+352', key: 'LU' },
+    { code: '+389', key: 'MK' },
+    { code: '+60', key: 'MY' },
+    { code: '+52', key: 'MX' },
+    { code: '+373', key: 'MD' },
+    { code: '+377', key: 'MC' },
+    { code: '+976', key: 'MN' },
+    { code: '+212', key: 'MA' },
+    { code: '+258', key: 'MZ' },
+    { code: '+977', key: 'NP' },
+    { code: '+31', key: 'NL' },
+    { code: '+64', key: 'NZ' },
+    { code: '+505', key: 'NI' },
+    { code: '+234', key: 'NG' },
+    { code: '+47', key: 'NO' },
+    { code: '+92', key: 'PK' },
+    { code: '+507', key: 'PA' },
+    { code: '+595', key: 'PY' },
+    { code: '+51', key: 'PE' },
+    { code: '+63', key: 'PH' },
+    { code: '+48', key: 'PL' },
+    { code: '+351', key: 'PT' },
+    { code: '+974', key: 'QA' },
+    { code: '+40', key: 'RO' },
+    { code: '+7', key: 'RU' },
+    { code: '+966', key: 'SA' },
+    { code: '+221', key: 'SN' },
+    { code: '+381', key: 'RS' },
+    { code: '+65', key: 'SG' },
+    { code: '+421', key: 'SK' },
+    { code: '+386', key: 'SI' },
+    { code: '+27', key: 'ZA' },
+    { code: '+82', key: 'KR' },
+    { code: '+94', key: 'LK' },
+    { code: '+46', key: 'SE' },
+    { code: '+41', key: 'CH' },
+    { code: '+886', key: 'TW' },
+    { code: '+66', key: 'TH' },
+    { code: '+90', key: 'TR' },
+    { code: '+256', key: 'UG' },
+    { code: '+380', key: 'UA' },
+    { code: '+971', key: 'AE' },
+    { code: '+44', key: 'GB' },
+    { code: '+1', key: 'US' },
+    { code: '+598', key: 'UY' },
+    { code: '+998', key: 'UZ' },
+    { code: '+58', key: 'VE' },
+    { code: '+84', key: 'VN' },
+    { code: '+967', key: 'YE' },
+    { code: '+260', key: 'ZM' },
+    { code: '+263', key: 'ZW' }
+  ];
+
+  /* Reference of create user form */
+  @ViewChild('userFormRef') userFormRef: ElementRef<any>;
+  /* Template for popover on create user form */
+  @ViewChild('templateUserFormRef') templateUserFormRef: TemplateRef<any>;
+
+  /**
+   * Retrieves the offices and roles data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {UsersServiceZitadel} UsersService Users Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
+   */
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private usersService: UsersServiceZitadel,
+    private usersService2: UsersService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private popoverService: PopoverService,
+    private configurationWizardService: ConfigurationWizardService,
+    private dialog: MatDialog,
+    private passwordsUtility: PasswordsUtility
+  ) {
+    this.route.data.subscribe((data: { usersTemplate: any }) => {
+      this.officesData = data.usersTemplate.allowedOffices;
+      this.rolesData = data.usersTemplate.availableRoles;
+    });
+  }
+
+  /**
+   * Creates the user form, sets the staff data and conditional controls of the user form.
+   */
+  ngOnInit() {
+    this.createUserForm();
+    this.setStaffData();
+    this.setConditionalControls();
+  }
+
+  /**
+   * Creates the user form.
+   */
+  createUserForm(): void {
+    this.userForm = this.formBuilder.group(
+      {
+        username: [
+          '',
+          Validators.required
+        ],
+        email: [
+          '',
+          [
+            Validators.required,
+            Validators.email
+          ]
+        ],
+        firstName: [
+          '',
+          Validators.required
+        ],
+        lastName: [
+          '',
+          Validators.required
+        ],
+        preferredLanguage: [
+          '',
+          Validators.required
+        ],
+        gender: [
+          '',
+          Validators.required
+        ],
+        countryCode: [
+          '+1',
+          Validators.required
+        ],
+        phoneNumber: [
+          '',
+          [
+            Validators.required,
+            Validators.pattern(/^[0-9]{7,15}$/)]
+        ],
+        password: [
+          '',
+          [
+            Validators.required,
+            Validators.minLength(12),
+            Validators.maxLength(50),
+            Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).+$/)]
+        ],
+        repeatPassword: [
+          '',
+          Validators.required
+        ],
+        roles: [
+          '',
+          Validators.required
+        ],
+        officeId: [
+          '',
+          Validators.required
+        ],
+        staffId: ['']
+      },
+      { validators: confirmPasswordValidator }
+    );
+
+    /*
+    this.userForm.get('repeatPassword')?.valueChanges.subscribe(() => {
+      this.userForm.updateValueAndValidity();
+    });
+
+    this.userForm.statusChanges.subscribe((status) => {
+      console.log('Form status:', status);
+      console.log(
+        'Invalid fields:',
+        Object.entries(this.userForm.controls)
+          .filter(
+            ([
+              _,
+              control
+            ]) => control.invalid
+          )
+          .map(([key]) => key)
+      );
+    });*/
+  }
+
+  /**
+   * Sets the staff data each time the user selects a new office
+   */
+  setStaffData() {
+    this.userForm.get('officeId').valueChanges.subscribe((officeId: string) => {
+      this.staffData = [];
+      this.usersService2.getStaff(officeId).subscribe((staff: any) => {
+        this.staffData = staff;
+      });
+    });
+  }
+
+  /**
+   * Sets the conditional controls of the user form
+   */
+  setConditionalControls() {
+    this.userForm.get('sendPasswordToEmail').valueChanges.subscribe((sendPasswordToEmail: boolean) => {
+      const passwordControl = this.userForm.get('password');
+      const repeatPasswordControl = this.userForm.get('repeatPassword');
+
+      if (sendPasswordToEmail) {
+        passwordControl.disable();
+        repeatPasswordControl.disable();
+        this.userForm.get('email')?.setValidators([
+          Validators.required,
+          Validators.email
+        ]);
+      } else {
+        passwordControl.enable();
+        repeatPasswordControl.enable();
+        this.userForm.get('email')?.setValidators([Validators.email]);
+      }
+
+      this.userForm.get('email')?.updateValueAndValidity();
+    });
+  }
+
+  /**
+   * Submits the user form and creates user,
+   * if successful redirects to view created user.
+   */
+  submit() {
+    const fullForm = this.userForm.value;
+
+    const fullPhone = `${fullForm.countryCode}${fullForm.phoneNumber}`;
+    const password = `${fullForm.repeatPassword}`;
+    const givenName = `${fullForm.firstName}`;
+    const familyName = `${fullForm.lastName}`;
+    const nickName = `${fullForm.username}`;
+
+    const user = {
+      ...fullForm,
+      phone: fullPhone,
+      password: password,
+      givenName: givenName,
+      familyName: familyName,
+      nickName: nickName,
+      displayName: `${fullForm.firstName} ${fullForm.lastName}`
+    };
+
+    const dataOffi = {
+      officeId: fullForm.officeId,
+      staffId: fullForm.staffId
+    };
+
+    const selectedRoleIds = this.userForm.get('roles')?.value;
+
+    delete user.officeId;
+    delete user.staffId;
+    delete user.roles;
+    delete user.countryCode;
+    delete user.phoneNumber;
+    delete user.repeatPassword;
+    delete user.firstName;
+    delete user.lastName;
+
+    this.usersService.createUser(user).subscribe((response: any) => {
+      const userId = response.object?.userId;
+
+      if (userId) {
+        const bodyBD = {
+          id: userId,
+          officeId: dataOffi.officeId,
+          staffId: dataOffi.staffId,
+          username: user.nickName,
+          firstname: user.givenName,
+          lastname: user.familyName,
+          roleIds: selectedRoleIds || []
+        };
+
+        //console.log('Sending to CrearBD:', bodyBD);
+
+        this.usersService.createUserBd(bodyBD).subscribe(
+          (resBD: any) => {
+            //console.log('User created in DB:', resBD);
+
+            if (selectedRoleIds?.length > 0) {
+              this.usersService.assignRolesToUser(userId, selectedRoleIds).subscribe(
+                () => {
+                  if (this.configurationWizardService.showUsersForm === true) {
+                    this.configurationWizardService.showUsersForm = false;
+                    this.openDialog();
+                  } else {
+                    this.router.navigate(['/appusers']);
+                  }
+                },
+                (error) => {
+                  console.error('Error assigning roles:', error);
+                }
+              );
+            } else {
+              console.warn('No selected roles found.');
+            }
+          },
+          (error) => {
+            console.error('Error creating in DB (CrearBD):', error);
+          }
+        );
+      } else {
+        console.error('Could not get userId');
+      }
+    });
+  }
+
+  /**
+   * Popover function
+   * @param template TemplateRef<any>.
+   * @param target HTMLElement | ElementRef<any>.
+   * @param position String.
+   * @param backdrop Boolean.
+   */
+  showPopover(
+    template: TemplateRef<any>,
+    target: HTMLElement | ElementRef<any>,
+    position: string,
+    backdrop: boolean
+  ): void {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  /**
+   * To show popover.
+   */
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showUsersForm === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateUserFormRef, this.userFormRef.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Maker Checker Tasks System Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showUsersForm = false;
+    this.configurationWizardService.showMakerCheckerTable = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Previous Step (Users page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showUsersForm = false;
+    this.configurationWizardService.showUsersList = true;
+    this.router.navigate(['/appusers']);
+  }
+
+  /**
+   * Opens dialog if the user wants to create more users.
+   */
+  openDialog() {
+    const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
+      data: {
+        stepName: 'user'
+      }
+    });
+    continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
+      if (response.step === 1) {
+        this.configurationWizardService.showUsersForm = false;
+        this.router.navigate(['../'], { relativeTo: this.route });
+      } else if (response.step === 2) {
+        this.configurationWizardService.showUsersForm = true;
+        this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+        this.router.onSameUrlNavigation = 'reload';
+        this.router.navigate(['/organization/users/create']);
+      } else if (response.step === 3) {
+        this.configurationWizardService.showUsersForm = false;
+        this.configurationWizardService.showMakerCheckerTable = true;
+        this.router.navigate(['/system']);
+      }
+    });
+  }
+}
@@ -0,0 +1,124 @@
+<div class="container">
+  <mat-card>
+    <form *ngIf="editUserForm" [formGroup]="editUserForm" (ngSubmit)="submit()">
+      <mat-card-content>
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
+            <input matInput required formControlName="username" readonline />
+            <mat-error *ngIf="editUserForm.controls.username.hasError('required')">
+              {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
+            <input matInput required formControlName="email" />
+            <mat-error *ngIf="editUserForm.controls.email.hasError('email')">
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.invalid' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="editUserForm.controls.email.hasError('required')">
+              {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
+            <mat-error *ngIf="editUserForm.controls.firstname.hasError('pattern')">
+              {{ 'labels.inputs.First Name' | translate }}
+              <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="editUserForm.controls.firstname.hasError('required')">
+              {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
+            <mat-error *ngIf="editUserForm.controls.lastname.hasError('pattern')">
+              {{ 'labels.inputs.Last Name' | translate }}
+              <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
+            </mat-error>
+            <mat-error *ngIf="editUserForm.controls.lastname.hasError('required')">
+              {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field class="flex-20">
+            <mat-label>{{ 'labels.inputs.Code' | translate }}</mat-label>
+            <mat-select formControlName="countryCode" required>
+              <mat-option *ngFor="let country of countryCodes" [value]="country.code">
+                {{ 'countries.' + country.key | translate }} ({{ country.code }})
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-75">
+            <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
+            <input matInput formControlName="phoneNumber" required maxlength="12" minlength="4" />
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
+            <mat-select formControlName="gender" required>
+              <mat-option value="GENDER_MALE">{{ 'labels.catalogs.male' | translate }}</mat-option>
+              <mat-option value="GENDER_FEMALE">{{ 'labels.catalogs.female' | translate }}</mat-option>
+              <mat-option value="GENDER_OTHER">{{ 'labels.catalogs.other' | translate }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
+            <mat-select formControlName="preferredLanguage" required>
+              <mat-option value="es">{{ 'languages.es-MX' | translate }}</mat-option>
+              <mat-option value="en">{{ 'languages.en-US' | translate }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
+            <mat-select required formControlName="officeId" (selectionChange)="officeChanged($event.value)">
+              <mat-option *ngFor="let office of officesData" [value]="office.id">
+                {{ office.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field class="flex-48">
+            <mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
+            <mat-select formControlName="roles" multiple>
+              <mat-option *ngFor="let rol of rolesData" [value]="rol.id">
+                {{ rol.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-card-actions class="layout-row align-center gap-5px responsive-column">
+            <button type="button" mat-raised-button [routerLink]="['../']">
+              {{ 'labels.buttons.Cancel' | translate }}
+            </button>
+            <button mat-raised-button color="primary">
+              {{ 'labels.buttons.Submit' | translate }}
+            </button>
+          </mat-card-actions>
+        </div>
+      </mat-card-content>
+    </form>
+  </mat-card>
+</div>
@@ -0,0 +1,3 @@
+.password-never-expires-wrapper {
+  padding: 17.5px 0;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditUserComponent } from './edit-user.component';
+
+describe('EditUserComponent', () => {
+  let component: EditUserComponent;
+  let fixture: ComponentFixture<EditUserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditUserComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,334 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+/** Custom Services */
+import { UsersServiceZitadel } from '../usersZitadel.service';
+import { UsersService } from 'app/users/users.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+/**
+ * Edit User Component.
+ */
+@Component({
+  selector: 'mifosx-edit-user',
+  templateUrl: './edit-user.component.html',
+  styleUrls: ['./edit-user.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS
+  ]
+})
+export class EditUserComponent implements OnInit {
+  /** User Data */
+  userData: any;
+  /** Offices Data */
+  officesData: any;
+  /** Staff Data */
+  staffData: any;
+  /** Roles Data */
+  rolesData: any;
+  /** Edit User form. */
+  editUserForm: UntypedFormGroup;
+
+  /**
+   * Retrieves the offices data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {UsersServiceZitadel} UsersServiceZitadel Users Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {UsersService} UsersService Users Service.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private UsersServiceZitadel: UsersServiceZitadel,
+    private UsersService: UsersService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+    this.route.data.subscribe((data: { user: any; usersTemplate: any }) => {
+      const fullUserData = data.user;
+      this.userData = fullUserData.object?.result?.[0] || {};
+      this.officesData = data.usersTemplate.allowedOffices;
+      this.rolesData = data.usersTemplate.availableRoles;
+      this.UsersServiceZitadel.getDatosExtraUsuario(this.userData.id).subscribe((resp: any) => {
+        const datos = resp.object;
+        console.table(datos);
+
+        this.userData = {
+          ...this.userData,
+          userName: datos.username_zitadel,
+          officeId: datos.office_id,
+          staffId: datos.staff_id,
+          selectedRoles: datos.roles || []
+        };
+        this.createEditUserForm();
+        this.officeChanged(this.userData.officeId);
+        this.UsersServiceZitadel.getRoles().subscribe((response: any) => {
+          const rolesZitadel = response.object?.result || [];
+          this.rolesData = rolesZitadel.map((r: any) => ({
+            id: r.key,
+            name: r.displayName
+          }));
+        });
+      });
+    });
+  }
+
+  countryCodes = [
+    { code: '+93', key: 'AF' },
+    { code: '+355', key: 'AL' },
+    { code: '+213', key: 'DZ' },
+    { code: '+376', key: 'AD' },
+    { code: '+244', key: 'AO' },
+    { code: '+54', key: 'AR' },
+    { code: '+374', key: 'AM' },
+    { code: '+61', key: 'AU' },
+    { code: '+43', key: 'AT' },
+    { code: '+994', key: 'AZ' },
+    { code: '+973', key: 'BH' },
+    { code: '+880', key: 'BD' },
+    { code: '+375', key: 'BY' },
+    { code: '+32', key: 'BE' },
+    { code: '+591', key: 'BO' },
+    { code: '+387', key: 'BA' },
+    { code: '+55', key: 'BR' },
+    { code: '+359', key: 'BG' },
+    { code: '+226', key: 'BF' },
+    { code: '+257', key: 'BI' },
+    { code: '+855', key: 'KH' },
+    { code: '+237', key: 'CM' },
+    { code: '+1', key: 'CA' },
+    { code: '+56', key: 'CL' },
+    { code: '+86', key: 'CN' },
+    { code: '+57', key: 'CO' },
+    { code: '+506', key: 'CR' },
+    { code: '+385', key: 'HR' },
+    { code: '+53', key: 'CU' },
+    { code: '+357', key: 'CY' },
+    { code: '+420', key: 'CZ' },
+    { code: '+45', key: 'DK' },
+    { code: '+20', key: 'EG' },
+    { code: '+503', key: 'SV' },
+    { code: '+34', key: 'ES' },
+    { code: '+372', key: 'EE' },
+    { code: '+251', key: 'ET' },
+    { code: '+358', key: 'FI' },
+    { code: '+33', key: 'FR' },
+    { code: '+995', key: 'GE' },
+    { code: '+49', key: 'DE' },
+    { code: '+233', key: 'GH' },
+    { code: '+30', key: 'GR' },
+    { code: '+502', key: 'GT' },
+    { code: '+504', key: 'HN' },
+    { code: '+36', key: 'HU' },
+    { code: '+354', key: 'IS' },
+    { code: '+91', key: 'IN' },
+    { code: '+62', key: 'ID' },
+    { code: '+964', key: 'IQ' },
+    { code: '+98', key: 'IR' },
+    { code: '+353', key: 'IE' },
+    { code: '+972', key: 'IL' },
+    { code: '+39', key: 'IT' },
+    { code: '+81', key: 'JP' },
+    { code: '+962', key: 'JO' },
+    { code: '+7', key: 'KZ' },
+    { code: '+254', key: 'KE' },
+    { code: '+965', key: 'KW' },
+    { code: '+996', key: 'KG' },
+    { code: '+371', key: 'LV' },
+    { code: '+961', key: 'LB' },
+    { code: '+218', key: 'LY' },
+    { code: '+370', key: 'LT' },
+    { code: '+352', key: 'LU' },
+    { code: '+389', key: 'MK' },
+    { code: '+60', key: 'MY' },
+    { code: '+52', key: 'MX' },
+    { code: '+373', key: 'MD' },
+    { code: '+377', key: 'MC' },
+    { code: '+976', key: 'MN' },
+    { code: '+212', key: 'MA' },
+    { code: '+258', key: 'MZ' },
+    { code: '+977', key: 'NP' },
+    { code: '+31', key: 'NL' },
+    { code: '+64', key: 'NZ' },
+    { code: '+505', key: 'NI' },
+    { code: '+234', key: 'NG' },
+    { code: '+47', key: 'NO' },
+    { code: '+92', key: 'PK' },
+    { code: '+507', key: 'PA' },
+    { code: '+595', key: 'PY' },
+    { code: '+51', key: 'PE' },
+    { code: '+63', key: 'PH' },
+    { code: '+48', key: 'PL' },
+    { code: '+351', key: 'PT' },
+    { code: '+974', key: 'QA' },
+    { code: '+40', key: 'RO' },
+    { code: '+7', key: 'RU' },
+    { code: '+966', key: 'SA' },
+    { code: '+221', key: 'SN' },
+    { code: '+381', key: 'RS' },
+    { code: '+65', key: 'SG' },
+    { code: '+421', key: 'SK' },
+    { code: '+386', key: 'SI' },
+    { code: '+27', key: 'ZA' },
+    { code: '+82', key: 'KR' },
+    { code: '+94', key: 'LK' },
+    { code: '+46', key: 'SE' },
+    { code: '+41', key: 'CH' },
+    { code: '+886', key: 'TW' },
+    { code: '+66', key: 'TH' },
+    { code: '+90', key: 'TR' },
+    { code: '+256', key: 'UG' },
+    { code: '+380', key: 'UA' },
+    { code: '+971', key: 'AE' },
+    { code: '+44', key: 'GB' },
+    { code: '+1', key: 'US' },
+    { code: '+598', key: 'UY' },
+    { code: '+998', key: 'UZ' },
+    { code: '+58', key: 'VE' },
+    { code: '+84', key: 'VN' },
+    { code: '+967', key: 'YE' },
+    { code: '+260', key: 'ZM' },
+    { code: '+263', key: 'ZW' }
+  ];
+
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+  ngOnInit() {}
+
+  createEditUserForm() {
+    const profile = this.userData?.human?.profile ?? {};
+    const email = this.userData?.human?.email?.email || '';
+    const phone = this.userData?.human?.phone?.phone || '';
+    const defaultCode = '+1';
+    let countryCode = defaultCode;
+    let phoneNumber = phone;
+    const gender = profile?.gender && profile.gender !== '' ? profile.gender : 'GENDER_MALE';
+    const preferredLanguage = profile.preferredLanguage || 'es';
+
+    for (const c of this.countryCodes) {
+      if (phone.startsWith(c.code)) {
+        countryCode = c.code;
+        phoneNumber = phone.replace(c.code, '');
+        break;
+      }
+    }
+
+    this.editUserForm = this.formBuilder.group({
+      username: [
+        this.userData.userName,
+        Validators.required
+      ],
+      email: [
+        email,
+        [
+          Validators.required,
+          Validators.email
+        ]
+      ],
+      firstname: [
+        profile.firstName || '',
+        [
+          Validators.required,
+          Validators.pattern('(^[A-z]).*')]
+      ],
+      lastname: [
+        profile.lastName || '',
+        [
+          Validators.required,
+          Validators.pattern('(^[A-z]).*')]
+      ],
+      countryCode: [
+        countryCode,
+        Validators.required
+      ],
+      phoneNumber: [
+        phoneNumber,
+        Validators.required
+      ],
+      gender: [
+        gender,
+        Validators.required
+      ],
+      preferredLanguage: [
+        preferredLanguage,
+        Validators.required
+      ],
+      officeId: [
+        this.userData.officeId,
+        Validators.required
+      ],
+      staffId: [
+        this.userData.staffId || null
+      ],
+      roles: [
+        this.userData.selectedRoles.map((role: any) => role.id.toString()),
+        Validators.required
+      ]
+    });
+  }
+
+  /**
+   * Fetches the staff for the selected office
+   * @param officeId the selected office id
+   */
+  officeChanged(officeId: number | undefined) {
+    if (!officeId) {
+      console.warn('No officeId provided to load staff.');
+      return;
+    }
+
+    this.staffData = [];
+    this.UsersService.getStaff(officeId).subscribe((staff: any) => {
+      this.staffData = staff;
+    });
+  }
+
+  /**
+   * Submits the user form and edits the user,
+   * if successful redirects to the updated user.
+   */
+  submit() {
+    const form = this.editUserForm.value;
+    const fullPhone = `${form.countryCode}${form.phoneNumber}`;
+
+    const userPayload: any = {
+      userId: this.userData.id,
+      email: {
+        email: form.email,
+        isVerified: true
+      },
+      phone: {
+        phone: fullPhone,
+        isVerified: true
+      },
+      profile: {
+        username: form.username,
+        givenName: form.firstname,
+        familyName: form.lastname,
+        displayName: `${form.firstname} ${form.lastname}`,
+        nickName: form.firstname,
+        preferredLanguage: form.preferredLanguage,
+        gender: form.gender
+      }
+    };
+
+    const rolesPayload = {
+      userId: this.userData.id,
+      roleKeys: this.editUserForm.value.roles
+    };
+
+    const officePayload = {
+      userId: this.userData.id,
+      officeId: form.officeId,
+      staffId: form.staffId
+    };
+
+    this.UsersServiceZitadel.editUser(userPayload).subscribe();
+
+    this.UsersServiceZitadel.editRoles(rolesPayload).subscribe();
+
+    this.UsersServiceZitadel.editOffice(officePayload).subscribe((response: any) => {
+      this.router.navigate(['/appusers']);
+    });
+  }
+}
@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { UsersServiceZitadel } from './usersZitadel.service';
+
+/**
+ * UsersZitadel data resolver.
+ */
+@Injectable()
+export class UserZitadelResolver {
+  /**
+   * @param {UsersServiceZitadel} usersServiceZitadel Users service.
+   */
+  constructor(private usersServiceZitadel: UsersServiceZitadel) {}
+
+  /**
+   * Returns the user data.
+   * @returns {Observable<any>}
+   */
+
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const userId = route.paramMap.get('id');
+    return this.usersServiceZitadel.getUser(userId);
+  }
+}
@@ -0,0 +1,47 @@
+<div class="container m-b-20 layout-row align-end gap-20px">
+  <div #buttonCreateUser class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['create']">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Create User' | translate }}
+    </button>
+  </div>
+</div>
+
+<div class="container container-margin">
+  <div #filter class="layout-row gap-20px">
+    <mat-form-field class="flex-fill">
+      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)" />
+    </mat-form-field>
+  </div>
+</div>
+
+<div class="container mat-elevation-z8 container-margin">
+  <h3>Usuarios</h3>
+  <table mat-table [dataSource]="dataSource" matSort #sortUsers="matSort">
+    <ng-container matColumnDef="firstname">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.First Name' | translate }}</th>
+      <td mat-cell *matCellDef="let user">{{ user.firstname }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="lastname">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Last Name' | translate }}</th>
+      <td mat-cell *matCellDef="let user">{{ user.lastname }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="email">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Email' | translate }}</th>
+      <td mat-cell *matCellDef="let user">{{ user.email }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="officeName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
+      <td mat-cell *matCellDef="let user">{{ user.officeName }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+  </table>
+
+  <mat-paginator #paginatorUsers [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+</div>
@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+
+  .select-row:hover {
+    cursor: pointer;
+  }
+}
+
+.container-margin {
+  margin-top: 1rem;
+}
@@ -0,0 +1,126 @@
+import { MatPaginatorModule } from '@angular/material/paginator';
+/** Angular Imports */
+import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+
+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+/**
+ * Users component.
+ */
+@Component({
+  selector: 'mifosx-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FontAwesomeModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule
+  ]
+})
+export class UsersComponent implements OnInit, AfterViewInit {
+  /** User data */
+  usersData: any[] = [];
+  usersZitadelData: any[] = [];
+
+  /** Columns */
+  displayedColumns: string[] = [
+    'firstname',
+    'lastname',
+    'email',
+    'officeName'
+  ];
+
+  /** DataSources */
+  dataSource = new MatTableDataSource<any>();
+  dataSourceZitadel = new MatTableDataSource<any>();
+
+  /** References for pagination and sorting */
+  @ViewChild('paginatorUsers', { static: true }) paginatorUsers!: MatPaginator;
+  @ViewChild('sortUsers', { static: true }) sortUsers!: MatSort;
+
+  @ViewChild('paginatorZitadel', { static: true }) paginatorZitadel!: MatPaginator;
+  @ViewChild('sortZitadel', { static: true }) sortZitadel!: MatSort;
+
+  /* Buttons and popovers */
+  @ViewChild('buttonCreateUser') buttonCreateUser!: ElementRef<any>;
+  @ViewChild('templateButtonCreateUser') templateButtonCreateUser!: TemplateRef<any>;
+  @ViewChild('usersTable') usersTable!: ElementRef<any>;
+  @ViewChild('templateUsersTable') templateUsersTable!: TemplateRef<any>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public configurationWizardService: ConfigurationWizardService,
+    private popoverService: PopoverService
+  ) {}
+
+  ngOnInit() {
+    // Get data from resolver
+    this.route.data.subscribe((data: { users: any; usersZitadel: any }) => {
+      this.usersData = data.users || [];
+      this.usersZitadelData = data.usersZitadel || [];
+
+      // Initialize tables
+      this.dataSource = new MatTableDataSource(this.usersData);
+      this.dataSourceZitadel = new MatTableDataSource(this.usersZitadelData);
+
+      // Assign paginator and sort AFTER having data
+      this.dataSource.paginator = this.paginatorUsers;
+      this.dataSource.sort = this.sortUsers;
+
+      this.dataSourceZitadel.paginator = this.paginatorZitadel;
+      this.dataSourceZitadel.sort = this.sortZitadel;
+    });
+  }
+
+  /** Filter tables */
+  applyFilter(filterValue: string) {
+    const filter = filterValue.trim().toLowerCase();
+    this.dataSource.filter = filter;
+    this.dataSourceZitadel.filter = filter;
+  }
+
+  /** Show popover */
+  showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean) {
+    setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
+  }
+
+  ngAfterViewInit() {
+    if (this.configurationWizardService.showUsers) {
+      setTimeout(() => {
+        this.showPopover(this.templateButtonCreateUser, this.buttonCreateUser.nativeElement, 'bottom', true);
+      });
+    }
+
+    if (this.configurationWizardService.showUsersList) {
+      setTimeout(() => {
+        this.showPopover(this.templateUsersTable, this.usersTable.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /** Navigate */
+  nextStep() {
+    this.configurationWizardService.showUsers = false;
+    this.configurationWizardService.showUsersList = false;
+    this.configurationWizardService.showUsersForm = true;
+    this.router.navigate(['/appusers/create']);
+  }
+
+  previousStep() {
+    this.configurationWizardService.showUsers = false;
+    this.configurationWizardService.showUsersList = false;
+    this.configurationWizardService.showRolesandPermissionList = true;
+    this.router.navigate(['/system/roles-and-permissions']);
+  }
+}
@@ -0,0 +1,26 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { UsersServiceZitadel } from './usersZitadel.service';
+/**
+ * Users template data resolver.
+ */
+@Injectable()
+export class UsersZitadelTemplateResolver {
+  /**
+   * @param { UsersServiceZitadel } usersServiceZitadel Users service.
+   */
+  constructor(private usersServiceZitadel: UsersServiceZitadel) {}
+
+  /**
+   * Returns the users template data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.usersServiceZitadel.getUsersTemplate();
+  }
+}
@@ -0,0 +1,29 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { UsersServiceZitadel } from './usersZitadel.service';
+
+/**
+ * UsersZitadel data resolver.
+ */
+
+@Injectable()
+export class UsersZitadelResolver {
+  /**
+   * @param {UsersServiceZitadel} usersServiceZitadel Users service.
+   */
+  constructor(private usersServiceZitadel: UsersServiceZitadel) {}
+
+  /**
+   * Returns the users data.
+   * @returns {Observable<any>}
+   */
+
+  resolve(): Observable<any> {
+    return this.usersServiceZitadel.getUsers();
+  }
+}
@@ -0,0 +1,129 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { from, Observable, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { AuthService } from '../auth.service';
+import { environment } from 'environments/environment';
+
+/**
+ * UsersZitadel service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class UsersServiceZitadel {
+  private api = environment.OIDC.oidcApiUrl;
+
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(
+    private http: HttpClient,
+    private autservice: AuthService
+  ) {}
+
+  /**
+   * @param {any} user User to be created.
+   * @returns {Observable<any>}
+   */
+  createUser(user: any): Observable<any> {
+    return this.http.post(this.api + 'authentication/user', user);
+  }
+
+  getDatosExtraUsuario(userId: string): Observable<any> {
+    return this.http.get(`${this.api}authentication/user/db/${userId}`);
+  }
+
+  assignRolesToUser(userId: string, roleKeys: string[]): Observable<any> {
+    const payload = {
+      userId: userId,
+      roleKeys: roleKeys.map(String)
+    };
+    return this.http.post(this.api + 'authentication/user/role', payload);
+  }
+
+  createUserBd(user: any): Observable<any> {
+    return this.http.post(this.api + 'authentication/user/db', user);
+  }
+
+  /**
+   * @returns {Observable<any>} Users template data
+   */
+  getUsersTemplate(): Observable<any> {
+    return this.http.get('/users/template');
+  }
+
+  /**
+   * @returns {Observable<any>} Users data
+   */
+  getUsers(): Observable<any[]> {
+    const token = this.autservice.getAccessToken();
+    return from(
+      fetch(`${this.api}authentication/user`, {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`
+        }
+      })
+    ).pipe(
+      switchMap((res) => res.json()),
+      map((response) => {
+        const out: any[] = [];
+        const users = response.object?.result;
+        if (Array.isArray(users)) {
+          users.forEach((user) => {
+            if (user.human) {
+              out.push({
+                id: user.id,
+                firstname: user.human.profile.firstName,
+                lastname: user.human.profile.lastName,
+                email: user.human.email.email,
+                officeName: 'Head Office'
+              });
+            }
+          });
+        }
+        return out;
+      })
+    );
+  }
+
+  /**
+   * @param {string} userId user ID of user.
+   * @returns {Observable<any>} User.
+   */
+  getUser(userId: string): Observable<any> {
+    const url = `${this.api}authentication/user/${userId}`;
+    return from(
+      fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${this.autservice.getAccessToken()}`
+        }
+      })
+    ).pipe(
+      switchMap((res) => res.json()),
+      map((response) => response)
+    );
+  }
+
+  editUser(user: any): Observable<any> {
+    return this.http.put(this.api + 'authentication/user', user);
+  }
+
+  editRoles(roles: any): Observable<any> {
+    return this.http.put(this.api + 'authentication/user/role', roles);
+  }
+
+  editOffice(office: any): Observable<any> {
+    return this.http.put(this.api + 'authentication/user/office', office);
+  }
+
+  getRoles() {
+    return this.http.get(this.api + 'authentication/role');
+  }
+}
@@ -0,0 +1,96 @@
+<div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Edit' | translate }}
+  </button>
+  <button mat-raised-button color="warn" (click)="delete()">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Delete' | translate }}
+  </button>
+  <div
+    *ngIf="userData.isSelfServiceUser === 'USER_STATE_ACTIVE' || userData.isSelfServiceUser === 'USER_STATE_INACTIVE'"
+  >
+    <button mat-raised-button color="primary" (click)="changeUserPassword(userData.id)">
+      <fa-icon icon="cog" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Change Password' | translate }}
+    </button>
+  </div>
+  <div [ngSwitch]="userData.isSelfServiceUser">
+    <button *ngSwitchCase="'USER_STATE_ACTIVE'" mat-raised-button color="warn" (click)="desactiveUser(userData.id)">
+      <fa-icon icon="ban" class="m-r-10"></fa-icon>
+      Desactivar
+    </button>
+    <button *ngSwitchCase="'USER_STATE_INACTIVE'" mat-raised-button color="primary" (click)="activeUser(userData.id)">
+      <fa-icon icon="check" class="m-r-10"></fa-icon>
+      Activar
+    </button>
+    <button *ngSwitchDefault mat-raised-button color="primary" disabled>
+      <fa-icon icon="ban" class="m-r-10"></fa-icon>
+      Initial
+    </button>
+  </div>
+</div>
+
+<div class="container">
+  <mat-card>
+    <mat-card-content>
+      <div class="layout-row-wrap">
+        <div class="flex-50 mat-body-strong">
+          {{ 'labels.inputs.Login Name' | translate }}
+        </div>
+
+        <div class="flex-50">
+          {{ userData.username }}
+        </div>
+
+        <div class="flex-50 mat-body-strong">
+          {{ 'labels.inputs.First Name' | translate }}
+        </div>
+
+        <div class="flex-50">
+          {{ userData.firstname }}
+        </div>
+
+        <div class="flex-50 mat-body-strong">
+          {{ 'labels.inputs.Last Name' | translate }}
+        </div>
+
+        <div class="flex-50">
+          {{ userData.lastname }}
+        </div>
+
+        <div class="flex-50 mat-body-strong" *ngIf="userData.email">
+          {{ 'labels.inputs.Email' | translate }}
+        </div>
+
+        <div class="flex-50" *ngIf="userData.email">
+          {{ userData.email }}
+        </div>
+
+        <div class="flex-50 mat-body-strong">
+          {{ 'labels.inputs.Office' | translate }}
+        </div>
+
+        <div class="flex-50">
+          {{ userData.officeName }}
+        </div>
+
+        <div class="flex-50 mat-body-strong">
+          {{ 'labels.inputs.Roles' | translate }}
+        </div>
+
+        <div class="flex-50">
+          <span *ngFor="let role of userData.selectedRoles">
+            {{ role.name }}
+          </span>
+        </div>
+      </div>
+
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
@@ -0,0 +1,14 @@
+.container {
+  max-width: 37rem;
+
+  .content {
+    div {
+      margin: 1rem 0;
+      word-wrap: break-word;
+
+      span {
+        display: block;
+      }
+    }
+  }
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewUserComponent as ViewUserZitadelComponent } from './view-user.component';
+
+describe('ViewUserComponent', () => {
+  let component: ViewUserZitadelComponent;
+  let fixture: ComponentFixture<ViewUserZitadelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ViewUserZitadelComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewUserZitadelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,113 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+//import { UsersService } from '../users.service';
+import { UsersServiceZitadel } from '../usersZitadel.service';
+
+/** aUTH zITADEL */
+import { AuthService } from 'app/zitadel/auth.service';
+
+/** Custom Components */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { ChangePasswordDialogComponent } from 'app/zitadel/shared/change-password-dialog/change-password-dialog.component';
+import { strings } from '@angular-devkit/schematics';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+/**
+ * View user component.
+ */
+@Component({
+  selector: 'mifosx-view-user',
+  templateUrl: './view-user.component.html',
+  styleUrls: ['./view-user.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FontAwesomeModule
+  ]
+})
+export class ViewUserComponent {
+  /** User Data. */
+  userData: any;
+
+  /**
+   * Retrieves the user data from `resolve`.
+   * @param {UsersServiceZitadel} usersServiceZitadel Users Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(
+    private usersService: UsersServiceZitadel,
+    private route: ActivatedRoute,
+    private router: Router,
+    private dialog: MatDialog,
+    private authService: AuthService
+  ) {
+    this.route.data.subscribe((data: { user: any }) => {
+      const u = data.user.object?.result?.[0];
+
+      const user = {
+        id: u.id,
+        username: u.userName,
+        firstname: u.human?.profile?.firstName,
+        lastname: u.human?.profile?.lastName,
+        officeName: 'Head Office',
+        officeId: u.user_uuid ?? null,
+        availableRoles: u.availableRoles ?? 'Admin',
+        selectedRoles: u.selectedRoles ?? 'Admin',
+        isSelfServiceUser: u.state
+      };
+
+      this.userData = user;
+    });
+  }
+
+  /**
+   * Deletes the user and redirects to users.
+   */
+  delete() {
+    const deleteUserDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `user ${this.userData.id}` }
+    });
+
+    deleteUserDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.authService.deletUser(this.userData.id);
+      }
+    });
+  }
+
+  /**
+   * Change Password of the Users.
+   */
+  changeUserPassword(userId: string) {
+    const changeUserPasswordDialogRef = this.dialog.open(ChangePasswordDialogComponent, {
+      width: '440px',
+      data: { id: userId }
+    });
+    changeUserPasswordDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.password && response.repeatPassword) {
+        const password = response.password;
+        const repeatPassword = response.repeatPassword;
+        const firstname = this.userData.firstname;
+        const data = { password: password, repeatPassword: repeatPassword, firstname: firstname };
+      }
+    });
+  }
+
+  /**
+   * disable User
+   */
+
+  desactiveUser(userId: string) {
+    this.authService.desactiveUser(userId);
+  }
+
+  activeUser(userId: string) {
+    this.authService.activeUser(userId);
+  }
+}