registration

src/models/api/requestModels.js

@@ -21,11 +21,11 @@ var TokenRequest = function (email, masterPasswordHash, device) {
     this.device = null;
 };
 
-var RegisterRequest = function () {
+var RegisterRequest = function (email, masterPasswordHash, masterPasswordHint) {
     this.name = null;
-    this.email = null;
+    this.email = email;
-    this.masterPasswordHash = null;
+    this.masterPasswordHash = masterPasswordHash;
-    this.masterPasswordHint = null;
+    this.masterPasswordHint = masterPasswordHint ? masterPasswordHint : null;
 };
 
 var PasswordHintRequest = function (email) {

src/popup/app/accounts/accountsLoginController.js

@@ -1,9 +1,19 @@
 angular
     .module('bit.accounts')
 
-    .controller('accountsLoginController', function ($scope, $state, loginService, userService) {
+    .controller('accountsLoginController', function ($scope, $state, $stateParams, loginService, userService) {
         popupUtils.initListSectionItemListeners();
+
+        if ($stateParams.email) {
+            $('#master-password').focus();
+        }
+        else {
             $('#email').focus();
+        }
+
+        $scope.model = {
+            email: $stateParams.email
+        };
 
         $scope.loginPromise = null;
         $scope.login = function (model) {

src/popup/app/accounts/accountsModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.accounts', ['toastr']);
+    .module('bit.accounts', ['toastr', 'ngAnimate']);

src/popup/app/accounts/accountsRegisterController.js

@@ -0,0 +1,33 @@
+angular
+    .module('bit.accounts')
+
+    .controller('accountsRegisterController', function ($scope, $state, cryptoService, toastr, $q, apiService) {
+        popupUtils.initListSectionItemListeners();
+        $('#email').focus();
+
+        $scope.submitPromise = null;
+        $scope.submit = function (model) {
+            var email = model.email.toLowerCase();
+            var key = cryptoService.makeKey(model.masterPassword, email);
+            $scope.submitPromise = registerPromise(key, model.masterPassword, email, model.hint);
+            $scope.submitPromise.then(function () {
+                toastr.success('Your new account has been created! You may now log in.');
+                $state.go('login', { email: email, animation: 'in-slide-left' });
+            });
+        };
+
+        function registerPromise(key, masterPassword, email, hint) {
+            return $q(function (resolve, reject) {
+                cryptoService.hashPassword(masterPassword, key, function (hashedPassword) {
+                    var request = new RegisterRequest(email, hashedPassword, hint);
+                    apiService.postRegister(request,
+                        function () {
+                            resolve();
+                        },
+                        function (error) {
+                            reject(error);
+                        });
+                });
+            });
+        }
+    });

src/popup/app/accounts/views/accountsRegister.html

@@ -0,0 +1,54 @@
+<form name="theForm" ng-submit="theForm.$valid && submit(model)" bit-form="submitPromise">
+    <div class="header">
+        <div class="left">
+            <a ui-sref="home({animation: 'out-slide-down'})">Cancel</a>
+        </div>
+        <div class="right">
+            <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">Submit</button>
+            <i class="fa fa-spinner fa-lg" ng-show="theForm.$loading" ng-class="{'fa-spin' : theForm.$loading}"></i>
+        </div>
+        <div class="title">Create Account</div>
+    </div>
+    <div class="content">
+        <div class="list">
+            <div class="list-section">
+                <div class="list-section-items">
+                    <div class="list-section-item list-section-item-icon-input">
+                        <i class="fa fa-envelope fa-lg fa-fw"></i>
+                        <label for="email" class="sr-only">Email Address</label>
+                        <input id="email" type="email" name="Email" placeholder="Email Address" ng-model="model.email">
+                    </div>
+                    <div class="list-section-item list-section-item-icon-input">
+                        <i class="fa fa-lock fa-lg fa-fw"></i>
+                        <label for="master-password" class="sr-only">Master Password</label>
+                        <input id="master-password" type="password" name="MasterPassword"
+                               placeholder="Master Password" ng-model="model.masterPassword">
+                    </div>
+                </div>
+                <div class="list-section-footer">
+                    The master password is the password you use to access your vault. It is very important that you do not.
+                    forget your master password. There is no way to recover the password in the event that you forget it.
+                </div>
+            </div>
+            <div class="list-section">
+                <div class="list-section-items">
+                    <div class="list-section-item list-section-item-icon-input">
+                        <i class="fa fa-lock fa-lg fa-fw"></i>
+                        <label for="master-password-retype" class="sr-only">Re-type Master Password</label>
+                        <input id="master-password-retype" type="password" name="MasterPasswordRetype"
+                               placeholder="Re-type Master Password" ng-model="model.masterPasswordRetype">
+                    </div>
+                    <div class="list-section-item list-section-item-icon-input">
+                        <i class="fa fa-lightbulb-o fa-lg fa-fw"></i>
+                        <label for="hint" class="sr-only">Master Password Hint (optional)</label>
+                        <input id="hint" type="text" name="Hint" placeholder="Master Password Hint (optional)"
+                               ng-model="model.hint">
+                    </div>
+                </div>
+                <div class="list-section-footer">
+                    A master password hint can help you remember your password if you forget it.
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/popup/app/config.js

@@ -53,7 +53,7 @@
                 controller: 'accountsLoginController',
                 templateUrl: 'app/accounts/views/accountsLogin.html',
                 data: { authorize: false },
-                params: { animation: null }
+                params: { animation: null, email: null }
             })
             .state('hint', {
                 url: '/hint',
@@ -69,6 +69,13 @@
                 data: { authorize: false },
                 params: { animation: null }
             })
+            .state('register', {
+                url: '/register',
+                controller: 'accountsRegisterController',
+                templateUrl: 'app/accounts/views/accountsRegister.html',
+                data: { authorize: false },
+                params: { animation: null }
+            })
 
             .state('tabs', {
                 url: '/tab',

src/popup/app/global/home.html

@@ -3,7 +3,7 @@
         <img src="../../../../images/logo@3x.png" alt="bitwarden" />
         <p>Log in or create a new account to access your secure vault.</p>
         <div class="buttons">
-            <a class="btn btn-lg btn-primary btn-block" ui-sref="">
+            <a class="btn btn-lg btn-primary btn-block" ui-sref="register({animation: 'in-slide-up'})">
                 <b>Create Account</b>
             </a>
             <a class="btn btn-lg btn-link btn-block" ui-sref="login({animation: 'in-slide-up'})">

src/popup/index.html

@@ -53,6 +53,7 @@
     <script src="app/accounts/accountsModule.js"></script>
     <script src="app/accounts/accountsLoginController.js"></script>
     <script src="app/accounts/accountsHintController.js"></script>
+    <script src="app/accounts/accountsRegisterController.js"></script>
 
     <script src="app/current/currentModule.js"></script>
     <script src="app/current/currentController.js"></script>

src/services/apiService.js

@@ -14,7 +14,7 @@ function initApiService() {
             type: 'POST',
             url: self.baseUrl + '/auth/token',
             data: JSON.stringify(tokenRequest),
-            contentType: "application/json; charset=utf-8",
+            contentType: 'application/json; charset=utf-8',
             dataType: 'json',
             success: function (response) {
                 success(new TokenResponse(response))
@@ -31,7 +31,7 @@ function initApiService() {
             type: 'POST',
             url: self.baseUrl + '/auth/token/two-factor',
             data: JSON.stringify(twoFactorTokenRequest),
-            contentType: "application/json; charset=utf-8",
+            contentType: 'application/json; charset=utf-8',
             dataType: 'json',
             success: function (response) {
                 success(new TokenResponse(response))
@@ -67,7 +67,7 @@ function initApiService() {
             type: 'POST',
             url: self.baseUrl + '/accounts/password-hint',
             data: JSON.stringify(request),
-            contentType: "application/json; charset=utf-8",
+            contentType: 'application/json; charset=utf-8',
             success: function (response) {
                 success();
             },
@@ -77,14 +77,13 @@ function initApiService() {
         });
     };
 
-    ApiService.prototype.register = function (request, success, error) {
+    ApiService.prototype.postRegister = function (request, success, error) {
         var self = this;
         $.ajax({
             type: 'POST',
             url: self.baseUrl + '/accounts/register',
             data: JSON.stringify(request),
-            contentType: "application/json; charset=utf-8",
+            contentType: 'application/json; charset=utf-8',
-            dataType: 'json',
             success: function (response) {
                 success();
             },
@@ -120,7 +119,7 @@ function initApiService() {
                 type: 'POST',
                 url: self.baseUrl + '/sites?access_token=' + token,
                 data: JSON.stringify(siteRequest),
-                contentType: "application/json; charset=utf-8",
+                contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (response) {
                     success(new SiteResponse(response))
@@ -139,7 +138,7 @@ function initApiService() {
                 type: 'POST',
                 url: self.baseUrl + '/sites/' + id + '?access_token=' + token,
                 data: JSON.stringify(siteRequest),
-                contentType: "application/json; charset=utf-8",
+                contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (response) {
                     success(new SiteResponse(response))
@@ -177,7 +176,7 @@ function initApiService() {
                 type: 'POST',
                 url: self.baseUrl + '/folders?access_token=' + token,
                 data: JSON.stringify(folderRequest),
-                contentType: "application/json; charset=utf-8",
+                contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (response) {
                     success(new FolderResponse(response))
@@ -196,7 +195,7 @@ function initApiService() {
                 type: 'POST',
                 url: self.baseUrl + '/folders/' + id + '?access_token=' + token,
                 data: JSON.stringify(folderRequest),
-                contentType: "application/json; charset=utf-8",
+                contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (response) {
                     success(new FolderResponse(response))
@@ -255,7 +254,7 @@ function initApiService() {
             $.ajax({
                 type: 'POST',
                 url: self.baseUrl + '/ciphers/' + id + '/delete?access_token=' + token,
-                contentType: "application/json; charset=utf-8",
+                contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: success,
                 error: function (jqXHR, textStatus, errorThrown) {