#84: Enable/disable TOTP in UI

This commit is contained in:
jendib 2016-03-23 23:48:54 +01:00
parent e616add75a
commit 1343948d33
8 changed files with 2138 additions and 4 deletions

View File

@ -5,7 +5,7 @@
*/
angular.module('docs',
// Dependencies
['ui.router', 'ui.route', 'ui.bootstrap', 'ui.keypress', 'ui.validate', 'dialog', 'ngProgress',
['ui.router', 'ui.route', 'ui.bootstrap', 'ui.keypress', 'ui.validate', 'dialog', 'ngProgress', 'monospaced.qrcode',
'ui.sortable', 'restangular', 'ngSanitize', 'ngTouch', 'colorpicker.module', 'angularFileUpload']
)

View File

@ -3,5 +3,51 @@
/**
* Settings security controller.
*/
angular.module('docs').controller('SettingsSecurity', function() {
angular.module('docs').controller('SettingsSecurity', function($scope, User, $dialog, $modal, Restangular) {
User.userInfo().then(function(data) {
$scope.user = data;
});
/**
* Enable TOTP.
*/
$scope.enableTotp = function() {
var title = 'Enable two-factor authentication';
var msg = 'Make sure you have a TOTP-compatible application on your phone ready to add a new account';
var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}];
$dialog.messageBox(title, msg, btns, function(result) {
if (result == 'ok') {
Restangular.one('user/enable_totp').post().then(function(data) {
$scope.secret = data.secret;
User.userInfo(true).then(function(data) {
$scope.user = data;
})
});
}
});
};
/**
* Disable TOTP.
*/
$scope.disableTotp = function() {
$modal.open({
templateUrl: 'partial/docs/settings.security.disabletotp.html',
controller: 'SettingsSecurityModalDisableTotp'
}).result.then(function (password) {
if (password == null) {
return;
}
// Disable TOTP
Restangular.one('user/disable_totp').post('', {
password: password
}).then(function() {
User.userInfo(true).then(function(data) {
$scope.user = data;
})
});
});
};
});

View File

@ -0,0 +1,11 @@
'use strict';
/**
* Settings modal disable TOTP controller.
*/
angular.module('docs').controller('SettingsSecurityModalDisableTotp', function ($scope, $modalInstance) {
$scope.password = '';
$scope.close = function(password) {
$modalInstance.close(password);
}
});

View File

@ -38,6 +38,7 @@
<script src="lib/angular.colorpicker.js" type="text/javascript"></script>
<script src="lib/angular.file-upload.js" type="text/javascript"></script>
<script src="lib/angular.ngprogress.js" type="text/javascript"></script>
<script src="lib/angular.qrcode.js" type="text/javascript"></script>
<script src="app/docs/app.js" type="text/javascript"></script>
<script src="app/docs/controller/Main.js" type="text/javascript"></script>
<script src="app/docs/controller/document/Document.js" type="text/javascript"></script>
@ -58,6 +59,7 @@
<script src="app/docs/controller/settings/SettingsDefault.js" type="text/javascript"></script>
<script src="app/docs/controller/settings/SettingsAccount.js" type="text/javascript"></script>
<script src="app/docs/controller/settings/SettingsSecurity.js" type="text/javascript"></script>
<script src="app/docs/controller/settings/SettingsSecurityModalDisableTotp.js" type="text/javascript"></script>
<script src="app/docs/controller/settings/SettingsSession.js" type="text/javascript"></script>
<script src="app/docs/controller/settings/SettingsLog.js" type="text/javascript"></script>
<script src="app/docs/controller/settings/SettingsUser.js" type="text/javascript"></script>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,18 @@
<div class="modal-header">
<h3>Disable two-factor authentication</h3>
</div>
<div class="modal-body">
<p class="text-danger">
Your account will not be protected by the two-factor authentication anymore.
</p>
<p>
<label for="password">Confirm your password</label>
<input class="form-control" type="password" id="password" ng-model="password" />
</p>
</div>
<div class="modal-footer">
<button ng-click="close(password)" class="btn btn-warning">
Disable two-factor authentication
</button>
<button ng-click="close(null)" class="btn btn-default">Cancel</button>
</div>

View File

@ -1 +1,43 @@
<h1>Two-factor <small>authentication</small></h1>
<h1>
Two-factor <small>authentication</small>
<span class="label" ng-class="{ 'label-success': user.totp_enabled, 'label-danger': !user.totp_enabled }">
{{ user.totp_enabled ? 'Enabled' : 'Disabled' }}
</span>
</h1>
<div ng-if="!user.totp_enabled">
<p>
Two-factor authentication allows you to add a layer of security on your <strong>Sismics Docs</strong> account.<br/>
Before activating this feature, make sure you have a TOTP-compatible app on your phone:
</p>
<ul>
<li>For Android, iOS, and Blackberry: <a href="https://support.google.com/accounts/answer/1066447" target="_blank">Google Authenticator</a></li>
<li>For Android and iOS: <a href="https://guide.duo.com/third-party-accounts" target="_blank">Duo Mobile</a></li>
<li>For Windows Phone: <a href="https://www.microsoft.com/en-US/store/apps/Authenticator/9WZDNCRFJ3RJ" target="_blank">Authenticator</a></li>
</ul>
<p>
Those applications automatically generate a validation code that changes after a certain period of time.<br/>
You will be required to enter this validation code each time you login on <strong>Sismics Docs</strong>.
</p>
<p>
<button class="btn btn-primary" ng-click="enableTotp()">Enable two-factor authentication</button>
</p>
</div>
<div ng-if="user.totp_enabled">
<div ng-if="secret">
<p>Your secret key is: <strong>{{ secret }}</strong></p>
<qrcode data="otpauth://totp/Sismics%20Docs?secret={{ secret }}" size="200"></qrcode>
<p class="text-danger">
<strong>Configure your TOTP app on your phone with this secret key now, you will not be able to access it later.</strong>
</p>
</div>
<p>
Two-factor authentication is enabled on your account.<br/>
Each time you login on <strong>Sismics Docs</strong>, you will be asked a validation code from your configured phone app.<br/>
If you loose your phone, you will not be able to login into your account but active sessions will allow you to regenerate a secrey key.
</p>
<p>
<button class="btn btn-warning" ng-click="disableTotp()">Disable two-factor authentication</button>
</p>
</div>