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">settings_backup_restore</i>
            <i class="material-icons success" data-ng-show="vm.p.$success">check_circle</i>
            Reset your password
          </h1>
        </div>
        <div class="card-block" data-ng-show="vm.p.$success">
          <div class="alert alert-success" role="alert">
            <p>We've sent you a confirmation link. Please check your email inbox for <strong>%%data.email%%</strong>.</p>
          </div>
        </div>
        <div class="card-block" data-ng-hide="vm.p.$success">
          <p class="card-text">
            Please enter your email address in order to reset your password.
          </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
            />
          </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>Continue</span>
            </button>
          </div>
          <div data-ng-show="vm.p.$error" class="error-info" data-ng-switch="vm.p.$problem.title">
            <div data-ng-switch-when="EntryNotFoundError">
              <div class="alert alert-danger" role="alert">
                <p>
                  <i class="material-icons">error</i>
                  We could not find an user account with the email <em>%%::data.email%%</em>.
                </p>
              </div>
              <div class="alert alert-warning alert-small" role="alert">
                <p>
                  <i class="material-icons">help_outline</i>
                  <a data-ui-sref="register({returnTo: vm.returnTo})">Create a new one here …</a>
                </p>
              </div>
            </div>
            <div class="alert alert-danger" role="alert" data-ng-switch-default>
              <i class="material-icons">error</i>
              %%vm.p.$problem.title%%<br>
              <small>%%vm.p.$problem.detail%%</small>
            </div>
          </div>
        </div>
      </form>
    </section>
  </article>
</div>