Merge pull request #1978 from bechi/feature/funnel

Funnel

bower.json

@@ -21,7 +21,6 @@
     "socket.io-client": ">=1.0.0",
     "ng-idle": "*",
     "inherits": "~0.0.1",
-    "angular-load": "0.2.0",
     "lodash": "~2.4.1",
     "angular-gravatar": "*",
     "angular-touch": "~1.3.0"

copay.js

@@ -5,19 +5,22 @@ module.exports.TxProposals = require('./js/models/TxProposals');
 module.exports.PrivateKey = require('./js/models/PrivateKey');
 module.exports.HDPath = require('./js/models/HDPath');
 module.exports.HDParams = require('./js/models/HDParams');
-module.exports.crypto = require('./js/util/crypto');
+module.exports.Async = require('./js/models/Async');
-module.exports.logger = require('./js/util/log');
+module.exports.Insight = require('./js/models/Insight');
-module.exports.csv = require('./js/util/csv');
+module.exports.RateService = require('./js/models/RateService');
-
-
-// components
-var Async = module.exports.Async = require('./js/models/Async');
-var Insight = module.exports.Insight = require('./js/models/Insight');
-var RateService = module.exports.RateService = require('./js/models/RateService');
-
 module.exports.Identity = require('./js/models/Identity');
 module.exports.Wallet = require('./js/models/Wallet');
 module.exports.Compatibility = require('./js/models/Compatibility');
 module.exports.PluginManager = require('./js/models/PluginManager');
+
+
+module.exports.crypto = require('./js/util/crypto');
+module.exports.logger = require('./js/util/log');
+module.exports.csv = require('./js/util/csv');
+
 module.exports.version = require('./version').version;
 module.exports.commitHash = require('./version').commitHash;
+
+
+module.exports.defaultConfig = require('./config');
+

css/src/main.css

