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

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