clients/src/popup-old/app/accounts/views/accountsLoginTwoFactor.html

<form name="theForm" ng-submit="login(token)" bit-form="loginPromise"
      ng-if="providerType === constantsProvider.authenticator || providerType === constantsProvider.email">
    <div class="header">
        <div class="left">
            <a href="#" ng-click="back()"><i class="fa fa-chevron-left"></i> {{i18n.back}}</a>
        </div>
        <div class="right">
            <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">{{i18n.continue}}</button>
            <i class="fa fa-spinner fa-lg" ng-show="theForm.$loading" ng-class="{'fa-spin' : theForm.$loading}"></i>
        </div>
        <div class="title">{{i18n.verificationCode}}</div>
    </div>
    <div class="content">
        <div class="two-factor-key-page">
            <p ng-if="providerType === constantsProvider.authenticator">
                {{i18n.enterVerificationCodeApp}}
            </p>
            <p ng-if="providerType === constantsProvider.email">
                {{i18n.enterVerificationCodeEmail}} <b>{{twoFactorEmail}}</b>.
            </p>
        </div>
        <div class="list">
            <div class="list-section">
                <div class="list-section-items">
                    <div class="list-section-item list-section-item-icon-input">
                        <i class="fa fa-lock fa-lg fa-fw"></i>
                        <label for="code" class="sr-only">{{i18n.verificationCode}}</label>
                        <input id="code" type="text" name="Code" placeholder="{{i18n.verificationCode}}" ng-model="token"
                               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                    </div>
                    <div class="list-section-item list-section-item-checkbox">
                        <label for="remember">{{i18n.rememberMe}}</label>
                        <input id="remember" name="Remember" type="checkbox" ng-model="remember.checked">
                    </div>
                </div>
            </div>
        </div>
        <p class="text-center text-accent" ng-if="providerType === constantsProvider.email">
            <a href="#" stop-click ng-click="sendEmail(true)">{{i18n.sendVerificationCodeEmailAgain}}</a>
        </p>
        <p class="text-center text-accent">
            <a href="#" stop-click ng-click="anotherMethod()">{{i18n.useAnotherTwoStepMethod}}</a>
        </p>
    </div>
</form>

<form name="theForm" bit-form="loginPromise" ng-if="providerType === constantsProvider.duo ||
      providerType === constantsProvider.organizationDuo" autocomplete="off">
    <div class="header">
        <div class="left">
            <a ui-sref="login({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.back}}</a>
        </div>
        <div class="title">
            Duo
            <span ng-if="providerType === constantsProvider.organizationDuo">({{i18n.organization}})</span>
        </div>
    </div>
    <div class="content">
        <div id="duoFrameWrapper" ng-if="!showNewWindowMessage">
            <iframe id="duo_iframe"></iframe>
        </div>
        <div ng-if="showNewWindowMessage" class="two-factor-key-page">
            <p>{{i18n.twoStepNewWindowMessage}}</p>
        </div>
        <div class="list">
            <div class="list-section">
                <div class="list-section-items">
                    <div class="list-section-item list-section-item-checkbox">
                        <label for="remember">{{i18n.rememberMe}}</label>
                        <input id="remember" name="Remember" type="checkbox" ng-model="remember.checked">
                    </div>
                </div>
            </div>
        </div>
        <p class="text-accent text-center">
            <a href="#" stop-click ng-click="anotherMethod()">{{i18n.useAnotherTwoStepMethod}}</a>
        </p>
    </div>
</form>

<form name="theForm" ng-submit="login(token)" bit-form="loginPromise" ng-if="providerType === constantsProvider.yubikey"
      autocomplete="off">
    <div class="header">
        <div class="left">
            <a ui-sref="login({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.back}}</a>
        </div>
        <div class="right">
            <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">{{i18n.continue}}</button>
            <i class="fa fa-spinner fa-lg fa-spin" ng-show="theForm.$loading"></i>
        </div>
        <div class="title">YubiKey</div>
    </div>
    <div class="content">
        <div class="two-factor-key-page">
            <p>{{i18n.insertYubiKey}}</p>
            <img src="../../../images/yubikey.jpg" alt="" class="img-rounded img-responsive" />
        </div>
        <div class="list">
            <div class="list-section">
                <div class="list-section-items">
                    <div class="list-section-item list-section-item-icon-input">
                        <i class="fa fa-lock fa-lg fa-fw"></i>
                        <label for="code" class="sr-only">{{i18n.verificationCode}}</label>
                        <input id="code" type="password" name="Code" ng-model="token">
                    </div>
                    <div class="list-section-item list-section-item-checkbox">
                        <label for="remember">{{i18n.rememberMe}}</label>
                        <input id="remember" name="Remember" type="checkbox" ng-model="remember.checked">
                    </div>
                </div>
            </div>
        </div>
        <p class="text-center text-accent">
            <a href="#" stop-click ng-click="anotherMethod()">{{i18n.useAnotherTwoStepMethod}}</a>
        </p>
    </div>
</form>

<form name="theForm" bit-form="loginPromise" ng-if="providerType === constantsProvider.u2f" autocomplete="off">
    <div class="header">
        <div class="left">
            <a ui-sref="login({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.back}}</a>
        </div>
        <div class="right">
            <i class="fa fa-spinner fa-lg fa-spin" ng-show="theForm.$loading"></i>
        </div>
        <div class="title">FIDO U2F</div>
    </div>
    <div class="content">
        <div class="two-factor-key-page">
            <iframe id="u2f_iframe" class="hide"></iframe>
            <p ng-if="!u2fReady">Loading...</p>
            <div ng-if="u2fReady">
                <p>{{i18n.insertU2f}}</p>
                <img src="../../../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
            </div>
        </div>
        <div class="list">
            <div class="list-section">
                <div class="list-section-items">
                    <div class="list-section-item list-section-item-checkbox">
                        <label for="remember">{{i18n.rememberMe}}</label>
                        <input id="remember" name="Remember" type="checkbox" ng-model="remember.checked">
                    </div>
                </div>
            </div>
        </div>
        <p class="text-accent text-center">
            <a href="#" stop-click ng-click="anotherMethod()">{{i18n.useAnotherTwoStepMethod}}</a>
        </p>
    </div>
</form>

<div ng-if="providerType === null">
    <div class="header">
        <div class="left">
            <a ui-sref="login({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> {{i18n.back}}</a>
        </div>
        <div class="title">{{i18n.loginUnavailable}}</div>
    </div>
    <div class="content">
        <div class="two-factor-key-page">
            <p>{{i18n.noTwoStepProviders}}</p>
            <p>{{i18n.noTwoStepProviders2}}</p>
        </div>
        <p class="text-accent text-center">
            <a href="#" stop-click ng-click="anotherMethod()">{{i18n.useAnotherTwoStepMethod}}</a>
        </p>
    </div>
</div>