@@ -362,23 +362,22 @@ a:hover {
 
 .logo-setup {
   text-align: center;
-  padding: 5rem 0 4rem;
+  padding: 2rem 0;
   color: #fff;
 }
 
 .box-setup {
-  margin-bottom: 7rem;
+  margin-bottom: 1rem;
   padding: 1.3rem; 
-  border-radius: 2px;
+  border-radius: 3px;
-  background: #FFFFFF;
+  background: #fff;
-  -moz-box-shadow: 1px 1px 0px 0px #213140;
-  box-shadow: 1px 1px 0px 0px #213140;
 }
 
 .box-setup-footer {
   overflow: hidden;
+  margin-top: 2rem;
   padding: 1rem 0 0;
-  border-top: 1px solid #E5E7EA;
+  border-top: 1px solid #425467;
   font-size: 12px;
 }
 
@@ -994,7 +993,7 @@ input[type=date], input[type=datetime-local], input[type=datetime], input[type=e
   color: #343c43;
   margin-bottom: 1.3rem;
   height: 40px;
-  border-radius: 2px;
+  border-radius: 3px;
   background: #F2F5F8;
   -moz-box-shadow:    inset 1px 1px 0px 0px rgba(0,0,0,0.05);
   box-shadow:         inset 1px 1px 0px 0px rgba(0,0,0,0.05);
@@ -1037,8 +1036,8 @@ button.primary,
 .button.primary { 
   background-color: #1ABC9C;
   color: #fff;
-  border-radius: 2px;
+  border-radius: 3px;
-  border-radius: 2px;
+  border-radius: 3px;
   -moz-box-shadow:    1px 1px 0px 0px #16A085;
   box-shadow:         1px 1px 0px 0px #16A085;
 }
@@ -1072,7 +1071,7 @@ button.warning,
 .button.warning { 
   background-color: #C0392A;
   color: #fff;
-  border-radius: 2px;
+  border-radius: 3px;
   -moz-box-shadow:    1px 1px 0px 0px #A02F23;
   box-shadow:         1px 1px 0px 0px #A02F23;
 }
@@ -1421,6 +1420,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 }
 
 .text-light {font-weight: 100;}
+.text-bold {font-weight: 700;}
 .text-gray {color: #8597A7;}
 .text-black {color: #2C3E50;}
 .text-primary {color: #1ABC9C;}
@@ -1679,6 +1679,102 @@ a.text-warning:hover {color: #FD7262;}
 
 /*/////////////////////////////////////////////////*/
 
+.createProfile .icon-input {
+  position: absolute;
+  right: 10px;
+  top: 11px;
+}
+
+.createProfile .icon-input i {
+  font-size: 14px;
+  position: relative;
+  color: #fff;
+  margin-right: 14px;
+  border: none;
+  box-shadow: none;
+  top: 2px;
+}
+
+.createProfile .input, .home .input {
+  box-shadow: 0px 0px 0px 3px #213140, inset 1px 1px 0px 0px rgba(0,0,0,0.05);
+  border-radius: 3px;
+}
+
+.createProfile h2, .home h2 {
+  font-weight: 700;
+  font-size: 14px;
+  color: #A5B2BF;
+  text-transform: uppercase;
+  padding-bottom: 0.8rem;
+  border-bottom: 1px solid #425467;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.createProfile a.text-gray:hover, .home a.text-gray:hover {
+  color: #fff;
+}
+
+.tabbable {
+  border: 2px solid #213140;
+  border-radius: 3px;
+  margin-bottom: 1.2rem;
+}
+
+.tabs dd.active a {
+  color: #fff;
+  background-color: transparent;
+}
+
+.tabs dd>a {
+  background: #213140;
+  text-transform: uppercase;
+  color: #3E4F5D;
+  padding: 1rem;
+  text-align: center;
+  height: 64px;
+  font-size: 14px;
+  line-height: 15px;
+}
+
+.tabs dd>a:hover {
+  background: #1C2B39;
+}
+
+.tabs dd.active a:hover {
+  background: transparent;
+}
+
+.tabs-content {
+  margin-bottom: 0;
+}
+
+.tabs-content>.content {
+  padding: 0;
+}
+
+.content-item {
+  border-bottom: 1px solid rgba(32,48,64,0.30);
+  box-shadow: 0px 1px 0px 0px rgba(121,140,158,0.10);
+  margin: .5rem 1.3rem;
+  padding: 0.3rem 0;
+  font-size: 14px;
+}
+
+.bg-circle {
+  background: #253547;
+  border-radius: 100%;
+  margin: 0 0.5rem 0.3rem 0;
+  padding: .45rem 0.5rem;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  color: #7A8C9E;
+  font-size: 30px;
+  width: 50px;
+  height: 50px;
+}
+
 .session-expired {
   background: rgba(32,48,64,0.90);
   width: 100%;
@@ -1689,3 +1785,13 @@ a.text-warning:hover {color: #FD7262;}
   padding-top: 20%;
   text-align: center;
 }
+
+.clipo {
+  padding: 0 0 2rem;
+  text-align: center;
+}
+
+.line-none {
+  border: none;
+  box-shadow: none;
+}

css/src/mobile.css

@@ -8,7 +8,7 @@
 
   .logo-setup {
     margin: 0;
-    padding: 2rem 0;
+    padding: 1rem 0;
   }
 
   .home, .open, .join, .waiting-copayers, .setup, .import, .settings {
@@ -198,6 +198,10 @@
     padding: 1rem 1.2rem 1.0625rem;
   }
   
+  .home form {
+    margin-bottom: 1rem;
+  }
+
   form {
     margin: 0;
   }

js/app.js

@@ -2,16 +2,17 @@
 
 var copay = require('copay');
 var _ = require('lodash');
-var config = defaultConfig;
 var LS = require('../js/plugins/LocalStorage');
 var ls = new LS();
 
-var localConfig;
-var defaults = JSON.parse(JSON.stringify(defaultConfig));
-
 
+// TODO move this to configService !
+var config = copay.defaultConfig;
 ls.getItem('config', function(err, data) {
+  var localConfig;
+  try {
   localConfig = JSON.parse(data);
+  } catch(e) {};
   if (localConfig) {
     var cmv = copay.version.split('.')[1];
     var lmv = localConfig.version ? localConfig.version.split('.')[1] : '-1';
@@ -38,12 +39,9 @@ var modules = [
   'copayApp.directives',
 ];
 
-if (Object.keys(config.plugins).length)
-  modules.push('angularLoad');
-
-
 var copayApp = window.copayApp = angular.module('copayApp', modules);
 
+var defaults = JSON.parse(JSON.stringify(copay.defaultConfig));
 copayApp.value('defaults', defaults);
 
 copayApp.config(function($sceDelegateProvider) {

js/controllers/createProfile.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('CreateProfileController', function($scope, $rootScope, $location, $timeout, notification, pluginManager, identityService, pinService, isMobile) {
+angular.module('copayApp.controllers').controller('CreateProfileController', function($scope, $rootScope, $location, $timeout, notification, pluginManager, identityService, pinService, isMobile, configService) {
 
   var _credentials, _firstpin;
 
@@ -8,6 +8,9 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun
     identityService.goWalletHome();
     $scope.isMobile = isMobile.any();
 
+    $scope.createStep = 'storage';
+    $scope.useLocalstorage = false;
+
     pinService.makePinInput($scope, 'newpin', function(newValue) {
       _firstpin = newValue;
       $scope.askForPin = 2;
@@ -47,10 +50,43 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun
     });
   };
 
+
+  $scope.setStep = function(step) {
+    $scope.error = null;
+    $scope.createStep = step;
+    $timeout(function() {
+      $scope.$digest();
+    }, 1);
+  };
+
+  $scope.selectStorage = function(storage) {
+    $scope.useLocalstorage = storage == 'local';
+    $timeout(function() {
+      $scope.$digest();
+    }, 1);
+  };
+
+  $scope.goToEmail = function() {
+    $scope.createStep = 'email';
+    $scope.useEmail = !$scope.useLocalstorage;
+  };
+
+  $scope.setEmailOrUsername = function(form) {
+    $scope.userOrEmail = $scope.useLocalstorage ? form.username.$modelValue : form.email.$modelValue;
+    preconditions.checkState($scope.userOrEmail);
+
+    $scope.createStep = 'pass';
+    $timeout(function() {
+      $scope.$digest();
+    }, 1);
+  };
+
+
+
   $scope.createDefaultWallet = function() {
     $rootScope.hideNavigation = false;
     identityService.createDefaultWallet(function(err) {
-      $scope.askForPin =0 ;
+      $scope.askForPin = 0;
       $scope.loading = false;
 
       if (err) {
@@ -60,34 +96,24 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun
     });
   };
 
-  $scope.createProfile = function(form) {
-    $rootScope.hideNavigation = false;
-    if (form && form.$invalid) {
-      $scope.error = 'Please enter the required fields';
-      return;
-    }
-    $scope.loading = true;
-    identityService.create(form.email.$modelValue, form.password.$modelValue, function(err) {
-      $scope.loading = false;
 
+  $scope._doCreateProfile = function(emailOrUsername, password, cb) {
+    preconditions.checkArgument(_.isString(emailOrUsername));
+    preconditions.checkArgument(_.isString(password));
+
+    $rootScope.hideNavigation = false;
+    $scope.loading = true;
+
+    identityService.create(emailOrUsername, password, function(err) {
+      $scope.loading = false;
+      $scope.error = null;
       if (err) {
         var msg = err.toString();
         if (msg.indexOf('EEXIST') >= 0 || msg.indexOf('BADC') >= 0) {
           msg = 'This profile already exists'
         }
-        $timeout(function() {
-            form.email.$setViewValue('');
-            form.email.$render();
-            form.password.$setViewValue('');
-            form.password.$render();
-            form.repeatpassword.$setViewValue('');
-            form.repeatpassword.$render();
-            form.$setPristine();
-            $scope.error =  msg;
-          },1);
         $scope.error = msg;
       } else {
-        $scope.error = null;
         // mobile
         if ($scope.isMobile) {
           _credentials = {
@@ -99,12 +125,47 @@ angular.module('copayApp.controllers').controller('CreateProfileController', fun
           $timeout(function() {
             $rootScope.$digest();
           }, 1);
-
           return;
         } else {
           $scope.createDefaultWallet();
         }
       }
+      return cb();
     });
-  }
+  };
+
+
+  $scope.saveSettings = function(cb) {
+    var plugins = config.plugins;
+
+    plugins.EncryptedLocalStorage = false;
+    plugins.EncryptedInsightStorage = false;
+
+    var pluginName = $scope.useLocalstorage ? 'EncryptedLocalStorage' : 'EncryptedInsightStorage';
+    plugins[pluginName] = true;
+
+    configService.set({
+      plugins: plugins
+    }, cb);
+  };
+
+
+  $scope.createProfile = function(form) {
+    if (form && form.$invalid) {
+      $scope.error = 'Please enter the required fields';
+      return;
+    }
+    $scope.saveSettings(function(err) {
+      $scope._doCreateProfile($scope.userOrEmail, form.password.$modelValue, function(err) {
+        $timeout(function() {
+          form.password.$setViewValue('');
+          form.password.$render();
+          form.repeatpassword.$setViewValue('');
+          form.repeatpassword.$render();
+          form.$setPristine();
+        }, 1);
+      });
+    });
+  };
+
 });

js/controllers/home.js

@@ -4,9 +4,9 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
 
 
   var _credentials, _firstpin;
-
   $scope.init = function() {
     $scope.isMobile = isMobile.any();
+    $scope.attempt=0;
 
     // This is only for backwards compat, insight api should link to #!/confirmed directly
     if (getParam('confirmed')) {
@@ -28,6 +28,7 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
     pinService.check(function(err, value) {
       $rootScope.hasPin = value;
     });
+    $scope.usingLocalStorage = config.plugins.EncryptedLocalStorage;
   };
 
   pinService.makePinInput($scope, 'pin', function(newValue) {
@@ -139,8 +140,13 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
         copay.logger.warn(err);
         if ((err.toString() || '').match('PNOTFOUND')) {
           $scope.error = 'Invalid email or password';
+
+          if($scope.attempt++>1) {
+            var storage = $scope.usingLocalStorage ? 'this device storage' : 'cloud storage';
+            $scope.error = 'Invalid email or password. You are trying to sign in using ' + storage + '. Change it on settings is necessary.';
+          };
+
           pinService.clear(function() {
-            copay.logger.debug('PIN erased');
           });
         } else if ((err.toString() || '').match('Connection')) {
           $scope.error = 'Could not connect to Insight Server';
@@ -150,7 +156,9 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
           $scope.error = 'Unknown error';
         }
         $rootScope.starting = false;
-        $rootScope.$digest();
+        $timeout(function(){
+          $rootScope.$digest();
+        },1)
         return;
       }
 

js/controllers/homeWallet.js

@@ -64,8 +64,10 @@ angular.module('copayApp.controllers').controller('HomeWalletController', functi
 
   $scope.$on("$destroy", function() {
     var w = $rootScope.wallet;
-    removeWatch();
+    if (w) {
-    w.removeListener('txProposalEvent', _updateTxs);
+      removeWatch();
+      w.removeListener('txProposalEvent', _updateTxs);
+    };
   });
 
   $scope.setAlternativeAmount = function(w, tx, cb) {

js/controllers/settings.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('SettingsController', function($scope, $rootScope, $window, $route, $location, $anchorScroll, notification, applicationService, localstorageService) {
+angular.module('copayApp.controllers').controller('SettingsController', function($scope, $rootScope, $window, $route, $location, notification, configService) {
   $scope.title = 'Settings';
   $scope.defaultLanguage = config.defaultLanguage || 'en';
   $scope.insightLivenet = config.network.livenet.url;
@@ -18,10 +18,10 @@ angular.module('copayApp.controllers').controller('SettingsController', function
   }
 
   $scope.availableStorages = [{
-      name: 'Insight',
+      name: 'In the cloud (Insight server)',
       pluginName: 'EncryptedInsightStorage',
     }, {
-      name: 'Localstorage',
+      name: 'In this device (localstorage)',
       pluginName: 'EncryptedLocalStorage',
     },
     // {
@@ -57,7 +57,6 @@ angular.module('copayApp.controllers').controller('SettingsController', function
     }
   }
 
-
   $scope.save = function() {
     $scope.insightLivenet = copay.Insight.setCompleteUrl($scope.insightLivenet);
     $scope.insightTestnet = copay.Insight.setCompleteUrl($scope.insightTestnet);
@@ -73,33 +72,32 @@ angular.module('copayApp.controllers').controller('SettingsController', function
       },
     }
 
-
     var plugins = {};
     plugins[$scope.selectedStorage.pluginName] = true;
-    copay.logger.setLevel($scope.selectedLogLevel.name);
-
-    localstorageService.setItem('config', JSON.stringify({
-      network: insightSettings,
-      version: copay.version,
-      defaultLanguage: $scope.selectedLanguage.isoCode,
-      plugins: plugins,
-      logLevel: $scope.selectedLogLevel.name,
-      EncryptedInsightStorage: _.extend(config.EncryptedInsightStorage, {
-        url: insightSettings.livenet.url + '/api/email'
-      }),
-      rates: _.extend(config.rates, {
-        url: insightSettings.livenet.url + '/api/rates'
-      }),
-    }), function() {
-      applicationService.restart();
-    });
 
+    configService.set({
+        network: insightSettings,
+        version: copay.version,
+        defaultLanguage: $scope.selectedLanguage.isoCode,
+        plugins: plugins,
+        logLevel: $scope.selectedLogLevel.name,
+        EncryptedInsightStorage: _.extend(config.EncryptedInsightStorage, {
+          url: insightSettings.livenet.url + '/api/email'
+        }),
+        rates: _.extend(config.rates, {
+          url: insightSettings.livenet.url + '/api/rates'
+        }),
+      },
+      function() {
+        notification.success('Settings saved');
+        $location.path('/');
+      });
   };
 
-
   $scope.reset = function() {
-    localstorageService.removeItem('config', function() {
+    configService.reset(function() {
-      applicationService.reload();
+      notification.success('Settings reseted');
+      $location.path('/');
     });
   };
 

js/services/configService.js

@@ -0,0 +1,38 @@
+'use strict';
+
+angular.module('copayApp.services').factory('configService', function(localstorageService, gettextCatalog) {
+  var root = {};
+
+  root.set = function(opts, cb) {
+
+    if (opts.logLevel)
+      copay.logger.setLevel(opts.logLevel);
+
+    if (opts.defaultLanguage)
+      gettextCatalog.currentLanguage = opts.defaultLanguage;
+
+    localstorageService.getItem('config', function(err, oldOpsStr) {
+
+      var oldOpts = {};
+
+      try {
+        oldOpts = JSON.parse(oldOpsStr);
+      } catch (e) {};
+
+      var newOpts = {};
+      _.extend(newOpts, copay.defaultConfig, oldOpts, opts);
+
+      // TODO remove this gloval variable.
+      config = newOpts;
+
+      localstorageService.setItem('config', JSON.stringify(newOpts), cb);
+    });
+  };
+
+  root.reset = function(cb) {
+    config = copay.defaultConfig;
+    localstorageService.removeItem('config', cb);
+  };
+
+  return root;
+});

js/services/identityService.js

@@ -11,10 +11,10 @@ angular.module('copayApp.services')
     var root = {};
     root.check = function(scope) {
       copay.Identity.checkIfExistsAny({
-        pluginManager: pluginManager,
+        pluginManager: pluginManager.getInstance(config),
       }, function(anyProfile) {
         copay.Wallet.checkIfExistsAny({
-          pluginManager: pluginManager,
+          pluginManager: pluginManager.getInstance(config),
         }, function(anyWallet) {
           scope.loading = false;
           scope.anyProfile = anyProfile ? true : false;
@@ -47,7 +47,7 @@ angular.module('copayApp.services')
       copay.Identity.create({
         email: email,
         password: password,
-        pluginManager: pluginManager,
+        pluginManager: pluginManager.getInstance(config),
         network: config.network,
         networkName: config.networkName,
         walletDefaults: config.wallet,
@@ -99,7 +99,7 @@ angular.module('copayApp.services')
       var opts = {
         email: email,
         password: password,
-        pluginManager: pluginManager,
+        pluginManager: pluginManager.getInstance(config),
         network: config.network,
         networkName: config.networkName,
         walletDefaults: config.wallet,
@@ -348,7 +348,7 @@ angular.module('copayApp.services')
 
     root.importProfile = function(str, password, cb) {
       copay.Identity.importFromEncryptedFullJson(str, password, {
-        pluginManager: pluginManager,
+        pluginManager: pluginManager.getInstance(config),
         network: config.network,
         networkName: config.networkName,
         walletDefaults: config.wallet,

js/services/pluginManager.js

@@ -1,18 +1,10 @@
 'use strict';
 
-angular.module('copayApp.services').factory('pluginManager', function(angularLoad) {
+angular.module('copayApp.services').factory('pluginManager', function() {
-  var pm = new copay.PluginManager(config);
+  var root = {};
-  var scripts = pm.scripts;
+  root.getInstance = function(config){
+    return new copay.PluginManager(config);
+  };
 
-  for(var ii in scripts){
+  return root;
-    var src = scripts[ii].src;
-
-    console.log('\tLoading ',src); //TODO
-    angularLoad.loadScript(src)
-      .then(scripts[ii].then || null)
-      .catch(function() {
-        throw new Error('Loading ' + src);
-      })
-  }
-  return pm;
 });

views/createProfile.html

@@ -20,13 +20,12 @@
     </div>
   </div>
 
-  <div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading  && !askForPin">
+  <div class="large-4 large-centered medium-6 medium-centered columns m20b" ng-show="!loading  && !askForPin">
     <div class="logo-setup">
-      <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
+      <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
       <div ng-include="'views/includes/version.html'"></div>
     </div>
-    <div class="box-setup">
+    <div>
-      <h1>Create Profile</h1>
       <div class="box-notification" ng-show="error">
         <div class="box-icon error">
           <i class="fi-x size-24"></i>
@@ -35,66 +34,174 @@
           {{error|translate}}
         </span>
       </div>
-      <form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
+
-        <div class="m5b text-right">
+
-          <span translate class="has-error size-12" ng-show="profileForm.email.$invalid &&
+      <form ng-show="createStep == 'storage' " novalidate>
-            !profileForm.email.$pristine">
+        <div class="clipo">
-            <span class="icon-input"><i class="fi-x"></i></span>
+          <img src="img/clipo-signup1.png" alt="clipo" width="311">
-          Not valid
-          </span>
-          <span class="icon-input" ng-show="!profileForm.email.$invalid &&
-            !profileForm.email.$pristine"><i class="fi-check"></i></span>
         </div>
-        <div class="input">
+        <tabset>
-          <input type="email" ng-model="email" class="form-control fi-email" name="email" placeholder="Email"
+          <tab style="width: 50%;" select="selectStorage('remote')">
-          show-focus="!isMobile" required>
+            <tab-heading>
+              <span class="text-bold">In the Cloud </span><br>
+              <span class="size-10 text-gray">( Recommended )</span>
+            </tab-heading>
+              <div class="content-item">
+                <div class="bg-circle"><i class="icon-wallet"></i>
+                </div>
+                <span class="text-gray">Access your wallets anywhere</span>
+              </div>
+              <div class="content-item">
+                <div class="bg-circle"><i class="icon-download"></i>
+                </div>
+                <span class="text-gray">Backups managed by the server</span>
+              </div>
+              <div class="content-item line-none">
+                <div class="bg-circle"><i class="icon-email"></i>
+                </div>
+                <span class="text-gray">Email address confirmation needed</span>
+              </div>
+          </tab>
+          <tab style="width: 50%;" select="selectStorage('local')">
+            <tab-heading>
+              <div class="m5t text-bold">In this Device </div>
+            </tab-heading>
+              <div class="content-item">
+                <div class="bg-circle"><i class="icon-locked"></i>
+                </div>
+                <span class="text-gray">Your private keys never leave this device</span>
+              </div>
+              <div class="content-item">
+                <div class="bg-circle"><i class="icon-person"></i>
+                </div>
+                <span class="text-gray">No email required</span>
+              </div>
+              <div class="content-item line-none">
+                <div class="bg-circle"><i class="icon-download"></i>
+                </div>
+                <span class="text-gray">Need to be careful with backups</span>
+              </div>
+          </tab>
+        </tabset>
+
+        <button  translate class="button primary radius expand m0" ng-click="goToEmail()">
+          <span ng-if="!useLocalstorage"> Create in the cloud</span>
+          <span ng-if="useLocalstorage"> Create in this device</span>
+        </button>
+
+        <div class="box-setup-footer">
+          <div class="left">
+            <a class="text-gray" href="#!/">
+              <i class="icon-arrow-left4"></i> 
+              <span translate>Back</span>
+            </a>
+          </div>
+          <div class="right">
+            <a class="text-gray" href="https://copay.io/profile-storage"
+              <span translate>Learn more about this option</span>
+            </a>
+          </div>
+ 
+        </div>
+      </form>
+
+      <form ng-show="createStep == 'email'" name="emailForm" ng-submit="setEmailOrUsername(emailForm)" novalidate>
+        <div class="clipo" ng-if="useLocalstorage">
+          <img src="img/clipo-signup2-1.png" alt="clipo" width="373">
+        </div>
+        <div class="clipo" ng-if="!useLocalstorage">
+          <img src="img/clipo-signup2.png" alt="clipo" width="373">
+        </div>
+
+        <h2 ng-if="useLocalstorage"> Creating in this device </h2>
+        <h2 ng-if="!useLocalstorage"> Creating in the cloud </h2>
+
+        <div class="input" ng-if="useEmail">
+          <input type="email" ng-model="email" class="form-control fi-email" name="email" placeholder="Email" required auto-focus="!isMobile">
           <i class="icon-email"></i>
+          <div class="icon-input m5b text-right" ng-if="useEmail">
+            <span translate class="has-error size-12" ng-show="emailForm.email.$invalid &&
+            !emailForm.email.$pristine">
+            <div class="">
+              <i class="fi-x"></i>
+              Not valid
+            </div>
+            </span>
+            <div class="" ng-show="!emailForm.email.$invalid &&
+            !emailForm.email.$pristine"><i class="fi-check"></i></div>
+          </div>
         </div>
 
+        <div class="input" ng-if="!useEmail">
+          <input type="text" ng-model="username" class="form-control fi-user" name="username" placeholder="Username" required auto-focus>
+          <i class="icon-person"></i>
+        </div>
+
+        <button translate type="submit" class="button primary radius expand m0" ng-disabled="(useEmail && emailForm.email.$invalid) || (!useEmail && emailForm.username.$invalid)">
+          Next
+        </button
+
+>
+        <div class="box-setup-footer">
+          <div class="left">
+            <a class="text-gray" ng-click="setStep('storage')">
+              <i class="icon-arrow-left4"></i> 
+              <span translate>Back</span>
+            </a>
+          </div>
+        </div>
+ 
+      </form>
+
+      <form ng-show="createStep == 'pass'" name="passForm" ng-submit="createProfile(passForm)" novalidate>
+        <div class="clipo">
+          <img src="img/clipo-signup3.png" alt="clipo" width="380">
+        </div>
+
+        <h2 ng-if="useLocalstorage"> Creating in this device </h2>
+        <h2 ng-if="!useLocalstorage"> Creating in the cloud </h2>
+        <div class="text-gray text-center m20b"> {{userOrEmail}} </div>
+
+
         <div class="input">
-          <input id="password" type="password" ng-model="$parent.password" 
+          <input id="password" type="password" ng-model="$parent.password" class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength" tooltip-html-unsafe="Password strength: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="top">
-          class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength" 
-          tooltip-html-unsafe="Password strength: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="top">
           <i class="icon-locked"></i>
         </div>
 
-        <div class="m5b text-right">
-          <span translate class="has-error size-12" ng-show="profileForm.repeatpassword.$dirty &&
-            profileForm.repeatpassword.$invalid">
-            <span class="icon-input"><i class="fi-x"></i></span>
-          {{'Passwords must match'|translate}}
-          </span>
-          <span class="icon-input" ng-show="profileForm.repeatpassword.$dirty &&
-            !profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span> 
-        </div>
-
         <div class="input">
           <input type="password" ng-model="repeatpassword" class="input form-control" name="repeatpassword" placeholder="{{'Repeat password'|translate}}" match="password" required>
           <i class="icon-locked"></i>
+          <div class="icon-input m5b text-right">
+            <span translate class="has-error size-12" ng-show="passForm.repeatpassword.$dirty &&
+            passForm.repeatpassword.$invalid">
+              <div>
+                <i class="fi-x"></i>
+                {{'Passwords must match'|translate}}
+              </div>
+            </span>
+            <div class="" ng-show="passForm.repeatpassword.$dirty &&
+            !passForm.repeatpassword.$invalid"><i class="fi-check"></i></div>
+          </div>
         </div>
 
-        <button translate type="submit" class="button primary radius expand m0" ng-disabled="profileForm.$invalid || loading">
+        <button translate type="submit" class="button primary radius expand m0" ng-disabled="passForm.$invalid || loading">
-          Create
+          Create Profile
         </button>
+
+        <div class="box-setup-footer">
+          <div class="left">
+            <a class="text-gray" ng-click="setStep('email')">
+              <i class="icon-arrow-left4"></i> 
+              <span translate>Back</span>
+            </a>
+          </div>
+        </div>
       </form>
-      <div class="box-setup-footer">
+
-        <div class="left">
-          <a class="text-gray" href="#!/">
-            <i class="icon-arrow-left4"></i> 
-            <span translate>Back</span>
-          </a>
-        </div>
-        <div class="right">
-          <a class="right size-12 text-gray" href="#!/settings">
-            <i class="icon-wrench"></i> 
-            <span translate>Settings</span>
-          </a>
-        </div>
-      </div>
     </div>
   </div>
 
-  <div class="large-4 large-centered medium-6 medium-centered columns" ng-show="!loading && askForPin">
+  <div class="large-4 large-centered medium-6 medium-centered columns m20b" ng-show="!loading && askForPin">
     <div class="box-setup">
       <h1><span translate>Set up a </span> <b> PIN </b>?</h1>
       <p class="size-14">Enter a 4-digit number for easier access from this device</p>
@@ -125,8 +232,7 @@
             </a>
           </div>
           <div class="large-6 medium-6 small-6 columns text-right">
-            <button translate type="submit" class="button primary radius expand m0"
+            <button translate type="submit" class="button primary radius expand m0" ng-disabled="setPinForm.$invalid || error">
-              ng-disabled="setPinForm.$invalid || error">
               OK
             </button>
           </div>

views/home.html

@@ -3,10 +3,18 @@
   <div class="loading-screen" ng-show="$root.starting">
     <div class="spinner">
       <div class="contener_general">
-          <div class="contener_mixte"><div class="ballcolor ball_1">&nbsp;</div></div>
+        <div class="contener_mixte">
-          <div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
+          <div class="ballcolor ball_1">&nbsp;</div>
-          <div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
+        </div>
-          <div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>
+        <div class="contener_mixte">
+          <div class="ballcolor ball_2">&nbsp;</div>
+        </div>
+        <div class="contener_mixte">
+          <div class="ballcolor ball_3">&nbsp;</div>
+        </div>
+        <div class="contener_mixte">
+          <div class="ballcolor ball_4">&nbsp;</div>
+        </div>
       </div>
       <span class="text-gray size-12" translate>Accessing your profile...</span>
     </div>
@@ -14,18 +22,10 @@
 
   <div class="large-4 large-centered medium-7 medium-centered columns" ng-show="!$root.starting">
     <div class="logo-setup" ng-show="!$root.iden">
-      <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
+      <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
       <div ng-include="'views/includes/version.html'"></div>
     </div>
 
-    <div class="p10 box-setup bg-success m10b text-white" ng-show="pendingPayment">
-      <div class="left">
-        <i class="size-36 m10r"></i>
-      </div>
-      <div class="size-14">
-        Please sign in to make the payment
-      </div>
-    </div>
     <div class="p10 box-setup bg-success m10b text-white" ng-show="confirmedEmail">
       <div class="left">
         <i class="size-36 fi-check m10r"></i>
@@ -34,22 +34,13 @@
         <h3>
         Your email was confimed!
         </h3>
-  
         Please sign in to access your wallets
       </div>
     </div>
-    <div class="p10 box-setup bg-success m10b text-white" ng-show="anyWallet && !confirmedEmail && !error">
-      <div class="left">
-        <i class="size-36 fi-alert m10r"></i>
-      </div>
-      <b>Copay now needs a profile to access wallets.</b>
-      You can import your current wallets after 
-      <a class="text-white" href="#!/createProfile">creating your profile</a>
-    </div>
 
     <div class="box-setup" ng-if="askForPin">
       <h1><span translate>Set up a </span> <b> PIN </b>?</h1>
-      <p class="size-14"> Enter a 4-digit number for easier access from this device</p>
+      <p class="size-14">Enter a 4-digit number for easier access from this device</p>
 
       <div class="box-notification" ng-show="error">
         <div class="box-icon error">
@@ -62,17 +53,11 @@
 
       <form name="setPinForm" ng-model="setPinForm" ng-submit="createPin(setPinForm)" novalidate>
         <div class="input" ng-show="askForPin == 1">
-          <input id="newpin" type="tel" ng-model="newpin" class="form-control"
+          <input id="newpin" type="tel" ng-model="newpin" class="form-control" ng-maxlength="4" ng-minlength="4" maxlength="4" ng-pattern="/^[0-9]{1,4}$/" placeholder="PIN" name="newpin" required show-focus="askForPin == 1">
-            ng-maxlength="4" ng-minlength="4" maxlength="4"
-            ng-pattern="/^[0-9]{1,4}$/" 
-            placeholder="PIN" name="newpin" required show-focus="askForPin == 1">
           <i class="icon-locked"></i>
         </div>
         <div class="input" ng-show="askForPin == 2">
-          <input id="repeatpin" type="tel" ng-model="repeatpin" class="form-control"
+          <input id="repeatpin" type="tel" ng-model="repeatpin" class="form-control" ng-maxlength="4" ng-minlength="4" maxlength="4" ng-pattern="/^[0-9]{1,4}$/" placeholder="Confirm your PIN" name="repeatpin" required show-focus="askForPin == 2">
-            ng-maxlength="4" ng-minlength="4" maxlength="4"
-            ng-pattern="/^[0-9]{1,4}$/" 
-            placeholder="Confirm your PIN" name="repeatpin" required show-focus="askForPin == 2">
           <i class="icon-locked"></i>
         </div>
 
@@ -83,8 +68,7 @@
             </a>
           </div>
           <div class="large-6 medium-6 small-6 columns text-right">
-            <button translate type="submit" class="button primary radius expand m0"
+            <button translate type="submit" class="button primary radius expand m0" ng-disabled="setPinForm.$invalid || error">
-              ng-disabled="setPinForm.$invalid || error">
               OK
             </button>
           </div>
@@ -107,10 +91,7 @@
         </div>
 
         <div class="input">
-          <input id="pin" type="tel" ng-model="pin" class="form-control"
+          <input id="pin" type="tel" ng-model="pin" class="form-control" ng-maxlength="4" ng-minlength="4" maxlength="4" ng-pattern="/^[0-9]{1,4}$/" placeholder="Pin number" name="pin" required>
-            ng-maxlength="4" ng-minlength="4" maxlength="4"
-            ng-pattern="/^[0-9]{1,4}$/" 
-            placeholder="Pin number" name="pin" required>
           <i class="icon-locked"></i>
         </div>
 
@@ -122,8 +103,7 @@
             </a>
           </div>
           <div class="large-6 medium-6 small-6 columns text-right">
-            <button translate type="submit" class="button primary radius expand m0"
+            <button translate type="submit" class="button primary radius expand m0" ng-disabled="pinForm.$invalid || error">
-              ng-disabled="pinForm.$invalid || error">
               Sign in
             </button>
           </div>
@@ -131,32 +111,56 @@
       </form>
     </div>
 
-
+    <div ng-if='!$root.hasPin && !askForPin'>
-    <div class="box-setup" ng-if='!$root.hasPin && !askForPin'>
+      <div class="clipo">
-      <h1><span translate>Sign in to</span> <b>Copay</b></h1>
+        <img src="img/clipo-signin.png" alt="clipo" width="310">
+      </div>
+      <h2 translate>Sign in to Copay</h2>
+      <div class="p10 m20b size-14 box-setup bg-success text-white" ng-show="anyWallet && !confirmedEmail && !error">
+        <div class="left">
+          <i class="size-36 fi-alert m10r"></i>
+        </div>
+        <b>Copay now needs a profile to access wallets.</b>
+        You can import your current wallets after
+        <a class="text-white" href="#!/createProfile">creating your profile</a>
+      </div>
+      <div class="p10 box-setup bg-success m20b text-white" ng-show="pendingPayment">
+        <div class="left">
+          <i class="size-36 m10r"></i>
+        </div>
+        <div class="size-14">
+          Please sign in to make the payment
+        </div>
+      </div>
       <form name="loginForm" ng-submit="openWithCredentials(loginForm)" novalidate>
-        <p class="text-warning size-12"
+        <p class="text-warning size-12" ng-show="error">
-          ng-show="error">
+          <i class="fi-x"></i> {{error|translate}}
-          <i class="fi-x"></i> 
+        </p>
-          {{error|translate}}
+        <div class="input" ng-if="!usingLocalStorage">
-          </p>
+          <input type="email" ng-model="email" class="form-control" name="email" placeholder="Email" required show-focus="!isMobile">
-        <div class="input">
-          <input type="email" ng-model="email" class="form-control"
-            name="email" placeholder="Email" required show-focus="!isMobile">
           <i class="icon-email"></i>
         </div>
+
+        <div class="input" ng-if="usingLocalStorage">
+          <input type="text" ng-model="email" class="form-control" name="email" placeholder="Username" required show-focus="!isMobile">
+          <i class="icon-person"></i>
+        </div>
         <div class="input">
-        <input type="password" ng-model="password" class="form-control"
+          <input type="password" ng-model="password" class="form-control" name="password" placeholder="Password" required>
-          name="password" placeholder="Password" required>
           <i class="icon-locked"></i>
         </div>
 
-        <button translate type="submit" class="button primary radius expand m0"
+        <button translate type="submit" class="button primary radius expand m0" ng-disabled="loginForm.$invalid || loading">
-          ng-disabled="loginForm.$invalid || loading">
           Sign in
         </button>
       </form>
 
+        <div ng-if="usingLocalStorage" class="text-gray size-12">
+          * Using this device storage. Change to cloud storage on 'settings'.
+        </div>
+
+
+
       <div class="box-setup-footer">
         <div class="left m10r">
           <a class="button-setup text-gray" href="#!/createProfile">

views/importProfile.html

@@ -18,8 +18,8 @@
         <img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59">
         <div ng-include="'views/includes/version.html'"></div>
       </div>
-      <div class="box-setup">
+      <div>
-        <h1 translate>Import Profile</h1>
+        <h2 translate>Import Profile</h2>
         <form name="importProfileForm" ng-submit="import(importProfileForm)" novalidate>
           <div class="box-notification" ng-show="error">
             <div class="box-icon error">
@@ -32,10 +32,12 @@
 
           <div ng-show="!is_iOS">
             <legend for="backupFile" class="m10b"> 
-              <span translate>Choose backup file</span> 
+              <span class="text-gray size-12" translate>Choose backup file</span> 
             </legend>
-            <input type="file" class="form-control" 
+            <div class="input">
+              <input type="file" class="db form-control" 
             placeholder="{{'Select a backup file'|translate}}" name="backupFile" ng-model="backupFile" ng-file-select>
+            </div>
           </div>
 
           <div ng-show="is_iOS">

views/settings.html

@@ -51,12 +51,12 @@
           </div>
         </fieldset>
         <fieldset>
-          <legend translate>Wallet and profile storage</legend>
+          <legend translate>Storage</legend>
-          <label for="insightTestnet">Store wallet and profiles on</label>
+          <label for="insightTestnet">Read and Store Profiles:</label>
           <select class="form-control" ng-model="selectedStorage" ng-options="o.name for o in availableStorages" required>
           </select>
           <div translate class="small text-gray">
-          Wallets and profiles are stored encrypted using your password as a key. You can store the encrypted data locally, on your platform, or remotely on the Insight Server. <a target="_blank" href="https://github.com/bitpay/copay/tree/master/js/plugins">More pluggins are welcomed!</a>
+          Wallets and profiles are stored encrypted using your password as a key. You can store the encrypted data locally, on this device, or remotely on the cloud (Insight Server). <a target="_blank" href="https://github.com/bitpay/copay/tree/master/js/plugins">More pluggins are welcomed!</a>
           </div>
         </fieldset>
         <fieldset>