quay/static/partials/user-admin.html

<div class="loading" ng-show="!user">
  <div class="quay-spinner"></div>
</div>

<div class="loading" ng-show="user.anonymous">
  No matching user found
</div>

<div class="user-admin container" ng-show="!user.anonymous">  
  <div class="row">
    <div class="organization-header-element">
      <img src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=24&amp;d=identicon">
      <span class="organization-name">
        {{ user.username }}
      </span>
    </div>
  </div>

  <div class="row" ng-show="askForPassword">
    <div class="col-md-12">
      <div class="alert alert-warning">Your account does not currently have a password. You will need to create a password before you will be able to <strong>push</strong> or <strong>pull</strong> repositories.</div>
    </div>
  </div>

  <div class="row">
    <!-- Side tabs -->
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a></li>
        <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billingoptions">Billing Options</a></li>
        <li ng-show="hasPaidBusinessPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billing" ng-click="loadInvoices()">Billing History</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#robots">Robot Accounts</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#email">Account E-mail</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#password">Change Password</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#github">GitHub Login</a></li>
        <li ng-show="hasPaidBusinessPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#logs" ng-click="loadLogs()">Usage Logs</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#migrate" id="migrateTab">Convert to Organization</a></li>
      </ul>
    </div>

    <!-- Content -->
    <div class="col-md-10">
      <div class="tab-content">
        <!-- Logs tab -->
        <div id="logs" class="tab-pane">
          <div class="logs-view" user="user" visible="logsShown"></div>
        </div>

        <!-- Plans tab -->
        <div id="plan" class="tab-pane active">
          <div class="plan-manager" user="user.username" ready-for-plan="readyForPlan()" plan-changed="planChanged(plan)"></div>
        </div>

        <!-- E-mail address tab -->
        <div id="email" class="tab-pane">
          <div class="row">
            <div class="alert alert-success" ng-show="changeEmailSent">An e-mail has been sent to {{ sentEmail }} to verify the change.</div>

            <div class="loading" ng-show="updatingUser">
              <div class="quay-spinner 3x"></div>
            </div>

            <div class="panel" ng-show="!updatingUser">
              <div class="panel-title">Account e-mail address</div>
              <div class="panel-setting-content">
                {{ user.email }}
              </div>
            </div>

            <div class="panel" ng-show="!updatingUser" >
              <div class="panel-title">Change e-mail address</div>

              <div class="panel-body">
                <form class="form-change col-md-6" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()" data-trigger="manual"
                      data-content="{{ changeEmailError }}" data-placement="right" ng-show="!awaitingConfirmation && !registering">
                  <input type="email" class="form-control" placeholder="Your new e-mail address" ng-model="cuser.email" required>
                  <button class="btn btn-primary" ng-disabled="changeEmailForm.$invalid || cuser.email == user.email" type="submit">Change E-mail Address</button>
                </form>
              </div>
            </div>
          </div>
        </div>

        <!-- Change password tab -->
        <div id="password" class="tab-pane">
          <div class="loading" ng-show="updatingUser">
            <div class="quay-spinner 3x"></div>
          </div>
          <div class="row">
            <div class="panel">
              <div class="panel-title">Change Password</div>

              <span class="help-block" ng-show="changePasswordSuccess">Password changed successfully</span>

              <div ng-show="!updatingUser" class="panel-body">
                <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword()" data-trigger="manual"
                      data-content="{{ changePasswordError }}" data-placement="right" ng-show="!awaitingConfirmation && !registering">
                  <input type="password" class="form-control" placeholder="Your new password" ng-model="cuser.password" required>
                  <input type="password" class="form-control" placeholder="Verify your new password" ng-model="cuser.repeatPassword"
                         match="cuser.password" required>
                  <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>

        <!-- Github tab -->
        <div id="github" class="tab-pane">
          <div class="loading" ng-show="!cuser">
            <div class="quay-spinner 3x"></div>
          </div>
          <div class="row" ng-show="cuser">
            <div class="panel">
              <div class="panel-title">GitHub Login</div>
              <div class="panel-body">
                <div ng-show="githubLogin" class="lead col-md-8">
                  <span class="fa-stack">
                    <i class="fa fa-circle fa-stack-2x check-green"></i>
                    <i class="fa fa-check fa-stack-1x fa-inverse"></i>
                  </span>
                  This account is connected with GitHub account: <b>{{githubLogin}}</b>
                </div>
                <div ng-show="!githubLogin" class="col-md-8">
                  <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}&redirect_uri={{ githubRedirectUri }}/attach" class="btn btn-primary"><i class="fa fa-github fa-lg"></i> Connect with GitHub</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Robot accounts tab -->
        <div id="robots" class="tab-pane">
          <div class="robots-manager" user="user"></div>
        </div>

        <!-- Billing options tab -->
        <div id="billingoptions" class="tab-pane">
          <div class="billing-options" user="user"></div>
        </div>

        <!-- Billing History tab -->
        <div id="billing" class="tab-pane">
          <div class="billing-invoices" user="user" visible="invoicesShown"></div>
        </div>

        <!-- Convert to organization tab -->
        <div id="migrate" class="tab-pane">
          <!-- Step 0 -->
          <div class="panel" ng-show="convertStep == 0">
            <div class="panel-body" ng-show="user.organizations.length > 0">
              <div class="alert alert-info">
                Cannot convert this account into an organization, as it is a member of {{user.organizations.length}} other
                organization{{user.organizations.length > 1 ? 's' : ''}}. Please leave
                {{user.organizations.length > 1 ? 'those organizations' : 'that organization'}} first.
              </div>
            </div>

            <div class="panel-body" ng-show="user.organizations.length == 0">
              <div class="alert alert-warning">
                Note: Converting a user account into an organization <b>cannot be undone</b>
              </div>
              
              <button class="btn btn-primary" ng-click="showConvertForm()">Start conversion process</button>
            </div>
          </div>

          <!-- Step 1 -->
          <div class="convert-form" ng-show="convertStep == 1">            
            <h3>Convert to organization</h3>
            
            <form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()">
              <div class="form-group">
                <label for="orgName">Organization Name</label>
                <div class="existing-data">
                  <img src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=24&amp;d=identicon">
                  {{ user.username }}</div>
                <span class="description">This will continue to be the namespace for your repositories</span>
              </div>

              <div class="form-group">
                <label for="orgName">Admin User</label>                
                <input id="adminUsername" name="adminUsername" type="text" class="form-control" placeholder="Admin Username"
                       ng-model="org.adminUser" required autofocus>
                <input id="adminPassword" name="adminPassword" type="password" class="form-control" placeholder="Admin Password"
                       ng-model="org.adminPassword" required>
                <span class="description">
                  The username and password for the account that will become an administrator of the organization.
                  Note that this account <b>must be a separate Quay.io account</b> from the account that you are
                  trying to convert, and <b>must already exist</b>.
                </span>
              </div>

              <!-- Plans Table -->
              <div class="form-group plan-group">
                <label>Organization Plan</label>
                <div class="plans-table" plans="orgPlans" current-plan="org.plan"></div>          
              </div>

              <div class="button-bar">
                <button class="btn btn-large btn-danger" type="submit" ng-disabled="convertForm.$invalid || !org.plan"
                        analytics-on analytics-event="convert_to_organization">
                  Convert To Organization
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>


<!-- Modal message dialog -->
<div class="modal fade" id="cannotconvertModal">
  <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">Cannot convert account</h4>
      </div>
      <div class="modal-body">
        Your account could not be converted. Please try again in a moment.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="invalidadminModal">
  <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">Username or password invalid</h4>
      </div>
      <div class="modal-body">
        The username or password specified for the admin account is not valid.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal message dialog -->
<div class="modal fade" id="reallyconvertModal">
  <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">Convert to organization?</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-danger">You will not be able to login to this account once converted</div>
        <div>Are you <b>absolutely sure</b> you would like to convert this account to an organization? Once done, there is no going back.</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="reallyConvert()">Absolutely: Convert Now</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->