Implemented registration

Closes #42

app/css/app.css

@@ -154,14 +154,20 @@ input[type="number"] {
   background: #7999b3;
   border-color: #7999b3;
 }
+.btn-primary:focus {
+  outline: none;
+}
 
 
 
 .btn-link {
   color: #3a6d99;
+  text-decoration: none !important;
+  border-radius: 3px;
+  overflow: hidden;
 }
 .btn-link:hover {
-  text-decoration: none;
+  background: #f2f6fa;
 }
 
 .tg_page_head .navbar {
@@ -758,8 +764,13 @@ a.tg_radio_on:hover i.icon-radio {
 .login_form_head {
   color: #222222;
   margin-top: 0;
+  margin-bottom: 7px;
   text-align: center;
 }
+.login_edit_phone {
+  text-align: center;
+  margin-bottom: 3px;
+}
 .login_form_lead {
   color: #959595;
   text-align: center;
@@ -801,6 +812,9 @@ a.tg_radio_on:hover i.icon-radio {
 .login_phone_number {
   width: 198px;
 }
+.login_first_name_wrap {
+  margin-bottom: 11px;
+}
 
 
 /* IM page start */
@@ -852,6 +866,20 @@ a.tg_radio_on:hover i.icon-radio {
 
 
 /* Dialogs list */
+.im_dialogs_empty_wrap {
+  margin: 60px 50px;
+  text-align: center;
+}
+.im_dialogs_empty_header {
+  font-size: 15px;
+  color: #808080;
+  margin: 0 0 15px;
+}
+.im_dialogs_empty_lead {
+  color: #808080;
+  margin-bottom: 18px;
+}
+
 .im_dialogs_col {
   margin-right: -7px;
 }
@@ -1197,6 +1225,22 @@ a.im_dialog_selected .im_dialog_date {
 }
 
 
+.im_history_no_dialogs_wrap {
+  margin: 122px 170px 60px;
+  text-align: center;
+}
+.im_dialogs_empty_header {
+  font-size: 15px;
+  color: #808080;
+  margin: 0 0 15px;
+}
+.im_dialogs_empty_lead {
+  color: #808080;
+  margin-bottom: 18px;
+}
+
+
+
 .im_history_wrap {
   overflow: hidden;
   /*overflow-y: scroll;*/

app/js/controllers.js

@@ -113,19 +113,6 @@ angular.module('myApp.controllers', [])
         country_code: $scope.credentials.phone_country,
         phone_number: $scope.credentials.phone_number
       }).then(function () {
-        $scope.progress.enabled = true;
-        MtpApiManager.invokeApi('auth.checkPhone', {
-          phone_number: $scope.credentials.phone_full
-        }, options).then(function (result) {
-          $scope.progress.enabled = false;
-          if (!result.phone_registered) {
-            ErrorService.show({
-              error: {code: 400, type: 'ACCOUNT_REQUIRED'},
-              phone: $scope.credentials.phone_full
-            });
-            return false;
-          }
-
         $scope.progress.enabled = true;
         MtpApiManager.invokeApi('auth.sendCode', {
           phone_number: $scope.credentials.phone_full,
@@ -145,15 +132,6 @@ angular.module('myApp.controllers', [])
         }, function (error) {
           $scope.progress.enabled = false;
           console.log('sendCode error', error);
-            switch (error.type) {
-              case 'PHONE_NUMBER_INVALID':
-                $scope.error = {field: 'phone'};
-                error.handled = true;
-                break;
-            }
-          });
-        }, function (error) {
-          $scope.progress.enabled = false;
           switch (error.type) {
             case 'NETWORK_BAD_REQUEST':
               if (location.protocol == 'https:') {
@@ -178,7 +156,8 @@ angular.module('myApp.controllers', [])
       $timeout.cancel(callTimeout);
 
       delete $scope.credentials.phone_code_hash;
-      delete $scope.credentials.phone_occupied;
+      delete $scope.credentials.phone_unoccupied;
+      delete $scope.credentials.phone_code_valid;
       delete $scope.callPending.remaining;
       delete $scope.callPending.success;
     }
@@ -202,7 +181,9 @@ angular.module('myApp.controllers', [])
         $scope.progress.enabled = false;
         if (error.code == 400 && error.type == 'PHONE_NUMBER_UNOCCUPIED') {
           error.handled = true;
-          return $scope.logIn(true);
+          $scope.credentials.phone_code_valid = true;
+          $scope.credentials.phone_unoccupied = true;
+          return;
         } else if (error.code == 400 && error.type == 'PHONE_NUMBER_OCCUPIED') {
           error.handled = true;
           return $scope.logIn(false);
@@ -220,6 +201,7 @@ angular.module('myApp.controllers', [])
             break;
           case 'PHONE_CODE_INVALID':
             $scope.error = {field: 'phone_code'};
+            delete $scope.credentials.phone_code_valid;
             error.handled = true;
             break;
         }
@@ -243,6 +225,8 @@ angular.module('myApp.controllers', [])
 
 
     $scope.isLoggedIn = true;
+    $scope.isEmpty = {};
+
     $scope.openSettings = function () {
       $modal.open({
         templateUrl: 'partials/settings_modal.html',
@@ -308,6 +292,7 @@ angular.module('myApp.controllers', [])
     $scope.dialogs = [];
     $scope.contacts = [];
     $scope.search = {};
+    $scope.contactsLoaded = false;
 
     var offset = 0,
         maxID = 0,
@@ -361,6 +346,14 @@ angular.module('myApp.controllers', [])
 
     $scope.$watch('search.query', loadDialogs);
 
+    $scope.importContact = function () {
+      AppUsersManager.openImportContact().then(function () {
+        if (contactsShown) {
+          loadDialogs();
+        }
+      });
+    };
+
     function loadDialogs () {
       offset = 0;
       maxID = 0;
@@ -382,12 +375,16 @@ angular.module('myApp.controllers', [])
             peersInDialogs[dialog.peerID] = true;
             $scope.dialogs.push(AppMessagesManager.wrapForDialog(dialog.top_message, dialog.unread_count));
           });
+          delete $scope.isEmpty.dialogs;
         }
 
         $scope.$broadcast('ui_dialogs_change');
 
         if (!$scope.search.query) {
           AppMessagesManager.getDialogs('', maxID, 100);
+          if (!dialogsResult.dialogs.length) {
+            $scope.isEmpty.dialogs = true;
+          }
         } else {
           showMoreDialogs();
         }
@@ -416,7 +413,7 @@ angular.module('myApp.controllers', [])
         return;
       }
 
-      if (!hasMore && $scope.search.query) {
+      if (!hasMore && ($scope.search.query || !$scope.dialogs.length)) {
         contactsShown = true;
 
         AppUsersManager.getContacts($scope.search.query).then(function (contactsList) {
@@ -431,6 +428,12 @@ angular.module('myApp.controllers', [])
               });
             }
           });
+
+          if (contactsList.length) {
+            delete $scope.isEmpty.contacts;
+          } else if (!$scope.search.query) {
+            $scope.isEmpty.contacts = true;
+          }
         });
         $scope.$broadcast('ui_dialogs_append');
         return;
@@ -1815,18 +1818,8 @@ angular.module('myApp.controllers', [])
     }
 
     $scope.importContact = function () {
-      $modal.open({
+      AppUsersManager.openImportContact().then(function () {
-        templateUrl: 'partials/import_contact_modal.html',
-        controller: 'ImportContactModalController',
-        windowClass: 'import_contact_modal_window'
-      }).result.then(function (foundUserID) {
-        if (foundUserID) {
         updateContacts($scope.search && $scope.search.query || '');
-        } else {
-          ErrorService.show({
-            error: {code: 404, type: 'USER_NOT_USING_TELEGRAM'}
-          });
-        }
       });
     };
 
@@ -1937,8 +1930,8 @@ angular.module('myApp.controllers', [])
         $scope.progress = {enabled: true};
         AppUsersManager.importContact(
           $scope.importContact.phone,
-          $scope.importContact.first_name,
+          $scope.importContact.first_name || '',
-          $scope.importContact.last_name
+          $scope.importContact.last_name || ''
         ).then(function (foundUserID) {
           $modalInstance.close(foundUserID);
         })['finally'](function () {

app/js/services.js

@@ -130,7 +130,7 @@ angular.module('myApp.services', [])
   };
 })
 
-.service('AppUsersManager', function ($rootScope, $modal, $modalStack, $filter, MtpApiFileManager, MtpApiManager, RichTextProcessor, SearchIndexManager) {
+.service('AppUsersManager', function ($rootScope, $modal, $modalStack, $filter, $q, MtpApiFileManager, MtpApiManager, RichTextProcessor, SearchIndexManager) {
   var users = {},
       cachedPhotoLocations = {},
       contactsFillPromise,
@@ -341,6 +341,22 @@ angular.module('myApp.services', [])
     }
   }
 
+  function openImportContact () {
+    return $modal.open({
+      templateUrl: 'partials/import_contact_modal.html',
+      controller: 'ImportContactModalController',
+      windowClass: 'import_contact_modal_window'
+    }).result.then(function (foundUserID) {
+      if (!foundUserID) {
+        ErrorService.show({
+          error: {code: 404, type: 'USER_NOT_USING_TELEGRAM'}
+        });
+        return $q.reject();
+      }
+      return foundUserID;
+    });
+  };
+
 
   $rootScope.$on('apiUpdate', function (e, update) {
     // console.log('on apiUpdate', update);
@@ -388,7 +404,8 @@ angular.module('myApp.services', [])
     importContact: importContact,
     deleteContacts: deleteContacts,
     wrapForFull: wrapForFull,
-    openUser: openUser
+    openUser: openUser,
+    openImportContact: openImportContact
   }
 })
 

app/partials/head.html

@@ -22,7 +22,7 @@
         </ul>
 
         <ul ng-switch-default class="nav navbar-nav navbar-right">
-          <li ng-if="isLoggedIn"><a href="" ng-click="openContacts()">Contacts</a></li>
+          <li ng-if="isLoggedIn &amp;&amp; !isEmpty.contacts"><a href="" ng-click="openContacts()">Contacts</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log Out</a></li>
           <li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>

app/partials/im.html

@@ -13,9 +13,9 @@
             <span class="icon-bar"></span>
           </a>
           <ul class="dropdown-menu">
-            <li><a href="" ng-click="openGroup()">New Group</a></li>
+            <li><a ng-click="openGroup()">New Group</a></li>
-            <li><a href="" ng-click="openContacts()">Contacts</a></li>
+            <li><a ng-click="openContacts()">Contacts</a></li>
-            <li><a href="" ng-click="openSettings()">Settings</a></li>
+            <li><a ng-click="openSettings()">Settings</a></li>
           </ul>
         </div>
         <div class="im_dialogs_search">
@@ -26,9 +26,17 @@
       <div my-dialogs-list class="im_dialogs_col">
         <div class="im_dialogs_wrap nano">
           <div class="im_dialogs_scrollable_wrap content">
+
+            <div class="im_dialogs_empty_wrap" ng-if="isEmpty.contacts">
+              <h3 class="im_dialogs_empty_header">No contacts yet</h3>
+              <p class="im_dialogs_empty_lead">Get started by adding a contact to chat with</p>
+              <button type="button" class="btn btn-primary btn-sm" ng-click="importContact()">Add contact</button>
+            </div>
+
             <ul class="nav nav-pills nav-stacked">
               <li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.peerID" ng-class="{active: curDialog.peerID == dialogMessage.peerID}"></li>
             </ul>
+
             <div class="im_dialogs_contacts_wrap" ng-show="contacts.length > 0">
               <h5>Contacts</h5>
               <ul class="nav nav-pills nav-stacked">
@@ -53,15 +61,23 @@
                 </li>
               </ul>
             </div>
+
           </div>
         </div>
       </div>
     </div>
 
     <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
-      <div ng-show="state.notSelected" class="im_history_not_selected" my-vertical-position="0.35">
+      <div ng-show="state.notSelected" ng-switch="isEmpty.contacts &amp;&amp; isEmpty.dialogs">
+        <div ng-switch-when="true" class="im_history_no_dialogs_wrap">
+          <h3 class="im_dialogs_empty_header">Get started</h3>
+          <p class="im_dialogs_empty_lead">Welcome to Telegram Web. You can always set your profile photo and change your name in Settings.</p>
+          <button type="button" class="btn btn-primary btn-sm" ng-click="openSettings()">Open Settings</button>
+        </div>
+        <div ng-switch-default class="im_history_not_selected" my-vertical-position="0.35">
           Please select a chat to start messaging
         </div>
+      </div>
       <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.35">
         Loading history<span my-loading-dots></span>
       </div>

app/partials/login.html

@@ -2,7 +2,8 @@
 
 
 <div class="login_form_wrap" my-vertical-position="0.4">
-  <div class="error" ng-if="error.message">{{ error.message }}</div>
+  <div class="error" ng-if="error.message" ng-bind="error.message"></div>
+
   <form name="mySendCodeForm" ng-if="!credentials.phone_code_hash" ng-submit="sendCode()">
     <h3 class="login_form_head">Sign in</h3>
     <p class="login_form_lead">Please choose your country and enter your full phone number.</p>
@@ -25,8 +26,9 @@
     </button>
   </form>
 
-  <form name="myLoginForm" ng-if="credentials.phone_code_hash" ng-submit="logIn()">
+  <form name="myLoginForm" ng-if="credentials.phone_code_hash &amp;&amp; !credentials.phone_code_valid" ng-submit="logIn()">
-    <h3 class="login_form_head"><span ng-bind="credentials.phone_country"></span> <span ng-bind="credentials.phone_number"></span> <small>(<a ng-click="editPhone()">edit</a>)</small></h3>
+    <h3 class="login_form_head"><span ng-bind="credentials.phone_country"></span> <span ng-bind="credentials.phone_number"></span></h3>
+    <div class="login_edit_phone"><a ng-click="editPhone()">Edit phone number</a></div>
     <p class="login_form_lead">We have sent you a code via SMS.<br/>Please enter it below.</p>
 
     <p class="login_form_lead">
@@ -45,4 +47,25 @@
       <span ng-switch-default>Next</span>
     </button>
   </form>
+
+  <form name="myFullNameForm" ng-if="credentials.phone_code_valid &amp;&amp; credentials.phone_unoccupied" ng-submit="logIn(true)">
+    <h3 class="login_form_head">Your info</h3>
+    <p class="login_form_lead">Please enter your full name to set up a Telegram account.</p>
+
+    <div class="form-group login_first_name_wrap" ng-class="{'has-error': error.field == 'first_name'}">
+      <label class="control-label" for="first_name" ng-if="error.field == 'first_name'">Incorrect first name</label>
+      <input my-focused class="form-control" name="first_name" ng-model="credentials.first_name" placeholder="First name" autocomplete="off" required>
+    </div>
+
+    <div class="form-group" ng-class="{'has-error': error.field == 'last_name'}">
+      <label class="control-label" for="last_name" ng-if="error.field == 'last_name'">Incorrect last name</label>
+      <input class="form-control" name="last_name" ng-model="credentials.last_name" placeholder="Last name" autocomplete="off">
+    </div>
+
+    <button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled">
+      <span ng-switch-when="true">Signing in<span my-loading-dots></span></span>
+      <span ng-switch-default>Sign up</span>
+    </button>
+  </form>
+
 </div>