quay/static/directives/convert-user-to-org.html

<div class="convert-user-to-org-element">
  <!-- Step 0 -->
  <div ng-show="convertStep == 0">
    <div ng-show="user.organizations.length > 0">
      Cannot convert this account into an organization, as it is a member of {{user.organizations.length}} other
      organization{{user.organizations.length > 1 ? 's' : ''}}.
      <br><br>
      Please leave the following organizations first:
      <ul class="org-list">
        <li ng-repeat="org in user.organizations">
          <span class="avatar" size="avatarSize || 16" data="org.avatar"></span>
          <a href="/organization/{{ org.name }}">{{ org.name }}</a>
        </li>
      </ul>
    </div>

    <div ng-show="user.organizations.length == 0">
      <button class="btn btn-primary" ng-click="showConvertForm()">Start conversion process <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button>
    </div>
  </div>

  <!-- Step 1 -->
  <div class="convert-form" ng-show="convertStep == 1">
    Fill out the form below to convert your current user account into an organization. Your existing repositories will be maintained under the
    namespace. All <strong>direct</strong> permissions delegated to {{ user.username }} will be deleted.

    <form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()">
      <div class="form-group">
        <label for="orgName">Organization Name</label>
        <div class="form-group-content">
          <div class="existing-data">
            <span class="avatar" size="24" data="user.avatar"></span>
            <span class="username">{{ user.username }}</span>
          </div>
          <span class="description">This will continue to be the namespace for your repositories</span>
        </div>
      </div>

      <div class="form-group">
        <label for="orgName">Admin User</label>
        <div class="form-group-content">
          <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 registered account</b> from the account that you are
            trying to convert, and <b>must already exist</b>.
          </span>
        </div>
      </div>

      <!-- Plans Table -->
      <div class="form-group plan-group" quay-require="['BILLING']">
        <label>Organization Plan</label>
        <div class="form-group-content">
          <div class="plans-table" plans="orgPlans" current-plan="org.plan"></div>
          <span class="description">The billing plan for the new organization. If private repositories are unneeded, select "Open Source".</span>
        </div>
      </div>

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

  <!-- Modal message dialog -->
  <div class="modal fade" id="cannotconvertModal">
    <div class="modal-dialog co-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 co-modal fade" id="reallyconvertModal">
    <div class="modal-dialog co-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="co-alert co-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 -->

</div>