From 9875e9d643677bb8b61d5f6e27db43b025d116dc Mon Sep 17 00:00:00 2001 From: Gustavo Maximiliano Cortez Date: Wed, 23 Jul 2014 17:10:02 -0300 Subject: [PATCH] Split signin.html in home, join and open files. Signin process with responsive support --- css/main.css | 41 +++++++--- css/mobile.css | 16 ++++ index.html | 4 +- js/controllers/home.js | 10 +++ js/controllers/join.js | 37 +++++++++ js/controllers/open.js | 43 ++++++++++ js/controllers/settings.js | 2 +- js/controllers/signin.js | 100 ----------------------- js/controllers/uriPayment.js | 2 +- js/controllers/video.js | 2 + js/routes.js | 12 ++- js/services/controllerUtils.js | 2 +- views/home.html | 28 +++++++ views/import.html | 8 +- views/includes/copayers.html | 17 ++-- views/includes/video.html | 1 + views/join.html | 41 ++++++++++ views/open.html | 27 +++++++ views/settings.html | 140 +++++++++++++++++---------------- views/setup.html | 2 +- views/signin.html | 90 --------------------- 21 files changed, 333 insertions(+), 292 deletions(-) create mode 100644 js/controllers/home.js create mode 100644 js/controllers/join.js create mode 100644 js/controllers/open.js delete mode 100644 js/controllers/signin.js create mode 100644 views/home.html create mode 100644 views/join.html create mode 100644 views/open.html delete mode 100644 views/signin.html diff --git a/css/main.css b/css/main.css index 6f2097325..b145a0269 100644 --- a/css/main.css +++ b/css/main.css @@ -52,6 +52,22 @@ } } +::-webkit-input-placeholder { + color: #7A8C9E; +} + +:-moz-placeholder { /* Firefox 18- */ + color: #7A8C9E; +} + +::-moz-placeholder { /* Firefox 19+ */ + color: #7A8C9E; +} + +:-ms-input-placeholder { + color: #7A8C9E; +} + #qr-canvas { display: none; } #qrcode-scanner-video { display: block; @@ -93,12 +109,13 @@ a { color: #3498DB; } - input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px white inset; } -.signin label, .setup label { +.join label, +.open label, +.setup label { font-size: 0.875rem; color: #fff; font-weight: 100; @@ -108,7 +125,8 @@ a:hover { color: #2980b9; } -.signin input, +.open input, +.join input, .setup input, .import input, .settings input { @@ -119,7 +137,8 @@ a:hover { color: #7A8C9E !important; } -.signin select, +.open select, +.join select, .setup select, .import select, .settings select { @@ -194,7 +213,7 @@ a:hover { background-color: #F8F8FB; } -.signin, .setup, .import, .settings { +.home, .open, .join, .waiting-copayers, .setup, .import, .settings { margin-top: 15%; color: #fff; } @@ -218,9 +237,8 @@ a:hover { } .logo-setup { - position: absolute; - top: 45%; - left: 8%; + text-align: center; + margin-top: 9%; } .box-setup { @@ -306,9 +324,9 @@ a:hover { display: block; padding: 20px 30px; background: #34495E; - color: #fff; margin-bottom: 20px; font-weight: 100; + font-size: 24px; } .button-setup a:hover { @@ -379,7 +397,6 @@ a:hover { .line-dashed-setup-v { border-left: 1px dashed #415970; - padding-left: 3rem; } .line-dashed-v { @@ -895,7 +912,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus { border-color: red; } -.copayers h3, .copayers h4 { +.copayers h3, .copayers h4, .waiting-copayers h4 { color: #fff; font-weight: 100; } @@ -916,7 +933,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus { } .text-light {font-weight: 100;} -.text-gray {color: #8597A7 !important;} +.text-gray {color: #8597A7;} .text-primary {color: #1ABC9C;} .text-secondary {color: #3498DB;} .text-white {color: #fff;} diff --git a/css/mobile.css b/css/mobile.css index 54d34b3dc..311626115 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -4,4 +4,20 @@ * */ +@media (max-width: 1024px) { + .line-dashed-setup-v, + .line-dashed-v, + .line-dashed-h { + border: none; + } + + .logo-setup { + margin: 10px 0; + } + + .home, .open, .join, .waiting-copayers, .setup, .import, .settings { + margin-top: 0; + } + +} diff --git a/index.html b/index.html index 9fd448760..234d78e01 100644 --- a/index.html +++ b/index.html @@ -66,13 +66,15 @@ + + + - diff --git a/js/controllers/home.js b/js/controllers/home.js new file mode 100644 index 000000000..14c5505ad --- /dev/null +++ b/js/controllers/home.js @@ -0,0 +1,10 @@ +'use strict'; + +angular.module('copayApp.controllers').controller('HomeController', + function($scope, $rootScope, walletFactory, notification) { + $scope.loading = false; + if ($rootScope.pendingPayment) { + notification.info('Login Required', 'Please open wallet to complete payment'); + } + $scope.hasWallets = walletFactory.getWallets().length > 0 ? true : false; + }); diff --git a/js/controllers/join.js b/js/controllers/join.js new file mode 100644 index 000000000..13019b032 --- /dev/null +++ b/js/controllers/join.js @@ -0,0 +1,37 @@ +'use strict'; + +angular.module('copayApp.controllers').controller('JoinController', + function($scope, $rootScope, walletFactory, controllerUtils, Passphrase, notification) { + $scope.loading = false; + + $scope.join = function(form) { + if (form && form.$invalid) { + notification.error('Error', 'Please enter the required fields'); + return; + } + + $scope.loading = true; + walletFactory.network.on('badSecret', function() {}); + + Passphrase.getBase64Async($scope.joinPassword, function(passphrase) { + walletFactory.joinCreateSession($scope.connectionId, $scope.nickname, passphrase, function(err, w) { + $scope.loading = false; + if (err || !w) { + if (err === 'joinError') + notification.error('Can\'t find peer.'); + else if (err === 'walletFull') + notification.error('The wallet is full'); + else if (err === 'badNetwork') + notification.error('Network Error', 'The wallet your are trying to join uses a different Bitcoin Network. Check your settings.'); + else if (err === 'badSecret') + notification.error('Bad secret', 'The secret string you entered is invalid'); + else + notification.error('Unknown error'); + controllerUtils.onErrorDigest(); + } else { + controllerUtils.startNetwork(w, $scope); + } + }); + }); + } + }); diff --git a/js/controllers/open.js b/js/controllers/open.js new file mode 100644 index 000000000..02d47dd1f --- /dev/null +++ b/js/controllers/open.js @@ -0,0 +1,43 @@ +'use strict'; + +angular.module('copayApp.controllers').controller('OpenController', + function($scope, $rootScope, walletFactory, controllerUtils, Passphrase, notification) { + var cmp = function(o1, o2) { + var v1 = o1.show.toLowerCase(), + v2 = o2.show.toLowerCase(); + return v1 > v2 ? 1 : (v1 < v2) ? -1 : 0; + }; + $scope.loading = false; + $scope.wallets = walletFactory.getWallets().sort(cmp); + $scope.selectedWalletId = $scope.wallets.length ? $scope.wallets[0].id : null; + $scope.openPassword = ''; + + $scope.open = function(form) { + if (form && form.$invalid) { + notification.error('Error', 'Please enter the required fields'); + return; + } + + $scope.loading = true; + var password = form.openPassword.$modelValue; + + Passphrase.getBase64Async(password, function(passphrase) { + var w, errMsg; + try { + var w = walletFactory.open($scope.selectedWalletId, { + passphrase: passphrase + }); + } catch (e) { + errMsg = e.message; + }; + if (!w) { + $scope.loading = false; + notification.error('Error', errMsg || 'Wrong password'); + $rootScope.$digest(); + return; + } + controllerUtils.startNetwork(w, $scope); + }); + }; + + }); diff --git a/js/controllers/settings.js b/js/controllers/settings.js index bb4d6bcbd..c8f1532f8 100644 --- a/js/controllers/settings.js +++ b/js/controllers/settings.js @@ -74,7 +74,7 @@ angular.module('copayApp.controllers').controller('SettingsController', unitToSatoshi: $scope.selectedUnit.value, })); - var target = ($window.location.origin !== 'null' ? $window.location.origin : '') + '/signin'; + var target = ($window.location.origin !== 'null' ? $window.location.origin : ''); $window.location.href = target; }; diff --git a/js/controllers/signin.js b/js/controllers/signin.js deleted file mode 100644 index 3c7a097d8..000000000 --- a/js/controllers/signin.js +++ /dev/null @@ -1,100 +0,0 @@ -'use strict'; - -angular.module('copayApp.controllers').controller('SigninController', - function($scope, $rootScope, $location, walletFactory, controllerUtils, Passphrase, backupService, notification) { - var cmp = function(o1, o2) { - var v1 = o1.show.toLowerCase(), - v2 = o2.show.toLowerCase(); - return v1 > v2 ? 1 : (v1 < v2) ? -1 : 0; - }; - $rootScope.videoInfo = {}; - $scope.loading = false; - $scope.wallets = walletFactory.getWallets().sort(cmp); - $scope.selectedWalletId = $scope.wallets.length ? $scope.wallets[0].id : null; - $scope.openPassword = ''; - - if ($rootScope.pendingPayment) { - notification.info('Login Required', 'Please open wallet to complete payment'); - } - - $scope.open = function(form) { - if (form && form.$invalid) { - notification.error('Error', 'Please enter the required fields'); - return; - } - - $scope.loading = true; - var password = form.openPassword.$modelValue; - - Passphrase.getBase64Async(password, function(passphrase) { - var w, errMsg; - try { - var w = walletFactory.open($scope.selectedWalletId, { - passphrase: passphrase - }); - } catch (e) { - errMsg = e.message; - }; - if (!w) { - $scope.loading = false; - notification.error('Error', errMsg || 'Wrong password'); - $rootScope.$digest(); - return; - } - controllerUtils.startNetwork(w, $scope); - }); - }; - - $scope.join = function(form) { - if (form && form.$invalid) { - notification.error('Error', 'Please enter the required fields'); - return; - } - - $scope.loading = true; - walletFactory.network.on('badSecret', function() {}); - - Passphrase.getBase64Async($scope.joinPassword, function(passphrase) { - walletFactory.joinCreateSession($scope.connectionId, $scope.nickname, passphrase, function(err, w) { - $scope.loading = false; - if (err || !w) { - if (err === 'joinError') - notification.error('Can\'t find peer.'); - else if (err === 'walletFull') - notification.error('The wallet is full'); - else if (err === 'badNetwork') - notification.error('Network Error', 'The wallet your are trying to join uses a different Bitcoin Network. Check your settings.'); - else if (err === 'badSecret') - notification.error('Bad secret', 'The secret string you entered is invalid'); - else - notification.error('Unknown error'); - controllerUtils.onErrorDigest(); - } else { - controllerUtils.startNetwork(w, $scope); - } - }); - }); - } - - $scope.isHome = 1; - $scope.isJoin = 0; - $scope.isOpen = 0; - - $scope.backWallet = function() { - $scope.isHome = 1; - $scope.isJoin = 0; - $scope.isOpen = 0; - }; - - $scope.openWallet = function() { - $scope.isHome = 0; - $scope.isJoin = 0; - $scope.isOpen = 1; - }; - - $scope.joinWallet = function() { - $scope.isHome = 0; - $scope.isOpen = 0; - $scope.isJoin = 1; - }; - }); diff --git a/js/controllers/uriPayment.js b/js/controllers/uriPayment.js index 9cbc383c6..18c02d000 100644 --- a/js/controllers/uriPayment.js +++ b/js/controllers/uriPayment.js @@ -10,7 +10,7 @@ angular.module('copayApp.controllers').controller('UriPaymentController', functi $scope.message = $rootScope.pendingPayment.message; $timeout(function() { - $location.path('signin'); + $location.path('/'); }, 1000); diff --git a/js/controllers/video.js b/js/controllers/video.js index 3544712a3..520f84e30 100644 --- a/js/controllers/video.js +++ b/js/controllers/video.js @@ -3,6 +3,8 @@ angular.module('copayApp.controllers').controller('VideoController', function($scope, $rootScope, $sce) { + $rootScope.videoInfo = {}; + // Cached list of copayers $scope.copayers = $rootScope.wallet.getRegisteredPeerIds(); diff --git a/js/routes.js b/js/routes.js index 486aba7c7..96404b25c 100644 --- a/js/routes.js +++ b/js/routes.js @@ -7,11 +7,15 @@ angular $routeProvider .when('/', { - templateUrl: 'views/signin.html', + templateUrl: 'views/home.html', validate: false }) - .when('/signin', { - templateUrl: 'views/signin.html', + .when('/open', { + templateUrl: 'views/open.html', + validate: false + }) + .when('/join', { + templateUrl: 'views/join.html', validate: false }) .when('/import', { @@ -68,7 +72,7 @@ angular $location.path('unsupported'); } else { if ((!$rootScope.wallet || !$rootScope.wallet.id) && next.validate) { - $location.path('signin'); + $location.path('/'); } } }); diff --git a/js/services/controllerUtils.js b/js/services/controllerUtils.js index 24bc8f04d..9f6f4f3d2 100644 --- a/js/services/controllerUtils.js +++ b/js/services/controllerUtils.js @@ -27,7 +27,7 @@ angular.module('copayApp.services') } } - $location.path('signin'); + $location.path('/'); }; root.onError = function(scope) { diff --git a/views/home.html b/views/home.html new file mode 100644 index 000000000..3d9725e5a --- /dev/null +++ b/views/home.html @@ -0,0 +1,28 @@ +
+
+
+ Copay +
+
+
+ Open a wallet +
+
+ Create a new wallet +
+
+ Join a Wallet in Creation +
+
+ Create a wallet +
+ +
+ Settings + Import a backup +
+
+
+
+ + diff --git a/views/import.html b/views/import.html index cc3c16745..02c3b0d62 100644 --- a/views/import.html +++ b/views/import.html @@ -1,10 +1,10 @@ -
+
{{ importStatus }}
-
-
+
+
Copay
@@ -20,7 +20,7 @@
- « Back + « Back diff --git a/views/includes/copayers.html b/views/includes/copayers.html index 933e1f5c3..77446a47d 100644 --- a/views/includes/copayers.html +++ b/views/includes/copayers.html @@ -1,6 +1,6 @@ -
- -
- -