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

<ng-container *transloco="let t; prefix: 'edit-user'">
  <div class="modal-container">
    <div class="modal-header">
      <h5 class="modal-title" id="modal-basic-title">{{t('edit')}} {{member().username | sentenceCase}}</h5>
      <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">

      </button>
    </div>

    <div class="modal-body scrollable-modal">

      @if (!isLocked() && member().identityProvider === IdentityProvider.OpenIdConnect) {
        <div class="alert alert-warning" role="alert">
          <strong>{{t('notice')}}</strong> {{t('out-of-sync')}}
        </div>
      }

      @if (isLocked()) {
        <div class="alert alert-warning" role="alert">
          <strong>{{t('notice')}}</strong> {{t('oidc-managed')}}
        </div>
      }

      <form [formGroup]="userForm">
        <h4>{{t('account-detail-title')}}</h4>
        <div class="row g-0 mb-2">
          <div class="col-md-4 col-sm-12 pe-4">
            @if (userForm.get('identityProvider'); as formControl) {
              <label for="identityProvider" class="form-label">{{t('identity-provider')}}</label>
              <select class="form-select" id="identityProvider" formControlName="identityProvider">
                @for (idp of IdentityProviders; track idp) {
                  <option [value]="idp">{{idp | identityProviderPipe}}</option>
                }
              </select>
              <span class="text-muted">{{t('identity-provider-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>
                  <input id="username" class="form-control" formControlName="username" type="text"
                      [class.is-invalid]="formControl.invalid && !formControl.untouched" aria-describedby="username-validations">
                  @if(formControl.dirty || !formControl.untouched) {
                    <div id="username-validations" class="invalid-feedback">
                      @if (formControl.errors; as errors) {
                        <div>
                          @if (errors.required) {
                            {{t('required')}}
                          } @else if (errors.pattern) {
                            {{t('username-pattern', {characters: allowedCharacters})}}
                          }
                        </div>
                      }
                    </div>
                  }
                </div>
              }
            </div>
          <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>
                  <input id="email" class="form-control" formControlName="email" type="text"
                         [class.is-invalid]="formControl.invalid && !formControl.untouched" aria-describedby="email-validations">
                  @if(formControl.dirty || !formControl.untouched) {
                    <div id="email-validations" class="invalid-feedback">
                      @if (formControl.errors; as errors) {
                        <div>
                          @if (errors.required) {
                            {{t('required')}}
                          } @else if (errors.email) {
                            {{t('not-valid-email')}}
                          }
                        </div>
                      }

                    </div>
                  }
                  @if (isEmailInvalid$ | async) {
                    <div class="invalid-feedback" style="display: block"><div>{{t('invalid-email-warning')}}</div></div>
                  }
                </div>
              }
            </div>
        </div>

        <div class="row g-0 mb-3">
          <div class="col-md-12">
            <app-restriction-selector (selected)="updateRestrictionSelection($event)" [isAdmin]="hasAdminRoleSelected" [member]="member()" />
          </div>
        </div>

          <div class="row g-0 mb-3">
            <div class="col-md-6 pe-4">
              <app-setting-multi-check-box
                id="libraries"
                [title]="t('libraries-label')"
                [options]="libraryOptions()"
                formControlName="libraries"
              />
            </div>

            <div class="col-md-6">
              <app-setting-multi-check-box
                id="roles"
                [title]="t('roles-label')"
                [warning]="(readOnlyWarning$ | async) ?? undefined"
                [options]="roleOptions"
                formControlName="roles"
              />
            </div>
          </div>
      </form>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="close()">
        {{t('cancel')}}
      </button>
      <button type="button" class="btn btn-primary" (click)="save()" [disabled]="isLocked() || isSaving || !userForm.valid">
        @if (isSaving) {
          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        }
        <span>{{isSaving ? t('saving') : t('update')}}</span>
      </button>
    </div>
  </div>
</ng-container>