Added usernames search, improved username settings

2014-10-15 15:37:04 +04:00 · 2014-10-15 15:37:04 +04:00 · 671022fb9b
commit 671022fb9b
parent bdbc653cc7
12 changed files with 244 additions and 34 deletions
--- a/app/css/app.css
+++ b/app/css/app.css
@ -461,6 +461,12 @@ input[type="number"] {
 .modal_simple_form .form-group {
  margin-bottom: 13px;
 }
+.modal_simple_form_description {
+  color: #777;
+  line-height: 160%;
+  margin: 10px 0 0;
+  text-align: justify;
+}

 .modal_section_header {
  font-size: 12px;
@ -2112,6 +2118,10 @@ img.img_fullsize {
 .settings_modal_wrap .im_attach_input {
  z-index: 999;
 }
+.settings_modal_username_link,
+.settings_modal_username_link:hover {
+  color: inherit;
+}
 .settings_external_service {
  line-height: 0;
  display: inline-block;
--- a/app/css/desktop.css
+++ b/app/css/desktop.css
@ -555,10 +555,6 @@ div.im_panel_own_photo {
 .modal_section_body dd {
  display: inline-block;
 }
-.settings_modal_username_link,
-.settings_modal_username_link:hover {
-  color: inherit;
-}

 .user_modal_main_btn {
  border: 0;
--- a/app/css/mobile.css
+++ b/app/css/mobile.css
@ -181,6 +181,7 @@ html {
 }
 .navbar-quick-media-back h4 {
  margin: 9px 0 12px 0;
+  line-height: 120%;
 }
 .navbar-quick-profile-back h4,
 .navbar-quick-group-back h4 {
@ -884,6 +885,7 @@ a.mobile_modal_action .tg_checkbox_label {
 }

 .mobile_modal_section {
+  display: block;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 0;
 }
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@ -439,6 +439,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])

    $scope.dialogs = [];
    $scope.contacts = [];
+    $scope.foundUsers = [];
    $scope.contactsLoaded = false;
    if ($scope.search === undefined) {
      $scope.search = {};
@ -636,6 +637,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
      getDialogs(force).then(function (dialogsResult) {
        $scope.dialogs = [];
        $scope.contacts = [];
+        $scope.foundUsers = [];

        if (dialogsResult.dialogs.length) {
          offset += dialogsResult.dialogs.length;
@ -678,7 +680,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
            $scope.contacts.push({
              userID: userID,
              user: AppUsersManager.getUser(userID),
-              userPhoto: AppUsersManager.getUserPhoto(userID, 'User'),
              peerString: AppUsersManager.getUserString(userID)
            });
          }
@ -689,8 +690,31 @@ angular.module('myApp.controllers', ['myApp.i18n'])
        } else if (!$scope.search.query) {
          $scope.isEmpty.contacts = true;
        }
+        $scope.$broadcast('ui_dialogs_append');
      });
-      $scope.$broadcast('ui_dialogs_append');
+
+      if ($scope.search.query && $scope.search.query.length >= 5) {
+        MtpApiManager.invokeApi('contacts.search', {q: $scope.search.query, limit: 10}).then(function (result) {
+          console.log($scope.search.query, result);
+          AppUsersManager.saveApiUsers(result.users);
+          if (curJump != jump) return;
+          $scope.foundUsers = [];
+          angular.forEach(result.results, function(contactFound) {
+            var userID = contactFound.user_id;
+            if (peersInDialogs[userID] === undefined) {
+              $scope.foundUsers.push({
+                userID: userID,
+                user: AppUsersManager.getUser(userID),
+                peerString: AppUsersManager.getUserString(userID)
+              });
+            }
+          });
+        }, function (error) {
+          if (error.code == 400) {
+            error.handled = true;
+          }
+        });
+      }
    }

    function showMoreDialogs () {
@ -2214,7 +2238,17 @@ angular.module('myApp.controllers', ['myApp.i18n'])
    }
  })

-  .controller('ProfileEditModalController', function ($rootScope, $scope, $timeout, $modal, $modalInstance, AppUsersManager, AppChatsManager, MtpApiManager, Storage, NotificationsManager, MtpApiFileManager, ApiUpdatesManager) {
+  .controller('ChangelogModalController', function ($scope, $modal) {
+    $scope.changeUsername = function () {
+      $modal.open({
+        templateUrl: templateUrl('username_edit_modal'),
+        controller: 'UsernameEditModalController',
+        windowClass: 'username_edit_modal_window mobile_modal'
+      });
+    };
+  })
+
+  .controller('ProfileEditModalController', function ($scope,  $modalInstance, AppUsersManager, MtpApiManager) {

    $scope.profile = {};
    $scope.error = {};
@ -2256,6 +2290,76 @@ angular.module('myApp.controllers', ['myApp.i18n'])
    }
  })

+  .controller('UsernameEditModalController', function ($scope,  $modalInstance, AppUsersManager, MtpApiManager) {
+
+    $scope.profile = {};
+    $scope.error = {};
+
+    MtpApiManager.getUserID().then(function (id) {
+      $scope.profile = angular.copy(AppUsersManager.getUser(id));
+    });
+
+    $scope.updateUsername = function () {
+      $scope.profile.updating = true;
+
+      MtpApiManager.invokeApi('account.updateUsername', {
+        username: $scope.profile.username || ''
+      }).then(function (user) {
+        $scope.checked = {};
+        AppUsersManager.saveApiUser(user);
+        $modalInstance.close();
+      }, function (error) {
+        switch (error.type) {
+          case 'USERNAME_INVALID':
+            $scope.checked = {error: true};
+            error.handled = true;
+            break;
+
+          case 'USERNAME_OCCUPIED':
+            $scope.checked = {error: true};
+            error.handled = true;
+            break;
+
+          case 'USERNAME_NOT_MODIFIED':
+            error.handled = true;
+            $modalInstance.close();
+            break;
+        }
+      })['finally'](function () {
+        delete $scope.profile.updating;
+      });
+    }
+
+    $scope.$watch('profile.username', function (newVal) {
+      if (!newVal.length) {
+        $scope.checked = {};
+        return;
+      }
+      MtpApiManager.invokeApi('account.checkUsername', {
+        username: newVal || ''
+      }).then(function (valid) {
+        if ($scope.profile.username != newVal) {
+          return;
+        }
+        if (valid) {
+          $scope.checked = {success: true};
+        } else {
+          $scope.checked = {error: true};
+        }
+      }, function (error) {
+        if ($scope.profile.username != newVal) {
+          return;
+        }
+        switch (error.type) {
+          case 'USERNAME_INVALID':
+            $scope.checked = {error: true};
+            error.handled = true;
+            break;
+        }
+      });
+    })
+  })
+
  .controller('ContactsModalController', function ($scope, $modal, $modalInstance, AppUsersManager, ErrorService) {

    $scope.contacts = [];
--- a/app/js/locales/en-us.json
+++ b/app/js/locales/en-us.json
@ -59,7 +59,7 @@

 	"username_edit_modal_title": "Change username",
 	"username_edit_placeholder": "Username",
-	"username_edit_description_md": "Username lets other people find you and have a chat in\n**Telegram** without exposing your phone number.\n\nYou can only use symbols like a-z and 0-9.",
+	"username_edit_description_md": "Choose a username so that other people can find you on **Telegram** and message you without knowing your phone number.\n\nYou can use a-z, 0-9 and underscores.",
 	"username_edit_submit": "Save",
 	"username_edit_submit_active": "Saving...",

@ -228,6 +228,7 @@
 	"head_new_contact": "New Contact",
 	"head_contacts": "Contacts",
 	"head_contacts_title": "Contacts",
+	"im_found_title": "Global search",
 	"head_settings": "Settings",
 	"head_log_out": "Log Out",
 	"head_edit_messages": "Edit messages",
--- a/app/js/services.js
+++ b/app/js/services.js
@ -52,7 +52,7 @@ angular.module('myApp.services', ['myApp.i18n'])
      return false;
    }

-    return (user.first_name || '') + ' ' + (user.last_name || '') + ' ' + (user.phone || '');
+    return (user.first_name || '') + ' ' + (user.last_name || '') + ' ' + (user.phone || '') + ' ' + (user.username || '');
  }

  function getContacts (query) {
@ -1268,6 +1268,9 @@ angular.module('myApp.services', ['myApp.i18n'])
  }

  function sendText(peerID, text) {
+    if (!angular.isString(text) || !text.length) {
+      return;
+    }
    var messageID = tempID--,
        randomID = [nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)],
        randomIDS = bigint(randomID[0]).shiftLeft(32).add(bigint(randomID[1])).toString(),
@ -3947,6 +3950,7 @@ angular.module('myApp.services', ['myApp.i18n'])
    };

    $modal.open({
+      controller: 'ChangelogModalController',
      templateUrl: templateUrl('changelog_modal'),
      scope: $scope,
      windowClass: 'changelog_modal_window mobile_modal'
--- a/app/partials/desktop/changelog_modal.html
+++ b/app/partials/desktop/changelog_modal.html
@ -19,7 +19,20 @@

      <div class="modal_section changelog_version_wrap">
        <h3 class="modal_section_header changelog_version_title">
+          Version 0.3.2
          <span class="pull-right" my-i18n="changelog_modal_title_current_version"></span>
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Supported usernames. <a href="" ng-click="changeUsername">Set up right now!</a></li>
+            <li>Conversations search field is now searching public users by username.</li>
+            <li>Added default recent emoticons.</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
          Version 0.3.1
        </h3>
        <div class="modal_section_body changelog_version_changes">
--- a/app/partials/desktop/im.html
+++ b/app/partials/desktop/im.html
@ -57,16 +57,10 @@
              <ul class="nav nav-pills nav-stacked">
                <li class="im_dialog_wrap" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: curDialog.peerID == contact.userID}">
                  <a class="im_dialog" ng-mousedown="dialogSelect(contact.peerString)">
-                    <div class="im_dialog_photo pull-left">
-                      <img
-                        class="im_dialog_photo"
-                        my-load-thumb
-                        thumb="contact.userPhoto"
-                      />
-                    </div>
+                    <div class="im_dialog_photo pull-left" my-user-photolink="contact.userID" img-class="im_dialog_photo"></div>
                    <div class="im_dialog_message_wrap">
                      <div class="im_dialog_peer">
-                        <span class="im_dialog_user" ng-bind-html="contact.user.rFullName"></span>
+                        <span class="im_dialog_user" my-user-link="contact.userID"></span>
                      </div>
                      <div class="im_dialog_message">
                        <span class="im_dialog_message_text" my-user-status="::contact.userID"></span>
@ -77,6 +71,26 @@
              </ul>
            </div>

+            <div class="im_dialogs_contacts_wrap" ng-show="!search.messages &amp;&amp; foundUsers.length > 0">
+              <h5 my-i18n="im_found_title"></h5>
+              <ul class="nav nav-pills nav-stacked">
+                <li class="im_dialog_wrap" ng-repeat="foundUser in foundUsers | orderBy:'user.sortName' track by foundUser.userID" ng-class="{active: curDialog.peerID == foundUser.userID}">
+                  <a class="im_dialog" ng-mousedown="dialogSelect(foundUser.peerString)">
+                    <div class="im_dialog_photo pull-left" my-user-photolink="foundUser.userID" img-class="im_dialog_photo"></div>
+                    <div class="im_dialog_message_wrap">
+                      <div class="im_dialog_peer">
+                        <span class="im_dialog_user" my-user-link="foundUser.userID"></span>
+                      </div>
+                      <div class="im_dialog_message" ng-switch="foundUser.user.username.length > 0">
+                        <span ng-switch-when="true" class="im_dialog_message_text" ng-bind="::'@' + foundUser.user.username"></span>
+                        <span ng-switch-default class="im_dialog_message_text" my-user-status="::foundUser.userID"></span>
+                      </div>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+
          </div>
        </div>
      </div>
--- a/app/partials/desktop/username_edit_modal.html
+++ b/app/partials/desktop/username_edit_modal.html
@ -8,13 +8,9 @@

      <h4 my-i18n="username_edit_modal_title"></h4>

-      <div class="form-group import_modal_field_wrap" ng-class="{'has-error': error.field == 'username', 'has-feedback': error.field == 'username', 'has-success': error.field == 'username'}">
-        <label class="control-label" ng-bind="error.feedback"></label>
-        <input class="form-control input-sm" my-focused type="text" placeholder="{{'username_edit_placeholder' | i18n}}" ng-model="profile.username"  name="username"/>
-        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
-      </div>
-
-      <div class="form-group import_modal_field_wrap" ng-class="{'has-error': error.field == 'username'}">
+      <div class="form-group import_modal_field_wrap" ng-class="{'has-error': checked.error, 'has-feedback': checked.feedback.length > 0, 'has-success': checked.success}">
+        <input class="form-control input-md" my-focused type="text" placeholder="{{'username_edit_placeholder' | i18n}}" ng-model="profile.username"  name="username" ng-model-options="{debounce: 600}"/>
+        <span ng-if="checked.error" class="glyphicon form-control-feedback" ng-class="{'glyphicon-remove': checked.error}"></span>
      </div>

      <div class="modal_simple_form_description" my-i18n="username_edit_description_md"></div>
--- a/app/partials/mobile/im.html
+++ b/app/partials/mobile/im.html
@ -41,17 +41,11 @@
          <h5 my-i18n="im_contacts_title"></h5>
          <ul class="nav nav-pills nav-stacked">
            <li class="im_dialog_wrap" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: curDialog.peerID == contact.userID}">
-              <a class="im_dialog" ng-click="dialogSelect(contact.peerString)">
-                <div class="im_dialog_photo pull-left">
-                  <img
-                    class="im_dialog_photo"
-                    my-load-thumb
-                    thumb="contact.userPhoto"
-                  />
-                </div>
+              <a class="im_dialog" ng-mousedown="dialogSelect(contact.peerString)">
+                <div class="im_dialog_photo pull-left" my-user-photolink="contact.userID" img-class="im_dialog_photo"></div>
                <div class="im_dialog_message_wrap">
                  <div class="im_dialog_peer">
-                    <span class="im_dialog_user" ng-bind-html="contact.user.rFullName"></span>
+                    <span class="im_dialog_user" my-user-link="contact.userID"></span>
                  </div>
                  <div class="im_dialog_message">
                    <span class="im_dialog_message_text" my-user-status="::contact.userID"></span>
@ -61,6 +55,27 @@
            </li>
          </ul>
        </div>
+
+        <div class="im_dialogs_contacts_wrap" ng-show="!search.messages &amp;&amp; foundUsers.length > 0">
+          <h5 my-i18n="im_found_title"></h5>
+          <ul class="nav nav-pills nav-stacked">
+            <li class="im_dialog_wrap" ng-repeat="foundUser in foundUsers | orderBy:'user.sortName' track by foundUser.userID" ng-class="{active: curDialog.peerID == foundUser.userID}">
+              <a class="im_dialog" ng-mousedown="dialogSelect(foundUser.peerString)">
+                <div class="im_dialog_photo pull-left" my-user-photolink="foundUser.userID" img-class="im_dialog_photo"></div>
+                <div class="im_dialog_message_wrap">
+                  <div class="im_dialog_peer">
+                    <span class="im_dialog_user" my-user-link="foundUser.userID"></span>
+                  </div>
+                  <div class="im_dialog_message" ng-switch="foundUser.user.username.length > 0">
+                    <span ng-switch-when="true" class="im_dialog_message_text" ng-bind="::'@' + foundUser.user.username"></span>
+                    <span ng-switch-default class="im_dialog_message_text" my-user-status="::foundUser.userID"></span>
+                  </div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+
      </div>
    </div>

--- a/app/partials/mobile/settings_modal.html
+++ b/app/partials/mobile/settings_modal.html
@ -17,6 +17,9 @@
            <li>
              <a ng-click="editProfile()" my-i18n="settings_modal_edit_profile"></a>
            </li>
+            <li>
+              <a ng-click="changeUsername()" my-i18n="settings_modal_edit_username"></a>
+            </li>
            <li>
              <a ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a>
            </li>
@ -112,10 +115,18 @@
    </div>

    <div class="mobile_modal_section" ng-if="profile.phone">
-      <h4 class="mobile_modal_section_header" my-i18n="settings_modal_phone"></h4>
+      <h4 class="mobile_modal_section_header" my-i18n="user_modal_phone"></h4>
      <div class="mobile_modal_section_value" ng-bind="profile.phone | phoneNumber"></div>
    </div>

+    <div class="mobile_modal_section">
+      <h4 class="mobile_modal_section_header" my-i18n="user_modal_username"></h4>
+      <div class="mobile_modal_section_value" ng-click="changeUsername()" ng-switch="profile.username.length > 0">
+        <a class="settings_modal_username_link" ng-switch-when="true" href="" ng-click="changeUsername()" ng-bind="'@' + profile.username"></a>
+        <a ng-switch-default href="" ng-click="changeUsername()" my-i18n="settings_modal_empty_username_set"></a>
+      </div>
+    </div>
+
    <div class="mobile_modal_section">
      <h4 class="mobile_modal_section_header" my-i18n="settings_modal_about"></h4>
      <div class="mobile_modal_section_body settings_about_section_body clearfix">
--- a/app/partials/mobile/username_edit_modal.html
+++ b/app/partials/mobile/username_edit_modal.html
@ -0,0 +1,44 @@
+<div class="username_edit_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4 my-i18n="username_edit_modal_title"></h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="updateUsername()" my-vertical-position="0.3">
+
+      <div class="form-group import_modal_field_wrap" ng-class="{'has-error': checked.error, 'has-feedback': checked.feedback.length > 0, 'has-success': checked.success}">
+        <input class="form-control input-md" my-focused type="text" placeholder="{{'username_edit_placeholder' | i18n}}" ng-model="profile.username"  name="username" ng-model-options="{debounce: 600}"/>
+        <span ng-if="checked.error" class="glyphicon form-control-feedback" ng-class="{'glyphicon-remove': checked.error}"></span>
+      </div>
+
+      <div class="modal_simple_form_description" my-i18n="username_edit_description_md"></div>
+
+    </form>
+
+  </div>
+
+</div>