includes/login.html
<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</i>
<i class="material-icons success" data-ng-show="vm.p.$success">check_circle</i>
Login
</h1>
</div>
<div class="card-block">
<div class="alert alert-warning" role="alert" data-ng-show="vm.from === 'TokenExpiredError'">
<p>Your login token expired, so we have logged you out.</p>
</div>
<div class="alert alert-success" role="alert" data-ng-show="vm.from === 'logout'">
<p>You have been logged out …</p>
</div>
<p class="card-text">
Please enter your email address and password in order to log in.
</p>
<fieldset class="form-group">
<label for="email">email address</label>
<input tabindex="1"
class="form-control"
type="email"
id="email"
required
bootstrap-error-states
is-email
data-ng-model="data.email"
data-ng-disabled="vm.p.$active || vm.initializing"
name="email"
auto-focus
/>
<p>
<small>Don't have an account? <a data-ui-sref="register({returnTo: vm.returnTo})" class="text-nowrap">Create a new one here …</a>
</small>
</p>
</fieldset>
<fieldset class="form-group">
<label for="password">
password
</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"
/>
<p>
<small>Forgot your password? <a data-ui-sref="password-change" class="text-nowrap">Request a new one here
…</a></small>
</p>
</fieldset>
</div>
<div class="card-footer">
<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>Login</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 data-ng-switch-when="AccessDeniedError">
<div class="alert alert-danger" role="alert">
<p>
<i class="material-icons">error</i>
You have provided an invalid password!
</p>
</div>
<div class="alert alert-warning alert-small" role="alert">
<p>
<i class="material-icons">help_outline</i>
Forgot your password? <a data-ui-sref="password-change" class="text-nowrap">Request 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>