From 395827ad60c865de6ee3fe0cf3fc1dbfec646d00 Mon Sep 17 00:00:00 2001 From: Sjors Provoost Date: Fri, 18 Dec 2015 18:37:06 +0100 Subject: [PATCH] feat(Login): new browser approval - different browser --- app/partials/authorize-approve.jade | 60 +++++++++++++++++++ assets/js/controllers/app.controller.js | 2 +- .../authorizeApprove.controller.js | 42 ++++++++++++- assets/js/routes.js | 20 +++---- assets/js/services/wallet.service.js | 12 +++- locales/en-human.json | 13 +++- 6 files changed, 132 insertions(+), 17 deletions(-) create mode 100644 app/partials/authorize-approve.jade diff --git a/app/partials/authorize-approve.jade b/app/partials/authorize-approve.jade new file mode 100644 index 0000000000..cbfb0e8ee8 --- /dev/null +++ b/app/partials/authorize-approve.jade @@ -0,0 +1,60 @@ +div(ng-show="checkingToken") + header + hgroup + .flex-between.flex-center.flex-wrap + h2.em-300.mtn(translate="CHECKING_LOGIN_ATTEMPT") + hgroup + img(src="img/spinner.gif") +div(ng-show="differentBrowser") + header + hgroup + .flex-between.flex-center.flex-wrap + h2.em-300.mtn(translate="AUTHORIZE_APPROVE_OTHER_BROWSER") + p.em-300(translate="AUTHORIZE_APPROVE_OTHER_BROWSER_EXPLAIN") + hgroup + p.em-300 {{ details.device_change_reason }} + + .row + .col-xs-6 + h4(translate="AUTHORIZE_APPROVE_REQUESTING_DEVICE") + p + b + span(translate="BROWSER") + span : + | {{ details.requester_device_description }} + br + b + span(translate="IP_ADDRESS") + span : + | {{ details.requester_ip }} + br + b + span(translate="COUNTRY_OF_ORIGIN") + span : + | {{ details.requester_country }} + br + .col-xs-6 + h4(translate="AUTHORIZE_APPROVE_THIS_DEVICE") + p + b + span(translate="BROWSER") + span : + | {{ details.approver_device_description }} + br + b + span(translate="IP_ADDRESS") + span : + | {{ details.approver_ip }} + br + b + span(translate="COUNTRY_OF_ORIGIN") + span : + | {{ details.approver_country }} + br + + form.ptl.form-horizontal.clearfix(role="form") + .flex-between.flex-center.pal + .flex-center + button.button-danger(ui-ladda="busyApproving", ng-click="approve()", data-style="expand-left", ladda-translate="ACCEPT") + .flex-center.flex-end + button.button-primary(ui-ladda="busyRejecting", ng-click="reject()", data-style="expand-left", ladda-translate="REJECT") diff --git a/assets/js/controllers/app.controller.js b/assets/js/controllers/app.controller.js index 436bacd2be..85f8620165 100644 --- a/assets/js/controllers/app.controller.js +++ b/assets/js/controllers/app.controller.js @@ -59,7 +59,7 @@ function AppCtrl($scope, Wallet, Alerts, $state, $rootScope, $location, $cookieS }; $scope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => { - let loggedOutStates = ['public', 'public.login-no-uid', 'public.login-uid', 'public.recover', 'public.reminder', 'public.signup', 'public.help', 'open', 'wallet.common.verify-email', 'wallet.common.unsubscribe']; + let loggedOutStates = ['public', 'public.login-no-uid', 'public.login-uid', 'public.recover', 'public.reminder', 'public.signup', 'public.help', 'open', 'wallet.common.verify-email', 'wallet.common.unsubscribe', 'public.authorize-approve']; if (loggedOutStates.every(s => toState.name !== s) && $scope.status.isLoggedIn === false) { $state.go("public.login-no-uid"); } diff --git a/assets/js/controllers/authorizeApprove.controller.js b/assets/js/controllers/authorizeApprove.controller.js index f74d516376..fb3a11541a 100644 --- a/assets/js/controllers/authorizeApprove.controller.js +++ b/assets/js/controllers/authorizeApprove.controller.js @@ -4,6 +4,10 @@ angular function AuthorizeApproveCtrl($window, $scope, Wallet, $stateParams, $state, Alerts, $translate) { const success = (uid) => { + $scope.checkingToken = false; + $scope.busyApproving = false; + $scope.busyRejecting = false; + $window.close(); // This is sometimes ignored, hence the code below: @@ -20,14 +24,46 @@ function AuthorizeApproveCtrl($window, $scope, Wallet, $stateParams, $state, Ale }); }); } - - } const error = (message) => { + $scope.checkingToken = false; + $scope.busyApproving = false; + $scope.busyRejecting = false; + $state.go("public.login-no-uid"); Alerts.displayError(message, true); } - Wallet.authorizeApprove($stateParams.token, success, error) + const differentBrowser = (details) => { + $scope.checkingToken = false; + + $scope.differentBrowser = true; + $scope.details = details; + } + + $scope.checkingToken = true; + + Wallet.authorizeApprove($stateParams.token, success, differentBrowser, null, error); + + $scope.approve = () => { + $scope.busyApproving = true; + Wallet.authorizeApprove($stateParams.token, success, () => {}, true, error); + } + + $scope.reject = () => { + $scope.busyRejecting = true; + + const rejected = () => { + $scope.busyRejecting = false; + + $translate('AUTHORIZE_REJECT_SUCCESS').then(translation => { + $state.go("public.login-no-uid").then(() => { + Alerts.displaySuccess(translation) + }); + }); + }; + + Wallet.authorizeApprove($stateParams.token, rejected, () => {}, false, error); + } } diff --git a/assets/js/routes.js b/assets/js/routes.js index 1636ccea66..9f5c99809d 100644 --- a/assets/js/routes.js +++ b/assets/js/routes.js @@ -129,6 +129,16 @@ function AppRouter($stateProvider, $urlRouterProvider) { } } }) + .state('public.authorize-approve', { + url: '/authorize-approve/{token:.*}', + views: { + alerts: commonViews.alerts, + contents: { + templateUrl: 'partials/authorize-approve.jade', + controller: 'AuthorizeApproveCtrl' + } + } + }) .state('signup.finish', { url: '/signup/finish', views: commonViews @@ -253,16 +263,6 @@ function AppRouter($stateProvider, $urlRouterProvider) { } } }) - .state('wallet.common.authorize-approve', { - url: '/authorize-approve/{token:.*}', - views: { - top: top, - left: walletNav, - right: { - controller: 'AuthorizeApproveCtrl' - } - } - }) .state('wallet.common.settings', { url: '/settings', views: { diff --git a/assets/js/services/wallet.service.js b/assets/js/services/wallet.service.js index 44726c05b4..0330b578d0 100644 --- a/assets/js/services/wallet.service.js +++ b/assets/js/services/wallet.service.js @@ -1214,6 +1214,7 @@ function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyB const error = (message) => { console.log(message); errorCallback(message); + wallet.applyIfNeeded(); } wallet.tokenEndpoints.verifyEmail(token, success, error); @@ -1228,12 +1229,13 @@ function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyB const error = (message) => { console.log(message); errorCallback(message); + wallet.applyIfNeeded(); } wallet.tokenEndpoints.unsubscribe(token, success, error); } - wallet.authorizeApprove = (token, successCallback, errorCallback) => { + wallet.authorizeApprove = (token, successCallback, differentBrowserCallback, differentBrowserApproved, errorCallback) => { const success = (guid) => { successCallback(guid); wallet.applyIfNeeded(); @@ -1242,9 +1244,15 @@ function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyB const error = (message) => { console.log(message); errorCallback(message); + wallet.applyIfNeeded(); + } + + const differentBrowser = (details) => { + differentBrowserCallback(details); + wallet.applyIfNeeded(); } - wallet.tokenEndpoints.authorizeApprove(token, success, error); + wallet.tokenEndpoints.authorizeApprove(token, success, differentBrowser, differentBrowserApproved, error); } // Testing: only works on mock MyWallet diff --git a/locales/en-human.json b/locales/en-human.json index 03ad552481..5ba1144e6f 100644 --- a/locales/en-human.json +++ b/locales/en-human.json @@ -504,5 +504,16 @@ "NOTIFICATIONS_EXPLAIN" : "Enable notifications to receive an email whenever you receive bitcoins. Only labeled addresses in your accounts and imported addresses are eligible to trigger notifications.", "VERIFY_EMAIL_FIRST" : "Please verify your email address first.", "UNSUBSCRIBE_SUCCESS" : "We have removed your email address (and phone number) from our systems.", - "AUTHORIZE_APPROVE_SUCCESS" : "Login approved! Please return to your previous browser / tab to see your wallet." + "AUTHORIZE_APPROVE_SUCCESS" : "Login approved! Please return to your previous browser / tab to see your wallet.", + "AUTHORIZE_APPROVE_OTHER_BROWSER" : "Login attempt from other browser", + "AUTHORIZE_APPROVE_OTHER_BROWSER_EXPLAIN" : "Someone, hopefully you, is attempting to login to your wallet from a different browser.", + "AUTHORIZE_APPROVE_REQUESTING_DEVICE" : "Requesting device", + "AUTHORIZE_APPROVE_THIS_DEVICE" : "This device", + "ACCEPT" : "Accept", + "REJECT" : "Reject", + "BROWSER" : "Browser", + "IP_ADDRESS" : "IP Address", + "COUNTRY_OF_ORIGIN" : "Country Of Origin", + "AUTHORIZE_REJECT_SUCCESS" : "Login attempt rejected! Please contact support if this was not you.", + "CHECKING_LOGIN_ATTEMPT" : "Checking login attempt" }