New login screen UI

This commit is contained in:
Joseph Schorr 2016-04-06 15:57:40 -04:00
parent 2d4337ef82
commit f97b8e2304
24 changed files with 394 additions and 212 deletions

View file

@ -1,35 +1,41 @@
<div class="signin-form-element" style="position: relative">
<span class="cor-loader" ng-show="signingIn"></span>
<form class="form-signin" ng-submit="signin();">
<form class="form-signin" ng-submit="signin();" ng-show="!signingIn">
<div quay-show="Features.DIRECT_LOGIN">
<input type="text" class="form-control input-lg" name="username"
placeholder="Username or E-mail Address" ng-model="user.username" autofocus>
<input type="password" class="form-control input-lg" name="password"
placeholder="Password" ng-model="user.password">
<h4 quay-show="!Features.DIRECT_LOGIN && EXTERNAL_LOGINS.length > 2">
Login via service
</h4>
<div class="external-logins" quay-show="EXTERNAL_LOGINS.length" ng-class="EXTERNAL_LOGINS.length > 2 ? 'smaller': 'larger'">
<div class="external-login-button" provider="{{ provider.id }}" redirect-url="redirectUrl"
sign-in-started="markStarted()" ng-repeat="provider in EXTERNAL_LOGINS" is-link="true"></div>
</div>
<div class="or-bar" quay-show="Features.DIRECT_LOGIN && EXTERNAL_LOGINS.length">or</div>
<span class="cor-loader" ng-show="signingIn"></span>
<div class="co-alert co-alert-danger" ng-show="invalidCredentials">
{{ invalidCredentialsMessage || 'Invalid username or password.' }}
</div>
<div class="co-alert co-alert-danger" ng-show="needsEmailVerification">
You must verify your email address before you can sign in.
</div>
<div class="co-alert co-alert-warning" ng-show="tryAgainSoon > 0">
Too many attempts have been made to login. Please try again in {{ tryAgainSoon }} second<span ng-if="tryAgainSoon != 1">s</span>.
</div>
<span ng-show="tryAgainSoon == 0">
<button class="btn btn-lg btn-primary btn-block" type="submit" quay-show="Features.DIRECT_LOGIN">Sign In</button>
<div quay-show="Features.DIRECT_LOGIN">
<input type="text" class="form-control" name="username"
placeholder="Username or E-mail Address" ng-model="user.username"
ng-disabled="tryAgainSoon > 0 || signingIn" autofocus>
<span class="social-alternate" quay-show="EXTERNAL_LOGINS.length && Features.DIRECT_LOGIN">
<i class="fa fa-circle"></i>
<span class="inner-text">OR</span>
</span>
<input type="password" class="form-control" name="password"
ng-disabled="tryAgainSoon > 0 || signingIn"
placeholder="Password" ng-model="user.password">
</div>
<div class="external-login-button" provider="{{ provider.id }}" redirect-url="redirectUrl"
sign-in-started="markStarted()" ng-repeat="provider in EXTERNAL_LOGINS"></div>
</span>
<button class="btn btn-primary btn-block" type="submit" quay-show="Features.DIRECT_LOGIN" ng-disabled="tryAgainSoon > 0">
Sign in to <span class="registry-name"></span>
</button>
</form>
<div class="co-alert co-alert-danger" ng-show="invalidCredentials">
{{ invalidCredentialsMessage || 'Invalid username or password.' }}
</div>
<div class="co-alert co-alert-danger" ng-show="needsEmailVerification">
You must verify your email address before you can sign in.
</div>
</div>