CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

merging code

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nitesh Yadav
2026-04-20 14:26:25 +05:30
co-authored by Claude Sonnet 4.6
parent e212bf7d79 d72e969dc3
commit d367e76104
322 changed files with 28779 additions and 4976 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/users/create-user/create-user.component.html
+93 -22
View File
@@ -29,7 +29,10 @@
<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>
@@ -37,10 +40,16 @@
<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>
@@ -48,10 +57,18 @@
<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>
@@ -59,10 +76,18 @@
<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>
@@ -90,16 +115,33 @@
<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>
@@ -107,13 +149,23 @@
<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="cu-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>
@@ -133,7 +185,10 @@
}
</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>
@@ -154,7 +209,10 @@
}
</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>
@@ -176,11 +234,24 @@
<!-- 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>
src/app/users/create-user/create-user.component.scss
+14 -4
View File
@@ -44,9 +44,14 @@ $gray-900: #202124;
border-color: $border !important;
color: $gray-500 !important;
i { margin-right: 6px; }
i {
margin-right: 6px;
}
&:hover { color: $primary !important; border-color: $primary !important; }
&:hover {
color: $primary !important;
border-color: $primary !important;
}
}
// Card
@@ -92,7 +97,9 @@ $gray-900: #202124;
gap: 4px 16px;
padding: 16px 24px;
@media (max-width: 600px) { grid-template-columns: 1fr; }
@media (width <= 600px) {
grid-template-columns: 1fr;
}
}
.cu-field {
@@ -148,6 +155,9 @@ $gray-900: #202124;
height: 36px !important;
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
i { margin-right: 6px; font-size: 12px; }
i {
margin-right: 6px;
font-size: 12px;
}
}
}
src/app/users/edit-user/edit-user.component.html
+47 -10
View File
@@ -29,7 +29,10 @@
<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>
@@ -37,10 +40,16 @@
<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>
@@ -48,10 +57,18 @@
<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>
@@ -59,10 +76,18 @@
<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-error
>{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
>
}
</mat-form-field>
</div>
@@ -98,7 +123,10 @@
}
</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-error
>{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
>
}
</mat-form-field>
@@ -119,7 +147,10 @@
}
</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.commons.At least one role' | translate }}
<strong>{{ 'labels.commons.must be selected' | translate }}</strong></mat-error
>
}
</mat-form-field>
</div>
@@ -130,7 +161,13 @@
<button type="button" mat-stroked-button [routerLink]="['../']" class="eu-actions__cancel">
{{ 'labels.buttons.Cancel' | translate }}
</button>
<button type="submit" mat-flat-button color="primary" [disabled]="!editUserForm.valid" class="eu-actions__submit">
<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>
</div>
src/app/users/edit-user/edit-user.component.scss
+14 -4
View File
@@ -44,9 +44,14 @@ $gray-900: #202124;
border-color: $border !important;
color: $gray-500 !important;
i { margin-right: 6px; }
i {
margin-right: 6px;
}
&:hover { color: $primary !important; border-color: $primary !important; }
&:hover {
color: $primary !important;
border-color: $primary !important;
}
}
// Card
@@ -92,7 +97,9 @@ $gray-900: #202124;
gap: 4px 16px;
padding: 16px 24px;
@media (max-width: 600px) { grid-template-columns: 1fr; }
@media (width <= 600px) {
grid-template-columns: 1fr;
}
}
.eu-field {
@@ -140,6 +147,9 @@ $gray-900: #202124;
height: 36px !important;
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
i { margin-right: 6px; font-size: 12px; }
i {
margin-right: 6px;
font-size: 12px;
}
}
}
src/app/users/users.component.html
+54 -11
View File
@@ -20,7 +20,12 @@
<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)" />
<input
matInput
#filter
placeholder="{{ 'labels.inputs.Filter' | translate }}"
(keyup)="applyFilter($event.target.value)"
/>
</mat-form-field>
<div class="table-buttons">
@@ -63,7 +68,11 @@
<ng-container matColumnDef="isSelfServiceUser">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Is Self Service' | translate }}</th>
<td mat-cell *matCellDef="let user">
<span class="status-badge" [class.status-active]="user.isSelfServiceUser" [class.status-inactive]="!user.isSelfServiceUser">
<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>
@@ -82,26 +91,60 @@
<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>
src/app/users/users.component.scss
+6 -2
View File
@@ -12,12 +12,16 @@
background: #ecfdf5 !important;
color: #059669 !important;
&::before { background: #059669; }
&::before {
background: #059669;
}
}
.status-inactive {
background: #fef2f2 !important;
color: #dc2626 !important;
&::before { background: #dc2626; }
&::before {
background: #dc2626;
}
}
src/app/users/view-user/view-user.component.html
+13 -3
View File
@@ -34,9 +34,15 @@
<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"
[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 class="vu-chip__val">{{
userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate)
}}</span>
</span>
</div>
</div>
@@ -78,7 +84,11 @@
<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"
[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>
src/app/users/view-user/view-user.component.scss
+64 -35
View File
@@ -22,8 +22,8 @@ $accent: #0ea5e9;
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);
border: 1px solid rgb(0 0 0 / 6%);
box-shadow: 0 1px 4px rgb(0 0 0 / 4%);
}
// ── Dark gradient header ──
@@ -39,14 +39,18 @@ $accent: #0ea5e9;
&::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);
inset: 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;
}
/* stylelint-disable-next-line selector-max-universal */
> * {
position: relative;
z-index: 1;
@@ -59,7 +63,7 @@ $accent: #0ea5e9;
&__icon {
font-size: 56px;
color: rgba(255, 255, 255, 0.25);
color: rgb(255 255 255 / 25%);
}
}
@@ -92,23 +96,23 @@ $accent: #0ea5e9;
&__username {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
color: rgb(255 255 255 / 50%);
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
}
}
.vu-menu-btn {
color: rgba(255, 255, 255, 0.7) !important;
color: rgb(255 255 255 / 70%) !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.15);
border: 1px solid rgb(255 255 255 / 15%);
border-radius: 5px !important;
line-height: 28px !important;
&:hover {
background: rgba(255, 255, 255, 0.1);
background: rgb(255 255 255 / 10%);
color: #fff !important;
}
}
@@ -125,14 +129,14 @@ $accent: #0ea5e9;
align-items: center;
gap: 8px;
padding: 4px 11px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.13);
background: rgb(255 255 255 / 10%);
border: 1px solid rgb(255 255 255 / 13%);
border-radius: 5px;
&__label {
font-size: 9px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
color: rgb(255 255 255 / 40%);
text-transform: uppercase;
letter-spacing: 0.4px;
}
@@ -144,17 +148,21 @@ $accent: #0ea5e9;
}
&--active {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.25);
background: rgb(16 185 129 / 15%);
border-color: rgb(16 185 129 / 25%);
.vu-chip__val { color: #6ee7b7; }
.vu-chip__val {
color: #6ee7b7;
}
}
&--inactive {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.2);
background: rgb(239 68 68 / 12%);
border-color: rgb(239 68 68 / 20%);
.vu-chip__val { color: #fca5a5; }
.vu-chip__val {
color: #fca5a5;
}
}
}
@@ -171,7 +179,7 @@ $accent: #0ea5e9;
padding: 14px 16px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.04);
border: 1px solid rgb(0 0 0 / 4%);
margin: 3px;
transition: background 0.12s;
@@ -224,13 +232,17 @@ $accent: #0ea5e9;
&--yes {
color: #16a34a;
.vu-status__dot { background: #16a34a; }
.vu-status__dot {
background: #16a34a;
}
}
&--no {
color: #dc2626;
.vu-status__dot { background: #dc2626; }
.vu-status__dot {
background: #dc2626;
}
}
}
@@ -269,20 +281,30 @@ $accent: #0ea5e9;
}
// ── Responsive ──
@media (max-width: 768px) {
@media (width <= 768px) {
.vu-top {
flex-direction: column;
align-items: center;
text-align: center;
}
.vu-name-row { justify-content: center; }
.vu-chips { justify-content: center; }
.vu-grid { grid-template-columns: repeat(2, 1fr); }
.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; }
@media (width <= 480px) {
.vu-grid {
grid-template-columns: 1fr;
}
}
// ── Dark mode ──
@@ -298,12 +320,19 @@ $accent: #0ea5e9;
.vu-cell {
background: #2a2a2a;
border-color: rgba(255, 255, 255, 0.06);
border-color: rgb(255 255 255 / 6%);
&:hover { background: #333; }
&:hover {
background: #333;
}
&__label { color: #888; }
&__value { color: #e0e0e0; }
&__label {
color: #888;
}
&__value {
color: #e0e0e0;
}
}
.vu-role-tag {