Skip to content

P0063 clean #404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
prakharlowanshi11 merged 2 commits into from
Jan 21, 2026
Merged

P0063 clean #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0bfcf67
set the max width in the member container
Jan 19, 2026
a1add5f
fix the skeleton loader
Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 85 additions & 68 deletions apps/proxy-auth/src/app/otp/user-management/user-management.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div #container class="container" [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'">
<div class="members-container">
<h2>Invite Members</h2>
<h2>Members</h2>

<mat-tab-group class="user-management-tabs">
<!-- Members Tab -->
Expand All @@ -27,23 +27,29 @@ <h2>Invite Members</h2>

<div class="users-list-container" [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'">
<!-- Skeleton Loading -->
<ng-container *ngIf="isUsersLoading">
<ng-container *ngIf="isUsersLoading && !skipSkeletonLoading">
<div
*ngFor="let item of [1, 2, 3, 4, 5]"
class="user-item skeleton-item"
class="user-item skeleton-item w-50"
[ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'"
>
<div class="user-avatar skeleton-avatar"></div>
<div class="user-info bg-light-grey">
<div class="skeleton-text skeleton-name"></div>
<div class="skeleton-text skeleton-email"></div>
</div>
<div class="user-role-row">
<div class="skeleton-text skeleton-role"></div>
</div>
<div class="user-actions">
<div class="skeleton-button"></div>
<div class="skeleton-button"></div>
<div
class="item-container w-100 d-flex justify-content-between align-items-center gap-2"
>
<div class="d-flex justify-content-between align-items-center gap-2 w-35">
<div class="user-avatar skeleton-avatar"></div>
<div class="user-info bg-light-grey">
<div class="skeleton-text skeleton-name"></div>
<div class="skeleton-text skeleton-email"></div>
</div>
</div>
<div class="user-role-row">
<div class="skeleton-text skeleton-role"></div>
</div>
<div class="user-actions">
<div class="skeleton-button"></div>
<div class="skeleton-button"></div>
</div>
</div>
</div>
</ng-container>
Expand All @@ -53,62 +59,69 @@ <h2>Invite Members</h2>
*ngFor="let user of dataSource.data; let i = index"
class="user-item"
[ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'"
[class.hidden]="isUsersLoading"
[class.hidden]="isUsersLoading && !skipSkeletonLoading"
>
<div class="user-avatar" *ngIf="theme !== 'dark'">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 -960 960 960"
width="24px"
fill="#000000"
>
<path
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
/>
</svg>
</div>
<div class="user-avatar" *ngIf="theme === 'dark'">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 -960 960 960"
width="24px"
fill="#c1c5c8"
>
<path
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
/>
</svg>
</div>
<div class="user-info bg-light-grey">
<div class="user-name">{{ user.name }}</div>
<div class="user-email" matTooltipPosition="above">
{{ user.email }}
<div class="item-container w-100 d-flex justify-content-between align-items-center gap-2">
<div class="d-flex justify-content-between align-items-center gap-2 w-35">
<div class="user-avatar" *ngIf="theme !== 'dark'">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 -960 960 960"
width="24px"
fill="#000000"
>
<path
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
/>
</svg>
</div>
<div class="user-avatar" *ngIf="theme === 'dark'">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18px"
viewBox="0 -960 960 960"
width="24px"
fill="#c1c5c8"
>
<path
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
/>
</svg>
</div>
<div class="user-info bg-light-grey">
<div class="user-name">{{ user.name }}</div>
<div class="user-email" matTooltipPosition="above">
{{ user.email }}
</div>
</div>
</div>
<div class="user-role-row justify-content-center">
<div class="user-role">{{ user.role || 'User' }}</div>
</div>
<div class="user-actions">
<button
*ngIf="canEditUser"
mat-flat-button
class="button-add"
(click)="editUser(user, i)"
>
Edit
</button>
<button
*ngIf="canRemoveUser"
mat-stroked-button
class="button-remove"
[ngClass]="{ 'button-remove-light': theme !== 'dark' }"
(click)="deleteUser(user, i)"
>
Remove
</button>
</div>
</div>
<div class="user-role-row">
<div class="user-role">{{ user.role || 'User' }}</div>
</div>
<div class="user-actions">
<button
*ngIf="canEditUser"
mat-flat-button
class="button-add"
(click)="editUser(user, i)"
>
Edit
</button>
<button
*ngIf="canRemoveUser"
mat-flat-button
class="button-add"
(click)="deleteUser(user, i)"
>
Remove
</button>
</div>
</div>

<!-- <div class = "border-bottom"></div> -->
<p class="no-data" *ngIf="!isUsersLoading && dataSource.data.length === 0">
Nothing Here, There are no Members to show
</p>
Expand Down Expand Up @@ -428,7 +441,7 @@ <h2 mat-dialog-title>{{ getDialogTitle() }}</h2>
<input
matInput
formControlName="name"
placeholder="Enter user name"
placeholder="Enter member name"
[readonly]="isEditUser"
required
/>
Expand Down Expand Up @@ -483,7 +496,11 @@ <h2 mat-dialog-title>{{ getDialogTitle() }}</h2>
</mat-select>
</mat-form-field>

<mat-form-field appearance="outline" class="full-width" *ngIf="isEditUser">
<mat-form-field
appearance="outline"
class="full-width"
*ngIf="isEditUser && getAvailableAdditionalPermissions().length !== 0"
>
<mat-label>Additional Permissions</mat-label>
<mat-select
formControlName="permission"
Expand Down
42 changes: 40 additions & 2 deletions apps/proxy-auth/src/app/otp/user-management/user-management.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ body {
}
}
}
.w-35 {
width: 35%;
}
.item-container {
max-width: 900px;
}

.tab-content {
padding: 0;
Expand Down Expand Up @@ -166,6 +172,7 @@ body {
height: 100%;
width: 100%;
z-index: 10;
max-width: 2000px;
}

.dark-theme {
Expand Down Expand Up @@ -605,6 +612,8 @@ body {
}
}

// border-bottom: 1px solid #e0e0e0;

// Light theme styles - Clean list view
&.light-theme {
.user-item {
Expand Down Expand Up @@ -882,6 +891,35 @@ td {
background-color: #000000;
color: #ffffff;
}

// Edit button styles
.button-edit {
background-color: transparent !important;
}

.button-edit-light {
border: 1px solid #000000 !important;
color: #000000 !important;

&:hover {
background-color: rgba(0, 0, 0, 0.04) !important;
}
}

// Remove button styles
.button-remove {
background-color: transparent !important;
}

.button-remove-light {
border: 1px solid #dc3545 !important;
color: #dc3545 !important;

&:hover {
background-color: rgba(220, 53, 69, 0.04) !important;
}
}

.full-width {
width: 100%;
}
Expand Down Expand Up @@ -1098,7 +1136,7 @@ td {
}
// Fallback for all mat-select panels
.mat-select-panel {
min-width: 300px !important;
min-width: 350px !important;
}

.mat-option {
Expand All @@ -1120,7 +1158,7 @@ td {
.role-option-content {
display: flex;
flex-direction: column;
gap: 8px;
// gap: 2px;
padding: 4px 0;
width: 100%;
max-width: 100%;
Expand Down
Loading
Loading