Cleanup edit user modal

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

@@ -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">

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

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

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

@@ -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 {

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

@@ -23,14 +23,7 @@
         <tr>
           <td>
             <div class="-flex flex-row justify-content-center align-items-center">
-              @switch (member.owner) {
+              <app-owner-icon [owner]="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">
-                }
-              }
             </div>
           </td>
           <td id="username--{{idx}}">

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

@@ -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 {
 

UI/Web/src/app/shared/_components/owner-icon/owner-icon.component.html

@@ -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">
+  }
+}

UI/Web/src/app/shared/_components/owner-icon/owner-icon.component.ts

@@ -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;
+}

UI/Web/src/assets/langs/en.json

@@ -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",
+        "owner": "User type",
-        "creationSource-tooltip": "Native users will never be synced with OIDC"
+        "owner-tooltip": "Native users will never be synced with OIDC"
     },
 
     "user-scrobble-history": {