zeppelin-web/src/app/credential/credential.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.
-->
<div class="interpreterHead">
  <div class="header">
    <div class="row">
      <div class="col-md-12">
        <h3 class="new_h3">
          Credentials
        </h3>
        <div class="pull-right" style="margin-top:10px;">
          <a style="cursor:pointer;margin-right:10px;text-decoration:none;"
             target="_blank"
             ng-href="{{getCredentialDocsLink()}}"
             tooltip-placement="bottom" uib-tooltip="Learn more">
            <i class="icon-question" ng-style="{color: showRepositoryInfo ? '#3071A9' : 'black' }"></i>
          </a>
          <button class="btn btn-default btn-sm"
                  ng-click="toggleAddNewCredentialInfo()">
            <i class="fa fa-plus"></i>
            Add
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        Manage your credentials. You can add new credential information.
      </div>
    </div>
  </div>

  <!--Credential addition form-->
  <div class="row interpreter">
    <div class="col-md-12" ng-show="showAddNewCredentialInfo">
      <hr />
      <div class="interpreterSettingAdd">
        <h4>Add new credential</h4>
        <div>
          <div class="row interpreter">
            <div class="col-md-12">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th style="width:30%">Entity</th>
                  <th>Username</th>
                  <th>Password</th>
                </tr>
                </thead>
                <tr>
                  <td>
                    <input id="entityname" ng-model="entity" placeholder="[Interpreter Group].[Interpreter Name]"/>
                  </td>
                  <td>
                    <textarea msd-elastic ng-model="username"></textarea>
                  </td>
                  <td>
                    <input type="password" ng-model="password"/>
                  </td>
                </tr>
              </table>
              <span class="btn btn-primary" ng-click="addNewCredentialInfo()">
                Save
              </span>
              <span class="btn btn-default" ng-click="cancelCredentialInfo()">
                Cancel
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="box width-full">
  <div class="row interpreter">
    <div ng-show="!hasCredential(credentialInfo) || valueform.$hidden"
         class="col-md-12 gray40-message">
      <em>Currently there is no credential information</em>
    </div>
    <div class="col-md-12" ng-show="hasCredential(credentialInfo) || valueform.$visible">
      <table class="table table-striped">
        <thead>
        <tr>
          <th style="width:30%">Entity</th>
          <th>Username</th>
          <th>Password</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
          <tr ng-repeat="credential in credentialInfo">
            <td>
              <span>
                {{credential.entity}}
              </span>
            </td>
            <td>
              <span editable-textarea="credential.username" e-name="username" e-form="valueform"
                    e-msd-elastic focus-if="credential.username.length == 0">
                {{credential.username}}
              </span>
            </td>
            <td>
              <span editable-password="credential.password" e-name="password" e-form="valueform"
                    e-msd-elastic focus-if="credential.password.length == 0">
                **********
              </span>
            </td>
            <td>
              <!-- Edit credential info -->
              <span style="float:right" ng-show="!valueform.$visible">
                <button class="btn btn-default btn-xs"
                        ng-click="valueform.$show();
                        copyOriginCredentialsInfo();">
                  <span class="fa fa-pencil"></span> edit</button>
                <button class="btn btn-default btn-xs"
                        ng-click="removeCredentialInfo(credential.entity)">
                  <span class="fa fa-trash"></span> remove</button>

              </span>
              <span style="float:right" ng-show="valueform.$visible">
                <form editable-form name="valueform"
                      onbeforesave="updateCredentialInfo(valueform, $data, credential.entity)"
                      ng-show="valueform.$visible">
                  <button type="submit" class="btn btn-primary btn-xs">
                    <span class="fa fa-check"></span> save
                  </button>
                  <button type="button" class="btn btn-default btn-xs"
                          ng-disabled="valueform.$waiting"
                          ng-click="valueform.$cancel();">
                    <span class="fa fa-remove"></span> cancel
                  </button>
                </form>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>