mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 00:33:44 +00:00
two factor page cleanup
This commit is contained in:
Kyle Spearrin
@@ -1,7 +1,7 @@
|
||||
angular
|
||||
.module('bit.accounts')
|
||||
|
||||
.controller('accountsLoginTwoFactorController', function ($scope, $state, authService, toastr, utilsService,
|
||||
.controller('accountsLoginTwoFactorController', function ($scope, $state, authService, toastr, utilsService, SweetAlert,
|
||||
$analytics, i18nService, $stateParams, $filter, constantsService, $timeout, $window, cryptoService, apiService) {
|
||||
$scope.i18n = i18nService;
|
||||
utilsService.initListSectionItemListeners($(document), angular);
|
||||
@@ -11,11 +11,17 @@
|
||||
var masterPassword = $stateParams.masterPassword;
|
||||
var providers = $stateParams.providers;
|
||||
|
||||
if (!email || !masterPassword || !providers) {
|
||||
$state.go('login');
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.providerType = $stateParams.provider ? $stateParams.provider : getDefaultProvider(providers);
|
||||
$scope.twoFactorEmail = null;
|
||||
$scope.token = null;
|
||||
$scope.constantsProvider = constants.twoFactorProvider;
|
||||
$scope.providerType = $stateParams.provider ? $stateParams.provider : getDefaultProvider(providers);
|
||||
$scope.u2fReady = false;
|
||||
$scope.remember = { checked: false };
|
||||
init();
|
||||
|
||||
$scope.loginPromise = null;
|
||||
@@ -25,7 +31,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.loginPromise = authService.logIn(email, masterPassword, $scope.providerType, token);
|
||||
if ($scope.providerType === constants.twoFactorProvider.email ||
|
||||
$scope.providerType === constants.twoFactorProvider.authenticator) {
|
||||
token = token.replace(' ', '')
|
||||
}
|
||||
|
||||
$scope.loginPromise = authService.logIn(email, masterPassword, $scope.providerType, token, $scope.remember.checked);
|
||||
$scope.loginPromise.then(function () {
|
||||
$analytics.eventTrack('Logged In From Two-step');
|
||||
$state.go('tabs.vault', { animation: 'in-slide-left', syncOnLoad: true });
|
||||
@@ -43,16 +54,15 @@
|
||||
}
|
||||
|
||||
var key = cryptoService.makeKey(masterPassword, email);
|
||||
var hash = cryptoService.hashPassword(masterPassword, key);
|
||||
apiService.postTwoFactorEmail({
|
||||
email: email,
|
||||
masterPasswordHash: hash
|
||||
}, function () {
|
||||
if (doToast) {
|
||||
toastr.success('Verification email sent to ' + $scope.twoFactorEmail + '.');
|
||||
}
|
||||
}, function () {
|
||||
toastr.error('Could not send verification email.');
|
||||
cryptoService.hashPassword(masterPassword, key, function (hash) {
|
||||
var request = new TwoFactorEmailRequest(email, hash);
|
||||
apiService.postTwoFactorEmail(request, function () {
|
||||
if (doToast) {
|
||||
toastr.success('Verification email sent to ' + $scope.twoFactorEmail + '.');
|
||||
}
|
||||
}, function () {
|
||||
toastr.error('Could not send verification email.');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@@ -131,7 +141,27 @@
|
||||
else if ($scope.providerType === constants.twoFactorProvider.email) {
|
||||
var params = providers[constants.twoFactorProvider.email];
|
||||
$scope.twoFactorEmail = params.Email;
|
||||
if (Object.keys(providers).length > 1) {
|
||||
|
||||
if (chrome.extension.getViews({ type: 'popup' }).length > 0) {
|
||||
SweetAlert.swal({
|
||||
title: 'Two-step Login',
|
||||
text: 'Clicking outside the popup window to check your email for your verification code will ' +
|
||||
'cause this popup to close. ' +
|
||||
'Do you want to open this popup in a new window so that it does not close?',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: i18nService.yes,
|
||||
cancelButtonText: i18nService.no
|
||||
}, function (confirmed) {
|
||||
if (confirmed) {
|
||||
chrome.tabs.create({ url: '/popup/index.html#!/login' });
|
||||
return;
|
||||
}
|
||||
else if (Object.keys(providers).length > 1) {
|
||||
$scope.sendEmail(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (Object.keys(providers).length > 1) {
|
||||
$scope.sendEmail(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,14 @@
|
||||
<div class="title">{{i18n.verificationCode}}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="two-factor-key-page">
|
||||
<p ng-if="providerType === constantsProvider.authenticator">
|
||||
Enter the 6 digit verification code from your authenticator app.
|
||||
</p>
|
||||
<p ng-if="providerType === constantsProvider.email">
|
||||
Enter the 6 digit verification code that was emailed to <b>{{twoFactorEmail}}</b>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-section">
|
||||
<div class="list-section-items">
|
||||
@@ -21,14 +29,14 @@
|
||||
</div>
|
||||
<div class="list-section-item list-section-item-checkbox">
|
||||
<label for="remember">Remember me</label>
|
||||
<input id="remember" name="Remember" type="checkbox" ng-model="remember">
|
||||
<input id="remember" name="Remember" type="checkbox" ng-model="remember.checked">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-section-footer">
|
||||
{{i18n.enterTwoStepVerCode}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-accent" ng-if="providerType === constantsProvider.email">
|
||||
<a href="#" stop-click ng-click="sendEmail(true)">Send verification code email again</a>
|
||||
</p>
|
||||
<p class="text-center text-accent">
|
||||
<a href="#" stop-click ng-click="anotherMethod()">Use another two-step login method</a>
|
||||
</p>
|
||||
@@ -61,6 +69,10 @@
|
||||
<div class="title">YubiKey</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="two-factor-key-page">
|
||||
<p>Insert your YubiKey into your computer's USB port, then touch its button.</p>
|
||||
<img src="../images/two-factor/yubikey.jpg" alt="" class="img-rounded img-responsive" />
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-section">
|
||||
<div class="list-section-items">
|
||||
@@ -71,12 +83,9 @@
|
||||
</div>
|
||||
<div class="list-section-item list-section-item-checkbox">
|
||||
<label for="remember">Remember me</label>
|
||||
<input id="remember" name="Remember" type="checkbox" ng-model="remember">
|
||||
<input id="remember" name="Remember" type="checkbox" ng-model="remember.checked">
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-section-footer">
|
||||
Touch the YubiKey button.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-accent">
|
||||
@@ -96,10 +105,27 @@
|
||||
<div class="title">FIDO U2F</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div ng-if="!u2fReady">Loading...</div>
|
||||
<div ng-if="u2fReady">Touch button</div>
|
||||
<iframe id="u2f_iframe" class="hide"></iframe>
|
||||
<p class="text-center text-accent">
|
||||
<div class="two-factor-key-page">
|
||||
<iframe id="u2f_iframe" class="hide"></iframe>
|
||||
<p ng-if="!u2fReady">Loading...</p>
|
||||
<div ng-if="u2fReady">
|
||||
<p>
|
||||
Insert your Security Key into your computer's USB port. If it has a button, touch it.
|
||||
</p>
|
||||
<img src="../images/two-factor/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">Remember me</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()">Use another two-step login method</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -2,50 +2,69 @@
|
||||
.module('bit.services')
|
||||
|
||||
.factory('authService', function (cryptoService, apiService, userService, tokenService, $q, $rootScope, loginService,
|
||||
folderService, settingsService, syncService, appIdService, utilsService) {
|
||||
folderService, settingsService, syncService, appIdService, utilsService, constantsService) {
|
||||
var _service = {};
|
||||
|
||||
_service.logIn = function (email, masterPassword, twoFactorProvider, twoFactorToken) {
|
||||
_service.logIn = function (email, masterPassword, twoFactorProvider, twoFactorToken, remember) {
|
||||
email = email.toLowerCase();
|
||||
var key = cryptoService.makeKey(masterPassword, email);
|
||||
var deferred = $q.defer();
|
||||
cryptoService.hashPassword(masterPassword, key, function (hashedPassword) {
|
||||
appIdService.getAppId(function (appId) {
|
||||
var deviceRequest = new DeviceRequest(appId, utilsService);
|
||||
var request = new TokenRequest(email, hashedPassword, twoFactorProvider, twoFactorToken, deviceRequest);
|
||||
tokenService.getTwoFactorToken(email, function (twoFactorRememberedToken) {
|
||||
var deviceRequest = new DeviceRequest(appId, utilsService);
|
||||
var request;
|
||||
|
||||
apiService.postIdentityToken(request, function (response) {
|
||||
// success
|
||||
if (!response || !response.accessToken) {
|
||||
return;
|
||||
if (twoFactorToken && typeof (twoFactorProvider) !== 'undefined' && twoFactorProvider !== null) {
|
||||
request = new TokenRequest(email, hashedPassword, twoFactorProvider, twoFactorToken, remember,
|
||||
deviceRequest);
|
||||
}
|
||||
else if (twoFactorRememberedToken) {
|
||||
request = new TokenRequest(email, hashedPassword, constantsService.twoFactorProvider.remember,
|
||||
twoFactorRememberedToken, false, deviceRequest);
|
||||
}
|
||||
else {
|
||||
request = new TokenRequest(email, hashedPassword, null, null, false, deviceRequest);
|
||||
}
|
||||
|
||||
tokenService.setTokens(response.accessToken, response.refreshToken, function () {
|
||||
cryptoService.setKey(key, function () {
|
||||
cryptoService.setKeyHash(hashedPassword, function () {
|
||||
userService.setUserIdAndEmail(tokenService.getUserId(), tokenService.getEmail(), function () {
|
||||
cryptoService.setEncKey(response.key).then(function () {
|
||||
return cryptoService.setEncPrivateKey(response.privateKey);
|
||||
}).then(function () {
|
||||
chrome.runtime.sendMessage({ command: 'loggedIn' });
|
||||
deferred.resolve({
|
||||
twoFactor: false,
|
||||
twoFactorProviders: null
|
||||
apiService.postIdentityToken(request, function (response) {
|
||||
// success
|
||||
if (!response || !response.accessToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.twoFactorToken) {
|
||||
tokenService.setTwoFactorToken(response.twoFactorToken, email, function () { });
|
||||
}
|
||||
|
||||
tokenService.setTokens(response.accessToken, response.refreshToken, function () {
|
||||
cryptoService.setKey(key, function () {
|
||||
cryptoService.setKeyHash(hashedPassword, function () {
|
||||
userService.setUserIdAndEmail(tokenService.getUserId(), tokenService.getEmail(),
|
||||
function () {
|
||||
cryptoService.setEncKey(response.key).then(function () {
|
||||
return cryptoService.setEncPrivateKey(response.privateKey);
|
||||
}).then(function () {
|
||||
chrome.runtime.sendMessage({ command: 'loggedIn' });
|
||||
deferred.resolve({
|
||||
twoFactor: false,
|
||||
twoFactorProviders: null
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}, function (providers) {
|
||||
// two factor required
|
||||
deferred.resolve({
|
||||
twoFactor: true,
|
||||
twoFactorProviders: providers
|
||||
});
|
||||
}, function (error) {
|
||||
// error
|
||||
deferred.reject(error);
|
||||
});
|
||||
}, function (providers) {
|
||||
// two factor required
|
||||
deferred.resolve({
|
||||
twoFactor: true,
|
||||
twoFactorProviders: providers
|
||||
});
|
||||
}, function (error) {
|
||||
// error
|
||||
deferred.reject(error);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -65,3 +65,13 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.two-factor-key-page {
|
||||
padding: 20px 20px 0 20px;
|
||||
text-align: center;
|
||||
|
||||
.img-responsive {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user