create-project.html

<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="middle surface-shaded">
    <!-- Middle section -->
    <div class="middle-section">
      <div class="middle-container">
        <div class="middle-content">
          <div class="container surface-shaded gutter-top">
            <div class="col-md-12">
              <h1>New Project</h1>
              <alerts alerts="alerts"></alerts>
              <form name="createProjectForm">
                <fieldset ng-disabled="disableInputs">
                  <div class="form-group">
                    <label for="name" class="required">Name</label>
                    <span ng-class="{'has-error': (createProjectForm.name.$error.pattern && createProjectForm.name.$touched) || nameTaken}">
                      <input class="form-control input-lg"
                          name="name"
                          id="name"
                          placeholder="my-project"
                          type="text"
                          required
                          take-focus
                          minlength="2"
                          maxlength="63"
                          pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"
                          aria-describedby="nameHelp"
                          ng-model="name"
                          ng-model-options="{ updateOn: 'default blur' }"
                          ng-change="nameTaken = false"
                          autocorrect="off"
                          autocapitalize="off"
                          spellcheck="false">
                    </span>
                    <div>
                      <span class="help-block">A unique name for the project.</span>
                    </div>
                    <div class="has-error">
                      <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.minlength && createProjectForm.name.$touched">
                        Name must have at least two characters.
                      </span>
                    </div>
                    <div class="has-error">
                      <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.pattern && createProjectForm.name.$touched">
                        Project names may only contain lower-case letters, numbers, and dashes.
                        They may not start or end with a dash.
                      </span>
                    </div>
                    <div class="has-error">
                      <span class="help-block" ng-if="nameTaken">
                        This name is already in use. Please choose a different name.
                      </span>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="displayName">Display Name</label>
                    <input class="form-control input-lg"
                        name="displayName"
                        id="displayName"
                        placeholder="My Project"
                        type="text"
                        ng-model="displayName">
                  </div>

                  <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control input-lg"
                        name="description"
                        id="description"
                        placeholder="A short description."
                        ng-model="description"></textarea>
                  </div>

                  <div class="button-group">
                    <button type="submit"
                        class="btn btn-primary btn-lg"
                        ng-click="createProject()"
                        ng-disabled="createProjectForm.$invalid || nameTaken || disableInputs"
                        value="">Create</button>
                    <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->