RHeactorJS/web-app

<div class="container">
  <article class="row">
    <section class="col-xs-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
      <form name="form" class="card">
        <div class="card-header">
          <h1 class="card-title">
            <i class="material-icons" data-ng-hide="vm.p.$success">person_add</i>
            <i class="material-icons success" data-ng-show="vm.p.$success">check_circle</i>
            Registration
          </h1>
        </div>
        <div class="card-block" data-ng-show="vm.p.$success">
          <div class="alert alert-success" role="alert">
            <p>Awesome, your account has been created!</p>
            <p>
              Before you can log in, we need to verify your email address.<br/>
              Please check your inbox for <strong>%%data.email%%</strong> and click the link we just sent you.
            </p>
          </div>
        </div>
        <div class="card-block" data-ng-hide="vm.p.$success">
          <p class="card-text">
            Please enter your email address, first and last name and pick a password in order to create a new account.
          </p>
          <fieldset class="form-group">
            <label for="email">email address</label>
            <input tabindex="1"
                   class="form-control"
                   type="email"
                   id="email"
                   required
                   is-email
                   bootstrap-error-states
                   data-ng-model="data.email"
                   data-ng-disabled="vm.p.$active || vm.initializing"
                   name="email"
                   auto-focus
            />
            <p>
              <small>Already have account? <a data-ui-sref="login({returnTo: vm.returnTo})" class="text-nowrap">Log in here …</a></small>
            </p>
          </fieldset>
          <fieldset class="form-group">
            <label for="password">
              password<br/>
              <small>must be at least 8 characters long</small>
            </label>
            <input tabindex="2"
                   class="form-control"
                   type="password"
                   id="password"
                   required
                   bootstrap-error-states
                   data-ng-model="data.password"
                   data-ng-minlength="8"
                   data-ng-disabled="vm.p.$active || vm.initializing"
                   name="password"
            />
          </fieldset>
          <fieldset class="form-group">
            <label for="password2">
              retype password
            </label>
            <input tabindex="2"
                   class="form-control"
                   type="password"
                   id="password2"
                   required
                   bootstrap-error-states
                   data-ng-model="data.password2"
                   data-ng-minlength="8"
                   data-ng-disabled="vm.p.$active || vm.initializing"
                   name="password2"
                   match="data.password"
            />
          </fieldset>
          <fieldset class="form-group">
            <label for="firstname">first name</label>
            <input tabindex="3"
                   class="form-control"
                   type="text"
                   id="firstname"
                   required
                   bootstrap-error-states
                   data-ng-model="data.firstname"
                   data-ng-disabled="vm.p.$active || vm.initializing"
                   name="firstname"
            />
          </fieldset>
          <fieldset class="form-group">
            <label for="lastname">last name</label>
            <input tabindex="3"
                   class="form-control"
                   type="text"
                   id="lastname"
                   required
                   bootstrap-error-states
                   data-ng-model="data.lastname"
                   data-ng-disabled="vm.p.$active || vm.initializing"
                   name="lastname"
            />
          </fieldset>
        </div>
        <div class="card-footer" data-ng-hide="vm.p.$success">
          <div class="controls">
            <button type="submit"
                    class="btn btn-primary"
                    data-ng-disabled="form.$invalid || vm.p.$active || vm.initializing"
                    data-ng-click="vm.submit(data);">
              <i class="material-icons" data-ng-show="(form.$invalid || vm.initializing) && !vm.p.$active">block</i>
              <i class="material-icons"
                 data-ng-show="!(form.$invalid || vm.p.$active || vm.initializing) && vm.p.$pristine">send</i>
              <i class="material-icons spin" data-ng-show="vm.p.$active">hourglass_empty</i>
              <i class="material-icons"
                 data-ng-show="!(form.$invalid || vm.p.$active || vm.initializing) && vm.p.$success">check_ok</i>
              <i class="material-icons"
                 data-ng-show="!(form.$invalid || vm.p.$active || vm.initializing) && vm.p.$error">error</i>
              <span>Register</span>
            </button>
          </div>
          <div class="error-info" data-ng-show="vm.p.$error">
            <div class="alert alert-danger" role="alert">
              <i class="material-icons">error</i>
              %%vm.p.$problem.title%%<br>
              <small>%%vm.p.$problem.detail%%</small>
            </div>
          </div>
        </div>
      </form>
    </section>
  </article>
</div>