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