RED-4718: use initials avatar & user button from common-ui

.eslintrc.json

@@ -14,6 +14,7 @@
               "@services/**",
               "@components/**",
               "@guards/**",
+              "@users/**",
               "@i18n/**",
               "@utils/**",
               "@models/**",

apps/red-ui/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
-import { AuthGuard, CompositeRouteGuard, CustomRouteReuseStrategy } from '@iqser/common-ui';
+import { CompositeRouteGuard, CustomRouteReuseStrategy, IqserAuthGuard } from '@iqser/common-ui';
-import { RedRoleGuard } from './modules/auth/red-role.guard';
+import { RedRoleGuard } from '@users/red-role.guard';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
 import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
@@ -44,7 +44,7 @@ const routes: Routes = [
                 loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
                 canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard],
                     requiredRoles: ['RED_USER'],
                 },
             },
@@ -53,7 +53,7 @@ const routes: Routes = [
                 component: DownloadsListScreenComponent,
                 canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
                 },
             },
             {
@@ -61,7 +61,7 @@ const routes: Routes = [
                 loadChildren: () => import('./modules/search/search.module').then(m => m.SearchModule),
                 canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
                     requiredRoles: ['RED_USER'],
                 },
             },
@@ -70,7 +70,7 @@ const routes: Routes = [
                 loadChildren: () => import('./modules/trash/trash.module').then(m => m.TrashModule),
                 canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard, DossiersGuard, TrashGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard, DossiersGuard, TrashGuard],
                     requiredRoles: ['RED_USER'],
                     dossiersService: ACTIVE_DOSSIERS_SERVICE,
                 },
@@ -134,7 +134,7 @@ const routes: Routes = [
                 ],
                 canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard, DossierTemplateExistsGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard, DossierTemplateExistsGuard],
                     requiredRoles: ['RED_USER'],
                 },
             },
