web/app/settings/views/settingsTwoFactor.html

<div class="modal-header">
    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="twoFactorModelLabel"><i class="fa fa-key"></i> Two-step Login</h4>
</div>
<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise" ng-if="!twoFactorModel">
    <div class="modal-body">
        <p>Current Status: <span class="label bg-green" ng-show="enabled()">ENABLED</span><span class="label bg-gray" ng-show="!enabled()">DISABLED</span></p>
        <p>Two-step login helps keep your account more secure by requiring a code provided by an app on your mobile device while logging in (in addition to your master password).</p>
        <p ng-show="enabled()">Two-step login is already enabled on your account. To access your two-step settings enter your master password below.</p>
        <p ng-show="!enabled()">To get started with two-step login enter your master password below.</p>
        <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
            <h4>Errors have occured</h4>
            <ul>
                <li ng-repeat="e in authTwoStepForm.$errors">{{e}}</li>
            </ul>
        </div>
        <div class="form-group" show-errors>
            <label for="masterPassword">Master Password</label>
            <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword" class="form-control" required api-field />
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="authTwoStepForm.$loading">
            <i class="fa fa-refresh fa-spin loading-icon" ng-show="authTwoStepForm.$loading"></i>Continue
        </button>
        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
    </div>
</form>
<form name="updateTwoStepForm" ng-submit="updateTwoStepForm.$valid && update(updateModel)" api-form="updatePromise" ng-if="twoFactorModel">
    <div class="modal-body">
        <div ng-show="enabled()">
            <p>Two-step login is enabled on your account. Below is the code required by your verification app.</p>
            <p>Need a two-step verification app? Download one of the following:</p>
        </div>
        <div ng-show="!enabled()">
            <p>Setting up two-step verification is easy, just follow these steps:</p>
            <h4>1. Download a two-step verification app</h4>
        </div>
        <ul class="fa-ul">
            <li><i class="fa-li fa fa-apple"></i> iOS devices: <a href="https://itunes.apple.com/en/app/authy/id494168017" target="_blank">Authy for iOS</a></li>
            <li><i class="fa-li fa fa-android"></i> Android devices: <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">Authy for Android</a></li>
            <li><i class="fa-li fa fa-windows"></i> Windows devices: <a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">Microsoft Authenticator </a></li>
        </ul>
        <hr ng-show="enabled()" />
        <h4 ng-show="!enabled()" style="margin-top: 30px;">2. Scan this QR code with your verification app</h4>
        <div class="row">
            <div class="col-md-4 text-center">
                <p><img ng-src="{{twoFactorModel.qr}}" alt="QR" class="img-thumbnail" /></p>
            </div>
            <div class="col-sm-8">
                <p><strong>Can't scan the code?</strong> You can add the code to your application manually using the following details:</p>
                <ul class="list-unstyled">
                    <li><strong>Key:</strong> <samp>{{twoFactorModel.key}}</samp></li>
                    <li><strong>Account:</strong> {{account}}</li>
                    <li><strong>Time based:</strong> Yes</li>
                </ul>
            </div>
        </div>
        <div ng-show="!enabled()">
            <div class="callout callout-danger validation-errors" ng-show="updateTwoStepForm.$errors">
                <h4>Errors have occured</h4>
                <ul>
                    <li ng-repeat="e in updateTwoStepForm.$errors">{{e}}</li>
                </ul>
            </div>
            <h4 style="margin-top: 30px;">3. Enter the resulting verification code from the app</h4>
            <div class="form-group" show-errors ng-show="!twoFactorModel.enabled">
                <label for="token" class="sr-only">Verification Code</label>
                <input type="number" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token" class="form-control" ng-required="!twoFactorModel.enabled" api-field />
            </div>
            <p>NOTE: After enabling two-step login, you will be required to enter the current code generated by your verification app each time you log in.</p>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="updateTwoStepForm.$loading">
            <i class="fa fa-refresh fa-spin loading-icon" ng-show="updateTwoStepForm.$loading"></i>
            <span ng-show="twoFactorModel.enabled">Disable Two-step</span>
            <span ng-show="!twoFactorModel.enabled">Enable Two-step</span>
        </button>
        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
    </div>
</form>