New login screen UI
This commit is contained in:
Joseph Schorr
parent
2d4337ef82
commit
f97b8e2304
24 changed files with 394 additions and 212 deletions
|
|
@ -4,10 +4,10 @@
|
|||
ng-disabled="signingIn">
|
||||
<img ng-src="{{ providerInfo.icon().url }}" ng-if="providerInfo.icon().url">
|
||||
<i class="fa" ng-class="providerInfo.icon().icon" ng-if="providerInfo.icon().icon"></i>
|
||||
<span ng-if="action != 'attach'">
|
||||
Sign In with {{ providerInfo.title() }}
|
||||
<span class="login-text" ng-if="action != 'attach'" style="vertical-align: middle">
|
||||
<span class="prefix">Sign in with </span><span class="suffix">{{ providerInfo.title() }}</span>
|
||||
</span>
|
||||
<span ng-if="action == 'attach'">
|
||||
<span class="login-text" ng-if="action == 'attach'" style="vertical-align: middle">
|
||||
Attach to {{ providerInfo.title() }}
|
||||
</span>
|
||||
</a>
|
||||
|
|
|
|||
24
static/directives/recovery-form.html
Normal file
24
static/directives/recovery-form.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="recovery-form-element">
|
||||
<h4 ng-show="!sendingRecovery && !sent">Please enter the e-mail address for your account to recover it</h4>
|
||||
<div style="text-align: center" ng-show="sendingRecovery">
|
||||
<div class="cor-loader-inline"></div>
|
||||
</div>
|
||||
<div ng-show="!sendingRecovery">
|
||||
<div class="co-alert co-alert-success" ng-show="sent.status == 'sent'">
|
||||
Account recovery email was sent to {{ recovery.email }}.
|
||||
</div>
|
||||
<div class="co-alert co-alert-danger" ng-show="invalidRecovery">{{ errorMessage }}</div>
|
||||
<div class="co-alert co-alert-info" ng-show="sent.status == 'org'">
|
||||
The e-mail address <code>{{ sent.orgemail }}</code> is assigned to organization <code>{{ sent.orgname }}</code>.
|
||||
To access that organization, an admin user must be used.
|
||||
<br><br>
|
||||
An e-mail has been sent to
|
||||
<code>{{ sent.orgemail }}</code> with the full list of admin users.
|
||||
</div>
|
||||
|
||||
<form class="form-signin" ng-submit="sendRecovery()" ng-show="!sent">
|
||||
<input type="text" class="form-control" placeholder="Email" ng-model="recovery.email">
|
||||
<button class="btn btn-primary btn-block" type="submit">Send Recovery Email</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,32 @@
|
|||
<div class="signup-form-element">
|
||||
<div quay-show="singleSigninUrl" class="single-sign-on">
|
||||
<div class="external-login-button" provider="{{ EXTERNAL_LOGINS[0].id }}"></div>
|
||||
</div>
|
||||
<h4 ng-show="!registering && !awaitingConfirmation">
|
||||
Create new account
|
||||
</h4>
|
||||
|
||||
<div quay-show="Features.USER_CREATION && Config.AUTHENTICATION_TYPE == 'Database' && !singleSigninUrl">
|
||||
<form class="form-signup" name="signupForm" ng-submit="register()" ng-show="!awaitingConfirmation && !registering">
|
||||
<div quay-show="Features.DIRECT_LOGIN">
|
||||
<input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required ng-pattern="/^[a-z0-9_]{4,30}$/">
|
||||
<input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
|
||||
<input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required
|
||||
ng-pattern="/^.{8,}$/">
|
||||
<input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword"
|
||||
match="newUser.password" required
|
||||
ng-pattern="/^.{8,}$/">
|
||||
</div>
|
||||
<div class="form-group signin-buttons">
|
||||
<button id="signupButton"
|
||||
class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
|
||||
analytics-on analytics-event="register"
|
||||
quay-show="Features.DIRECT_LOGIN">
|
||||
<span quay-show="Features.BILLING">Sign Up for Free!</span>
|
||||
<span quay-show="!Features.BILLING">Sign Up</span>
|
||||
</button>
|
||||
<span class="social-alternate" quay-show="Features.DIRECT_LOGIN && EXTERNAL_LOGINS.length">
|
||||
<i class="fa fa-circle"></i>
|
||||
<span class="inner-text">OR</span>
|
||||
</span>
|
||||
<div class="external-login-button" provider="{{ provider.id }}" ng-repeat="provider in EXTERNAL_LOGINS"></div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="cor-loader" ng-show="registering"></div>
|
||||
<div class="co-alert co-alert-info"
|
||||
ng-show="awaitingConfirmation && hideRegisteredMessage != 'true'">
|
||||
Thank you for registering! We have sent you an activation email.
|
||||
You must <b>verify your email address</b> before you can continue.
|
||||
</div>
|
||||
<form class="form-signup" name="signupForm" ng-submit="register()" ng-show="!awaitingConfirmation && !registering">
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" class="form-control" placeholder="Requested username" name="username" ng-model="newUser.username" autofocus required ng-pattern="/^[a-z0-9_]{4,30}$/">
|
||||
|
||||
<label for="email">E-mail address:</label>
|
||||
<input type="email" class="form-control" placeholder="Your email address" name="email" ng-model="newUser.email" required>
|
||||
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" class="form-control" placeholder="Create a password" name="password" ng-model="newUser.password" required
|
||||
ng-pattern="/^.{8,}$/">
|
||||
<input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword"
|
||||
match="newUser.password" required
|
||||
ng-pattern="/^.{8,}$/">
|
||||
<button id="signupButton"
|
||||
class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
|
||||
analytics-on analytics-event="register">
|
||||
<span quay-show="Features.BILLING">Create Free Account</span>
|
||||
<span quay-show="!Features.BILLING">Create Account</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="cor-loader" ng-show="registering"></div>
|
||||
<div class="co-alert co-alert-info" ng-show="awaitingConfirmation && hideRegisteredMessage != 'true'">
|
||||
Thank you for registering! We have sent you an activation email.
|
||||
You must <b>verify your email address</b> before you can continue.
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,38 @@
|
|||
<div class="user-setup-element">
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title accordion-title">
|
||||
<a id="signinToggle" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseSignin">
|
||||
Sign In
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseSignin" class="panel-collapse collapse" ng-class="hasSignedIn() ? 'in' : 'out'">
|
||||
<div class="panel-body">
|
||||
<div class="signin-form" signed-in="signedIn()" sign-in-started="signInStarted()" redirect-url="redirectUrl" invite-code="inviteCode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-setup-element-view">
|
||||
<div class="setup-logo-container" ng-show="hideLogo != 'true'">
|
||||
<img src="{{ Config.getEnterpriseLogo(true) }}">
|
||||
</div>
|
||||
<div class="panel panel-default"
|
||||
quay-show="Features.USER_CREATION && Config.AUTHENTICATION_TYPE == 'Database' && Features.DIRECT_LOGIN">
|
||||
<div class="panel-heading">
|
||||
<h6 class="panel-title accordion-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseRegister">
|
||||
Create Account
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
<div id="collapseRegister" class="panel-collapse collapse" ng-class="hasSignedIn() ? 'out' : 'in'">
|
||||
<div class="panel-body">
|
||||
<div class="signup-form" user-registered="handleUserRegistered(username)" invite-code="inviteCode"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default"
|
||||
quay-show="Features.MAILING && Config.AUTHENTICATION_TYPE == 'Database' && Features.DIRECT_LOGIN">
|
||||
<div class="panel-heading">
|
||||
<h6 class="panel-title accordion-title">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseForgot">
|
||||
Forgot Password
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
<div id="collapseForgot" class="panel-collapse collapse out">
|
||||
<div style="text-align: center" ng-show="sendingRecovery">
|
||||
<div class="cor-loader-inline"></div>
|
||||
</div>
|
||||
<div class="panel-body" ng-show="!sendingRecovery">
|
||||
<form class="form-signin" ng-submit="sendRecovery()" ng-show="!sent">
|
||||
<input type="text" class="form-control input-lg" placeholder="Email" ng-model="recovery.email">
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Send Recovery Email</button>
|
||||
</form>
|
||||
|
||||
<div class="co-alert co-alert-danger" ng-show="invalidRecovery">{{errorMessage}}</div>
|
||||
<div class="co-alert co-alert-info" ng-show="sent.status == 'org'">
|
||||
The e-mail address <code>{{ sent.orgemail }}</code> is assigned to organization <code>{{ sent.orgname }}</code>.
|
||||
To access that organization, an admin user must be used.
|
||||
<br><br>
|
||||
An e-mail has been sent to
|
||||
<code>{{ sent.orgemail }}</code> with the full list of admin users.
|
||||
<div class="user-setup-content">
|
||||
<div class="pane-container-container">
|
||||
<div class="pane-container" ng-class="currentView">
|
||||
<!-- Create Account -->
|
||||
<div class="content-pane">
|
||||
<div class="signup-form" user-registered="handleUserRegistered(username)" invite-code="inviteCode"></div>
|
||||
</div>
|
||||
|
||||
<!-- Sign in -->
|
||||
<div class="content-pane">
|
||||
<div class="signin-form" signed-in="signedIn()" sign-in-started="signInStarted()" redirect-url="redirectUrl" invite-code="inviteCode"></div>
|
||||
</div>
|
||||
|
||||
<!-- Recover Account -->
|
||||
<div class="content-pane">
|
||||
<div class="recovery-form"></div>
|
||||
</div>
|
||||
<div class="co-alert co-alert-success" ng-show="sent.status == 'sent'">Account recovery email was sent.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-footer-links">
|
||||
<a ng-click="setView('createAccount')"
|
||||
quay-show="Features.USER_CREATION && Config.AUTHENTICATION_TYPE == 'Database' && Features.DIRECT_LOGIN"
|
||||
ng-if="currentView != 'createAccount'">Create Account</a>
|
||||
<a ng-click="setView('signin')" ng-if="currentView != 'signin'">Sign In</a>
|
||||
<a ng-click="setView('forgotPassword')"
|
||||
quay-show="Features.MAILING && Config.AUTHENTICATION_TYPE == 'Database' && Features.DIRECT_LOGIN"
|
||||
ng-if="currentView != 'forgotPassword'">Forgot Password?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue