quay/static/partials/user-view.html

<div class="resource-view user-view"
     resource="userResource"
     error-message="'User not found'">
  <div class="page-content">
    <div class="cor-title">
      <span class="cor-title-link"></span>
      <span class="cor-title-content">
        <span class="avatar" size="32" data="user.avatar"></span>
        <span class="user-name">{{ user.username }}</span>
      </span>
    </div>

    <div class="co-main-content-panel user-repo-list" ng-if="!user.is_me">
      <div class="repo-list-grid"
           repositories-resource="repositoriesResource"
           starred="false"
           namespace="namespace"
           hide-title="true"></div>
    </div>

    <div class="cor-tab-panel" ng-if="user.is_me">
      <div class="cor-tabs" quay-show="user.is_me">
        <span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
          <i class="fa fa-hdd-o"></i>
        </span>
        <span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots">
          <i class="fa fa-wrench"></i>
        </span>
        <span class="cor-tab" tab-title="User Settings" tab-target="#settings">
          <i class="fa fa-gears"></i>
        </span>
        <span class="cor-tab" tab-title="Billing" tab-target="#usage"
              quay-show="Features.BILLING">
          <i class="fa fa-credit-card"></i>
        </span>
        <span class="cor-tab" tab-title="Billing Invoices" tab-target="#invoices"
              tab-init="showInvoices()" quay-show="Features.BILLING">
          <i class="fa ci-invoice"></i>
        </span>
        <span class="cor-tab" tab-title="External Logins" tab-target="#external">
          <i class="fa fa-external-link-square"></i>
        </span>
        <span class="cor-tab" tab-title="Authorized Applications" tab-target="#applications"
              tab-init="showApplications()">
          <i class="fa ci-application"></i>
        </span>
      </div> <!-- /cor-tabs -->

      <div class="cor-tab-content">
        <!-- Repositories -->
        <div id="repos" class="tab-pane active">
          <h3>Repositories</h3>
          <div class="repo-list-grid"
               repositories-resource="repositoriesResource"
               starred="false"
               namespace="namespace"
               hide-title="true">
          </div>
        </div>

        <!-- Robot Accounts -->
        <div id="robots" class="tab-pane">
          <div class="robots-manager" user="user"></div>
        </div>

        <!-- External Logins -->
        <div id="external" class="tab-pane">
          <div class="external-logins-manager" user="user"></div>
        </div>

        <!-- Applications -->
        <div id="applications" class="tab-pane">
          <div class="authorized-apps-manager" user="user" is-enabled="showAppsCounter"></div>
        </div>

        <!-- Plan and Usage -->
        <div id="usage" class="tab-pane" quay-require="['BILLING']">
          <h3>Plan Usage and Billing</h3>
          <div class="plan-manager" user="user"></div>
        </div>

        <!-- Billing Invoices -->
        <div id="invoices" class="tab-pane" quay-require="['BILLING']">
          <h3>Billing Invoices</h3>
          <div class="billing-invoices" user="user"
               makevisible="showInvoicesCounter"></div>
        </div>

        <!-- Settings -->
        <div id="settings" class="tab-pane">
          <h3>User Settings</h3>

          <!-- E-mail address -->
          <div class="co-panel" quay-show="Features.MAILING">
            <div class="co-panel-heading"><i class="fa fa-envelope-o"></i> E-mail Address</div>
            <div class="panel-body" style="padding-top: 5px;">

              <div class="alert alert-success" ng-show="changeEmailInfo.state == 'sent'">
                An e-mail has been sent to {{ sentEmail }} to verify the change.
              </div>

              <div class="cor-loader" ng-show="changeEmailInfo.state == 'sending'"></div>
              <div ng-show="changeEmailInfo.state != 'sending'">
                <form class="form-change user-settings-form"
                      id="changeEmailForm" name="changeEmailForm"
                      ng-submit="changeEmail(); changeEmailForm.$setPristine()"
                      ng-show="!awaitingConfirmation && !registering">

                  <div class="row">
                    <table class="col-md-6">
                      <tr>
                        <td>Current E-mail Address:</td>
                        <td>{{ user.email }}</td>
                      </tr>
                      <tr>
                        <td>New E-mail Address:</td>
                        <td>
                          <input type="email" class="form-control"
                                 placeholder="Your new e-mail address"
                                 ng-model="changeEmailInfo.email" required>
                        </td>
                      </tr>
                    </table>
                  </div>

                  <button class="btn btn-primary"
                        ng-disabled="changeEmailForm.$invalid || changeEmail.email == user.email"
                        type="submit">
                    Change E-mail Address
                 </button>
                </form>
              </div>
            </div>
          </div> <!-- /E-mail -->

          <!-- Password -->
          <div class="co-panel" style="margin-bottom: 0px">
            <div class="co-panel-heading"><i class="fa fa-lock"></i> Password</div>
            <div class="panel-body" style="padding-top: 5px;">
              <div class="cor-loader" ng-show="changePasswordInfo.state == 'changing'"></div>

              <!-- Encrypted Password -->
              <div class="row" ng-show="changePasswordInfo.state !='changing'">
                <div class="panel">
                  <div class="panel-title">Generate Encrypted Password</div>

                  <div class="panel-body">
                    <div class="alert alert-info" ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
                      Due to Docker storing passwords entered on the command line in <strong>plaintext</strong>, it is highly recommended to use the button below to generate an an encrypted version of your password.
                    </div>

                    <div class="alert alert-warning" ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
                      This installation is set to <strong>require</strong> encrypted passwords when
                      using the Docker command line interface. To generate an encrypted password, click the button below.
                    </div>

                    <button class="btn btn-primary" ng-click="generateClientToken()">
                      <i class="fa fa-key" style="margin-right: 6px;"></i>Generate Encrypted Password
                    </button>
                  </div>
                </div>
              </div>

              <!-- Change Password -->
              <div class="row" ng-show="changePasswordInfo.state !='changing'">
                <div class="panel">
                  <div class="panel-title">Change Password</div>

                  <span class="help-block" ng-show="changePasswordInfo.state == 'changed'">
                    Password changed successfully
                  </span>

                  <div class="panel-body">
                    <div class="alert alert-warning">Note: Changing your password will also invalidate any generated encrypted passwords.</div>


                    <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword(); changePasswordForm.$setPristine()"
                          ng-show="!awaitingConfirmation && !registering">
                      <input type="password" class="form-control" placeholder="Your new password" ng-model="changePasswordInfo.password" required
                             ng-pattern="/^.{8,}$/">
                      <input type="password" class="form-control" placeholder="Verify your new password" ng-model="changePasswordInfo.repeatPassword"
                             match="changePasswordInfo.password" required ng-pattern="/^.{8,}$/">
                      <button class="btn btn-danger" ng-disabled="changePasswordForm.$invalid" type="submit"
                              analytics-on analytics-event="change_pass">Change Password</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div> <!-- /Password -->

          <!-- Convert -->
          <div class="co-panel" quay-show="Config.AUTHENTICATION_TYPE == 'Database'">
            <div class="co-panel-heading"><i class="fa fa-group"></i> Convert to organization</div>
            <div class="panel-body" style="padding-top: 5px;">
              <div class="convert-user-to-org" user="user"></div>
            </div>
          </div>
        </div> <!-- /Convert -->

      </div> <!-- /cor-tab-content -->
    </div>
  </div>

  <!-- Modal message dialog -->
  <div class="modal fade" id="clientTokenModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Encrypted Password</h4>
        </div>
        <div class="modal-body">
          <div style="margin-bottom: 10px;">Your generated encrypted password:</div>
          <div class="copy-box" value="generatedClientToken"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>