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

   1 <div class="cd-col-form"
   2      *cdFormLoading="loading">
   3   <form #frm="ngForm"
   4         [formGroup]="userForm"
   5         novalidate>
   6     <div class="card">
   7       <div i18n="form title|Example: Create Pool@@formTitle"
   8            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
   9
  10       <div class="card-body">
  11         <!-- User ID -->
  12         <div class="form-group row">
  13           <label class="cd-col-form-label"
  14                  [ngClass]="{'required': !editing}"
  15                  for="user_id"
  16                  i18n>User ID</label>
  17           <div class="cd-col-form-input">
  18             <input id="user_id"
  19                    class="form-control"
  20                    type="text"
  21                    formControlName="user_id"
  22                    [readonly]="editing">
  23               <span class="invalid-feedback"
  24                     *ngIf="userForm.showError('user_id', frm, 'required')"
  25                     i18n>This field is required.</span>
  26             <span class="invalid-feedback"
  27                   *ngIf="userForm.showError('user_id', frm, 'pattern')"
  28                   i18n>The value is not valid.</span>
  29             <span class="invalid-feedback"
  30                   *ngIf="!userForm.getValue('show_tenant') && userForm.showError('user_id', frm, 'notUnique')"
  31                   i18n>The chosen user ID is already in use.</span>
  32           </div>
  33         </div>
  34
  35           <!-- Show Tenant -->
  36           <div class="form-group row">
  37             <div class="cd-col-form-offset">
  38               <div class="custom-control custom-checkbox">
  39                 <input class="custom-control-input"
  40                        id="show_tenant"
  41                        type="checkbox"
  42                        (click)="updateFieldsWhenTenanted()"
  43                        formControlName="show_tenant"
  44                        [readonly]="true">
  45                 <label class="custom-control-label"
  46                        for="show_tenant"
  47                        i18n>Show Tenant</label>
  48               </div>
  49             </div>
  50           </div>
  51
  52         <!-- Tenant -->
  53         <div class="form-group row"
  54              *ngIf="userForm.getValue('show_tenant')">
  55           <label class="cd-col-form-label"
  56                  for="tenant"
  57                  i18n>Tenant</label>
  58           <div class="cd-col-form-input">
  59             <input id="tenant"
  60                    class="form-control"
  61                    type="text"
  62                    formControlName="tenant"
  63                    [readonly]="editing"
  64                    autofocus>
  65             <span class="invalid-feedback"
  66                   *ngIf="userForm.showError('tenant', frm, 'pattern')"
  67                   i18n>The value is not valid.</span>
  68             <span class="invalid-feedback"
  69                   *ngIf="userForm.showError('tenant', frm, 'notUnique')"
  70                   i18n>The chosen user ID exists in this tenant.</span>
  71           </div>
  72         </div>
  73
  74         <!-- Full name -->
  75         <div class="form-group row">
  76           <label class="cd-col-form-label"
  77                  [ngClass]="{'required': !editing}"
  78                  for="display_name"
  79                  i18n>Full name</label>
  80           <div class="cd-col-form-input">
  81             <input id="display_name"
  82                    class="form-control"
  83                    type="text"
  84                    formControlName="display_name">
  85             <span class="invalid-feedback"
  86                   *ngIf="userForm.showError('display_name', frm, 'required')"
  87                   i18n>This field is required.</span>
  88           </div>
  89         </div>
  90
  91         <!-- Email address -->
  92         <div class="form-group row">
  93           <label class="cd-col-form-label"
  94                  for="email"
  95                  i18n>Email address</label>
  96           <div class="cd-col-form-input">
  97             <input id="email"
  98                    class="form-control"
  99                    type="text"
 100                    formControlName="email">
 101             <span class="invalid-feedback"
 102                   *ngIf="userForm.showError('email', frm, 'email')"
 103                   i18n>This is not a valid email address.</span>
 104             <span class="invalid-feedback"
 105                   *ngIf="userForm.showError('email', frm, 'notUnique')"
 106                   i18n>The chosen email address is already in use.</span>
 107           </div>
 108         </div>
 109
 110         <!-- Max. buckets -->
 111         <div class="form-group row">
 112           <label class="cd-col-form-label"
 113                  for="max_buckets_mode"
 114                  i18n>Max. buckets</label>
 115           <div class="cd-col-form-input">
 116             <select class="form-control custom-select"
 117                     formControlName="max_buckets_mode"
 118                     name="max_buckets_mode"
 119                     id="max_buckets_mode"
 120                     (change)="onMaxBucketsModeChange($event.target.value)">
 121               <option i18n
 122                       value="-1">Disabled</option>
 123               <option i18n
 124                       value="0">Unlimited</option>
 125               <option i18n
 126                       value="1">Custom</option>
 127             </select>
 128           </div>
 129         </div>
 130         <div *ngIf="1 == userForm.get('max_buckets_mode').value"
 131              class="form-group row">
 132           <label class="cd-col-form-label"></label>
 133           <div class="cd-col-form-input">
 134             <input id="max_buckets"
 135                    class="form-control"
 136                    type="number"
 137                    formControlName="max_buckets"
 138                    min="1">
 139             <span class="invalid-feedback"
 140                   *ngIf="userForm.showError('max_buckets', frm, 'required')"
 141                   i18n>This field is required.</span>
 142             <span class="invalid-feedback"
 143                   *ngIf="userForm.showError('max_buckets', frm, 'min')"
 144                   i18n>The entered value must be >= 1.</span>
 145           </div>
 146         </div>
 147
 148         <!-- Suspended -->
 149         <div class="form-group row">
 150           <div class="cd-col-form-offset">
 151             <div class="custom-control custom-checkbox">
 152               <input class="custom-control-input"
 153                      id="suspended"
 154                      type="checkbox"
 155                      formControlName="suspended">
 156               <label class="custom-control-label"
 157                      for="suspended"
 158                      i18n>Suspended</label>
 159             </div>
 160           </div>
 161         </div>
 162
 163         <!-- S3 key -->
 164         <fieldset *ngIf="!editing">
 165           <legend i18n>S3 key</legend>
 166
 167           <!-- Auto-generate key -->
 168           <div class="form-group row">
 169             <div class="cd-col-form-offset">
 170               <div class="custom-control custom-checkbox">
 171                 <input class="custom-control-input"
 172                        id="generate_key"
 173                        type="checkbox"
 174                        formControlName="generate_key">
 175                 <label class="custom-control-label"
 176                        for="generate_key"
 177                        i18n>Auto-generate key</label>
 178               </div>
 179             </div>
 180           </div>
 181
 182           <!-- Access key -->
 183           <div class="form-group row"
 184                *ngIf="!editing && !userForm.getValue('generate_key')">
 185             <label class="cd-col-form-label required"
 186                    for="access_key"
 187                    i18n>Access key</label>
 188             <div class="cd-col-form-input">
 189               <div class="input-group">
 190                 <input id="access_key"
 191                        class="form-control"
 192                        type="password"
 193                        formControlName="access_key">
 194                 <span class="input-group-append">
 195                   <button type="button"
 196                           class="btn btn-light"
 197                           cdPasswordButton="access_key">
 198                   </button>
 199                   <cd-copy-2-clipboard-button source="access_key">
 200                   </cd-copy-2-clipboard-button>
 201                 </span>
 202               </div>
 203               <span class="invalid-feedback"
 204                     *ngIf="userForm.showError('access_key', frm, 'required')"
 205                     i18n>This field is required.</span>
 206             </div>
 207           </div>
 208
 209           <!-- Secret key -->
 210           <div class="form-group row"
 211                *ngIf="!editing && !userForm.getValue('generate_key')">
 212             <label class="cd-col-form-label required"
 213                    for="secret_key"
 214                    i18n>Secret key</label>
 215             <div class="cd-col-form-input">
 216               <div class="input-group">
 217                 <input id="secret_key"
 218                        class="form-control"
 219                        type="password"
 220                        formControlName="secret_key">
 221                 <span class="input-group-append">
 222                   <button type="button"
 223                           class="btn btn-light"
 224                           cdPasswordButton="secret_key">
 225                   </button>
 226                   <cd-copy-2-clipboard-button source="secret_key">
 227                   </cd-copy-2-clipboard-button>
 228                 </span>
 229               </div>
 230               <span class="invalid-feedback"
 231                     *ngIf="userForm.showError('secret_key', frm, 'required')"
 232                     i18n>This field is required.</span>
 233             </div>
 234           </div>
 235         </fieldset>
 236
 237         <!-- Subusers -->
 238         <fieldset *ngIf="editing">
 239           <legend i18n>Subusers</legend>
 240           <div class="row">
 241             <div class="cd-col-form-offset">
 242               <span *ngIf="subusers.length === 0"
 243                     class="no-border">
 244                 <span class="form-text text-muted"
 245                       i18n>There are no subusers.</span>
 246               </span>
 247
 248               <span *ngFor="let subuser of subusers; let i=index;">
 249                 <div class="input-group">
 250                   <div class="input-group-prepend">
 251                     <span class="input-group-text">
 252                       <i class="{{ icons.user }}"></i>
 253                     </span>
 254                   </div>
 255                   <input type="text"
 256                          class="cd-form-control"
 257                          value="{{ subuser.id }}"
 258                          readonly>
 259                   <div class="input-group-prepend border-left-0 border-right-0">
 260                     <span class="input-group-text">
 261                       <i class="{{ icons.share }}"></i>
 262                     </span>
 263                   </div>
 264                   <input type="text"
 265                          class="cd-form-control"
 266                          value="{{ ('full-control' === subuser.permissions) ? 'full' : subuser.permissions }}"
 267                          readonly>
 268                   <span class="input-group-append">
 269                     <button type="button"
 270                             class="btn btn-light tc_showSubuserButton"
 271                             i18n-ngbTooltip
 272                             ngbTooltip="Edit"
 273                             (click)="showSubuserModal(i)">
 274                       <i [ngClass]="[icons.edit]"></i>
 275                     </button>
 276                     <button type="button"
 277                             class="btn btn-light tc_deleteSubuserButton"
 278                             i18n-ngbTooltip
 279                             ngbTooltip="Delete"
 280                             (click)="deleteSubuser(i)">
 281                       <i [ngClass]="[icons.destroy]"></i>
 282                     </button>
 283                   </span>
 284                 </div>
 285                 <span class="form-text text-muted"></span>
 286               </span>
 287
 288               <div class="row">
 289                 <div class="col-12">
 290                   <button type="button"
 291                           class="btn btn-light float-right tc_addSubuserButton"
 292                           (click)="showSubuserModal()">
 293                     <i [ngClass]="[icons.add]"></i>
 294                     <ng-container i18n>{{ actionLabels.CREATE | titlecase }}
 295                       {{ subuserLabel | upperFirst }}</ng-container>
 296                   </button>
 297                 </div>
 298               </div>
 299               <span class="help-block"></span>
 300             </div>
 301           </div>
 302         </fieldset>
 303
 304         <!-- Keys -->
 305         <fieldset *ngIf="editing">
 306           <legend i18n>Keys</legend>
 307
 308           <!-- S3 keys -->
 309           <div class="form-group row">
 310             <label class="cd-col-form-label"
 311                    i18n>S3</label>
 312             <div class="cd-col-form-input">
 313               <span *ngIf="s3Keys.length === 0"
 314                     class="no-border">
 315                 <span class="form-text text-muted"
 316                       i18n>There are no keys.</span>
 317               </span>
 318
 319               <span *ngFor="let key of s3Keys; let i=index;">
 320                 <div class="input-group">
 321                   <div class="input-group-prepend">
 322                     <div class="input-group-text">
 323                       <i class="{{ icons.key }}"></i>
 324                     </div>
 325                   </div>
 326                   <input type="text"
 327                          class="cd-form-control"
 328                          value="{{ key.user }}"
 329                          readonly>
 330                   <span class="input-group-append">
 331                     <button type="button"
 332                             class="btn btn-light tc_showS3KeyButton"
 333                             i18n-ngbTooltip
 334                             ngbTooltip="Show"
 335                             (click)="showS3KeyModal(i)">
 336                       <i [ngClass]="[icons.show]"></i>
 337                     </button>
 338                     <button type="button"
 339                             class="btn btn-light tc_deleteS3KeyButton"
 340                             i18n-ngbTooltip
 341                             ngbTooltip="Delete"
 342                             (click)="deleteS3Key(i)">
 343                       <i [ngClass]="[icons.destroy]"></i>
 344                     </button>
 345                   </span>
 346                 </div>
 347                 <span class="form-text text-muted"></span>
 348               </span>
 349
 350               <div class="row">
 351                 <div class="col-12">
 352                   <button type="button"
 353                           class="btn btn-light float-right tc_addS3KeyButton"
 354                           (click)="showS3KeyModal()">
 355                     <i [ngClass]="[icons.add]"></i>
 356                     <ng-container i18n>{{ actionLabels.CREATE | titlecase }}
 357                       {{ s3keyLabel | upperFirst }}</ng-container>
 358                   </button>
 359                 </div>
 360               </div>
 361
 362               <span class="help-block"></span>
 363             </div>
 364
 365             <hr>
 366           </div>
 367
 368           <!-- Swift keys -->
 369           <div class="form-group row">
 370             <label class="cd-col-form-label"
 371                    i18n>Swift</label>
 372
 373             <div class="cd-col-form-input">
 374               <span *ngIf="swiftKeys.length === 0"
 375                     class="no-border">
 376                 <span class="form-text text-muted"
 377                       i18n>There are no keys.</span>
 378               </span>
 379
 380               <span *ngFor="let key of swiftKeys; let i=index;">
 381                 <div class="input-group">
 382                   <div class="input-group-prepend">
 383                     <span class="input-group-text">
 384                       <i class="{{ icons.key }}"></i>
 385                     </span>
 386                   </div>
 387                   <input type="text"
 388                          class="cd-form-control"
 389                          value="{{ key.user }}"
 390                          readonly>
 391                   <span class="input-group-append">
 392                     <button type="button"
 393                             class="btn btn-light tc_showSwiftKeyButton"
 394                             i18n-ngbTooltip
 395                             ngbTooltip="Show"
 396                             (click)="showSwiftKeyModal(i)">
 397                       <i [ngClass]="[icons.show]"></i>
 398                     </button>
 399                   </span>
 400                 </div>
 401                 <span class="form-text text-muted"></span>
 402               </span>
 403             </div>
 404           </div>
 405         </fieldset>
 406
 407         <!-- Capabilities -->
 408         <fieldset *ngIf="editing">
 409           <legend i18n>Capabilities</legend>
 410
 411           <div class="form-group row">
 412             <div class="cd-col-form-offset">
 413               <span *ngIf="capabilities.length === 0"
 414                     class="no-border">
 415                 <span class="form-text text-muted"
 416                       i18n>There are no capabilities.</span>
 417               </span>
 418
 419               <span *ngFor="let cap of capabilities; let i=index;">
 420                 <div class="input-group">
 421                   <span class="input-group-prepend">
 422                     <div class="input-group-text">
 423                       <i class="{{ icons.share }}"></i>
 424                     </div>
 425                   </span>
 426                   <input type="text"
 427                          class="cd-form-control"
 428                          value="{{ cap.type }}:{{ cap.perm }}"
 429                          readonly>
 430                   <span class="input-group-append">
 431                     <button type="button"
 432                             class="btn btn-light tc_editCapButton"
 433                             i18n-ngbTooltip
 434                             ngbTooltip="Edit"
 435                             (click)="showCapabilityModal(i)">
 436                       <i [ngClass]="[icons.edit]"></i>
 437                     </button>
 438                     <button type="button"
 439                             class="btn btn-light tc_deleteCapButton"
 440                             i18n-ngbTooltip
 441                             ngbTooltip="Delete"
 442                             (click)="deleteCapability(i)">
 443                       <i [ngClass]="[icons.destroy]"></i>
 444                     </button>
 445                   </span>
 446                 </div>
 447                 <span class="form-text text-muted"></span>
 448               </span>
 449
 450               <div class="row">
 451                 <div class="col-12">
 452                   <button type="button"
 453                           class="btn btn-light float-right tc_addCapButton"
 454                           [disabled]="capabilities | pipeFunction:hasAllCapabilities"
 455                           i18n-ngbTooltip
 456                           ngbTooltip="All capabilities are already added."
 457                           [disableTooltip]="!(capabilities | pipeFunction:hasAllCapabilities)"
 458                           triggers="pointerenter:pointerleave"
 459                           (click)="showCapabilityModal()">
 460                     <i [ngClass]="[icons.add]"></i>
 461                     <ng-container i18n>{{ actionLabels.ADD | titlecase }}
 462                       {{ capabilityLabel | upperFirst }}</ng-container>
 463                   </button>
 464                 </div>
 465               </div>
 466               <span class="help-block"></span>
 467             </div>
 468           </div>
 469         </fieldset>
 470
 471         <!-- User quota -->
 472         <fieldset>
 473           <legend i18n>User quota</legend>
 474
 475           <!-- Enabled -->
 476           <div class="form-group row">
 477             <div class="cd-col-form-offset">
 478               <div class="custom-control custom-checkbox">
 479                 <input class="custom-control-input"
 480                        id="user_quota_enabled"
 481                        type="checkbox"
 482                        formControlName="user_quota_enabled">
 483                 <label class="custom-control-label"
 484                        for="user_quota_enabled"
 485                        i18n>Enabled</label>
 486               </div>
 487             </div>
 488           </div>
 489
 490           <!-- Unlimited size -->
 491           <div class="form-group row"
 492                *ngIf="userForm.controls.user_quota_enabled.value">
 493             <div class="cd-col-form-offset">
 494               <div class="custom-control custom-checkbox">
 495                 <input class="custom-control-input"
 496                        id="user_quota_max_size_unlimited"
 497                        type="checkbox"
 498                        formControlName="user_quota_max_size_unlimited">
 499                 <label class="custom-control-label"
 500                        for="user_quota_max_size_unlimited"
 501                        i18n>Unlimited size</label>
 502               </div>
 503             </div>
 504           </div>
 505
 506           <!-- Maximum size -->
 507           <div class="form-group row"
 508                *ngIf="userForm.controls.user_quota_enabled.value && !userForm.getValue('user_quota_max_size_unlimited')">
 509             <label class="cd-col-form-label required"
 510                    for="user_quota_max_size"
 511                    i18n>Max. size</label>
 512             <div class="cd-col-form-input">
 513               <input id="user_quota_max_size"
 514                      class="form-control"
 515                      type="text"
 516                      formControlName="user_quota_max_size"
 517                      cdDimlessBinary>
 518               <span class="invalid-feedback"
 519                     *ngIf="userForm.showError('user_quota_max_size', frm, 'required')"
 520                     i18n>This field is required.</span>
 521               <span class="invalid-feedback"
 522                     *ngIf="userForm.showError('user_quota_max_size', frm, 'quotaMaxSize')"
 523                     i18n>The value is not valid.</span>
 524             </div>
 525           </div>
 526
 527           <!-- Unlimited objects -->
 528           <div class="form-group row"
 529                *ngIf="userForm.controls.user_quota_enabled.value">
 530             <div class="cd-col-form-offset">
 531               <div class="custom-control custom-checkbox">
 532                 <input class="custom-control-input"
 533                        id="user_quota_max_objects_unlimited"
 534                        type="checkbox"
 535                        formControlName="user_quota_max_objects_unlimited">
 536                 <label class="custom-control-label"
 537                        for="user_quota_max_objects_unlimited"
 538                        i18n>Unlimited objects</label>
 539               </div>
 540             </div>
 541           </div>
 542
 543           <!-- Maximum objects -->
 544           <div class="form-group row"
 545                *ngIf="userForm.controls.user_quota_enabled.value && !userForm.getValue('user_quota_max_objects_unlimited')">
 546             <label class="cd-col-form-label required"
 547                    for="user_quota_max_objects"
 548                    i18n>Max. objects</label>
 549             <div class="cd-col-form-input">
 550               <input id="user_quota_max_objects"
 551                      class="form-control"
 552                      type="number"
 553                      formControlName="user_quota_max_objects">
 554               <span class="invalid-feedback"
 555                     *ngIf="userForm.showError('user_quota_max_objects', frm, 'required')"
 556                     i18n>This field is required.</span>
 557               <span class="invalid-feedback"
 558                     *ngIf="userForm.showError('user_quota_max_objects', frm, 'min')"
 559                     i18n>The entered value must be >= 0.</span>
 560             </div>
 561           </div>
 562         </fieldset>
 563
 564         <!-- Bucket quota -->
 565         <fieldset>
 566           <legend i18n>Bucket quota</legend>
 567
 568           <!-- Enabled -->
 569           <div class="form-group row">
 570             <div class="cd-col-form-offset">
 571               <div class="custom-control custom-checkbox">
 572                 <input class="custom-control-input"
 573                        id="bucket_quota_enabled"
 574                        type="checkbox"
 575                        formControlName="bucket_quota_enabled">
 576                 <label class="custom-control-label"
 577                        for="bucket_quota_enabled"
 578                        i18n>Enabled</label>
 579               </div>
 580             </div>
 581           </div>
 582
 583           <!-- Unlimited size -->
 584           <div class="form-group row"
 585                *ngIf="userForm.controls.bucket_quota_enabled.value">
 586             <div class="cd-col-form-offset">
 587               <div class="custom-control custom-checkbox">
 588                 <input class="custom-control-input"
 589                        id="bucket_quota_max_size_unlimited"
 590                        type="checkbox"
 591                        formControlName="bucket_quota_max_size_unlimited">
 592                 <label class="custom-control-label"
 593                        for="bucket_quota_max_size_unlimited"
 594                        i18n>Unlimited size</label>
 595               </div>
 596             </div>
 597           </div>
 598
 599           <!-- Maximum size -->
 600           <div class="form-group row"
 601                *ngIf="userForm.controls.bucket_quota_enabled.value && !userForm.getValue('bucket_quota_max_size_unlimited')">
 602             <label class="cd-col-form-label required"
 603                    for="bucket_quota_max_size"
 604                    i18n>Max. size</label>
 605             <div class="cd-col-form-input">
 606               <input id="bucket_quota_max_size"
 607                      class="form-control"
 608                      type="text"
 609                      formControlName="bucket_quota_max_size"
 610                      cdDimlessBinary>
 611               <span class="invalid-feedback"
 612                     *ngIf="userForm.showError('bucket_quota_max_size', frm, 'required')"
 613                     i18n>This field is required.</span>
 614               <span class="invalid-feedback"
 615                     *ngIf="userForm.showError('bucket_quota_max_size', frm, 'quotaMaxSize')"
 616                     i18n>The value is not valid.</span>
 617             </div>
 618           </div>
 619
 620           <!-- Unlimited objects -->
 621           <div class="form-group row"
 622                *ngIf="userForm.controls.bucket_quota_enabled.value">
 623             <div class="cd-col-form-offset">
 624               <div class="custom-control custom-checkbox">
 625                 <input class="custom-control-input"
 626                        id="bucket_quota_max_objects_unlimited"
 627                        type="checkbox"
 628                        formControlName="bucket_quota_max_objects_unlimited">
 629                 <label class="custom-control-label"
 630                        for="bucket_quota_max_objects_unlimited"
 631                        i18n>Unlimited objects</label>
 632               </div>
 633             </div>
 634           </div>
 635
 636           <!-- Maximum objects -->
 637           <div class="form-group row"
 638                *ngIf="userForm.controls.bucket_quota_enabled.value && !userForm.getValue('bucket_quota_max_objects_unlimited')">
 639             <label class="cd-col-form-label required"
 640                    for="bucket_quota_max_objects"
 641                    i18n>Max. objects</label>
 642             <div class="cd-col-form-input">
 643               <input id="bucket_quota_max_objects"
 644                      class="form-control"
 645                      type="number"
 646                      formControlName="bucket_quota_max_objects">
 647               <span class="invalid-feedback"
 648                     *ngIf="userForm.showError('bucket_quota_max_objects', frm, 'required')"
 649                     i18n>This field is required.</span>
 650               <span class="invalid-feedback"
 651                     *ngIf="userForm.showError('bucket_quota_max_objects', frm, 'min')"
 652                     i18n>The entered value must be >= 0.</span>
 653             </div>
 654           </div>
 655         </fieldset>
 656       </div>
 657
 658       <div class="card-footer">
 659         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 660                               [form]="userForm"
 661                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 662                               wrappingClass="text-right"></cd-form-button-panel>
 663       </div>
 664     </div>
 665   </form>
 666 </div>