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

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">{{ action | titlecase }} Cluster
   4   </ng-container>
   5   <ng-container class="modal-content">
   6     <form name="remoteClusterForm"
   7           #frm="ngForm"
   8           [formGroup]="remoteClusterForm">
   9       <div class="modal-body">
  10         <cd-alert-panel *ngIf="connectionVerified !== undefined && !connectionVerified && connectionMessage !== 'Connection refused'"
  11                         type="error"
  12                         spacingClass="mb-3"
  13                         i18n>{{ connectionMessage }}
  14         </cd-alert-panel>
  15         <cd-alert-panel *ngIf="connectionVerified !== undefined && connectionVerified"
  16                         type="success"
  17                         spacingClass="mb-3"
  18                         i18n>{{ connectionMessage }}
  19         </cd-alert-panel>
  20         <div class="form-group row">
  21           <label class="cd-col-form-label required"
  22                  for="remoteClusterUrl"
  23                  i18n>Cluster API URL
  24             <cd-helper>
  25               <span>
  26                 <p>Enter the Dashboard API URL. You can retrieve it from the CLI with: <b>{{ clusterApiUrlCmd }} </b>
  27                   <cd-copy-2-clipboard-button [source]="clusterApiUrlCmd"
  28                                               [byId]="false"></cd-copy-2-clipboard-button>
  29                 </p>
  30               </span>
  31             </cd-helper>
  32           </label>
  33           <div class="cd-col-form-input">
  34             <input class="form-control"
  35                    type="text"
  36                    placeholder="https://localhost:4202"
  37                    id="remoteClusterUrl"
  38                    name="remoteClusterUrl"
  39                    formControlName="remoteClusterUrl">
  40             <span class="invalid-feedback"
  41                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'required')"
  42                   i18n>This field is required.
  43             </span>
  44             <span class="invalid-feedback"
  45                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'endpoint')"
  46                   i18n>Please enter a valid URL.
  47             </span>
  48             <span class="invalid-feedback"
  49                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'hubUrlCheck')"
  50                   i18n>The hub cluster cannot be connected.
  51             </span>
  52           </div>
  53         </div>
  54         <div class="form-group row">
  55           <label class="cd-col-form-label required"
  56                  for="clusterAlias"
  57                  i18n>Alias Name
  58           </label>
  59           <div class="cd-col-form-input">
  60             <input id="clusterAlias"
  61                    name="clusterAlias"
  62                    class="form-control"
  63                    type="text"
  64                    placeholder="Name/Text to uniquely identify cluster"
  65                    formControlName="clusterAlias">
  66             <span class="invalid-feedback"
  67                   *ngIf="remoteClusterForm.showError('clusterAlias', frm, 'required')"
  68                   i18n>This field is required.
  69             </span>
  70             <span class="invalid-feedback"
  71                   *ngIf="remoteClusterForm.showError('clusterAlias', frm, 'uniqueName')"
  72                   i18n>The chosen alias name is already in use.
  73             </span>
  74           </div>
  75         </div>
  76         <div class="form-group row"
  77              *ngIf="action !== 'edit'">
  78           <label class="cd-col-form-label required"
  79                  for="username"
  80                  i18n>Username
  81           </label>
  82           <div class="cd-col-form-input">
  83             <input id="username"
  84                    name="username"
  85                    class="form-control"
  86                    type="text"
  87                    formControlName="username">
  88             <span class="invalid-feedback"
  89                   *ngIf="remoteClusterForm.showError('username', frm, 'required')"
  90                   i18n>This field is required.
  91             </span>
  92             <span class="invalid-feedback"
  93                   *ngIf="remoteClusterForm.showError('username', frm, 'uniqueUrlandUser')"
  94                   i18n>A cluster with the chosen user is already connected.
  95             </span>
  96           </div>
  97         </div>
  98         <div class="form-group row"
  99              *ngIf="action !== 'edit'">
 100           <label class="cd-col-form-label required"
 101                  for="password"
 102                  i18n>Password
 103           </label>
 104           <div class="cd-col-form-input">
 105             <div class="input-group">
 106               <input id="password"
 107                      name="password"
 108                      class="form-control"
 109                      type="password"
 110                      formControlName="password">
 111               <span class="input-group-button">
 112                 <button type="button"
 113                         class="btn btn-light"
 114                         cdPasswordButton="password">
 115                 </button>
 116                 <cd-copy-2-clipboard-button source="password">
 117                 </cd-copy-2-clipboard-button>
 118               </span>
 119               <span class="invalid-feedback"
 120                     *ngIf="remoteClusterForm.showError('password', frm, 'required')"
 121                     i18n>This field is required.
 122               </span>
 123             </div>
 124           </div>
 125         </div>
 126         <div class="form-group row"
 127              *ngIf="action !== 'edit'">
 128           <label class="cd-col-form-label"
 129                  for="ttl"
 130                  i18n>Login Expiration</label>
 131           <div class="cd-col-form-input">
 132             <select class="form-select"
 133                     id="ttl"
 134                     formControlName="ttl"
 135                     name="ttl">
 136               <option value="1">1 day</option>
 137               <option value="7">1 week</option>
 138               <option value="15"
 139                       [selected]="true">15 days</option>
 140               <option value="30">30 days</option>
 141             </select>
 142           </div>
 143         </div>
 144         <!--
 145         <div class="form-group row"
 146              *ngIf="action !== 'edit'">
 147           <label class="cd-col-form-label required"
 148                  for="apiToken"
 149                  i18n>Token
 150           </label>
 151           <div class="cd-col-form-input">
 152             <input id="apiToken"
 153                    name="apiToken"
 154                    class="form-control"
 155                    type="text"
 156                    formControlName="apiToken">
 157             <span class="invalid-feedback"
 158                   *ngIf="remoteClusterForm.showError('apiToken', frm, 'required')"
 159                   i18n>This field is required.</span>
 160           </div>
 161         </div>
 162         <div class="form-group row"
 163              *ngIf="action !== 'edit'">
 164           <div class="cd-col-form-offset">
 165             <div class="custom-control custom-checkbox">
 166               <input class="custom-control-input"
 167                      id="showToken"
 168                      type="checkbox"
 169                      [checked]="showToken"
 170                      (change)="toggleToken()"
 171                      formControlName="showToken">
 172               <label class="custom-control-label"
 173                      for="showToken"
 174                      i18n>Auth with token</label>
 175             </div>
 176           </div>
 177         </div> -->
 178         <!-- ssl -->
 179         <div class="form-group row">
 180           <div class="cd-col-form-offset">
 181             <div class="custom-control custom-checkbox">
 182               <input class="custom-control-input"
 183                      id="ssl"
 184                      type="checkbox"
 185                      formControlName="ssl">
 186               <label class="custom-control-label"
 187                      for="ssl"
 188                      i18n>SSL</label>
 189             </div>
 190           </div>
 191         </div>
 192
 193         <!-- ssl_cert -->
 194         <div *ngIf="remoteClusterForm.controls.ssl.value"
 195              class="form-group row">
 196           <label class="cd-col-form-label"
 197                  for="ssl_cert">
 198             <span i18n>Certificate</span>
 199             <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 200           </label>
 201           <div class="cd-col-form-input">
 202             <textarea id="ssl_cert"
 203                       class="form-control resize-vertical text-monospace text-pre"
 204                       formControlName="ssl_cert"
 205                       rows="5">
 206             </textarea>
 207             <input type="file"
 208                    (change)="fileUpload($event.target.files, 'ssl_cert')">
 209             <span class="invalid-feedback"
 210                   *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'required')"
 211                   i18n>This field is required.</span>
 212             <span class="invalid-feedback"
 213                   *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'pattern')"
 214                   i18n>Invalid SSL certificate.</span>
 215           </div>
 216         </div>
 217       </div>
 218       <div class="modal-footer">
 219         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 220                               [submitText]="(action | titlecase) + ' ' + 'Cluster'"
 221                               [form]="remoteClusterForm">
 222         </cd-form-button-panel>
 223       </div>
 224     </form>
 225   </ng-container>
 226 </cd-modal>