zeppelin-web-angular/src/app/pages/workspace/credential/credential.component.html

<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<zeppelin-page-header title="Credentials" [extra]="headerExtra" [description]="credentialsDescription">
  <ng-template #credentialsDescription>
    Manage your credentials. You can add new credential information.
    <a [href]="docsLink" target="_blank">
      <i nz-icon nz-tooltip nzTooltipTitle="Learn more" nzType="question-circle" nzTheme="outline"></i>
    </a>
  </ng-template>
  <ng-template #headerExtra>
    <button class="repository-trigger" nz-button [nzType]="showAdd ? 'primary' : 'default'" (click)="triggerAdd()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      Add
    </button>
  </ng-template>
  <div [@collapseMotion]="showAdd ? 'expanded' : 'collapsed'">
    <nz-divider nzType="horizontal"></nz-divider>
    <h2>Add new credential</h2>
    <form nz-form nzLayout="vertical" [formGroup]="addForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label>Entity</nz-form-label>
        <nz-form-control nzErrorTip="Please input entity!">
          <input
            [nzAutocomplete]="auto"
            (input)="onEntityInput($event)"
            formControlName="entity"
            nz-input
            placeholder="Interpreter Name"
          />
          <nz-autocomplete nzBackfill #auto>
            <nz-auto-option *ngFor="let option of interpreterFilteredNames" [nzValue]="option">
              {{ option }}
            </nz-auto-option>
          </nz-autocomplete>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>Username</nz-form-label>
        <nz-form-control nzErrorTip="Please input username!">
          <input formControlName="username" nz-input placeholder="Username" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>Password</nz-form-label>
        <nz-form-control nzErrorTip="Please input Password!">
          <input formControlName="password" nz-input type="password" placeholder="Password" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="new-actions">
        <nz-form-control>
          <button nz-button nzType="primary" [disabled]="!addForm.valid || adding">Save</button>
          <button nz-button type="button" (click)="cancelAdd()">Cancel</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</zeppelin-page-header>
<div class="content">
  <nz-table nzSize="small" [nzData]="credentialControls" [nzFrontPagination]="false" [nzShowPagination]="false">
    <thead>
      <tr>
        <th>Entity</th>
        <th>Username</th>
        <th>Password</th>
        <th nzWidth="225px" class="actions-head">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let control of credentialControls">
        <ng-container *ngIf="control.get('entity')?.value as entity" [formGroup]="control">
          <td>{{ entity }}</td>

          <ng-container *ngIf="isEditing(control); else credentialDisplay">
            <td><input nz-input formControlName="username" /></td>
            <td><input nz-input type="password" formControlName="password" /></td>
            <td class="credential-actions">
              <button nz-button nzType="primary" (click)="saveCredential(control)">
                <i nz-icon nzType="save" nzTheme="outline"></i>
                Save
              </button>
              <button nz-button (click)="unsetEditable(control)">
                <i nz-icon nzType="close" nzTheme="outline"></i>
                Cancel
              </button>
            </td>
          </ng-container>

          <ng-template #credentialDisplay>
            <td>{{ control.get('username')?.value }}</td>
            <td><strong>**********</strong></td>
            <td class="credential-actions">
              <button nz-button (click)="setEditable(control)">
                <i nz-icon nzType="edit" nzTheme="outline"></i>
                Edit
              </button>
              <button
                nz-button
                nz-popconfirm
                nzPopconfirmTitle="Do you want to delete this credential information?"
                (nzOnConfirm)="removeCredential(control)"
              >
                <i nz-icon nzType="delete" nzTheme="outline"></i>
                Remove
              </button>
            </td>
          </ng-template>
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</div>