AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleanup edit user modal

Browse source
This commit is contained in:
Amelia 2025-07-01 23:32:57 +02:00
parent 9979220641
commit f868f5df91
No known key found for this signature in database
GPG key ID: D6D0ECE365407EAA
9 changed files with 51 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

35
UI/Web/src/app/admin/edit-user/edit-user.component.html
View file

@ -24,7 +24,18 @@
<form [formGroup]="userForm">
<h4>{{t('account-detail-title')}}</h4>
<div class="row g-0 mb-2">
<div class="col-md-6 col-sm-12 pe-4">
<div class="col-md-4 col-sm-12 pe-4">
@if (userForm.get('owner'); as formControl) {
<label for="owner" class="form-label">{{t('owner')}}</label>
<select class="form-select" id="owner" formControlName="owner">
@for (owner of UserOwners; track owner) {
<option [value]="owner">{{owner | userOwnerPipe}}</option>
}
</select>
<span class="text-muted">{{t('owner-tooltip')}}</span>
}
</div>
<div class="col-md-4 col-sm-12 pe-4">
@if(userForm.get('username'); as formControl) {
<div class="mb-3">
<label for="username" class="form-label">{{t('username')}}</label>
@ -46,7 +57,7 @@
</div>
}
</div>
<div class="col-md-6 col-sm-12">
<div class="col-md-4 col-sm-12">
@if(userForm.get('email'); as formControl) {
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">{{t('email')}}</label>
@ -72,26 +83,6 @@
</div>
}
</div>
<!-- TODO: Change move, idk, it's bad now -->
<div class="col-md-6 col-sm-12">
@if (userForm.get('owner'); as formControl) {
<app-setting-item [title]="t('owner')" [subtitle]="t('owner-tooltip')">
<ng-template #view>
<div>{{member().owner | userOwnerPipe}}</div>
</ng-template>
<ng-template #edit>
<select class="form-select" id="creationSource" formControlName="creationSource">
@for (source of UserOwners; track source) {
<option [value]="source">{{source | userOwnerPipe}}</option>
}
</select>
</ng-template>
</app-setting-item>
}
</div>
</div>
<div class="row g-0 mb-3">

3
UI/Web/src/app/admin/edit-user/edit-user.component.scss
View file

@ -0,0 +1,3 @@
.text-muted {
font-size: 12px;
}

3
UI/Web/src/app/admin/edit-user/edit-user.component.ts
View file

@ -28,6 +28,7 @@ import {ServerSettings} from "../_models/server-settings";
import {UserOwner, UserOwners} from "../../_models/user";
import {UserOwnerPipe} from "../../_pipes/user-owner.pipe";
import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
import {OwnerIconComponent} from "../../shared/_components/owner-icon/owner-icon.component";
const AllowedUsernameCharacters = /^[\sa-zA-Z0-9\-._@+/\s]*$/;
const EmailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@ -36,7 +37,7 @@ const EmailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.scss'],
imports: [ReactiveFormsModule, RoleSelectorComponent, LibrarySelectorComponent, RestrictionSelectorComponent, SentenceCasePipe, TranslocoDirective, AsyncPipe, UserOwnerPipe, SettingItemComponent],
imports: [ReactiveFormsModule, RoleSelectorComponent, LibrarySelectorComponent, RestrictionSelectorComponent, SentenceCasePipe, TranslocoDirective, AsyncPipe, UserOwnerPipe, SettingItemComponent, OwnerIconComponent],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditUserComponent implements OnInit {

9
UI/Web/src/app/admin/manage-users/manage-users.component.html
View file

@ -23,14 +23,7 @@
<tr>
<td>
<div class="-flex flex-row justify-content-center align-items-center">
@switch (member.owner) {
@case (UserOwner.OpenIdConnect) {
<img width="16" height="16" ngSrc="assets/icons/open-id-connect-logo.svg" alt="open-id-connect-logo">
}
@case (UserOwner.Native) {
<img ngSrc="assets/icons/favicon-16x16.png" height="16" width="16" alt="kavita-logo">
}
}
<app-owner-icon [owner]="member.owner" />
</div>
</td>
<td id="username--{{idx}}">

3
UI/Web/src/app/admin/manage-users/manage-users.component.ts
View file

@ -26,6 +26,7 @@ import {RoleLocalizedPipe} from "../../_pipes/role-localized.pipe";
import {SettingsService} from "../settings.service";
import {ServerSettings} from "../_models/server-settings";
import {UserOwner} from "../../_models/user";
import {OwnerIconComponent} from "../../shared/_components/owner-icon/owner-icon.component";
@Component({
selector: 'app-manage-users',
@ -34,7 +35,7 @@ import {UserOwner} from "../../_models/user";
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgbTooltip, TagBadgeComponent, AsyncPipe, TitleCasePipe, TranslocoModule, DefaultDatePipe, NgClass,
DefaultValuePipe, UtcToLocalTimePipe, LoadingComponent, TimeAgoPipe, SentenceCasePipe, UtcToLocaleDatePipe,
RoleLocalizedPipe, NgOptimizedImage]
RoleLocalizedPipe, NgOptimizedImage, OwnerIconComponent]
})
export class ManageUsersComponent implements OnInit {

9
UI/Web/src/app/shared/_components/owner-icon/owner-icon.component.html Normal file
View file

@ -0,0 +1,9 @@
@switch (owner()) {
@case (UserOwner.OpenIdConnect) {
<img [width]="size()" [height]="size()" ngSrc="assets/icons/open-id-connect-logo.svg" alt="open-id-connect-logo">
}
@case (UserOwner.Native) {
<!-- TODO: SVG for scaling -->
<img ngSrc="assets/icons/favicon-16x16.png" [width]="size()" [height]="size()" alt="kavita-logo">
}
}

0
UI/Web/src/app/shared/_components/owner-icon/owner-icon.component.scss Normal file
View file

19
UI/Web/src/app/shared/_components/owner-icon/owner-icon.component.ts Normal file
View file

@ -0,0 +1,19 @@
import {Component, input} from '@angular/core';
import {NgOptimizedImage} from "@angular/common";
import {UserOwner} from "../../../_models/user";
@Component({
selector: 'app-owner-icon',
imports: [
NgOptimizedImage
],
templateUrl: './owner-icon.component.html',
styleUrl: './owner-icon.component.scss'
})
export class OwnerIconComponent {
owner = input.required<UserOwner>();
size = input<number>(16);
protected readonly UserOwner = UserOwner;
}

4
UI/Web/src/assets/langs/en.json
View file

@ -80,8 +80,8 @@
"notice": "Warning!",
"out-of-sync": "This user was created via OIDC, if the SynUsers setting is turned on changes made may be lost",
"oidc-managed": "This user is managed via OIDC, contact your OIDC administrator if they require changes.",
"creationSource": "User type",
"creationSource-tooltip": "Native users will never be synced with OIDC"
"owner": "User type",
"owner-tooltip": "Native users will never be synced with OIDC"
},
"user-scrobble-history": {