ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div class="sp-dialog-container">
    <div class="sp-dialog-content">
        <div fxFlex="100" fxLayout="column" class="p-15">
            <sp-warning-box *ngIf="isUserAccount && isExternalProvider">
                Settings of externally-managed users cannot be changed.
            </sp-warning-box>
            <form [formGroup]="parentForm" fxFlex="100" fxLayout="column">
                <div class="general-options-panel" fxLayout="column">
                    <span class="general-options-header">Basics</span>
                    <mat-error *ngIf="registrationError">{{
                        registrationError
                    }}</mat-error>
                    <mat-form-field color="accent" *ngIf="!isUserAccount">
                        <mat-label>Username</mat-label>
                        <input
                            formControlName="username"
                            fxFlex
                            matInput
                            required
                        />
                    </mat-form-field>
                    <mat-form-field color="accent" *ngIf="isUserAccount">
                        <mat-label>Email</mat-label>
                        <input
                            formControlName="username"
                            fxFlex
                            type="email"
                            matInput
                            data-cy="new-user-email"
                        />
                        <mat-error>Must be a valid email address.</mat-error>
                    </mat-form-field>
                    <div class="email-changed" *ngIf="emailChanged">
                        Changing the current user's email will require a
                        re-login.
                    </div>
                    <mat-form-field color="accent" *ngIf="isUserAccount">
                        <mat-label>Full Name</mat-label>
                        <input
                            formControlName="fullName"
                            fxFlex
                            matInput
                            data-cy="new-user-full-name"
                        />
                    </mat-form-field>
                </div>
                <div
                    fxLayout="column"
                    class="general-options-panel"
                    *ngIf="!editMode && isUserAccount"
                >
                    <span class="general-options-header">Password</span>
                    <mat-checkbox
                        formControlName="sendPasswordToUser"
                        *ngIf="emailConfigured"
                        >Auto-create password and send to user</mat-checkbox
                    >
                    <mat-form-field color="accent" *ngIf="!sendPasswordToUser">
                        <mat-label>Initial password</mat-label>
                        <input
                            formControlName="password"
                            fxFlex
                            type="password"
                            matInput
                            required
                            data-cy="new-user-password"
                        />
                    </mat-form-field>
                    <mat-form-field color="accent" *ngIf="!sendPasswordToUser">
                        <mat-label>Repeat password</mat-label>
                        <input
                            formControlName="repeatPassword"
                            fxFlex
                            type="password"
                            matInput
                            required
                            data-cy="new-user-password-repeat"
                        />
                    </mat-form-field>
                    <mat-error *ngIf="parentForm.hasError('notMatching')"
                        >Passwords do not match.</mat-error
                    >
                </div>
                <div
                    fxLayout="column"
                    class="general-options-panel"
                    *ngIf="!isUserAccount"
                >
                    <span class="general-options-header">Authentication</span>
                    <mat-form-field color="accent">
                        <mat-label>Client Secret</mat-label>
                        <input
                            formControlName="clientSecret"
                            fxFlex
                            type="password"
                            matInput
                            required
                        />
                    </mat-form-field>
                    <mat-error *ngIf="parentForm.controls.clientSecret.errors"
                        >Minimum length 35 characters.</mat-error
                    >
                </div>
                <div fxLayout="column" class="general-options-panel">
                    <span class="general-options-header">Groups</span>
                    <mat-checkbox
                        *ngFor="let group of availableGroups"
                        [disabled]="
                            isExternalProvider && isExternallyManagedRoles
                        "
                        [value]="group.groupId"
                        [checked]="user.groups.indexOf(group.groupId) > -1"
                        (change)="changeGroupAssignment($event)"
                    >
                        {{ group.groupName }}
                    </mat-checkbox>
                </div>
                <div fxLayout="column" class="general-options-panel">
                    <span class="general-options-header">Roles</span>
                    <mat-checkbox
                        *ngFor="let role of availableRoles$ | async"
                        [value]="role.elementId"
                        [disabled]="
                            isExternalProvider && isExternallyManagedRoles
                        "
                        [checked]="user.roles.indexOf(role.elementId) > -1"
                        (change)="changeRoleAssignment($event)"
                        [attr.data-cy]="'role-' + role.elementId"
                    >
                        {{ role.label }}
                    </mat-checkbox>
                </div>
                @if (!isExternalProvider) {
                    <div fxLayout="column" class="general-options-panel">
                        <span class="general-options-header">Account</span>
                        <mat-checkbox
                            formControlName="accountEnabled"
                            data-cy="new-user-enabled"
                        >
                            Enabled
                        </mat-checkbox>
                        <mat-checkbox
                            formControlName="accountLocked"
                            data-cy="new-user-locked"
                        >
                            Locked
                        </mat-checkbox>
                    </div>
                }
            </form>
        </div>
    </div>
    <mat-divider></mat-divider>
    <div class="sp-dialog-actions">
        <div fxLayout="column">
            <div fxLayout="row">
                <button
                    mat-button
                    mat-raised-button
                    color="accent"
                    (click)="save()"
                    style="margin-right: 10px"
                    [disabled]="
                        parentForm.invalid ||
                        (isExternalProvider && isExternallyManagedRoles)
                    "
                    data-cy="sp-element-edit-user-save"
                >
                    <i class="material-icons">save</i><span>&nbsp;Save</span>
                </button>
                <button
                    mat-button
                    mat-raised-button
                    class="mat-basic"
                    (click)="close(false)"
                >
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>