import 15.2.0 Octopus source

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / core / auth / user-form / user-form.component.html

<cd-loading-panel *ngIf="!pwdExpirationSettings"
                  i18n>Loading...</cd-loading-panel>

<div class="cd-col-form">
  <form name="userForm"
        #formDir="ngForm"
        [formGroup]="userForm"
        *ngIf="pwdExpirationSettings"
        novalidate>
    <div class="card">
      <div i18n="form title|Example: Create Pool@@formTitle"
           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
      <div class="card-body">

        <!-- Username -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 [ngClass]="{'required': mode !== userFormMode.editing}"
                 for="username"
                 i18n>Username</label>
          <div class="cd-col-form-input">
            <input class="form-control"
                   type="text"
                   placeholder="Username..."
                   id="username"
                   name="username"
                   formControlName="username"
                   autofocus>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('username', formDir, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Password -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 for="password">
            <ng-container i18n>Password</ng-container>
            <cd-helper *ngIf="passwordPolicyHelpText.length > 0"
                       class="text-pre"
                       html="{{ passwordPolicyHelpText }}">
            </cd-helper>
          </label>
          <div class="cd-col-form-input">
            <div class="input-group">
              <input class="form-control"
                     type="password"
                     placeholder="Password..."
                     id="password"
                     name="password"
                     autocomplete="new-password"
                     formControlName="password">
              <span class="input-group-append">
                <button type="button"
                        class="btn btn-light"
                        cdPasswordButton="password">
                </button>
              </span>
            </div>
            <div class="password-strength-level">
              <div class="{{ passwordStrengthLevelClass }}"
                   data-toggle="tooltip"
                   title="{{ passwordValuation }}">
              </div>
            </div>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('password', formDir, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('password', formDir, 'passwordPolicy')">
              {{ passwordValuation }}
            </span>
          </div>
        </div>

        <!-- Confirm password -->
        <div class="form-group row">
          <label i18n
                 class="cd-col-form-label"
                 for="confirmpassword">Confirm password</label>
          <div class="cd-col-form-input">
            <div class="input-group">
              <input class="form-control"
                     type="password"
                     placeholder="Confirm password..."
                     id="confirmpassword"
                     name="confirmpassword"
                     formControlName="confirmpassword">
              <span class="input-group-append">
                <button type="button"
                        class="btn btn-light"
                        cdPasswordButton="confirmpassword">
                </button>
              </span>
            </div>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('confirmpassword', formDir, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('confirmpassword', formDir, 'match')"
                  i18n>Password confirmation doesn't match the password.</span>
          </div>
        </div>

        <!-- Password expiration date -->
        <div class="form-group row"
             *ngIf="!authStorageService.isSSO()">
          <label class="cd-col-form-label"
                 [ngClass]="{'required': pwdExpirationSettings.pwdExpirationSpan > 0}"
                 for="pwdExpirationDate">
            <ng-container i18n>Password expiration date</ng-container>
            <cd-helper class="text-pre"
                       *ngIf="pwdExpirationSettings.pwdExpirationSpan == 0">
              <p>
                The Dashboard setting defining the expiration interval of
                passwords is currently set to <strong>0</strong>. This means
                if a date is set, the user password will only expire once.
              </p>
              <p>
                Consider configuring the Dashboard setting
                <a routerLink="/mgr-modules/edit/dashboard"
                   class="alert-link">USER_PWD_EXPIRATION_SPAN</a>
                in order to let passwords expire periodically.
              </p>
            </cd-helper>
          </label>
          <div class="cd-col-form-input">
            <div class="input-group">
              <input type="text"
                     class="form-control"
                     i18n-placeholder
                     placeholder="Password expiration date..."
                     [bsConfig]="bsConfig"
                     [minDate]="minDate"
                     bsDatepicker
                     id="pwdExpirationDate"
                     name="pwdExpirationDate"
                     formControlName="pwdExpirationDate">
              <span class="input-group-append">
                <button type="button"
                        class="btn btn-light"
                        (click)="clearExpirationDate()">
                  <i class="icon-prepend {{ icons.destroy }}"></i>
                </button>
              </span>
              <span class="invalid-feedback"
                    *ngIf="userForm.showError('pwdExpirationDate', formDir, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </div>

        <!-- Name -->
        <div class="form-group row">
          <label i18n
                 class="cd-col-form-label"
                 for="name">Full name</label>
          <div class="cd-col-form-input">
            <input class="form-control"
                   type="text"
                   placeholder="Full name..."
                   id="name"
                   name="name"
                   formControlName="name">
          </div>
        </div>

        <!-- Email -->
        <div class="form-group row">
          <label i18n
                 class="cd-col-form-label"
                 for="email">Email</label>
          <div class="cd-col-form-input">
            <input class="form-control"
                   type="email"
                   placeholder="Email..."
                   id="email"
                   name="email"
                   formControlName="email">

            <span class="invalid-feedback"
                  *ngIf="userForm.showError('email', formDir, 'email')"
                  i18n>Invalid email.</span>
          </div>
        </div>

        <!-- Roles -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 i18n>Roles</label>
          <div class="cd-col-form-input">
            <span class="no-border full-height"
                  *ngIf="allRoles">
              <cd-select-badges [data]="userForm.controls.roles.value"
                                [options]="allRoles"
                                [messages]="messages"></cd-select-badges>
            </span>
          </div>
        </div>

        <!-- Enabled -->
        <div class="form-group row"
             *ngIf="!isCurrentUser()">
          <div class="cd-col-form-offset">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     id="enabled"
                     name="enabled"
                     formControlName="enabled">
              <label class="custom-control-label"
                     for="enabled"
                     i18n>Enabled</label>
            </div>
          </div>
        </div>

        <!-- Force change password -->
        <div class="form-group row"
             *ngIf="!isCurrentUser() && !authStorageService.isSSO()">
          <div class="cd-col-form-offset">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     id="pwdUpdateRequired"
                     name="pwdUpdateRequired"
                     formControlName="pwdUpdateRequired">
              <label class="custom-control-label"
                     for="pwdUpdateRequired"
                     i18n>User must change password at next logon</label>
            </div>
          </div>
        </div>

      </div>
      <div class="card-footer">
        <div class="button-group text-right">
          <cd-submit-button (submitAction)="submit()"
                            i18n="form action button|Example: Create Pool@@formActionButton"
                            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
          <cd-back-button></cd-back-button>
        </div>
      </div>
    </div>
  </form>
</div>

<ng-template #removeSelfUserReadUpdatePermissionTpl>
  <p><strong i18n>You are about to remove "user read / update" permissions from your own user.</strong></p>
  <br>
  <p i18n>If you continue, you will no longer be able to add or remove roles from any user.</p>

  <ng-container i18n>Are you sure you want to continue?</ng-container>
</ng-template>