git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 <div cdsCol
   2      [columnNumbers]="{md: 4}">
   3   <ng-container *cdFormLoading="loading">
   4     <form name="accountForm"
   5           #formDir="ngForm"
   6           [formGroup]="accountForm"
   7           novalidate>
   8
   9       <div i18n="form title"
  10            class="form-header">{{ action | titlecase }} {{ resource | upperFirst }}
  11       </div>
  12
  13       <!-- Account Name -->
  14       <div class="form-item">
  15         <cds-text-label label="Account Name"
  16                         for="acc_name"
  17                         cdRequiredField="Account Name"
  18                         [invalid]="!accountForm.controls.account_name.valid && accountForm.controls.account_name.dirty"
  19                         [invalidText]="accountIdError"
  20                         i18n>Account Name
  21           <input cdsText
  22                  type="text"
  23                  placeholder="Enter account name"
  24                  id="acc_name"
  25                  name="acc_name"
  26                  formControlName="account_name"/>
  27         </cds-text-label>
  28         <ng-template #accountIdError>
  29           <span *ngIf="accountForm.showError('account_name', formDir, 'required')"
  30                 class="invalid-feedback">
  31             <ng-container i18n>This field is required.</ng-container>
  32           </span>
  33         </ng-template>
  34       </div>
  35       <!-- Tenant -->
  36       <div class="form-item">
  37         <cds-text-label label="tenant"
  38                         for="tenant"
  39                         i18n>Tenant
  40           <input cdsText
  41                  type="text"
  42                  placeholder="Enter tenant"
  43                  id="tenant"
  44                  name="tenant"
  45                  formControlName="tenant"/>
  46         </cds-text-label>
  47       </div>
  48
  49       <!-- Email -->
  50       <div class="form-item">
  51         <cds-text-label label="email"
  52                         for="email"
  53                         [invalid]="!accountForm.controls.email.valid && accountForm.controls.email.dirty"
  54                         [invalidText]="emailError"
  55                         i18n>Email
  56           <input cdsText
  57                  type="text"
  58                  placeholder="Enter email"
  59                  id="email"
  60                  name="email"
  61                  formControlName="email"/>
  62         </cds-text-label>
  63         <ng-template #emailError>
  64           <span *ngIf="accountForm.showError('email', formDir, 'email')">
  65             <ng-container i18n> Please enter a valid email </ng-container>
  66           </span>
  67         </ng-template>
  68       </div>
  69
  70       <div class="form-item form-item-append"
  71            cdsRow>
  72         <div cdsCol>
  73           <!-- Max. bucket mode -->
  74           <ng-container *ngTemplateOutlet="selectModeTemplate;context: { formControl: 'max_buckets_mode' }"></ng-container>
  75         </div>
  76         <div cdsCol>
  77         <!-- Max buckets -->
  78         <span *ngIf="1 == accountForm.get('max_buckets_mode').value">
  79           <ng-container *ngTemplateOutlet="accountMaxValueTemplate;context: { formControl: 'max_buckets' }"></ng-container>
  80           </span>
  81         </div>
  82       </div>
  83
  84       <div class="form-item form-item-append"
  85            cdsRow>
  86         <div cdsCol>
  87           <!-- Max. users mode -->
  88           <ng-container *ngTemplateOutlet="selectModeTemplate;context: { formControl: 'max_users_mode' }"></ng-container>
  89         </div>
  90         <div cdsCol>
  91         <!-- Max users -->
  92         <span *ngIf="1 == accountForm.get('max_users_mode').value">
  93           <ng-container *ngTemplateOutlet="accountMaxValueTemplate;context: { formControl: 'max_users' }"></ng-container>
  94           </span>
  95         </div>
  96       </div>
  97
  98       <div class="form-item form-item-append"
  99            cdsRow>
 100         <div cdsCol>
 101           <!-- Max. roles mode -->
 102           <ng-container *ngTemplateOutlet="selectModeTemplate;context: { formControl: 'max_roles_mode' }"></ng-container>
 103         </div>
 104         <div cdsCol>
 105         <!-- Max roles -->
 106         <span *ngIf="1 == accountForm.get('max_roles_mode').value">
 107           <ng-container *ngTemplateOutlet="accountMaxValueTemplate;context: { formControl: 'max_roles' }"></ng-container>
 108         </span>
 109         </div>
 110       </div>
 111
 112       <div class="form-item form-item-append"
 113            cdsRow>
 114         <div cdsCol>
 115           <!-- Max. group mode -->
 116           <ng-container *ngTemplateOutlet="selectModeTemplate;context: { formControl: 'max_group_mode' }"></ng-container>
 117         </div>
 118         <div cdsCol>
 119         <!-- Max group -->
 120         <span *ngIf="1 == accountForm.get('max_group_mode').value">
 121           <ng-container *ngTemplateOutlet="accountMaxValueTemplate;context: { formControl: 'max_group' }"></ng-container>
 122           </span>
 123         </div>
 124       </div>
 125
 126       <div class="form-item form-item-append"
 127            cdsRow>
 128         <div cdsCol>
 129           <!-- Max. acess keys mode -->
 130           <ng-container *ngTemplateOutlet="selectModeTemplate;context: { formControl: 'max_access_keys_mode' }"></ng-container>
 131         </div>
 132         <div cdsCol>
 133         <!-- Max acess keys -->
 134         <span *ngIf="1 == accountForm.get('max_access_keys_mode').value">
 135           <ng-container *ngTemplateOutlet="accountMaxValueTemplate;context: { formControl: 'max_access_keys' }"></ng-container>
 136         </span>
 137         </div>
 138       </div>
 139
 140       <!-- Account Quota -->
 141       <div class="form-item">
 142         <ng-container *ngTemplateOutlet="quotaTemplate;context: { formControl: {
 143                       enabled: 'account_quota_enabled',
 144                       unlimitedSize: 'account_quota_max_size_unlimited',
 145                       maxSize: 'account_quota_max_size',
 146                       unlimitedObjects: 'account_quota_max_objects_unlimited',
 147                       maxObjects: 'account_quota_max_objects'
 148                       },
 149                       quotaType: 'account'
 150                       }">
 151         </ng-container>
 152       </div>
 153
 154       <!-- Bucket Quota -->
 155       <div class="form-item">
 156         <ng-container *ngTemplateOutlet="quotaTemplate;
 157                       context: {
 158                       formControl: {
 159                       enabled: 'bucket_quota_enabled',
 160                       unlimitedSize: 'bucket_quota_max_size_unlimited',
 161                       maxSize: 'bucket_quota_max_size',
 162                       unlimitedObjects: 'bucket_quota_max_objects_unlimited',
 163                       maxObjects: 'bucket_quota_max_objects'
 164                       },
 165                       quotaType: 'bucket'
 166                       }">
 167         </ng-container>
 168       </div>
 169       <cd-form-button-panel (submitActionEvent)="submit()"
 170                             [form]="formDir"
 171                             [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 172                             wrappingClass="text-right"></cd-form-button-panel>
 173
 174     </form>
 175   </ng-container>
 176 </div>
 177
 178 <ng-template #selectModeTemplate
 179              [formGroup]="accountForm"
 180              let-formControl="formControl">
 181   <cds-select [formControlName]="formControl"
 182               [name]="formControl"
 183               [id]="formControl"
 184               label="{{formControl.split('_')[1] | upperFirst}} Mode"
 185               (change)="onModeChange($event.target.value, formControl)">
 186     <option value="-1">Disabled</option>
 187     <option value="0">Unlimited</option>
 188     <option value="1">Custom</option>
 189   </cds-select>
 190 </ng-template>
 191
 192 <ng-template #accountMaxValueTemplate
 193              let-formControl="formControl"
 194              [formGroup]="accountForm">
 195 <cds-number [id]="formControl"
 196             [name]="formControl"
 197             formControlName="{{formControl}}"
 198             label="{{formControl.split('_')[0] | upperFirst}}. {{formControl.split('_').length > 2 ? formControl.split('_')[1]+' '+formControl.split('_')[2]: formControl.split('_')[1]}}"
 199             [min]="1"
 200             [invalid]="!accountForm.controls[formControl].valid && accountForm.controls[formControl].dirty"
 201             [invalidText]="maxValError"></cds-number>
 202 <ng-template #maxValError>
 203   <span *ngIf="accountForm.showError(formControl, formDir, 'required')"
 204         i18n>This field is required.</span>
 205   <span *ngIf="accountForm.showError(formControl, formDir, 'pattern')"
 206         i18n>The entered value must be a number greater than 0</span>
 207 </ng-template>
 208 </ng-template>
 209
 210 <ng-template #quotaTemplate
 211              let-quotaType="quotaType"
 212              let-formControl="formControl"
 213              [formGroup]="accountForm">
 214   <fieldset class="cds--fieldset">
 215     <legend class="cds--label">{{quotaType | upperFirst}} Quota</legend>
 216     <!-- Enabled -->
 217     <cds-checkbox [formControlName]="formControl.enabled">
 218       Enabled
 219     </cds-checkbox >
 220     <!-- Unlimited size -->
 221     <cds-checkbox *ngIf="accountForm.controls[formControl.enabled].value"
 222                   [formControlName]="formControl.unlimitedSize">
 223                   Unlimited size
 224     </cds-checkbox>
 225     <!-- Maximum size -->
 226     <div class="form-item"
 227          *ngIf="accountForm.controls[formControl.enabled].value && !accountForm.getValue(formControl.unlimitedSize)">
 228       <cds-text-label [label]="formControl.maxSize"
 229                       [for]="formControl.maxSize"
 230                       [invalid]="!accountForm.controls[formControl.maxSize].valid && accountForm.controls[formControl.maxSize].dirty"
 231                       [invalidText]="quotaSizeError"
 232                       i18n>Max. size
 233         <input cdsText
 234                type="text"
 235                placeholder="Enter size"
 236                [id]="formControl.maxSize"
 237                [name]="formControl.maxSize"
 238                [formControlName]="formControl.maxSize"
 239                cdDimlessBinary/>
 240       </cds-text-label>
 241       <ng-template #quotaSizeError>
 242         <span *ngIf="accountForm.showError(formControl.maxSize, formDir, 'required')"
 243               i18n>This field is required.</span>
 244         <span *ngIf="accountForm.showError(formControl.maxSize, formDir, 'quotaMaxSize')"
 245               i18n>The value is not valid.</span>
 246         <span *ngIf="accountForm.showError(formControl.maxSize, formDir, 'pattern')"
 247               i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
 248       </ng-template>
 249     </div>
 250     <!-- Unlimited objects -->
 251     <cds-checkbox *ngIf="accountForm.controls[formControl.enabled].value"
 252                   [formControlName]="formControl.unlimitedObjects">
 253                   Unlimited objects
 254     </cds-checkbox>
 255   <!-- Maximum objects -->
 256     <div class="form-item"
 257          *ngIf="accountForm.controls[formControl.enabled].value && !accountForm.getValue(formControl.unlimitedObjects)">
 258       <cds-text-label [label]="formControl.maxObjects"
 259                       [for]="formControl.maxObjects"
 260                       [invalid]="!accountForm.controls[formControl.maxObjects].valid && accountForm.controls[formControl.maxObjects].dirty"
 261                       [invalidText]="quotaObjectError"
 262                       i18n>Max. objects
 263         <input cdsText
 264                type="number"
 265                placeholder="Enter number of objects"
 266                [id]="formControl.maxObjects"
 267                [name]="formControl.maxObjects"
 268                [formControlName]="formControl.maxObjects"/>
 269       </cds-text-label>
 270       <ng-template #quotaObjectError>
 271         <span *ngIf="accountForm.showError(formControl.maxObjects, formDir, 'required')"
 272               i18n>This field is required.</span>
 273         <span *ngIf="accountForm.showError(formControl.maxObjects, formDir, 'pattern')"
 274               i18n>Please enter a valid number</span>
 275       </ng-template>
 276     </div>
 277   </fieldset>
 278 </ng-template>