feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,225 +6,181 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="cu-container">
|
||||
<!-- Header -->
|
||||
<div class="cu-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="cu-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Users' | translate }}
|
||||
</button>
|
||||
<h2 class="cu-header__title">{{ 'labels.heading.Create User' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="cu-card">
|
||||
<form [formGroup]="userForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div #userFormRef class="layout-row-wrap layout-lt-md-column gap-2percent">
|
||||
<mat-form-field class="flex-48">
|
||||
<!-- Account Section -->
|
||||
<div class="cu-section">
|
||||
<div class="cu-section__header">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<h3>Account Details</h3>
|
||||
</div>
|
||||
<div class="cu-grid" #userFormRef>
|
||||
<mat-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
|
||||
<input matInput required formControlName="username" />
|
||||
@if (userForm.controls.username.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ '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-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
|
||||
<input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email" />
|
||||
@if (userForm.controls.email.hasError('email')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.invalid' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.invalid' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (userForm.controls.email.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ '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-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
@if (userForm.controls.firstname.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.First Name' | translate }}
|
||||
<strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (userForm.controls.firstname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ '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-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
@if (userForm.controls.lastname.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Last Name' | translate }}
|
||||
<strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (userForm.controls.lastname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="password-never-expires-wrapper flex-48">
|
||||
<mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
|
||||
<!-- Security Section -->
|
||||
<div class="cu-section">
|
||||
<div class="cu-section__header">
|
||||
<i class="fas fa-lock"></i>
|
||||
<h3>Security</h3>
|
||||
</div>
|
||||
<div class="cu-grid">
|
||||
<div class="cu-checkbox-row">
|
||||
<mat-checkbox labelPosition="after" formControlName="passwordNeverExpires">
|
||||
{{ 'labels.inputs.Password never expires' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="send-password-to-email-wrapper flex-48">
|
||||
<mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail">
|
||||
<mat-checkbox labelPosition="after" formControlName="sendPasswordToEmail">
|
||||
{{ 'labels.inputs.Send password to email address' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
@if (!userForm.controls.sendPasswordToEmail.value) {
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
|
||||
<input matInput required type="password" formControlName="password" />
|
||||
@if (userForm.controls.password.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (userForm.controls.password.hasError('minlength')) {
|
||||
<mat-error>
|
||||
{{ 'labels.commons.Password should be at least' | translate }}
|
||||
<strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.commons.Password should be at least' | translate }} <strong>{{ 'labels.commons.12 characters long' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (userForm.controls.password.hasError('maxlength')) {
|
||||
<mat-error>
|
||||
{{ 'labels.commons.Password should not be more than' | translate }}
|
||||
<strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.commons.Password should not be more than' | translate }} <strong>{{ 'labels.commons.50 characters long' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (
|
||||
userForm.controls.password.hasError('pattern') &&
|
||||
!(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))
|
||||
) {
|
||||
<mat-error>
|
||||
{{ '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>
|
||||
@if (userForm.controls.password.hasError('pattern') && !(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))) {
|
||||
<mat-error>{{ '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>
|
||||
}
|
||||
|
||||
@if (!userForm.controls.sendPasswordToEmail.value) {
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
|
||||
<input matInput required type="password" formControlName="repeatPassword" />
|
||||
@if (userForm.controls.repeatPassword.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (
|
||||
userForm.errors?.passwordsDoNotMatch &&
|
||||
!userForm.controls.password.hasError('required') &&
|
||||
!userForm.controls.repeatPassword.hasError('required')
|
||||
) {
|
||||
<p class="flex-98 reset-password-error">
|
||||
{{ 'labels.inputs.Passwords' | translate }}
|
||||
<strong>{{ 'labels.commons.do not match' | translate }}</strong>
|
||||
</p>
|
||||
@if (userForm.errors?.passwordsDoNotMatch && !userForm.controls.password.hasError('required') && !userForm.controls.repeatPassword.hasError('required')) {
|
||||
<p class="cu-error">{{ 'labels.inputs.Passwords' | translate }} <strong>{{ 'labels.commons.do not match' | translate }}</strong></p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<!-- Assignment Section -->
|
||||
<div class="cu-section">
|
||||
<div class="cu-section__header">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
<h3>Assignment</h3>
|
||||
</div>
|
||||
<div class="cu-grid">
|
||||
<mat-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of officesData; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
<mat-option [value]="office.id">{{ office.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (userForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cu-field">
|
||||
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@for (staff of staffData; track staff) {
|
||||
<mat-option [value]="staff.id">
|
||||
{{ staff.displayName }}
|
||||
</mat-option>
|
||||
<mat-option [value]="staff.id">{{ staff.displayName }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cu-field cu-field--full">
|
||||
<mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
|
||||
<mat-select required formControlName="roles" multiple>
|
||||
@for (role of rolesData; track role) {
|
||||
<mat-option [value]="role.id">
|
||||
{{ role.name }}
|
||||
</mat-option>
|
||||
<mat-option [value]="role.id">{{ role.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (userForm.controls.roles.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.commons.At least one role' | translate }}
|
||||
<strong>{{ 'labels.commons.must be selected' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.commons.At least one role' | translate }} <strong>{{ 'labels.commons.must be selected' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<!-- Actions -->
|
||||
<div class="cu-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="cu-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!userForm.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<button type="submit" mat-flat-button color="primary" [disabled]="!userForm.valid" class="cu-actions__submit">
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Config Wizard Template -->
|
||||
<ng-template #templateUserFormRef let-popover="popover">
|
||||
<h2>{{ 'labels.heading.Create User' | translate }}</h2>
|
||||
<p class="mw400">
|
||||
{{ 'labels.text.Filling Details' | translate }}:
|
||||
<a [href]="'users' | documentationLink" target="_blank" rel="noopener noreferrer">{{
|
||||
'labels.inputs.Users' | translate
|
||||
}}</a>
|
||||
</p>
|
||||
<p class="mw400">{{ 'labels.text.Filling Details' | translate }}: <a [href]="'users' | documentationLink" target="_blank" rel="noopener noreferrer">{{ '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>
|
||||
<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>
|
||||
|
||||
@@ -6,16 +6,148 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.password-never-expires-wrapper {
|
||||
padding: 17.5px 0;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.cu-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.send-password-to-email-wrapper {
|
||||
padding: 17.5px 0;
|
||||
// Header
|
||||
.cu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-password-error {
|
||||
color: #f44336;
|
||||
font-size: 80%;
|
||||
.cu-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.cu-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.cu-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.cu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.cu-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.cu-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.cu-error {
|
||||
grid-column: 1 / -1;
|
||||
color: #dc2626;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
// Actions
|
||||
.cu-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,134 +6,134 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="eu-container">
|
||||
<!-- Header -->
|
||||
<div class="eu-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="eu-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Users' | translate }}
|
||||
</button>
|
||||
<h2 class="eu-header__title">{{ 'labels.heading.Edit User' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="eu-card">
|
||||
<form [formGroup]="editUserForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-48">
|
||||
<!-- Account Section -->
|
||||
<div class="eu-section">
|
||||
<div class="eu-section__header">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<h3>Account Details</h3>
|
||||
</div>
|
||||
<div class="eu-grid">
|
||||
<mat-form-field appearance="outline" class="eu-field">
|
||||
<mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
|
||||
<input matInput required formControlName="username" />
|
||||
@if (editUserForm.controls.username.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ '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-form-field appearance="outline" class="eu-field">
|
||||
<mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
|
||||
<input matInput required formControlName="email" />
|
||||
@if (editUserForm.controls.email.hasError('email')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.invalid' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.invalid' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (editUserForm.controls.email.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ '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-form-field appearance="outline" class="eu-field">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
@if (editUserForm.controls.firstname.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.First Name' | translate }}
|
||||
<strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (editUserForm.controls.firstname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ '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-form-field appearance="outline" class="eu-field">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
@if (editUserForm.controls.lastname.hasError('pattern')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Last Name' | translate }}
|
||||
<strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
|
||||
}
|
||||
@if (editUserForm.controls.lastname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<div class="password-never-expires-wrapper flex-48">
|
||||
<mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
|
||||
{{ 'labels.inputs.Password never expires' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId" (selectionChange)="officeChanged($event.value)">
|
||||
@for (office of officesData; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editUserForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Office' | 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.Staff' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@for (staff of staffData; track staff) {
|
||||
<mat-option [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 required formControlName="roles" multiple>
|
||||
@for (role of rolesData; track role) {
|
||||
<mat-option [value]="role.id">
|
||||
{{ role.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editUserForm.controls.roles.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.commons.At least one role' | translate }}
|
||||
<strong>{{ 'labels.commons.must be selected' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error>{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<!-- Security Section -->
|
||||
<div class="eu-section">
|
||||
<div class="eu-section__header">
|
||||
<i class="fas fa-lock"></i>
|
||||
<h3>Security</h3>
|
||||
</div>
|
||||
<div class="eu-grid">
|
||||
<div class="eu-checkbox-row">
|
||||
<mat-checkbox labelPosition="after" formControlName="passwordNeverExpires">
|
||||
{{ 'labels.inputs.Password never expires' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Assignment Section -->
|
||||
<div class="eu-section">
|
||||
<div class="eu-section__header">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
<h3>Assignment</h3>
|
||||
</div>
|
||||
<div class="eu-grid">
|
||||
<mat-form-field appearance="outline" class="eu-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId" (selectionChange)="officeChanged($event.value)">
|
||||
@for (office of officesData; track office) {
|
||||
<mat-option [value]="office.id">{{ office.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editUserForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="eu-field">
|
||||
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@for (staff of staffData; track staff) {
|
||||
<mat-option [value]="staff.id">{{ staff.displayName }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="eu-field eu-field--full">
|
||||
<mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
|
||||
<mat-select required formControlName="roles" multiple>
|
||||
@for (role of rolesData; track role) {
|
||||
<mat-option [value]="role.id">{{ role.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editUserForm.controls.roles.hasError('required')) {
|
||||
<mat-error>{{ 'labels.commons.At least one role' | translate }} <strong>{{ 'labels.commons.must be selected' | translate }}</strong></mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="eu-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="eu-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!editUserForm.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<button type="submit" mat-flat-button color="primary" [disabled]="!editUserForm.valid" class="eu-actions__submit">
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,140 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.password-never-expires-wrapper {
|
||||
padding: 17.5px 0;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.eu-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.eu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.eu-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.eu-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.eu-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.eu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.eu-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.eu-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.eu-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,35 +6,45 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<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>
|
||||
<mat-card class="container">
|
||||
<!-- Header Bar -->
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<div class="t-logomark"><span></span><span></span><span></span><span></span></div>
|
||||
{{ 'labels.inputs.Users' | translate }}
|
||||
</h2>
|
||||
<span class="table-count" *ngIf="dataSource?.data?.length">{{ dataSource.data.length }} users</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<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 class="table-actions">
|
||||
<mat-form-field class="table-search" appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<input matInput #filter placeholder="{{ 'labels.inputs.Filter' | translate }}" (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
|
||||
<div class="table-buttons">
|
||||
<button mat-flat-button color="primary" [routerLink]="['create']" class="btn-create" #buttonCreateUser>
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
{{ 'labels.buttons.Create User' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #usersTable class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<!-- Table -->
|
||||
<div class="table-container" #usersTable>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="username">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Login Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let user" class="cell-link">{{ user.username }}</td>
|
||||
</ng-container>
|
||||
|
||||
<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="username">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Login Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let user">{{ user.username }}</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>
|
||||
@@ -42,7 +52,7 @@
|
||||
|
||||
<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>
|
||||
<td mat-cell *matCellDef="let user" class="cell-mono">{{ user.email }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="officeName">
|
||||
@@ -53,80 +63,45 @@
|
||||
<ng-container matColumnDef="isSelfServiceUser">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Is Self Service' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let user">
|
||||
<span
|
||||
[ngClass]="user.isSelfServiceUser ? 'self-service-true' : 'self-service-false'"
|
||||
class="self-service-indicator"
|
||||
></span>
|
||||
{{ user.isSelfServiceUser ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
|
||||
<span class="status-badge" [class.status-active]="user.isSelfServiceUser" [class.status-inactive]="!user.isSelfServiceUser">
|
||||
{{ user.isSelfServiceUser ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
|
||||
</span>
|
||||
</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>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="table-row"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
<!-- Config Wizard Templates (keep as-is) -->
|
||||
<ng-template #templateButtonCreateUser let-popover="popover">
|
||||
<h2>{{ 'labels.buttons.Create User' | translate }}</h2>
|
||||
<p class="mw300">{{ 'labels.text.This option allows you to create new users in your organization' | translate }}.</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(); previousStep()">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
|
||||
>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
<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(); previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)">{{ 'labels.buttons.Next' | translate }}</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #templateFilter let-popover="popover">
|
||||
<h4>{{ 'labels.heading.Search bar to filter users' | translate }}.</h4>
|
||||
<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(); showPopover(templateButtonCreateUser, buttonCreateUser, 'bottom', true)"
|
||||
>
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateUsersTable, usersTable, 'top', true)"
|
||||
>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
<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(); showPopover(templateButtonCreateUser, buttonCreateUser, 'bottom', true)">{{ 'labels.buttons.Back' | translate }}</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateUsersTable, usersTable, 'top', true)">{{ 'labels.buttons.Next' | translate }}</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #templateUsersTable let-popover="popover">
|
||||
<h4>{{ 'labels.heading.List of Users with their details' | translate }}.</h4>
|
||||
<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(); showPopover(templateFilter, filter, 'bottom', true)"
|
||||
>
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
<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(); showPopover(templateFilter, filter, 'bottom', true)">{{ 'labels.buttons.Back' | translate }}</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">{{ 'labels.buttons.Next' | translate }}</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@@ -6,30 +6,18 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
@use '../shared/styles/list-layout' as *;
|
||||
|
||||
.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-active {
|
||||
background: #ecfdf5 !important;
|
||||
color: #059669 !important;
|
||||
|
||||
.self-service-indicator {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::before { background: #059669; }
|
||||
}
|
||||
|
||||
.self-service-true {
|
||||
background-color: #43a047;
|
||||
border: 1px solid #388e3c;
|
||||
}
|
||||
.status-inactive {
|
||||
background: #fef2f2 !important;
|
||||
color: #dc2626 !important;
|
||||
|
||||
.self-service-false {
|
||||
background-color: #e53935;
|
||||
border: 1px solid #b71c1c;
|
||||
}
|
||||
&::before { background: #dc2626; }
|
||||
}
|
||||
|
||||
@@ -6,77 +6,107 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<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>
|
||||
<button mat-raised-button color="primary" (click)="changeUserPassword()">
|
||||
<fa-icon icon="cog" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Change Password' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="vu-card">
|
||||
<!-- Dark gradient header -->
|
||||
<div class="vu-top">
|
||||
<!-- User avatar icon -->
|
||||
<div class="vu-avatar">
|
||||
<fa-icon icon="user-circle" class="vu-avatar__icon"></fa-icon>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="content-rows">
|
||||
<div class="content-row">
|
||||
<div class="label">{{ 'labels.inputs.Login Name' | translate }}</div>
|
||||
<div class="value">{{ userData.username }}</div>
|
||||
<!-- User info -->
|
||||
<div class="vu-info">
|
||||
<div class="vu-name-row">
|
||||
<div class="vu-name">
|
||||
<span class="vu-name__text">{{ userData.firstname }} {{ userData.lastname }}</span>
|
||||
<span class="vu-name__username">@{{ userData.username }}</span>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="label">{{ 'labels.inputs.First Name' | translate }}</div>
|
||||
<div class="value">{{ userData.firstname }}</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="label">{{ 'labels.inputs.Last Name' | translate }}</div>
|
||||
<div class="value">{{ userData.lastname }}</div>
|
||||
</div>
|
||||
|
||||
@if (userData.email) {
|
||||
<div class="content-row">
|
||||
<div class="label">{{ 'labels.inputs.Email' | translate }}</div>
|
||||
<div class="value">{{ userData.email }}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="content-row">
|
||||
<div class="label">{{ 'labels.inputs.Roles' | translate }}</div>
|
||||
<div class="value">
|
||||
@for (role of userData.selectedRoles; track role) {
|
||||
<span>
|
||||
{{ role.name }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="label">{{ 'labels.buttons.Is Self Service' | translate }}</div>
|
||||
<div class="value">
|
||||
<span class="self-service-container">
|
||||
<span
|
||||
[ngClass]="userData.selfService ? 'self-service-true' : 'self-service-false'"
|
||||
class="self-service-indicator"
|
||||
></span>
|
||||
{{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-row layout-align-center gap-2percent column-on-mobile back-button-container">
|
||||
<button type="button" mat-raised-button color="primary" [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
<button mat-icon-button [matMenuTriggerFor]="userMenu" class="vu-menu-btn" aria-label="User actions">
|
||||
<fa-icon icon="bars" size="sm"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- Role & Self-service chips -->
|
||||
<div class="vu-chips">
|
||||
@for (role of userData.selectedRoles; track role) {
|
||||
<span class="vu-chip">
|
||||
<span class="vu-chip__label">{{ 'labels.inputs.Role' | translate }}</span>
|
||||
<span class="vu-chip__val">{{ role.name }}</span>
|
||||
</span>
|
||||
}
|
||||
<span class="vu-chip" [class.vu-chip--active]="userData.selfService" [class.vu-chip--inactive]="!userData.selfService">
|
||||
<span class="vu-chip__label">{{ 'labels.buttons.Self Service' | translate }}</span>
|
||||
<span class="vu-chip__val">{{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details grid -->
|
||||
<div class="vu-grid">
|
||||
<div class="vu-cell">
|
||||
<div class="vu-cell__label">{{ 'labels.inputs.Login Name' | translate }}</div>
|
||||
<div class="vu-cell__value">{{ userData.username }}</div>
|
||||
</div>
|
||||
|
||||
<div class="vu-cell">
|
||||
<div class="vu-cell__label">{{ 'labels.inputs.First Name' | translate }}</div>
|
||||
<div class="vu-cell__value">{{ userData.firstname }}</div>
|
||||
</div>
|
||||
|
||||
<div class="vu-cell">
|
||||
<div class="vu-cell__label">{{ 'labels.inputs.Last Name' | translate }}</div>
|
||||
<div class="vu-cell__value">{{ userData.lastname }}</div>
|
||||
</div>
|
||||
|
||||
@if (userData.email) {
|
||||
<div class="vu-cell">
|
||||
<div class="vu-cell__label">{{ 'labels.inputs.Email' | translate }}</div>
|
||||
<div class="vu-cell__value">{{ userData.email }}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="vu-cell">
|
||||
<div class="vu-cell__label">{{ 'labels.inputs.Roles' | translate }}</div>
|
||||
<div class="vu-cell__value">
|
||||
@for (role of userData.selectedRoles; track role) {
|
||||
<span class="vu-role-tag">{{ role.name }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vu-cell">
|
||||
<div class="vu-cell__label">{{ 'labels.buttons.Is Self Service' | translate }}</div>
|
||||
<div class="vu-cell__value">
|
||||
<span class="vu-status" [class.vu-status--yes]="userData.selfService" [class.vu-status--no]="!userData.selfService">
|
||||
<span class="vu-status__dot"></span>
|
||||
{{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back button -->
|
||||
<div class="vu-footer">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="vu-back-btn">
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions menu -->
|
||||
<mat-menu #userMenu="matMenu">
|
||||
<button mat-menu-item [routerLink]="['edit']">
|
||||
<fa-icon icon="edit" class="vu-menu-icon"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="delete()">
|
||||
<fa-icon icon="trash" class="vu-menu-icon vu-menu-icon--danger"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }}
|
||||
</button>
|
||||
<button mat-menu-item (click)="changeUserPassword()">
|
||||
<fa-icon icon="key" class="vu-menu-icon"></fa-icon>
|
||||
{{ 'labels.buttons.Change Password' | translate }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
@@ -6,132 +6,322 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$brand-dark: #0d3d78;
|
||||
$accent: #0ea5e9;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
max-width: 56rem;
|
||||
width: 92%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 8px;
|
||||
background-color: var(--card-background, #fff);
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
// ── Card wrapper ──
|
||||
.vu-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
// ── Dark gradient header ──
|
||||
.vu-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 24px 28px 20px;
|
||||
background: linear-gradient(135deg, $brand-dark 0%, #1a5276 100%) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(108deg, transparent 0, transparent 80px, rgb(255 255 255 / 2.5%) 80px, rgb(255 255 255 / 2.5%) 160px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout-row-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
gap: 1rem;
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-50 {
|
||||
padding: 0.5rem;
|
||||
// ── Avatar ──
|
||||
.vu-avatar {
|
||||
flex-shrink: 0;
|
||||
|
||||
&.mat-body-strong {
|
||||
color: var(--label-color, #555);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&__icon {
|
||||
font-size: 56px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Info ──
|
||||
.vu-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vu-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vu-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__text {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.content {
|
||||
div {
|
||||
margin: 1rem 0;
|
||||
word-wrap: break-word;
|
||||
&__username {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 0.25rem 0;
|
||||
color: var(--text-color, inherit);
|
||||
}
|
||||
}
|
||||
.vu-menu-btn {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
min-width: 28px !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 5px !important;
|
||||
line-height: 28px !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Chips ──
|
||||
.vu-chips {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vu-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 11px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.13);
|
||||
border-radius: 5px;
|
||||
|
||||
&__label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.content-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
.content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid var(--border-color-light, #eee);
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
.label {
|
||||
flex: 0 0 40%;
|
||||
font-weight: 600;
|
||||
color: var(--label-color, #555);
|
||||
padding: 0.5rem 1rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 0 0 60%;
|
||||
padding: 0.5rem 0;
|
||||
color: var(--text-color, inherit);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__val {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.back-button-container {
|
||||
margin-top: 2rem;
|
||||
&--active {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
|
||||
.vu-chip__val { color: #6ee7b7; }
|
||||
}
|
||||
|
||||
.self-service-indicator {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
&--inactive {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
|
||||
.vu-chip__val { color: #fca5a5; }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Details grid ──
|
||||
.vu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1px;
|
||||
padding: 20px 28px 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.vu-cell {
|
||||
padding: 14px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
margin: 3px;
|
||||
transition: background 0.12s;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Role tags ──
|
||||
.vu-role-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
background: rgba($accent, 0.1);
|
||||
color: $brand-dark;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
// ── Status indicator ──
|
||||
.vu-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
|
||||
&__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.self-service-true {
|
||||
background-color: #43a047;
|
||||
border: 1px solid #388e3c;
|
||||
&--yes {
|
||||
color: #16a34a;
|
||||
|
||||
.vu-status__dot { background: #16a34a; }
|
||||
}
|
||||
|
||||
.self-service-false {
|
||||
background-color: #e53935;
|
||||
border: 1px solid #b71c1c;
|
||||
}
|
||||
&--no {
|
||||
color: #dc2626;
|
||||
|
||||
.self-service-container {
|
||||
display: inline-flex;
|
||||
.vu-status__dot { background: #dc2626; }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Footer ──
|
||||
.vu-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 28px 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.vu-back-btn {
|
||||
border-color: #cbd5e1 !important;
|
||||
color: #475569 !important;
|
||||
font-weight: 500 !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 24px !important;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9 !important;
|
||||
border-color: #94a3b8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Menu icons ──
|
||||
.vu-menu-icon {
|
||||
margin-right: 10px;
|
||||
color: $accent;
|
||||
font-size: 14px;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
|
||||
&--danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Responsive ──
|
||||
@media (max-width: 768px) {
|
||||
.vu-top {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: all 0.2s ease;
|
||||
.vu-name-row { justify-content: center; }
|
||||
.vu-chips { justify-content: center; }
|
||||
.vu-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.vu-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
// ── Dark mode ──
|
||||
:host-context(.dark-theme) {
|
||||
.vu-card {
|
||||
background: #1e1e1e;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.vu-grid {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.vu-cell {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
|
||||
&:hover { background: #333; }
|
||||
|
||||
&__label { color: #888; }
|
||||
&__value { color: #e0e0e0; }
|
||||
}
|
||||
|
||||
.vu-role-tag {
|
||||
background: rgba($accent, 0.15);
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.vu-footer {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.vu-back-btn {
|
||||
border-color: #444 !important;
|
||||
color: #aaa !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode styles
|
||||
:host-context(.dark-theme) {
|
||||
--border-color: #444;
|
||||
--border-color-light: #3a3a3a;
|
||||
--card-background: #2d2d2d;
|
||||
--label-color: #b8b8b8;
|
||||
--text-color: #e0e0e0;
|
||||
|
||||
.container {
|
||||
mat-card {
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
|
||||
background: #333 !important;
|
||||
border-color: #555 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,9 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatIconButton } from '@angular/material/button';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
|
||||
/** Custom Services */
|
||||
import { UsersService } from '../users.service';
|
||||
@@ -30,7 +33,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent
|
||||
FaIconComponent,
|
||||
MatMenuModule,
|
||||
MatIconButton,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class ViewUserComponent {
|
||||
|
||||
Reference in New Issue
Block a user