Updated chat sample

Author: Oleksandr Shvetsov

samples/chat/README.md

@@ -0,0 +1,26 @@
+# Overview
+QuickBlox JS Sample Chat
+
+This is a code sample for [QuickBlox](http://quickblox.com/) platform. It is a great way for developers using QuickBlox platform to learn how to integrate private and group chat, add text and image attachments sending into your application.
+
+# Credentials
+
+Welcome to QuickBlox [Credentials](https://quickblox.com/developers/5_Minute_Guide), where you can get your credentials in just 5 minutes! All you need is to:
+
+1. Register a free QuickBlox account and add your App there.
+2. Update credentials in your application code.[Chat](https://quickblox.com/developers/5_Minute_Guide#Update_authentication_credentials_3)
+
+# Chat Sample
+
+This Sample demonstrates how to work with [Chat](https://quickblox.com/developers/Web_XMPP_Chat_Sample#Guide:_Getting_Started_with_Chat_API) QuickBlox module. 
+
+It allows:
+
+1. Authenticate with Quickblox Chat and REST.
+2. Receive and display list of dialogs.
+3. Modify dialog by adding occupants.
+4. Real-time chat messaging and attachment's handling.
+
+# Documentation
+
+Original sample description & setup guide - [JS Chat Sample](https://quickblox.com/developers/Web_XMPP_Chat_Sample#Guide:_Getting_Started_with_Chat_API)

samples/chat/css/dashboard.css

@@ -593,6 +593,20 @@
     padding: 7px 24px;
 }
 
+.group_chat__filter {
+    border-bottom: 1px solid #DADFE1;
+    display: flex;
+    padding: 13px 8px;
+}
+.group_chat__filter > input {
+    flex: 1 1 100%;
+    font-size: 16px;
+    line-height: 19px;
+    border: none;
+    margin: 0 10px 0 0;
+    padding: 0 10px;
+}
+
 .user__item {
     padding: 8px 24px;
     display: flex;

samples/chat/css/dialogs.css

@@ -250,3 +250,8 @@
 .dialog_unread_counter.hidden {
     display: none;
 }
+
+.center {
+    width: 100%;
+    text-align: center;
+}

samples/chat/css/login.css

@@ -87,6 +87,14 @@
     color: #17D04B;
 }
 
+.login_form__row.error input {
+    border-bottom: 2px solid red !important;
+}
+
+.login_form__row.error label {
+    color: red !important;
+}
+
 .m-login__button {
     width: 100%;
 }

samples/chat/index.html

@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="./css/style.css">
 
-    <script src="https://unpkg.com/navigo@4.3.6/lib/navigo.min.js" defer></script>
+    <script src="https://unpkg.com/navigo@7.1.2/lib/navigo.min.js" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" defer></script>
     <script src="../../quickblox.min.js" defer></script>
 </head>
@@ -28,20 +28,26 @@
                             <img src="./img/qb-logo.svg" alt="QuickBlox">]
                         </a>
                         <h1>Quickblox Chat Sample</h1>
-                        <h3>Please enter your username and user group.
-                            Users within the same group will be able
-                            to communicate, create chats with each other
-                        </h3>
+                        <h3>Please enter your Login and User name</h3>
                     </div>
 
                     <form name="loginForm" class="login__form">
                         <div class="login_form__row">
-                            <label for="userName">User name</label>
-                            <input type="text" id="userName" name="userName"/>
+                            <label for="userLogin">Login</label>
+                            <input
+                                type="text"
+                                id="userLogin"
+                                name="userLogin"
+                                minlength="3"
+                                maxlength="15"
+                                pattern='^[a-zA-Z]{1}[a-zA-Z0-9]+$'
+                                title="Field should contain alphanumeric characters only in a range 3-15. The first character must be a letter."
+                                required
+                            />
                         </div>
                         <div class="login_form__row">
-                            <label for="userGroup">User group</label>
-                            <input type="text" id="userGroup" name="userGroup"/>
+                            <label for="userName">User name</label>
+                            <input type="text" id="userName" name="userName" minlength="3" maxlength="15" required />
                         </div>
                         <div class="login__button_wrap">
                             <button type="submit" name="login_submit" class="btn m-login__button j-login__button" disabled>
@@ -72,7 +78,6 @@ <h3>Please enter your username and user group.
                             <img src="./img/qb-logo.svg" alt="QuickBlox">
                         </a>
                         <div class="dashboard__status_wrap">
-                            <h2 class="dashboard__title"><%- user.user_tags %></h2>
                             <p class="dashboard__status j-dashboard_status">
                                 Logged in as <%- user.name %>
                             </p>
@@ -186,6 +191,9 @@ <h1 class="dialog__title j-dialog__title"><%- title %></h1>
         </div>
         <div class="notifications j-notifications hidden"></div>
         <div class="content__inner j-content__inner">
+            <div class="group_chat__filter">
+                <input type="text" autocomplete="off" autocorrect="off" placeholder="Filter by User name" />
+            </div>
             <p class="update__chat__description"><span class="update__chat_counter j-update__chat_counter">0</span>&nbsp;user selected:</p>
             <div class="update_chat__user_list j-update_chat__user_list">
             </div>
@@ -210,6 +218,14 @@ <h1 class="dialog__title j-dialog__title"><%- title %></h1>
         </div>
     </script>
 
+    <script type="text/template" id="tpl_date_message">
+        <div class="message__wrap" id="<%=month+'-'+date.getDate()%>" >
+            <div class="center">
+                <%= month+ '/' + date.getDate() %>
+            </div>
+        </div>
+    </script>
+
     <script type="text/template" id="tpl_message">
         <div class="message__wrap" id="<%= message.id %>" data-status="<%= message.status %>">
             <span class="message__avatar m-user__img_<%= sender ? sender.color : 'not_loaded' %>">
@@ -244,6 +260,9 @@ <h1 class="dialog__title j-dialog__title"><%- title %></h1>
     <script type="text/template" id="tpl_notificationMessage">
         <div class="message__wrap" id="<%= id %>">
             <p class="m-notification_message"><%= text %></p>
+            <div class="message__timestamp">
+                <%= date_sent %>
+            </div>
         </div>
     </script>
 
@@ -256,6 +275,9 @@ <h1 class="group_chat__title">New Group Chat</h1>
         </div>
         <div class="notifications j-notifications hidden"></div>
         <div class="content__inner j-content__inner">
+            <div class="group_chat__filter">
+                <input type="text" autocomplete="off" autocorrect="off" placeholder="Filter by User name" />
+            </div>
             <p class="group__chat__description">Select participants:</p>
             <div class="group_chat__user_list j-group_chat__user_list">
             </div>

samples/chat/js/QBconfig.js

@@ -1,8 +1,8 @@
 var QBconfig = {
     credentials: {
-        appId: 72448,
-        authKey: 'f4HYBYdeqTZ7KNb',
-        authSecret: 'ZC7dK39bOjVc-Z8'
+        appId: '',
+        authKey: '',
+        authSecret: ''
     },
     appConfig: {
         chatProtocol: {
@@ -39,6 +39,7 @@ var CONSTANTS = {
     },
     NOTIFICATION_TYPES: {
         NEW_DIALOG: '1',
-        UPDATE_DIALOG: '2'
+        UPDATE_DIALOG: '2',
+        LEAVE_DIALOG: '3'
     }
 };

samples/chat/js/app.js

@@ -57,22 +57,17 @@ App.prototype.renderDashboard = function (activeTabName) {
     listeners.setListeners();
 
     logoutBtn.addEventListener('click', function () {
-        QB.users.delete(app.user.id, function(err, user){
-            if (err) {
-                console.error('Can\'t delete user by id: '+app.user.id+' ', err);
-            }
 
-            loginModule.isLogin = false;
-            app.isDashboardLoaded = false;
+        loginModule.isLogin = false;
+        app.isDashboardLoaded = false;
 
-            localStorage.removeItem('user');
-            helpers.clearCache();
+        localStorage.removeItem('user');
+        helpers.clearCache();
 
-            QB.chat.disconnect();
-            QB.destroySession();
-            
-            router.navigate('#!/login');
-        });
+        QB.chat.disconnect();
+        QB.destroySession(() => null);
+
+        router.navigate('#!/login');
     });
 
     this.tabSelectInit();
@@ -90,7 +85,7 @@ App.prototype.loadWelcomeTpl = function () {
 App.prototype.tabSelectInit = function () {
     var self = this,
         tabs = document.querySelectorAll('.j-sidebar__tab_link');
-    
+
     _.each(tabs, function (item) {
         item.addEventListener('click', function (e) {
             e.preventDefault();
@@ -99,7 +94,16 @@ App.prototype.tabSelectInit = function () {
             }
 
             var tab = e.currentTarget;
-            self.loadChatList(tab);
+            self.loadChatList(tab).then(function(){
+                var activeTab = document.querySelector('.j-sidebar__tab_link.active'),
+                    tabType = activeTab.dataset.type,
+                    dialogType = dialogModule._cache[dialogModule.dialogId].type === 1 ? 'public' : 'chat',
+                    isActiveTab = tabType === dialogType;
+
+                if(isActiveTab && dialogModule._cache[dialogModule.dialogId].type === CONSTANTS.DIALOG_TYPES.CHAT ) {
+                    dialogModule.renderMessages(dialogModule.dialogId);
+                }
+            });
         });
     });
 };
@@ -153,17 +157,10 @@ App.prototype.buildCreateDialogTpl = function () {
         if (document.forms.create_dialog.create_dialog_submit.disabled) return false;
 
         document.forms.create_dialog.create_dialog_submit.disabled = true;
-        
-        var users = self.userListConteiner.querySelectorAll('.selected'),
-            type = users.length > 2 ? 2 : 3,
-            name = document.forms.create_dialog.dialog_name.value,
-            occupants_ids = [];
-
-        _.each(users, function (user) {
-            if (+user.id !== self.user.id) {
-                occupants_ids.push(user.id);
-            }
-        });
+
+        var occupants_ids = userModule.selectedUserIds,
+            type = occupants_ids.length > 1 ? 2 : 3,
+            name = document.forms.create_dialog.dialog_name.value;
 
         if (!name && type === 2) {
             var userNames = [];
@@ -197,6 +194,7 @@ App.prototype.buildCreateDialogTpl = function () {
             document.forms.create_dialog.dialog_name.value = titleText.slice(0, 40);
         }
     });
+
     userModule.initGettingUsers();
 };