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

   1 <cd-loading-panel *ngIf="!pwdExpirationSettings"
   2                   i18n>Loading...</cd-loading-panel>
   3
   4 <div class="cd-col-form">
   5   <form name="userForm"
   6         #formDir="ngForm"
   7         [formGroup]="userForm"
   8         *ngIf="pwdExpirationSettings"
   9         novalidate>
  10     <div class="card">
  11       <div i18n="form title|Example: Create Pool@@formTitle"
  12            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  13       <div class="card-body">
  14
  15         <!-- Username -->
  16         <div class="form-group row">
  17           <label class="cd-col-form-label"
  18                  [ngClass]="{'required': mode !== userFormMode.editing}"
  19                  for="username"
  20                  i18n>Username</label>
  21           <div class="cd-col-form-input">
  22             <input class="form-control"
  23                    type="text"
  24                    placeholder="Username..."
  25                    id="username"
  26                    name="username"
  27                    formControlName="username"
  28                    autocomplete="off"
  29                    autofocus>
  30             <span class="invalid-feedback"
  31                   *ngIf="userForm.showError('username', formDir, 'required')"
  32                   i18n>This field is required.</span>
  33             <span class="invalid-feedback"
  34                   *ngIf="userForm.showError('username', formDir, 'notUnique')"
  35                   i18n>The username already exists.</span>
  36           </div>
  37         </div>
  38
  39         <!-- Password -->
  40         <div class="form-group row"
  41              *ngIf="!authStorageService.isSSO()">
  42           <label class="cd-col-form-label"
  43                  for="password">
  44             <ng-container i18n>Password</ng-container>
  45             <cd-helper *ngIf="passwordPolicyHelpText.length > 0"
  46                        class="text-pre"
  47                        html="{{ passwordPolicyHelpText }}">
  48             </cd-helper>
  49           </label>
  50           <div class="cd-col-form-input">
  51             <div class="input-group">
  52               <input class="form-control"
  53                      type="password"
  54                      placeholder="Password..."
  55                      id="password"
  56                      name="password"
  57                      autocomplete="new-password"
  58                      formControlName="password">
  59               <span class="input-group-append">
  60                 <button type="button"
  61                         class="btn btn-light"
  62                         cdPasswordButton="password">
  63                 </button>
  64               </span>
  65             </div>
  66             <div class="password-strength-level">
  67               <div class="{{ passwordStrengthLevelClass }}"
  68                    data-toggle="tooltip"
  69                    title="{{ passwordValuation }}">
  70               </div>
  71             </div>
  72             <span class="invalid-feedback"
  73                   *ngIf="userForm.showError('password', formDir, 'required')"
  74                   i18n>This field is required.</span>
  75             <span class="invalid-feedback"
  76                   *ngIf="userForm.showError('password', formDir, 'passwordPolicy')">
  77               {{ passwordValuation }}
  78             </span>
  79           </div>
  80         </div>
  81
  82         <!-- Confirm password -->
  83         <div class="form-group row"
  84              *ngIf="!authStorageService.isSSO()">
  85           <label i18n
  86                  class="cd-col-form-label"
  87                  for="confirmpassword">Confirm password</label>
  88           <div class="cd-col-form-input">
  89             <div class="input-group">
  90               <input class="form-control"
  91                      type="password"
  92                      placeholder="Confirm password..."
  93                      id="confirmpassword"
  94                      name="confirmpassword"
  95                      autocomplete="new-password"
  96                      formControlName="confirmpassword">
  97               <span class="input-group-append">
  98                 <button type="button"
  99                         class="btn btn-light"
 100                         cdPasswordButton="confirmpassword">
 101                 </button>
 102               </span>
 103               <span class="invalid-feedback"
 104                     *ngIf="userForm.showError('confirmpassword', formDir, 'match')"
 105                     i18n>Password confirmation doesn't match the password.</span>
 106             </div>
 107             <span class="invalid-feedback"
 108                   *ngIf="userForm.showError('confirmpassword', formDir, 'required')"
 109                   i18n>This field is required.</span>
 110           </div>
 111         </div>
 112
 113         <!-- Password expiration date -->
 114         <div class="form-group row"
 115              *ngIf="!authStorageService.isSSO()">
 116           <label class="cd-col-form-label"
 117                  [ngClass]="{'required': pwdExpirationSettings.pwdExpirationSpan > 0}"
 118                  for="pwdExpirationDate">
 119             <ng-container i18n>Password expiration date</ng-container>
 120             <cd-helper class="text-pre"
 121                        *ngIf="pwdExpirationSettings.pwdExpirationSpan == 0">
 122               <p>
 123                 The Dashboard setting defining the expiration interval of
 124                 passwords is currently set to <strong>0</strong>. This means
 125                 if a date is set, the user password will only expire once.
 126               </p>
 127               <p>
 128                 Consider configuring the Dashboard setting
 129                 <a routerLink="/mgr-modules/edit/dashboard"
 130                    class="alert-link">USER_PWD_EXPIRATION_SPAN</a>
 131                 in order to let passwords expire periodically.
 132               </p>
 133             </cd-helper>
 134           </label>
 135           <div class="cd-col-form-input">
 136             <div class="input-group">
 137               <input type="text"
 138                      class="form-control"
 139                      i18n-placeholder
 140                      placeholder="Password expiration date..."
 141                      [bsConfig]="bsConfig"
 142                      [minDate]="minDate"
 143                      bsDatepicker
 144                      id="pwdExpirationDate"
 145                      name="pwdExpirationDate"
 146                      formControlName="pwdExpirationDate">
 147               <span class="input-group-append">
 148                 <button type="button"
 149                         class="btn btn-light"
 150                         (click)="clearExpirationDate()">
 151                   <i class="icon-prepend {{ icons.destroy }}"></i>
 152                 </button>
 153               </span>
 154               <span class="invalid-feedback"
 155                     *ngIf="userForm.showError('pwdExpirationDate', formDir, 'required')"
 156                     i18n>This field is required.</span>
 157             </div>
 158           </div>
 159         </div>
 160
 161         <!-- Name -->
 162         <div class="form-group row">
 163           <label i18n
 164                  class="cd-col-form-label"
 165                  for="name">Full name</label>
 166           <div class="cd-col-form-input">
 167             <input class="form-control"
 168                    type="text"
 169                    placeholder="Full name..."
 170                    id="name"
 171                    name="name"
 172                    formControlName="name">
 173           </div>
 174         </div>
 175
 176         <!-- Email -->
 177         <div class="form-group row">
 178           <label i18n
 179                  class="cd-col-form-label"
 180                  for="email">Email</label>
 181           <div class="cd-col-form-input">
 182             <input class="form-control"
 183                    type="email"
 184                    placeholder="Email..."
 185                    id="email"
 186                    name="email"
 187                    formControlName="email">
 188
 189             <span class="invalid-feedback"
 190                   *ngIf="userForm.showError('email', formDir, 'email')"
 191                   i18n>Invalid email.</span>
 192           </div>
 193         </div>
 194
 195         <!-- Roles -->
 196         <div class="form-group row">
 197           <label class="cd-col-form-label"
 198                  i18n>Roles</label>
 199           <div class="cd-col-form-input">
 200             <span class="no-border full-height"
 201                   *ngIf="allRoles">
 202               <cd-select-badges [data]="userForm.controls.roles.value"
 203                                 [options]="allRoles"
 204                                 [messages]="messages"></cd-select-badges>
 205             </span>
 206           </div>
 207         </div>
 208
 209         <!-- Enabled -->
 210         <div class="form-group row"
 211              *ngIf="!isCurrentUser()">
 212           <div class="cd-col-form-offset">
 213             <div class="custom-control custom-checkbox">
 214               <input type="checkbox"
 215                      class="custom-control-input"
 216                      id="enabled"
 217                      name="enabled"
 218                      formControlName="enabled">
 219               <label class="custom-control-label"
 220                      for="enabled"
 221                      i18n>Enabled</label>
 222             </div>
 223           </div>
 224         </div>
 225
 226         <!-- Force change password -->
 227         <div class="form-group row"
 228              *ngIf="!isCurrentUser() && !authStorageService.isSSO()">
 229           <div class="cd-col-form-offset">
 230             <div class="custom-control custom-checkbox">
 231               <input type="checkbox"
 232                      class="custom-control-input"
 233                      id="pwdUpdateRequired"
 234                      name="pwdUpdateRequired"
 235                      formControlName="pwdUpdateRequired">
 236               <label class="custom-control-label"
 237                      for="pwdUpdateRequired"
 238                      i18n>User must change password at next logon</label>
 239             </div>
 240           </div>
 241         </div>
 242
 243       </div>
 244       <div class="card-footer">
 245         <div class="button-group text-right">
 246           <cd-submit-button (submitAction)="submit()"
 247                             i18n="form action button|Example: Create Pool@@formActionButton"
 248                             [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 249           <cd-back-button></cd-back-button>
 250         </div>
 251       </div>
 252     </div>
 253   </form>
 254 </div>
 255
 256 <ng-template #removeSelfUserReadUpdatePermissionTpl>
 257   <p><strong i18n>You are about to remove "user read / update" permissions from your own user.</strong></p>
 258   <br>
 259   <p i18n>If you continue, you will no longer be able to add or remove roles from any user.</p>
 260
 261   <ng-container i18n>Are you sure you want to continue?</ng-container>
 262 </ng-template>