stubbed out new two-step settings page

src/app/config.js

@@ -103,6 +103,12 @@ angular
                 controller: 'settingsDomainsController',
                 data: { pageTitle: 'Domain Settings' }
             })
+            .state('backend.user.settingsTwoStep', {
+                url: '^/settings/two-step',
+                templateUrl: 'app/settings/views/settingsTwoStep.html',
+                controller: 'settingsTwoStepController',
+                data: { pageTitle: 'Two-step Login' }
+            })
             .state('backend.user.settingsCreateOrg', {
                 url: '^/settings/create-organization',
                 templateUrl: 'app/settings/views/settingsCreateOrganization.html',

src/app/constants.js

@@ -20,6 +20,13 @@ angular.module('bit')
             accepted: 1,
             confirmed: 2
         },
+        twoFactorProvider: {
+            authenticator: 0,
+            email: 1,
+            duo: 2,
+            yubikey: 3,
+            u2f: 4
+        },
         plans: {
             free: {
                 basePrice: 0,

src/app/services/apiService.js

@@ -114,6 +114,11 @@
             postDelete: { url: _apiUri + '/accounts/delete', method: 'POST', params: {} }
         });
 
+        _service.twoFactor = $resource(_apiUri + '/two-factor', {}, {
+            get: { method: 'GET', params: { provider: '@provider' } },
+            list: { method: 'GET', params: {} }
+        });
+
         _service.settings = $resource(_apiUri + '/settings', {}, {
             getDomains: { url: _apiUri + '/settings/domains', method: 'GET', params: {} },
             putDomains: { url: _apiUri + '/settings/domains', method: 'POST', params: {} },
@@ -135,7 +140,7 @@
         });
 
         _service.hibp = $resource('https://haveibeenpwned.com/api/v2/breachedaccount/:email', {}, {
-            get: { method: 'GET', params: { email: '@email' }, isArray: true},
+            get: { method: 'GET', params: { email: '@email' }, isArray: true },
         });
 
         function transformUrlEncoded(data) {

src/app/settings/settingsTwoStepController.js

@@ -0,0 +1,56 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsTwoStepController', function ($scope, apiService, authService, toastr, $analytics, constants,
+        $filter) {
+        $scope.providers = [
+            {
+                type: constants.twoFactorProvider.authenticator,
+                name: 'Authenticator App',
+                description: 'Use auth app.',
+                enabled: false,
+                free: true
+            },
+            {
+                type: constants.twoFactorProvider.yubikey,
+                name: 'YubiKey OTP',
+                description: '',
+                enabled: false
+            },
+            {
+                type: constants.twoFactorProvider.duo,
+                name: 'Duo',
+                description: '',
+                enabled: false
+            },
+            {
+                type: constants.twoFactorProvider.u2f,
+                name: 'FIDO U2F Security Key',
+                description: '',
+                enabled: false
+            },
+            {
+                type: constants.twoFactorProvider.email,
+                name: 'Email',
+                description: '',
+                enabled: false
+            }
+        ];
+
+        apiService.twoFactor.list({}, function (response) {
+            for (var i = 0; i < response.Data.length; i++) {
+                if (!response.Data[i].Enabled) {
+                    continue;
+                }
+
+                var provider = $filter('filter')($scope.providers, { type: response.Data[i].Type });
+                if (provider.length) {
+                    provider[0].enabled = true;
+                }
+            }
+        });
+
+        authService.getUserProfile().then(function (profile) {
+            _profile = profile;
+        });
+    });

src/app/settings/views/settingsTwoStep.html

@@ -0,0 +1,59 @@
+<section class="content-header">
+    <h1>Two-step Login <small>secure your account</small></h1>
+</section>
+<section class="content">
+    <div class="box box-danger">
+        <div class="box-header with-border">
+            <h3 class="box-title">Recovery Code</h3>
+        </div>
+        <div class="box-body">
+            Get it!
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Providers</h3>
+        </div>
+        <div class="box-body no-padding">
+            <div class="table-responsive">
+                <table class="table table-striped table-hover table-vmiddle">
+                    <tbody>
+                        <tr ng-repeat="provider in providers">
+                            <td style="width: 70px;">
+                                <div class="btn-group" data-append-to="body">
+                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                        <i class="fa fa-cog"></i> <span class="caret"></span>
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        <li>
+                                            <a href="#" stop-click ng-click="edit(provider)">
+                                                <i class="fa fa-fw fa-pencil"></i>
+                                                {{provider.enabled ? 'Edit' : 'Enable'}}
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#" stop-click ng-click="disable(provider)" class="text-red"
+                                               ng-if="provider.enabled">
+                                                <i class="fa fa-fw fa-ban"></i> Disable
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </td>
+                            <td>
+                                <a href="#" stop-click ng-click="edit(provider)">{{::provider.name}}</a>
+                                <div class="text-muted text-sm">{{::provider.description}}</div>
+                            </td>
+                            <td style="width: 100px;" class="text-right">
+                                <span class="label"
+                                      ng-class="{ 'label-success': provider.enabled, 'label-default': !provider.enabled }">
+                                    {{provider.enabled ? 'Enabled' : 'Disabled'}}
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>

src/app/views/userLayout.html

@@ -78,7 +78,7 @@
             </li>
             <li class="treeview"
                 ng-class="{active: $state.is('backend.user.settings') || $state.is('backend.user.settingsDomains') ||
-                $state.is('backend.user.settingsCreateOrg')}">
+                $state.is('backend.user.settingsCreateOrg') || $state.is('backend.user.settingsTwoStep')}">
                 <a ui-sref="backend.user.settings"><i class="fa fa-cogs fa-fw"></i> <span>Settings</span></a>
                 <ul class="treeview-menu" ng-class="{'menu-open': $state.is('backend.user.settings') ||
                         $state.is('backend.user.settingsDomains') || $state.is('backend.user.settingsCreateOrg')}">
@@ -87,6 +87,11 @@
                             <i class="fa fa-plus-circle fa-fw"></i> New Organization
                         </a>
                     </li>
+                    <li ng-class="{active: $state.is('backend.user.settingsTwoStep')}">
+                        <a ui-sref="backend.user.settingsTwoStep">
+                            <i class="fa fa-fw fa-circle-o"></i> Two-step Login
+                        </a>
+                    </li>
                     <li ng-class="{active: $state.is('backend.user.settingsDomains')}">
                         <a ui-sref="backend.user.settingsDomains">
                             <i class="fa fa-fw fa-circle-o"></i> Domain Rules

src/index.html

@@ -191,6 +191,7 @@
     <script src="app/settings/settingsTwoFactorController.js"></script>
     <script src="app/settings/settingsSessionsController.js"></script>
     <script src="app/settings/settingsDomainsController.js"></script>
+    <script src="app/settings/settingsTwoStepController.js"></script>
     <script src="app/settings/settingsAddEditEquivalentDomainController.js"></script>
     <script src="app/settings/settingsDeleteController.js"></script>
     <script src="app/settings/settingsCreateOrganizationController.js"></script>