127 lines
5.2 KiB
HTML
127 lines
5.2 KiB
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().owner === UserOwner.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-6 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-6 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>
|
|
|
|
<!-- 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">
|
|
<div class="col-md-12">
|
|
<app-restriction-selector (selected)="updateRestrictionSelection($event)" [isAdmin]="hasAdminRoleSelected" [member]="member()"></app-restriction-selector>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-0 mb-3">
|
|
<div class="col-md-6 pe-4">
|
|
<app-role-selector (selected)="updateRoleSelection($event)" [allowAdmin]="true" [member]="member()"></app-role-selector>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<app-library-selector (selected)="updateLibrarySelection($event)" [member]="member()"></app-library-selector>
|
|
</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>
|