walnut.js/lib/com.daplie.walnut/views/login-v3.html

82 lines
5.4 KiB
HTML

<div ng-init="LC.showSecret = false; LC.formState = 'invalid'" class="auth-modal">
<div class="modal-header">
<h4 class="modal-title">Login with your Account</h4>
<div ng-if="LC.flashMessage"><br/>
<div ng-class="[ LC.flashMessageClass ]" class="alert"><span ng-bind="LC.flashMessage"></span>
<p ng-if="LC.rawMessage" ng-bind="LC.rawMessage"></p>
</div>
</div>
</div>
<div class="modal-body">
<form ng-submit="LC.submitLogin(LC.delta.localLogin)">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="username">Email Address</label><span>&#32;(</span><a href="https://ldsaccount.lds.org/recover-username" target="forgotuser" tabindex="20">forgot username?</a><span>)</span>
<input ng-model="LC.delta.localLogin.node" ng-change="LC.checkLdsLogin(LC.delta.localLogin)" ng-disabled="LC.authenticating" type="email" tabindex="1" placeholder="ex: johndoe" class="form-control"/><span>&#32;</span><span ng-bind="LC.delta.localLogin.message"></span><span ng-if="!LC.delta.localLogin.message">Enter your existing username or the username you would like to create.</span>
</div>
<div class="form-group">
<label for="password">Secure Passphrase</label><span>&#32;(</span><a href="https://ldsaccount.lds.org/recover-password" target="forgotpass" tabindex="21">forgot passphrase?</a><span>)</span><span>&nbsp;&nbsp;&nbsp;</span>
<label class="checkbox-inline">
<input type="checkbox" ng-model="LC.showSecret" tabindex="22" class="checkbox"/><span>Show</span>
</label>
<input ng-if="!LC.showSecret" ng-model="LC.delta.localLogin.secret" ng-change="LC.checkSecret(LC.delta.localLogin)" ng-disabled="LC.authenticating" type="password" tabindex="2" placeholder="ex: ************" class="form-control"/>
<input ng-if="LC.showSecret" ng-model="LC.delta.localLogin.secret" ng-change="LC.checkSecret(LC.delta.localLogin)" ng-disabled="LC.authenticating" type="text" tabindex="2" placeholder="ex: my secret phrase" class="form-control"/><span ng-if="LC.delta.localLogin.secret.length" ng-bind="LC.delta.localLogin.secretMessage"></span><span ng-if="!LC.delta.localLogin.secret.length">Enter a passphrase with {{ LC.secretMinLength }} or more characters.</span>
</div>
<div class="form-group" ng-if="LC.showTotp">
<label for="totp">Daplie Authenticator Token</label><span>&#32;(</span><a href="" tabindex="22">use email verification instead?</a><span>)</span>
<input ng-model="LC.delta.localLogin.totp" ng-change="LC.checkTotp(LC.delta.localLogin)" ng-disabled="LC.authenticating" type="text" tabindex="3" placeholder="ex: 123 456" class="form-control"/><span ng-if="LC.delta.localLogin.totp.length" ng-bind="LC.delta.localLogin.totpMessage"></span><span ng-if="!LC.delta.localLogin.totp.length">Enter your 6-digit Daplie Token.</span>
</div>
</div>
</div>
<div ng-if="'create' === LC.formState" class="row">
<div class="col-xs-12">
<div>
<p><span>To create an Account you will need your&#32;</span><strong>Multi-Factor Authentication (MFA)</strong><span>.</span></p>
<p><span>You can get your&#32;</span><strong>MFA</strong><span>&#32;via</span></p>
<ul>
<li><span>your&#32;</span><strong>Phone</strong></li>
<li><span>your&#32;</span><strong>Email</strong></li>
<li><span>your&#32;</span><strong>Authy</strong><span>&#32;app</span></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<input ng-if="'invalid' === LC.formState" type="submit" disabled="disabled" tabindex="4" value="Enter Username" class="btn btn-primary"/>
<input ng-if="'authenticating' === LC.formState" disabled="disabled" type="button" tabindex="4" value="Logging in..." class="btn btn-primary"/>
<input ng-if="'login' === LC.formState" ng-disabled="LC.authenticating" type="submit" tabindex="4" value="Login" class="btn btn-primary"/>
<input ng-if="'create' === LC.formState" ng-disabled="LC.authenticating" type="submit" tabindex="4" value="Register" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
<div ng-if="LC.logins.length" class="row">
<div class="col-xs-12">
<label>You will be able to login to this account through</label>
<ul>
<li ng-repeat="login in LC.logins" ng-if="login.link"><span>{{ login.comment || (login | json) }}</span>
</li>
</ul>
</div>
</div>
</form>
<div ng-if="!LC.hideSocial &amp;&amp; LC.loginStrategies.length" class="social signin-option">
<hr/>
<h3>Or Connect with...</h3>
<div class="row">
<div ng-repeat="strategy in LC.loginStrategies" class="col-md-6">
<div class="option">
<button type="button" ng-click="strategy.login()" ng-disabled="'authenticating' === LC.formState" ng-attr-tabindex="{{ $index + 5 }}" ng-class="[ 'btn', 'btn-block', 'btn-social', strategy.btnClass ]"><i ng-class="[ 'fa', strategy.faClass ]"></i><span class="signin">{{ strategy.label }}</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>