RHeactorJS/web-app

<div class="container">
  <article class="row">
    <section class="col-xs-12 col-md-6 offset-md-3">

      <form name="userEditForm" class="card" data-ng-if="vm.p.$success">
        <div class="card-header">
          <h1 class="card-title">
            <i class="material-icons" data-ng-if="!vm.user.avatar">person</i>
            <img class="avatar" data-ng-src="%%vm.user.avatar%%" alt="%%vm.user.name%%" data-ng-if="vm.user.avatar">
            %%vm.user.firstname%% %%vm.user.lastname%%
          </h1>
        </div>
        <div class="card-block" data-ng-if="!vm.editing">
          <p>
            <a href="mailto:%%vm.user.email%%" target="_blank">
              <i class="material-icons">email</i>
              <span>%%vm.user.email%%</span>
            </a>
          </p>
          <dl>
            <dt>Activated</dt>
            <dd>
              <span data-ng-if="vm.user.active">
                <i class="material-icons success">check_box</i>
                <span>Yes</span>
                <app-button button-class="btn-secondary pull-xs-right" label="deactivate" icon="not_interested" click="vm.toggleActive" progress="vm.b" class="pull-xs-right"></app-button>
              </span>
              <span data-ng-if="!vm.user.active">
                <i class="material-icons danger">block</i>
                <span>No</span>
                <app-button button-class="btn-secondary pull-xs-right" label="activate" icon="power_settings_new" click="vm.toggleActive" progress="vm.b" class="pull-xs-right"></app-button>
              </span>
            </dd>
            <dt>SuperUser</dt>
            <dd>
              <span data-ng-if="vm.user.superUser">
                <i class="material-icons success">check_box</i>
                <span>Yes</span>
              </span>
              <span data-ng-if="!vm.user.superUser">
                <i class="material-icons danger">block</i>
                <span>No</span>
              </span>
            </dd>
          </dl>
        </div>
        <div class="card-block" data-ng-if="vm.editing">
          <fieldset class="form-group">
            <label for="email">email</label>
            <input class="form-control"
                   type="email"
                   id="email"
                   required
                   bootstrap-error-states
                   data-ng-model="vm.userCopy.email"
                   name="email"
                   data-ng-blur="vm.updateUserProperty('email')"
            />
          </fieldset>
          <fieldset class="form-group">
            <label for="firstname">firstname</label>
            <input class="form-control"
                   type="text"
                   id="firstname"
                   required
                   bootstrap-error-states
                   data-ng-model="vm.userCopy.firstname"
                   name="firstname"
                   data-ng-blur="vm.updateUserProperty('firstname')"
            />
          </fieldset>
          <fieldset class="form-group">
            <label for="lastname">lastname</label>
            <input class="form-control"
                   type="text"
                   id="lastname"
                   required
                   bootstrap-error-states
                   data-ng-model="vm.userCopy.lastname"
                   name="lastname"
                   data-ng-blur="vm.updateUserProperty('lastname')"
            />
          </fieldset>
        </div>
        <div class="card-footer">
          <div class="controls">
            <button type="button" class="btn btn-secondary" data-ng-click="vm.editing = true" data-ng-if="!vm.editing">
              <i class="material-icons">mode_edit</i>
              <span>edit</span>
            </button>
            <button type="button" class="btn btn-secondary" data-ng-click="vm.editing = false" data-ng-if="vm.editing">
              <i class="material-icons">arrow_back</i>
            </button>
          </div>
          <div class="error-info" data-ng-show="vm.e.$error">
            <div class="alert alert-danger" role="alert">
              <i class="material-icons">error</i>
              %%vm.e.$problem.title%%<br>
              <small>%%vm.e.$problem.detail%%</small>
            </div>
          </div>
          <div class="success-info" data-ng-show="vm.e.$success">
            <div class="alert alert-success" role="alert">
              <i class="material-icons">check_ok</i> Changes saved …
            </div>
          </div>
        </div>
      </form>

      <div class="card" data-ng-if="vm.p.$progress">
        <div class="card-header">
          <h1 class="card-title">
            <i class="material-icons spin">hourglass_empty</i>
            Please stand by …
          </h1>
        </div>
        <div class="card-block">
          <p>Loading user …</p>
          <progress class="progress progress-striped" value="50" max="100">50%</progress>
        </div>
      </div>

      <div class="card" data-ng-if="vm.p.$error">
        <div class="card-header">
          <h1 class="card-title">
            <i class="material-icons">error</i>
            %%vm.p.$problem.title%%
          </h1>
        </div>
        <div class="card-block">
          <p>%%vm.p.$problem.detail%%</p>
        </div>
      </div>
    </section>
  </article>
</div>