@@ -143,7 +143,7 @@ const routes: Routes = [
     {
         path: 'auth-error',
         component: AuthErrorComponent,
-        canActivate: [AuthGuard],
+        canActivate: [IqserAuthGuard],
     },
     {
         path: '**',

apps/red-ui/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component, Inject, Renderer2, ViewContainerRef } from '@angular/core';
 import { RouterHistoryService } from '@services/router-history.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { REDDocumentViewer } from './modules/pdf-viewer/services/document-viewer.service';
 import { DossiersChangesService } from '@services/dossiers/dossier-changes.service';
 import { DOCUMENT } from '@angular/common';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 
 @Component({
     selector: 'redaction-root',
@@ -20,10 +20,10 @@ export class AppComponent {
         private readonly _userPreferenceService: UserPreferenceService,
         readonly documentViewer: REDDocumentViewer,
         private readonly _dossierChangesService: DossiersChangesService,
-        @Inject(DOCUMENT) private document: Document,
+        @Inject(DOCUMENT) private readonly _document: Document,
-        private renderer: Renderer2,
+        private readonly _renderer: Renderer2,
     ) {
-        this.renderer.addClass(this.document.body, _userPreferenceService.getTheme());
+        this._renderer.addClass(this._document.body, _userPreferenceService.getTheme());
         // TODO: Find a better place to initialize dossiers refresh
         if (_userService.currentUser?.isUser) {
             _dossierChangesService.initializeRefresh();

apps/red-ui/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { BrowserModule, Title } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -7,11 +7,11 @@ import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
 import { MissingTranslationHandler, TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import {
-    AuthModule as IqserAuthModule,
     BASE_HREF,
     CachingModule,
     CommonUiModule,
     IqserHelpModeModule,
+    IqserUsersModule,
     LanguageService,
     MAX_RETRIES_ON_SERVER_ERROR,
     SERVER_ERROR_SKIP_PATHS,
@@ -42,8 +42,8 @@ import * as links from '../assets/help-mode/links.json';
 import { KeycloakService } from 'keycloak-angular';
 import { GeneralSettingsService } from '@services/general-settings.service';
 import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
 import { FeaturesService } from '@services/features.service';
@@ -56,7 +56,7 @@ import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
 import { LicenseService } from '@services/license.service';
 import { TenantIdInterceptor } from '@utils/tenant-id-interceptor';
 import { UI_CACHES } from '@utils/constants';
-import { RedRoleGuard } from './modules/auth/red-role.guard';
+import { RedRoleGuard } from '@users/red-role.guard';
 
 export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigService): PruningTranslationLoader {
     return new PruningTranslationLoader(httpClient, '/assets/i18n/', `.json?version=${configService.values.FRONTEND_APP_VERSION}`);
@@ -82,7 +82,7 @@ export const appModuleFactory = (config: AppConfig) => {
                 configService: ConfigService,
                 configServiceFactory: () => new ConfigService(config),
             }),
-            IqserAuthModule.forRoot({
+            IqserUsersModule.forRoot({
                 existingUserService: UserService,
                 existingRoleGuard: RedRoleGuard,
             }),
@@ -168,7 +168,6 @@ export const appModuleFactory = (config: AppConfig) => {
                 deps: [
                     BASE_HREF,
                     KeycloakService,
-                    Title,
                     ConfigService,
                     SystemPreferencesService,
                     FeaturesService,

apps/red-ui/src/app/components/auth-error/auth-error.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { ConfigService } from '@services/config.service';
 
 @Component({

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -28,7 +28,7 @@
             <redaction-notifications [iqserHelpMode]="'open_notifications'"></redaction-notifications>
         </div>
 
-        <redaction-user-button [matMenuTriggerFor]="userMenu" [userId]="currentUser.id" id="userMenu"></redaction-user-button>
+        <iqser-user-button [matMenuTriggerFor]="userMenu" id="userMenu"></iqser-user-button>
 
         <mat-menu #userMenu="matMenu" xPosition="before">
             <ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">

apps/red-ui/src/app/components/base-screen/base-screen.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { NavigationStart, Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';

apps/red-ui/src/app/components/notifications/notifications.component.html

@@ -23,7 +23,8 @@
                     class="notification"
                     mat-menu-item
                 >
-                    <redaction-initials-avatar [user]="notification.userId"></redaction-initials-avatar>
+                    <iqser-initials-avatar [user]="notification.userId"></iqser-initials-avatar>
+
                     <div class="notification-content">
                         <div [innerHTML]="notification.message"></div>
                         <div class="small-label mt-2">{{ notification.time }}</div>

apps/red-ui/src/app/modules/account/account-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard, CompositeRouteGuard } from '@iqser/common-ui';
+import { CompositeRouteGuard, IqserAuthGuard } from '@iqser/common-ui';
-import { RedRoleGuard } from '../auth/red-role.guard';
+import { RedRoleGuard } from '@users/red-role.guard';
 import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component';
 
 const routes: Routes = [
@@ -11,7 +11,7 @@ const routes: Routes = [
         component: BaseAccountScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
         loadChildren: () => import('./screens/user-profile/user-profile.module').then(m => m.UserProfileModule),
     },
@@ -20,7 +20,7 @@ const routes: Routes = [
         component: BaseAccountScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
             requiredRoles: ['RED_USER'],
         },
         loadChildren: () => import('./screens/notifications/notifications.module').then(m => m.NotificationsModule),

apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts

@@ -1,6 +1,6 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 
 interface NavItem {
     readonly label: string;

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts

@@ -6,10 +6,10 @@ import { BaseFormComponent, LanguageService, LoadingService } from '@iqser/commo
 import { IProfile } from '@red/domain';
 import { languagesTranslations } from '@translations/languages-translations';
 import { PermissionsService } from '@services/permissions.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { ConfigService } from '@services/config.service';
 import { firstValueFrom } from 'rxjs';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 
 @Component({
     selector: 'redaction-user-profile-screen',

apps/red-ui/src/app/modules/admin/admin-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
-import { AuthGuard, CompositeRouteGuard } from '@iqser/common-ui';
+import { CompositeRouteGuard, IqserAuthGuard } from '@iqser/common-ui';
-import { RedRoleGuard } from '../auth/red-role.guard';
+import { RedRoleGuard } from '@users/red-role.guard';
 import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
 import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
@@ -36,7 +36,7 @@ const dossierTemplateIdRoutes: Routes = [
                 component: EntitiesListingScreenComponent,
                 canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
                 },
             },
             {
@@ -45,7 +45,7 @@ const dossierTemplateIdRoutes: Routes = [
                 canActivate: [CompositeRouteGuard],
                 loadChildren: () => import('./screens/entities/entities.module').then(m => m.EntitiesModule),
                 data: {
-                    routeGuards: [AuthGuard, RedRoleGuard, EntityExistsGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard, EntityExistsGuard],
                 },
             },
         ],
@@ -55,7 +55,7 @@ const dossierTemplateIdRoutes: Routes = [
         component: BaseDossierTemplateScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
         loadChildren: () => import('./screens/rules/rules.module').then(m => m.RulesModule),
     },
@@ -64,7 +64,7 @@ const dossierTemplateIdRoutes: Routes = [
         component: FileAttributesListingScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
     },
     {
@@ -77,7 +77,7 @@ const dossierTemplateIdRoutes: Routes = [
         component: BaseDossierTemplateScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
         loadChildren: () => import('./screens/reports/reports.module').then(m => m.ReportsModule),
     },
@@ -86,7 +86,7 @@ const dossierTemplateIdRoutes: Routes = [
         component: DossierAttributesListingScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
     },
     {
@@ -94,7 +94,7 @@ const dossierTemplateIdRoutes: Routes = [
         component: DossierStatesListingScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
     },
     {
@@ -102,7 +102,7 @@ const dossierTemplateIdRoutes: Routes = [
         component: DefaultColorsScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
     },
     {
@@ -120,7 +120,7 @@ const dossierTemplatesRoutes: Routes = [
         component: BaseAdminScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
         loadChildren: () =>
             import('./screens/dossier-templates-listing/dossier-templates-listing.module').then(m => m.DossierTemplatesListingModule),
@@ -140,7 +140,7 @@ const routes: Routes = [
         children: dossierTemplatesRoutes,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, DossierTemplatesGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard, DossierTemplatesGuard],
             requiredRoles: ['RED_MANAGER', 'RED_ADMIN'],
         },
     },
@@ -155,7 +155,7 @@ const routes: Routes = [
         ],
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
             requiredRoles: ['RED_USER_ADMIN'],
         },
     },
@@ -164,7 +164,7 @@ const routes: Routes = [
         component: BaseAdminScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, PermissionsGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard, PermissionsGuard],
             requiredRoles: ['RED_ADMIN'],
             permissionsObject: 'Dossier',
         },
@@ -175,7 +175,7 @@ const routes: Routes = [
         component: BaseAdminScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
             requiredRoles: ['RED_ADMIN'],
         },
         loadChildren: () => import('./screens/license/license.module').then(m => m.LicenseModule),
@@ -191,7 +191,7 @@ const routes: Routes = [
         ],
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
             requiredRoles: ['RED_ADMIN'],
         },
     },
@@ -206,7 +206,7 @@ const routes: Routes = [
         ],
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
             requiredRoles: ['RED_ADMIN'],
         },
     },
@@ -222,7 +222,7 @@ const routes: Routes = [
         canActivate: [CompositeRouteGuard],
         canDeactivate: [PendingChangesGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
             requiredRoles: ['RED_ADMIN'],
         },
     },

apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts

@@ -1,8 +1,8 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { adminSideNavTranslations } from '@translations/admin-side-nav-translations';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { ActivatedRoute } from '@angular/router';
 import { AdminSideNavType, AdminSideNavTypes, ENTITY_TYPE } from '@red/domain';
 

apps/red-ui/src/app/modules/admin/admin.module.ts

@@ -45,6 +45,7 @@ import { SystemPreferencesFormComponent } from './screens/general-config/system-
 import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
 import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
 import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component';
+import { IqserUsersModule } from '@iqser/common-ui';
 
 const dialogs = [
     AddEditCloneDossierTemplateDialogComponent,
@@ -97,6 +98,6 @@ const components = [
 @NgModule({
     declarations: [...components],
     providers: [AdminDialogService, AuditService, DigitalSignatureService, RulesService, SmtpConfigService],
-    imports: [CommonModule, SharedModule, AdminRoutingModule, SharedAdminModule, A11yModule],
+    imports: [CommonModule, SharedModule, AdminRoutingModule, SharedAdminModule, A11yModule, IqserUsersModule],
 })
 export class AdminModule {}

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { LoadingService, Toaster } from '@iqser/common-ui';
 import { User } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts

@@ -5,7 +5,7 @@ import { BaseFormComponent, IconButtonTypes, IProfileUpdateRequest, LoadingServi
 import { rolesTranslations } from '@translations/roles-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { User } from '@red/domain';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { HttpStatusCode } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 

apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { ISmtpConfiguration } from '@red/domain';
 import { BaseDialogComponent } from '@iqser/common-ui';
 

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html

@@ -38,19 +38,18 @@
                 <mat-form-field class="no-label">
                     <mat-select (selectionChange)="filterChange()" formControlName="userId">
                         <mat-select-trigger>
-                            <redaction-initials-avatar
+                            <iqser-initials-avatar
                                 *ngIf="form.get('userId').value !== ALL_USERS"
                                 [user]="form.get('userId').value"
                                 [withName]="true"
-                            ></redaction-initials-avatar>
+                            ></iqser-initials-avatar>
+
                             <div *ngIf="form.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
                         </mat-select-trigger>
+
                         <mat-option *ngFor="let userId of userIds" [value]="userId">
-                            <redaction-initials-avatar
+                            <iqser-initials-avatar *ngIf="userId !== ALL_USERS" [user]="userId" [withName]="true"></iqser-initials-avatar>
-                                *ngIf="userId !== ALL_USERS"
+
-                                [user]="userId"
-                                [withName]="true"
-                            ></redaction-initials-avatar>
                             <div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
                         </mat-option>
                     </mat-select>
@@ -91,7 +90,7 @@
         </div>
 
         <div class="user-column cell">
-            <redaction-initials-avatar [user]="log.userId" [withName]="true"></redaction-initials-avatar>
+            <iqser-initials-avatar [user]="log.userId" [withName]="true"></iqser-initials-avatar>
         </div>
 
         <div class="cell">{{ (translations[log.category] | translate) || log.category | humanize }}</div>

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts

@@ -4,7 +4,7 @@ import { applyIntervalConstraints } from '@utils/date-inputs-utils';
 import { ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
 import { auditCategoriesTranslations } from '@translations/audit-categories-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { Audit, IAudit, IAuditResponse, IAuditSearchRequest } from '@red/domain';
 import { AuditService } from '../../services/audit.service';
 import { firstValueFrom } from 'rxjs';

apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts

@@ -4,7 +4,7 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
 import { CircleButtonTypes, getParam, IListable, ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui';
 import { defaultColorsTranslations } from '@translations/default-colors-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { combineLatest } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';

apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { RouterHistoryService } from '@services/router-history.service';
 import { DigitalSignatureService } from '../../services/digital-signature.service';
 import { firstValueFrom } from 'rxjs';

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts

@@ -12,7 +12,7 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
 import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { DOSSIER_TEMPLATE_ID, DossierAttributeConfig, IDossierAttributeConfig } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { DossierTemplate } from '@red/domain';
 import {
@@ -10,7 +10,7 @@ import {
     LoadingService,
     TableColumnConfig,
 } from '@iqser/common-ui';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { RouterHistoryService } from '@services/router-history.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts

@@ -5,11 +5,12 @@ import { SharedModule } from '@shared/shared.module';
 import { TableItemComponent } from './table-item/table-item.component';
 import { DossierTemplatesListingScreenComponent } from './dossier-templates-listing-screen/dossier-templates-listing-screen.component';
 import { SharedAdminModule } from '../../shared/shared-admin.module';
+import { IqserUsersModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }];
 
 @NgModule({
     declarations: [TableItemComponent, DossierTemplatesListingScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedAdminModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedAdminModule, IqserUsersModule],
 })
 export class DossierTemplatesListingModule {}

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.html

@@ -11,11 +11,11 @@
 </div>
 
 <div class="cell user-column">
-    <redaction-initials-avatar
+    <iqser-initials-avatar
         [defaultValue]="'unknown' | translate"
         [user]="dossierTemplate.createdBy || 'system'"
         [withName]="true"
-    ></redaction-initials-avatar>
+    ></iqser-initials-avatar>
 </div>
 
 <div class="cell">

apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { List, LoadingService } from '@iqser/common-ui';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { DICTIONARY_TO_ENTRY_TYPE_MAP, DICTIONARY_TYPE_KEY_MAP, DictionaryType, DOSSIER_TEMPLATE_ID, ENTITY_TYPE, User } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';

apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@an
 import { Dictionary, DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
 import { ActivatedRoute } from '@angular/router';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { PermissionsService } from '@services/permissions.service';
 import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component';
 import { IqserEventTarget } from '@iqser/common-ui';

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts

@@ -11,7 +11,7 @@ import {
     Toaster,
 } from '@iqser/common-ui';
 import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DOSSIER_TEMPLATE_ID, FileAttributeConfig, IFileAttributeConfig, IFileAttributesConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, inject, ViewChild } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { GeneralConfigFormComponent } from './general-config-form/general-config-form.component';
 import { SmtpFormComponent } from './smtp-form/smtp-form.component';
 import { BaseFormComponent } from '@iqser/common-ui';

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts

@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { DossierTemplateInfoScreenComponent } from './info-screen/dossier-template-info-screen.component';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
+import { IqserUsersModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
 
 @NgModule({
     declarations: [DossierTemplateInfoScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, IqserUsersModule],
 })
 export class DossierTemplateInfoModule {}

apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.html

@@ -4,11 +4,7 @@
 
         <div class="all-caps-label mt-24 mb-8" translate="dossier-template-info-screen.created-by"></div>
 
-        <redaction-initials-avatar
+        <iqser-initials-avatar [user]="dossierTemplate.createdBy || 'system'" [withName]="true" size="large"></iqser-initials-avatar>
-            [user]="dossierTemplate.createdBy || 'system'"
-            [withName]="true"
-            size="large"
-        ></redaction-initials-avatar>
 
         <div class="small-label stats-subtitle">
             <div>

apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts

@@ -12,8 +12,8 @@ import {
 import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { JustificationsDialogService } from '../justifications-dialog.service';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
 
 @Component({

apps/red-ui/src/app/modules/admin/screens/justifications/table-item/table-item.component.ts

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core
 import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
 import { CircleButtonTypes, getParam } from '@iqser/common-ui';
 import { JustificationsDialogService } from '../justifications-dialog.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 
 @Component({
     selector: 'redaction-table-item',

apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts

@@ -3,10 +3,10 @@ import { ConfigService } from '@services/config.service';
 import { TranslateService } from '@ngx-translate/core';
 import { ButtonConfig, IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { RouterHistoryService } from '@services/router-history.service';
-import { LicenseService } from '../../../../../services/license.service';
+import { LicenseService } from '@services/license.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { map } from 'rxjs/operators';
 
 @Component({

apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts

@@ -11,7 +11,7 @@ import { firstValueFrom } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { tap } from 'rxjs/operators';
 import { permissionsTranslations } from '@translations/permissions-translations';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { RouterHistoryService } from '@services/router-history.service';
 
 @UntilDestroy()

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html

@@ -42,7 +42,7 @@
 <ng-template #tableItemTemplate let-entity="entity">
     <div *ngIf="cast(entity) as user">
         <div class="cell">
-            <redaction-initials-avatar [showYou]="true" [user]="user" [withName]="true"></redaction-initials-avatar>
+            <iqser-initials-avatar [showYou]="true" [user]="user" [withName]="true"></iqser-initials-avatar>
         </div>
 
         <div class="cell">

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DonutChartConfig, User, UserTypes } from '@red/domain';

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts

@@ -11,7 +11,7 @@ import { WatermarkService } from '@services/entity-services/watermark.service';
 import { firstValueFrom, Observable, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { LicenseService } from '@services/license.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { Router } from '@angular/router';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
 

apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts

@@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
 import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component';
-import { AuthGuard, CompositeRouteGuard } from '@iqser/common-ui';
+import { CompositeRouteGuard, IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui';
-import { RedRoleGuard } from '../../../auth/red-role.guard';
+import { RedRoleGuard } from '@users/red-role.guard';
 import { WATERMARK_ID } from '@red/domain';
 import { WatermarkExistsGuard } from '@guards/watermark-exists.guard';
 
@@ -15,7 +15,7 @@ const routes = [
         component: WatermarksListingScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
     },
     {
@@ -23,7 +23,7 @@ const routes = [
         component: WatermarkScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
     },
     {
@@ -31,13 +31,13 @@ const routes = [
         component: WatermarkScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, WatermarkExistsGuard],
+            routeGuards: [IqserAuthGuard, RedRoleGuard, WatermarkExistsGuard],
         },
     },
 ];
 
 @NgModule({
     declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, IqserUsersModule],
 })
 export class WatermarkModule {}

apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.html

@@ -32,10 +32,7 @@
         </div>
 
         <div class="cell user-column">
-            <redaction-initials-avatar
+            <iqser-initials-avatar [defaultValue]="'unknown' | translate" [user]="entity.createdBy || 'system'"></iqser-initials-avatar>
-                [defaultValue]="'unknown' | translate"
-                [user]="entity.createdBy || 'system'"
-            ></redaction-initials-avatar>
         </div>
 
         <div class="cell">

apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts

@@ -11,7 +11,7 @@ import {
     Toaster,
 } from '@iqser/common-ui';
 import { DOSSIER_TEMPLATE_ID, Watermark } from '@red/domain';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { firstValueFrom } from 'rxjs';
 import { WatermarkService } from '@services/entity-services/watermark.service';

apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts

@@ -25,7 +25,7 @@ import { ConfirmDeleteDossierStateDialogComponent } from '../dialogs/confirm-del
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { firstValueFrom, forkJoin } from 'rxjs';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { IDossierAttributeConfig, IFileAttributeConfig, IReportTemplate } from '@red/domain';
 import { ReportTemplateService } from '@services/report-template.service';
 import { ConfigureCertificateDialogComponent } from '../dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';

apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { CircleButtonTypes, LoadingService } from '@iqser/common-ui';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { firstValueFrom } from 'rxjs';
 import { DOSSIER_TEMPLATE_ID } from '@red/domain';

apps/red-ui/src/app/modules/archive/archive.module.ts

@@ -6,14 +6,14 @@ import { TableItemComponent } from './components/table-item/table-item.component
 import { SharedModule } from '@shared/shared.module';
 import { ConfigService } from './services/config.service';
 import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { IqserHelpModeModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
 
 const components = [TableItemComponent];
 const screens = [ArchivedDossiersScreenComponent];
 
 @NgModule({
     declarations: [...components, ...screens],
-    imports: [CommonModule, ArchiveRoutingModule, SharedModule, SharedDossiersModule, IqserHelpModeModule],
+    imports: [CommonModule, ArchiveRoutingModule, SharedModule, SharedDossiersModule, IqserHelpModeModule, IqserUsersModule],
     providers: [ConfigService],
 })
 export class ArchiveModule {}

apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.html

@@ -7,7 +7,7 @@
 </div>
 
 <div class="cell user-column">
-    <redaction-initials-avatar [user]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>
+    <iqser-initials-avatar [user]="dossier.ownerId" [withName]="true"></iqser-initials-avatar>
 </div>
 
 <div class="cell">

apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts

@@ -4,7 +4,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
 import { switchMap } from 'rxjs/operators';
 import { CircleButtonTypes, ScrollableParentView, ScrollableParentViews } from '@iqser/common-ui';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 
 @Component({

apps/red-ui/src/app/modules/archive/services/config.service.ts

@@ -3,7 +3,7 @@ import { IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqse
 import { Dossier, User } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { dossierMemberChecker, dossierTemplateChecker } from '@utils/index';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 

apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { DashboardStatsService } from '@services/dossier-templates/dashboard-stats.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 
 @Component({
     selector: 'redaction-dashboard-screen',

apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts

@@ -4,7 +4,7 @@ import { Action, ActionTypes, Dossier, File } from '@red/domain';
 import { CircleButtonType, CircleButtonTypes, ListingModes, Required } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { BulkActionsService } from '../../services/bulk-actions.service';
 import { ConfigService } from '../../config.service';
 

apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html

@@ -15,7 +15,7 @@
         <div class="all-caps-label" translate="dossier-details.owner"></div>
         <div class="mt-12 d-flex">
             <ng-container *ngIf="!editingOwner; else editOwner">
-                <redaction-initials-avatar [user]="dossier.ownerId" [withName]="true" color="gray" size="large"></redaction-initials-avatar>
+                <iqser-initials-avatar [user]="dossier.ownerId" [withName]="true" color="gray" size="large"></iqser-initials-avatar>
 
                 <iqser-circle-button
                     (action)="editingOwner = true"

apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts

@@ -11,7 +11,7 @@ import {
     User,
 } from '@red/domain';
 import { TranslateChartService } from '@services/translate-chart.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { FilterService, getParam, ProgressBarConfigModel, shareLast, Toaster } from '@iqser/common-ui';
 import { workflowFileStatusTranslations } from '@translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';

apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts

@@ -16,7 +16,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ReanalysisService } from '@services/reanalysis.service';
 import { map, take } from 'rxjs/operators';
 import { saveAsCSV } from '@utils/csv-utils';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { ConfigService } from '../../config.service';
 import { firstValueFrom } from 'rxjs';
 import { PrimaryFileAttributeService } from '@services/primary-file-attribute.service';

apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { annotationDefaultColorConfig, DefaultBasedColorType, File } from '@red/domain';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';
 import { Observable } from 'rxjs';

apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html

@@ -25,7 +25,7 @@
     </div>
 
     <div class="user-column cell">
-        <redaction-initials-avatar [user]="file.assignee" [withName]="true"></redaction-initials-avatar>
+        <iqser-initials-avatar [user]="file.assignee" [withName]="true"></iqser-initials-avatar>
     </div>
 
     <div class="cell">

apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.html

@@ -9,7 +9,7 @@
         </div>
 
         <div class="user">
-            <redaction-initials-avatar [user]="file.assignee"></redaction-initials-avatar>
+            <iqser-initials-avatar [user]="file.assignee"></iqser-initials-avatar>
         </div>
     </div>
 

apps/red-ui/src/app/modules/dossier-overview/config.service.ts

@@ -27,7 +27,7 @@ import { workflowFileStatusTranslations } from '@translations/file-status-transl
 import { PermissionsService } from '@services/permissions.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { DossiersDialogService } from '../shared-dossiers/services/dossiers-dialog.service';
 import { annotationFilterChecker, RedactionFilterSorter } from '../../utils';
 import { workloadTranslations } from '@translations/workload-translations';
@@ -38,7 +38,7 @@ import dayjs from 'dayjs';
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';
 import { map } from 'rxjs/operators';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 
 @Injectable()
 export class ConfigService {

apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
-import { IqserHelpModeModule, IqserIconsModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserIconsModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossierOverviewScreenComponent } from './screen/dossier-overview-screen.component';
 import { DossierOverviewBulkActionsComponent } from './components/bulk-actions/dossier-overview-bulk-actions.component';
@@ -46,6 +46,7 @@ const routes: Routes = [
         IqserIconsModule,
         TranslateModule,
         IqserHelpModeModule,
+        IqserUsersModule,
     ],
 })
 export class DossierOverviewModule {}

apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts

@@ -31,7 +31,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { ConfigService } from '../config.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { FilesService } from '@services/files/files.service';
 import { BulkActionsService } from '../services/bulk-actions.service';

apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { CircleButtonTypes, List, ScrollableParentView, ScrollableParentViews, StatusBarConfig } from '@iqser/common-ui';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { Dossier, DossierStats, File } from '@red/domain';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { ReanalysisService } from '@services/reanalysis.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';

apps/red-ui/src/app/modules/dossiers-listing/components/table-item/table-item.component.html

@@ -12,7 +12,7 @@
     </div>
 
     <div class="cell user-column">
-        <redaction-initials-avatar [user]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>
+        <iqser-initials-avatar [user]="dossier.ownerId" [withName]="true"></iqser-initials-avatar>
     </div>
 
     <div class="cell status-container">

apps/red-ui/src/app/modules/dossiers-listing/config.service.ts

@@ -11,8 +11,8 @@ import {
 } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { workflowFileStatusTranslations } from '@translations/file-status-translations';
 import { dossierMemberChecker, dossierStateChecker, RedactionFilterSorter } from '../../utils';
 import { workloadTranslations } from '@translations/workload-translations';

apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IqserHelpModeModule, IqserIconsModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserIconsModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
 import { RouterModule, Routes } from '@angular/router';
@@ -40,6 +40,7 @@ const routes: Routes = [
         IqserIconsModule,
         TranslateModule,
         IqserHelpModeModule,
+        IqserUsersModule,
     ],
 })
 export class DossiersListingModule {}

apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.ts

@@ -7,7 +7,7 @@ import { ConfigService } from '../config.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { SharedDialogService } from '@shared/services/dialog.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 

apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts

@@ -13,7 +13,7 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { FilterService, HasScrollbarDirective, IqserEventTarget } from '@iqser/common-ui';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { ViewModeService } from '../../services/view-mode.service';
 import { BehaviorSubject } from 'rxjs';
 import { TextHighlightsGroup } from '@red/domain';

apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit, ViewChild } from '@angular/core';
 import { Dossier, File, IComment } from '@red/domain';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { PermissionsService } from '@services/permissions.service';
 import { InputWithActionComponent, LoadingService, trackByFactory, ContextComponent } from '@iqser/common-ui';
 import { firstValueFrom, Observable } from 'rxjs';

apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html

@@ -6,13 +6,13 @@
         <span *ngIf="file.isUnderReview || file.isUnderApproval">{{ 'by' | translate }}:</span>
     </div>
 
-    <redaction-initials-avatar
+    <iqser-initials-avatar
         *ngIf="(editingReviewer$ | async) === false"
         [id]="'assignee'"
         [tooltipPosition]="'below'"
         [user]="file.assignee"
         [withName]="!!file.assignee"
-    ></redaction-initials-avatar>
+    ></iqser-initials-avatar>
 
     <div
         (click)="editingReviewer$.next(true)"

apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.ts

@@ -4,7 +4,7 @@ import { List, LoadingService, Toaster } from '@iqser/common-ui';
 import { PermissionsService } from '@services/permissions.service';
 import { workflowFileStatusTranslations } from '@translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { FilesService } from '@services/files/files.service';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, combineLatest, combineLatestWith, firstValueFrom, Observable, switchMap } from 'rxjs';

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html

@@ -12,13 +12,15 @@
 
                 <ng-container *ngIf="permissionsService.isApprover(dossier) && !!file.lastReviewer">
                     <div class="vertical-line"></div>
+
                     <div class="all-caps-label mr-16 ml-8">
                         {{ 'file-preview.last-assignee' | translate: { status: file.workflowStatus } }}
                     </div>
-                    <redaction-initials-avatar
+
+                    <iqser-initials-avatar
                         [user]="file.isApproved ? file.lastApprover : file.lastReviewer"
                         [withName]="true"
-                    ></redaction-initials-avatar>
+                    ></iqser-initials-avatar>
                 </ng-container>
 
                 <div class="vertical-line"></div>

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts

@@ -23,7 +23,7 @@ import { AnnotationProcessingService } from './services/annotation-processing.se
 import { Dictionary, File, ViewMode, ViewModes } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
 import { combineLatest, firstValueFrom, from, of, pairwise } from 'rxjs';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { byId, byPage, download, handleFilterDelta, hasChanges } from '../../utils';
 import { FilesService } from '@services/files/files.service';
 import { FileManagementService } from '@services/files/file-management.service';

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IqserHelpModeModule, IqserIconsModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserIconsModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
@@ -94,6 +94,7 @@ const components = [
         TranslateModule,
         OverlayModule,
         IqserHelpModeModule,
+        IqserUsersModule,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard],
 })

apps/red-ui/src/app/modules/file-preview/services/file-data.service.ts

@@ -5,7 +5,7 @@ import { RedactionLogEntry } from '@models/file/redaction-log.entry';
 import { Injectable } from '@angular/core';
 import { FilePreviewStateService } from './file-preview-state.service';
 import { ViewedPagesService } from '@services/files/viewed-pages.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
 import { map, switchMap, tap, withLatestFrom } from 'rxjs/operators';
 import { PermissionsService } from '@services/permissions.service';

apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts

@@ -8,7 +8,7 @@ import {
     ManualRedactionEntryWrapper,
 } from '@models/file/manual-redaction-entry.wrapper';
 import { AnnotationDrawService } from '../../pdf-viewer/services/annotation-draw.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { BASE_HREF_FN, BaseHrefFn, shareDistinctLast } from '@iqser/common-ui';
 import { toPosition } from '../utils/pdf-calculation.utils';
 import { MultiSelectService } from './multi-select.service';

apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Core } from '@pdftron/webviewer';
 import { hexToRgb } from '@utils/functions';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { RedactionLogService } from '@services/files/redaction-log.service';
 
 import { IRectangle, ISectionGrid, ISectionRectangle } from '@red/domain';

apps/red-ui/src/app/modules/pdf-viewer/services/document-viewer.service.ts

@@ -5,7 +5,7 @@ import { fromEvent, merge, Observable } from 'rxjs';
 import { debounceTime, filter, map, tap } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
 import { PdfViewer } from './pdf-viewer.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { log, shareLast } from '@iqser/common-ui';
 import { stopAndPrevent, stopAndPreventIfNotAllowed } from '../utils/functions';
 import { RotationType, RotationTypes } from '@red/domain';

apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts

@@ -12,7 +12,7 @@ import { Rgb } from '../utils/types';
 import { asList } from '../utils/functions';
 import { TranslateService } from '@ngx-translate/core';
 import { LicenseService } from '@services/license.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import TextTool = Core.Tools.TextTool;
 import Annotation = Core.Annotations.Annotation;
 import TextHighlightAnnotation = Core.Annotations.TextHighlightAnnotation;

apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { HeaderElements } from '../../file-preview/utils/constants';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';

apps/red-ui/src/app/modules/search/search-screen/search-screen.component.html

@@ -57,7 +57,7 @@
         </div>
 
         <div class="cell">
-            <redaction-initials-avatar [user]="item.assignee" [withName]="true"></redaction-initials-avatar>
+            <iqser-initials-avatar [user]="item.assignee" [withName]="true"></iqser-initials-avatar>
         </div>
 
         <div class="cell">

apps/red-ui/src/app/modules/search/search-screen/search-screen.component.ts

@@ -32,7 +32,7 @@ import { PlatformSearchService } from '@services/entity-services/platform-search
 import { FeaturesService } from '@services/features.service';
 import { DossiersCacheService } from '@services/dossiers/dossiers-cache.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 
 @Component({
     templateUrl: './search-screen.component.html',

apps/red-ui/src/app/modules/search/search.module.ts

@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchScreenComponent } from './search-screen/search-screen.component';
 import { RouterModule } from '@angular/router';
-import { CommonUiModule } from '@iqser/common-ui';
+import { CommonUiModule, IqserUsersModule } from '@iqser/common-ui';
 import { SharedModule } from '@shared/shared.module';
 
 const routes = [{ path: '', component: SearchScreenComponent }];
 
 @NgModule({
     declarations: [SearchScreenComponent],
-    imports: [CommonModule, RouterModule.forChild(routes), CommonUiModule, SharedModule],
+    imports: [CommonModule, RouterModule.forChild(routes), CommonUiModule, SharedModule, IqserUsersModule],
 })
 export class SearchModule {}

apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts

@@ -21,8 +21,8 @@ import {
     Toaster,
 } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { FileManagementService } from '@services/files/file-management.service';

apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { LoadingService, Toaster } from '@iqser/common-ui';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Dossier, File, WorkflowFileStatus, WorkflowFileStatuses } from '@red/domain';

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts

@@ -13,7 +13,7 @@ import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { EditDossierTeamComponent } from './edit-dossier-team/edit-dossier-team.component';
 import { PermissionsService } from '@services/permissions.service';
-import { getCurrentUser } from '@services/user.service';
+import { getCurrentUser } from '@users/user.service';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { dossiersServiceProvider } from '@services/entity-services/dossiers.service.provider';
 

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html

@@ -2,7 +2,7 @@
     <div class="iqser-input-group w-300 required">
         <mat-form-field floatLabel="always">
             <mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>
-            <mat-select formControlName="owner" id="editDossierOwnerSelect" (valueChange)="onChangeOwner($event)">
+            <mat-select (valueChange)="onChangeOwner($event)" formControlName="owner" id="editDossierOwnerSelect">
                 <mat-option *ngFor="let userId of ownersSelectOptions; let index = index" [id]="'mat-option-' + index" [value]="userId">
                     {{ userId | name }}
                 </mat-option>
@@ -38,7 +38,7 @@
     ></redaction-team-members>
 
     <ng-container *ngIf="!(selectedReviewers$ | async)?.length">
-        <div id="no-reviewers-label" class="info mt-4">{{ 'assign-dossier-owner.dialog.no-reviewers' | translate }}</div>
+        <div class="info mt-4" id="no-reviewers-label">{{ 'assign-dossier-owner.dialog.no-reviewers' | translate }}</div>
     </ng-container>
 
     <ng-container *ngIf="hasOwner">
@@ -58,7 +58,8 @@
                 [class.selected]="isMemberSelected(userId)"
                 [id]="'member-' + index"
             >
-                <redaction-initials-avatar [user]="userId" [withName]="true" size="large"></redaction-initials-avatar>
+                <iqser-initials-avatar [user]="userId" [withName]="true" size="large"></iqser-initials-avatar>
+
                 <div class="actions">
                     <div
                         (click)="!disabled && toggleApprover(userId, $event)"
@@ -68,10 +69,10 @@
                         <iqser-round-checkbox
                             [active]="isApprover(userId)"
                             [disabled]="disabled"
-                            class="mr-8"
                             [id]="'round-checkbox-' + index"
-                        >
+                            class="mr-8"
-                        </iqser-round-checkbox>
+                        ></iqser-round-checkbox>
+
                         <span
                             [translate]="disabled ? 'assign-dossier-owner.dialog.approver' : 'assign-dossier-owner.dialog.make-approver'"
                         ></span>

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Dossier, IDossierRequest } from '@red/domain';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';

apps/red-ui/src/app/modules/shared-dossiers/services/file-assign.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { Dossier, File, User, WorkflowFileStatus, WorkflowFileStatuses } from '@red/domain';
 import { DossiersDialogService } from './dossiers-dialog.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';

apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts

@@ -13,7 +13,7 @@ import { EditDossierTeamComponent } from './dialogs/edit-dossier-dialog/edit-dos
 import { DateColumnComponent } from './components/date-column/date-column.component';
 import { FileAssignService } from './services/file-assign.service';
 import { DictionaryDetailsDialogComponent } from './dialogs/edit-dossier-dialog/dictionary/dictionary-details-dialog/dictionary-details-dialog.component';
-import { IqserHelpModeModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
 
 const components = [
     FileActionsComponent,
@@ -32,6 +32,6 @@ const services = [DossiersDialogService, FileAssignService];
     declarations: [...components, ...dialogs],
     exports: [...components, ...dialogs],
     providers: [...services],
-    imports: [CommonModule, SharedModule, IqserHelpModeModule],
+    imports: [CommonModule, SharedModule, IqserHelpModeModule, IqserUsersModule],
 })
 export class SharedDossiersModule {}

apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html

@@ -29,5 +29,5 @@
 </div>
 
 <ng-template #avatar let-userId="userId">
-    <redaction-initials-avatar [user]="userId" [withName]="true" color="gray"></redaction-initials-avatar>
+    <iqser-initials-avatar [user]="userId" [withName]="true" color="gray"></iqser-initials-avatar>
 </ng-template>

apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { User } from '@red/domain';
 import { List } from '@iqser/common-ui';
 

apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.html

@@ -1,5 +0,0 @@
-<button [class.overlay]="showDot" [iqserHelpMode]="'open_usermenu'" mat-button>
-    <redaction-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></redaction-initials-avatar>
-    <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
-</button>
-<div *ngIf="showDot" class="dot"></div>

apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss

@@ -1,25 +0,0 @@
-@use 'common-buttons';
-@use 'variables';
-
-:host {
-    @extend .user-button;
-    min-width: fit-content;
-
-    button {
-        padding: 0 10px 0 5px;
-
-        mat-icon {
-            width: 14px;
-        }
-    }
-
-    &[aria-expanded='true'] {
-        button {
-            background: rgba(variables.$primary, 0.1);
-        }
-    }
-
-    .dot {
-        left: -2px;
-    }
-}

apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { UserService } from '@services/user.service';
-
-@Component({
-    selector: 'redaction-user-button',
-    templateUrl: './user-button.component.html',
-    styleUrls: ['./user-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class UserButtonComponent {
-    @Input() userId: string;
-    @Input() showDot = false;
-
-    constructor(readonly userService: UserService) {}
-}

apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Debounce, List, OnChange } from '@iqser/common-ui';
-import { UserPreferenceService } from '@services/user-preference.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { EditorThemeService } from '@services/editor-theme.service';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import ICodeEditor = monaco.editor.ICodeEditor;

apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html

@@ -1,12 +0,0 @@
-<div *ngIf="_user && _user | name: namePipeOptions as userName" class="wrapper">
-    <div
-        [className]="colorClass + ' oval ' + size + (hasBorder ? ' border' : '')"
-        [matTooltipPosition]="tooltipPosition"
-        [matTooltip]="userName"
-    >
-        {{ _user | name: { showInitials: true } }}
-    </div>
-    <div *ngIf="withName" [class.disabled]="disabled" class="clamp-1 username" id="avatarUsername">
-        {{ userName }}
-    </div>
-</div>

apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss

@@ -1,17 +0,0 @@
-.wrapper {
-    display: flex;
-    align-items: center;
-    width: fit-content;
-
-    .username {
-        margin-left: 6px;
-
-        &.disabled {
-            opacity: 0.7;
-        }
-    }
-}
-
-.border {
-    border: 1px solid var(--iqser-grey-7);
-}

apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts

@@ -1,81 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
-import { UserService } from '@services/user.service';
-import { User } from '@red/domain';
-import { TranslateService } from '@ngx-translate/core';
-import { NamePipeOptions } from '@shared/pipes/name.pipe';
-
-@Component({
-    selector: 'redaction-initials-avatar',
-    templateUrl: './initials-avatar.component.html',
-    styleUrls: ['./initials-avatar.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class InitialsAvatarComponent implements OnInit, OnChanges {
-    @Input() color = 'lightgray';
-    @Input() size: 'small' | 'large' = 'small';
-    @Input() withName = false;
-    @Input() showYou = false;
-    @Input() tooltipPosition: 'below' | 'above' = 'above';
-    @Input() defaultValue = this._translateService.instant('initials-avatar.unassigned');
-    colorClass: string;
-
-    namePipeOptions: NamePipeOptions;
-
-    constructor(private readonly _userService: UserService, private readonly _translateService: TranslateService) {}
-
-    _user: User;
-
-    @Input()
-    set user(user: User | string) {
-        if (typeof user === 'string') {
-            this._user = this._userService.find(user);
-        } else {
-            this._user = user;
-        }
-    }
-
-    get hasBorder(): boolean {
-        return !!this._user && !this.isCurrentUser && this._user.isManager;
-    }
-
-    get disabled(): boolean {
-        return this._user && !this._isSystemUser && !this._user.hasAnyRole;
-    }
-
-    get isCurrentUser(): boolean {
-        return this._userService.currentUser.id === this._user?.id;
-    }
-
-    private get _colorClass() {
-        if (this.isCurrentUser) {
-            return 'primary-white';
-        }
-        if (this.disabled) {
-            return 'inactive';
-        }
-        if (this.color.includes('-')) {
-            return this.color;
-        }
-        return `${this.color}-dark`;
-    }
-
-    private get _isSystemUser() {
-        return this._user?.id?.toLowerCase() === 'system';
-    }
-
-    ngOnChanges(): void {
-        if (this._isSystemUser) {
-            this.colorClass = 'primary-white primary';
-            return;
-        }
-
-        this.colorClass = this._colorClass;
-    }
-
-    ngOnInit(): void {
-        this.namePipeOptions = {
-            showYou: this.showYou,
-            defaultValue: this.defaultValue,
-        };
-    }
-}

apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html

@@ -6,7 +6,7 @@
         [class.large-spacing]="largeSpacing"
         class="member"
     >
-        <redaction-initials-avatar [user]="userId" color="gray" size="large"></redaction-initials-avatar>
+        <iqser-initials-avatar [user]="userId" color="gray" size="large"></iqser-initials-avatar>
 
         <div *ngIf="canRemoveMember(userId)" class="remove">
             <mat-icon svgIcon="iqser:close"></mat-icon>

apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { CircleButtonTypes, List } from '@iqser/common-ui';
-import { UserService } from '@services/user.service';
+import { UserService } from '@users/user.service';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 
 @Component({

apps/red-ui/src/app/modules/shared/pipes/name.pipe.ts

@@ -1,59 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { UserService } from '@services/user.service';
-import { TranslateService } from '@ngx-translate/core';
-import { User } from '@red/domain';
-
-function getInitials(name: string) {
-    if (name.toLowerCase() === 'system') {
-        return 'SY';
-    }
-
-    const splittedName = name.split(' ').filter(value => value !== ' ' && value !== '');
-    return splittedName
-        .filter((_value, index) => index < 2)
-        .map(str => str[0])
-        .join('');
-}
-
-export interface NamePipeOptions {
-    showYou?: boolean;
-    showInitials?: boolean;
-    defaultValue?: string;
-}
-
-@Pipe({
-    name: 'name',
-})
-export class NamePipe implements PipeTransform {
-    private readonly _defaultOptions: NamePipeOptions = { defaultValue: this._translateService.instant('unknown') };
-
-    constructor(private readonly _userService: UserService, private readonly _translateService: TranslateService) {}
-
-    transform(value?: User | string, options = this._defaultOptions): string {
-        let name;
-
-        if (!value && options?.showInitials) {
-            return '?';
-        }
-
-        name = this._getName(value) || options?.defaultValue;
-
-        if (options?.showYou && this._isCurrentUser(value)) {
-            name = `${name} (${this._translateService.instant('initials-avatar.you')})`;
-        }
-
-        return options?.showInitials ? getInitials(name) : name;
-    }
-
-    private _isCurrentUser(user: User | string): boolean {
-        const userId = typeof user === 'string' ? user : user.id;
-        return this._userService.currentUser.id === userId;
-    }
-
-    private _getName(user: User | string): string | undefined {
-        if (!user) {
-            return undefined;
-        }
-        return typeof user === 'string' ? this._userService.getName(user) : user.name;
-    }
-}

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -1,16 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { InitialsAvatarComponent } from './components/initials-avatar/initials-avatar.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { PaginationComponent } from './components/pagination/pagination.component';
 import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
-import { UserButtonComponent } from './components/buttons/user-button/user-button.component';
 import { MatConfigModule } from '../mat-config/mat-config.module';
 import { IconsModule } from '../icons/icons.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
 import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
-import { CommonUiModule, IqserHelpModeModule } from '@iqser/common-ui';
+import { CommonUiModule, IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
 import { SelectComponent } from './components/select/select.component';
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
 import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
@@ -18,7 +16,6 @@ import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
 import { DatePipe } from './pipes/date.pipe';
 import { LongPressDirective } from './directives/long-press.directive';
-import { NamePipe } from './pipes/name.pipe';
 import { TypeFilterComponent } from './components/type-filter/type-filter.component';
 import { TeamMembersComponent } from './components/team-members/team-members.component';
 import { EditorComponent } from './components/editor/editor.component';
@@ -38,10 +35,9 @@ import { AddEditEntityComponent } from './components/add-edit-entity/add-edit-en
 import { ColorPickerModule } from 'ngx-color-picker';
 import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
 
-const buttons = [FileDownloadBtnComponent, UserButtonComponent];
+const buttons = [FileDownloadBtnComponent];
 
 const components = [
-    InitialsAvatarComponent,
     PaginationComponent,
     AnnotationIconComponent,
     DonutChartComponent,
@@ -64,7 +60,7 @@ const components = [
     ...buttons,
 ];
 
-const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
+const utils = [DatePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
 
 const services = [SharedDialogService];
 
@@ -72,7 +68,16 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea
 
 @NgModule({
     declarations: [...components, ...utils, EditorComponent],
-    imports: [CommonModule, CommonUiModule, ...modules, MonacoEditorModule, TranslateModule, RouterModule, IqserHelpModeModule],
+    imports: [
+        CommonModule,
+        CommonUiModule,
+        ...modules,
+        MonacoEditorModule,
+        TranslateModule,
+        RouterModule,
+        IqserHelpModeModule,
+        IqserUsersModule,
+    ],
     exports: [...modules, CommonUiModule, ...components, ...utils],
     providers: [
         ...services,

apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.html

@@ -16,7 +16,7 @@
 </div>
 
 <div class="cell user-column">
-    <redaction-initials-avatar [user]="item.ownerId" [withName]="true"></redaction-initials-avatar>
+    <iqser-initials-avatar [user]="item.ownerId" [withName]="true"></iqser-initials-avatar>
 </div>
 
 <div class="cell">