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

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