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