walnut.js/lib/com.daplie.walnut/views/login-v3.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>