quay/static/partials/new-organization.html

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

<div class="container create-org" ng-show="!creating">
  
  <div class="row header-row">
    <div class="col-md-12">
      <h2>Create Organization</h2>

      <div class="steps-container" ng-show="false">
        <ul class="steps">
          <li class="step" ng-class="!user || user.anonymous ? 'active' : ''">
            <i class="fa fa-sign-in"></i>
            <span class="title">Login with an account</span>
          </li>
          <li class="step" ng-class="!user.anonymous && !created ? 'active' : ''">
            <i class="fa fa-gear"></i>
            <span class="title">Setup your organization</span>
          </li>
          <li class="step" ng-class="!user.anonymous && created ? 'active' : ''">
            <i class="fa fa-group"></i>
            <span class="title">Create teams</span>
          </li>
        </ul>
      </div>

    </div>
  </div>

  <!-- Step 1 -->
  <div class="row" ng-show="!user || user.anonymous">
    <div class="col-md-10 col-md-offset-1 page-description">
      In order to create a new organization, <b>you must first be signed in</b> as the
      user that <b>will become an admin</b> for the organization.
    </div>
    <div class="col-sm-6 col-sm-offset-3">
      <div class="step-container" >
        <div class="user-setup" redirect-url="'/organizations/new'" sign-in-started="signinStarted()"
             signed-in="signedIn()"></div>
      </div>
    </div>
  </div>

  <!-- Step 2 -->
  <div class="row" ng-show="user && !user.anonymous && !created">
    <div class="col-md-12">
      <div class="step-container">
        <h3>Setup the new organization</h3>

        <form method="post" name="newOrgForm" id="newOrgForm" ng-submit="createNewOrg()">
          <div class="form-group nested">
            <label for="orgName">Organization Name</label>
            <input id="orgName" name="orgName" type="text" class="form-control" placeholder="Organization Name"
                   ng-model="org.name" required autofocus data-trigger="manual" data-content="{{ createError }}"
                   data-placement="bottom" data-container="body" ng-pattern="/^[a-z0-9_]{4,30}$/">
            <span class="description">This will also be the namespace for your repositories</span>
          </div>

          <div class="form-group nested">
            <label for="orgName">Organization Email</label>
            <input id="orgEmail" name="orgEmail" type="email" class="form-control" placeholder="Organization Email"
                   ng-model="org.email" required>
            <span class="description">This address must be different from your account's email</span>
          </div>

          <!-- Plans Table -->
          <div class="form-group nested plan-group" quay-require="['BILLING']">
           <strong>Choose your organization's plan</strong>
           <div class="plans-table" plans="plans" current-plan="holder.currentPlan"></div>          
          </div>
           
          <div class="button-bar">
            <button class="btn btn-large btn-success" type="submit"
                    ng-disabled="newOrgForm.$invalid || (Features.BILLING && !holder.currentPlan)"
                    analytics-on analytics-event="create_organization">
              Create Organization
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Step 3 -->
  <div class="row" ng-show="user && !user.anonymous && created">
    <div class="col-md-12">
      <div class="step-container">
        <h3>Organization Created</h3>
        <h4><a href="/organization/{{ org.name }}">Manage Teams Now</a></h4>
      </div>
    </div>
  </div>
</div>