nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Javascript user search implemented

Browse Source
This commit is contained in:
Rohan Sircar 2019-11-30 00:43:50 +05:30
parent 62a7e192e6
commit d193ec0f11
8 changed files with 227 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
chatto/src/main/java/org/ros/chatto/controller/RegistrationController.java
View File

@ -73,7 +73,7 @@ public class RegistrationController {
return "user/home";
}
@GetMapping(value = "/img/{image_id}", produces = MediaType.IMAGE_PNG_VALUE)
@GetMapping(value = "/img/captcha/{image_id}", produces = MediaType.IMAGE_PNG_VALUE)
public ResponseEntity<byte[]> getImage(@PathVariable("image_id") Long imageId) throws IOException {
final String captchaText = captchaMap.get(imageId);

23
chatto/src/main/java/org/ros/chatto/service/UserTokenService.java
View File

@ -1,6 +1,5 @@
package org.ros.chatto.service;
import javax.transaction.Transactional;
import org.ros.chatto.model.UserToken;
import org.ros.chatto.repository.TokenRepository;
@ -8,43 +7,43 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.CacheConfig;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import lombok.extern.slf4j.Slf4j;
@Service
@Transactional
@Slf4j
@CacheConfig(cacheNames = "userTokenCache")
public class UserTokenService {
@Autowired
private TokenRepository tokenRepository;
@Transactional(readOnly = true)
@Cacheable(value = "userTokenCache", key = "#userName", unless="#result == null")
public UserToken getTokenByUserName(String userName)
{
System.out.println("Inside 1");
log.debug("Inside 1");
return tokenRepository.findByUserName(userName);
}
@Transactional(readOnly = true)
@Cacheable(value = "userTokenCache", key = "#tokenString", unless="#result == null")
public UserToken getTokenByTokenString(String tokenString)
{
System.out.println("Inside 2");
log.debug("Inside 2");
return tokenRepository.findByToken(tokenString);
}
@Transactional
public void saveToken(UserToken userToken)
{
// UserToken userToken2 = tokenRepository.findByToken(userToken.getTokenContent());
// if(userToken2!=null) {
// System.out.println("Found valid token");
// return;
// }
// System.out.println("Saving token");
log.info("Saving auth token");
tokenRepository.save(userToken);
}
@Transactional
public void deleteToken(String userName)
{
log.info("Deleting token for {}", userName);
tokenRepository.deleteByUserName(userName);
}
}

2
chatto/src/main/resources/application.properties
View File

@ -14,7 +14,7 @@ spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDial
spring.jpa.hibernate.ddl-auto = none
spring.jpa.open-in-view=false
spring.jpa.properties.hibernate.generate_statistics=true
#spring.jpa.properties.hibernate.generate_statistics=true
logging.level.org.hibernate.stat=debug
logging.level.org.springframework.web=DEBUG
logging.level.web=DEBUG

12
chatto/src/main/resources/static/css/chat.css
View File

@ -69,6 +69,13 @@ html {
color: white !important;
}
.search-cancel {
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
/* border-color: rgba(0, 0, 0, 0.3) !important; */
color: white !important;
}
.search:focus {
box-shadow: none !important;
outline: 0px !important;
@ -250,6 +257,7 @@ html {
position: absolute;
padding: 15px 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
color: white;
border-radius: 15px;
top: 30px;
@ -278,6 +286,10 @@ html {
background-color: rgba(0, 0, 0, 0.2);
}
.bg-blur {
backdrop-filter: blur(6px);
}
@media(max-width: 576px) {
.contacts_card {
margin-bottom: 15px !important;

164
chatto/src/main/resources/static/js/chat.js
View File

@ -18,6 +18,7 @@ var chatTextArea = document.getElementById('chatTextArea');
var postNewMessageUrl = `http://${hostAddress}/api/chat/post/message`; //hostAddress variable is set in the thymeleaf head fragment
var getAllMessagesUrl = `http://${hostAddress}/api/chat/get/messages/`;
var getNewMessagesUrl = `http://${hostAddress}/api/chat/get/messages/`;
var getActiveUsersUrl = `http://${hostAddress}/api/chat/get/active-users/`;
// var postNewMessageUrl = "http://localhost:8080/api/chat/post/message";
// var getAllMessagesUrl = "http://localhost:8080/api/chat/get/messages/";
// var getNewMessagesUrl = "http://localhost:8080/api/chat/get/messages/";
@ -32,6 +33,10 @@ var source = document.getElementById("msg_container_template").innerHTML;
var msgContainerTemplate = Handlebars.compile(source);
var source = document.getElementById("msg_container_send_template").innerHTML;
var msgContainerSendTemplate = Handlebars.compile(source);
var source = document.getElementById("user-contact-online-template").innerHTML;
var userContactOnlineTemplate = Handlebars.compile(source);
var source = document.getElementById("user-contact-offline-template").innerHTML;
var userContactOfflineTemplate = Handlebars.compile(source);
var chatAreaNew = document.getElementById('chat_area_new');
@ -39,6 +44,22 @@ var userBoxes = document.getElementsByName('user-box');
var md = window.markdownit();
var activeUsers = {};
var fuseOptions = {
shouldSort: true,
threshold: 0.01,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
"userName",
]
};
log.setLevel('TRACE');
alertify.set('notifier', 'position', 'top-center');
// Loop through the buttons and add the active class to the current/clicked button
@ -56,39 +77,54 @@ alertify.set('notifier', 'position', 'top-center');
// });
// }
for (let i = 0; i < userBoxes.length; i++) {
userBoxes[i].addEventListener('click', function() {
let current = document.getElementsByClassName('user-box active');
let passphrase = passphraseInput.value;
if (current.length > 0) {
if (passphrase == '') {
// alert('Please input passphrase')
alertify.error('Please enter a passphrase');
return;
}
current[0].className = current[0].className.replace(" active", "");
getActiveUsers(authToken)
.then(data => {
// activeUsers = data;
sessionStorage.setItem('activeUsers', JSON.stringify(data));
log.log(sessionStorage.getItem('activeUsers'));
})
for (let i = 0; i < userBoxes.length; i++) {
userBoxes[i].addEventListener('click', userCallBack)
}
function addUserCallBacks() {
for (let i = 0; i < userBoxes.length; i++) {
userBoxes[i].addEventListener('click', userCallBack)
}
}
function userCallBack() {
let current = document.getElementsByClassName('user-box active');
let passphrase = passphraseInput.value;
if (current.length > 0) {
if (passphrase == '') {
// alert('Please input passphrase')
alertify.error('Please enter a passphrase');
return;
}
// Add the active class to the current/clicked button
else if (current.length == 0) {
let elem = document.getElementById('passphrase-initial');
passphrase = elem.value;
if (passphrase == '') {
// alert('Please input passphrase')
alertify.error('Please enter a passphrase');
return;
}
document.getElementById('no-user-selected').hidden = true;
document.getElementById('chat-card').hidden = false;
elem.hidden = true;
current[0].className = current[0].className.replace(" active", "");
}
// Add the active class to the current/clicked button
else if (current.length == 0) {
let elem = document.getElementById('passphrase-initial');
passphrase = elem.value;
if (passphrase == '') {
// alert('Please input passphrase')
alertify.error('Please enter a passphrase');
return;
}
// console.log(this.getElementsByClassName('to-user-span'));
let userName = this.getElementsByClassName('to-user-span')[0].innerText;
document.getElementById('user-name-span').innerText = userName;
populateMessages(userName, passphrase);
sessionStorage.setItem('selectedUser', userName);
this.className += " active";
})
document.getElementById('no-user-selected').hidden = true;
document.getElementById('chat-card').hidden = false;
elem.hidden = true;
}
// console.log(this.getElementsByClassName('to-user-span'));
let userName = this.getElementsByClassName('to-user-span')[0].innerText;
document.getElementById('user-name-span').innerText = userName;
populateMessages(userName, passphrase);
sessionStorage.setItem('selectedUser', userName);
this.className += " active";
}
function populateMessages(userName, passphrase) {
@ -245,7 +281,6 @@ function populateMessages(userName, passphrase) {
}
// sessionStorage.clear();
// chatTextArea.append(JSON.stringify(storedMessages));
}
@ -317,6 +352,56 @@ document.getElementById('chatMessageForm').addEventListener('submit', function(e
messageSend(JSON.stringify(chatMessageDTO));
})
document.getElementById('user-search').addEventListener('submit', function(e) {
e.preventDefault();
let contactsBox = document.getElementById('contacts-box');
let temp = contactsBox.innerHTML;
// log.trace(temp);
let searchTerm = document.getElementById('user-search-term').value;
log.debug("search term value = " + searchTerm);
let list = JSON.parse(sessionStorage.getItem('activeUsers'));
log.debug("active users");
log.debug(list);
let fuse = new Fuse(list, fuseOptions);
let searchResult = fuse.search(searchTerm);
populateContactsBox(contactsBox, searchResult);
addUserCallBacks();
log.debug(searchResult);
})
document.getElementById('user-search-term').addEventListener('input', function(e) {
e.preventDefault();
if (this.value.length < 2) {
log.debug("inputted")
let cancelButton = document.getElementById('user-search-cancel');
cancelButton.hidden = false;
}
})
document.getElementById('user-search-cancel').addEventListener('click', function(e) {
e.preventDefault();
let list = JSON.parse(sessionStorage.getItem('activeUsers'));
let contactsBox = document.getElementById('contacts-box');
populateContactsBox(contactsBox,list);
addUserCallBacks();
document.getElementById('user-search-term').value = "";
this.hidden = true;
})
function populateContactsBox(contactsBox, list)
{
let userContactBoxList = "";
list.forEach(function(activeUser) {
log.debug(activeUser);
if (activeUser.online) {
userContactBoxList += userContactOnlineTemplate(activeUser);
} else {
userContactBoxList += userContactOfflineTemplate(activeUser);
}
})
contactsBox.innerHTML = userContactBoxList;
}
// console.log('Credentials = ' + JSON.parse(sessionStorage.getItem('credentials')));
@ -379,6 +464,23 @@ async function getNewMessages(toUser, lastMessageTimeStamp) {
return data;
}
async function getActiveUsers(authToken2) {
let headers = new Headers();
// headers.append('Authorization', basicAuthToken);
headers.append('X-AUTH-TOKEN', authToken2);
let response = await fetch(getActiveUsersUrl, {
method: 'GET',
headers: headers
});
console.log(response.clone());
if (fetchErrorHandler(response.clone())) {
return null;
}
let data = await response.json();
return data;
}
$(document).ready(function() {
$('#action_menu_btn').click(function() {
$('.action_menu').toggle();

29
chatto/src/main/resources/static/js/login.js
View File

@ -1,13 +1,6 @@
function storeCredentials() {
let usernameInput = document.getElementById('username');
let passwordInput = document.getElementById('password');
let credentials = {
username: usernameInput.value,
password: passwordInput.value
}
// sessionStorage.setItem('credentials', JSON.stringify(credentials));
localStorage.setItem('username', usernameInput.value);
var jqxhr = $.ajax({
type: 'GET',
url: `http://${hostAddress}/api/chat/get/token`,
@ -19,16 +12,28 @@ function storeCredentials() {
jqxhr.done(function() {
let authToken = jqxhr.getResponseHeader('X-AUTH-TOKEN');
localStorage.setItem('authToken', authToken);
authToken = localStorage.getItem('authToken')
console.log("getting header " + authToken);
secondClick = true;
$('#loginForm').submit();
});
//this section is executed when the server responds with error
jqxhr.fail(function() {
console.error('Error retrieving auth token');
log.error('Error retrieving auth token');
alertify.error('Error retrieving auth token. Please log in again')
})
localStorage.setItem('username', usernameInput.value);
}
let loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', function(e) {
// e.preventDefault();
storeCredentials();
let secondClick = false;
$('#loginForm').on('submit', function(e) {
if(!secondClick) {
secondClick = true;
e.preventDefault();
storeCredentials();
}
// else {
// secondClick = false;
// }
})

57
chatto/src/main/resources/templates/chat.html
View File

@ -20,6 +20,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/alertify.min.css" integrity="sha256-nhstgDCuZGQRk+wvwXZIPt278arHtuZKJ1YQ0rrXiL4=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/default.css" integrity="sha256-dawRQVhnqw8jRXaGnK0aj/NpOsPaQm+Em1sWN+fvegI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/bootstrap.css" integrity="sha256-1fgYpB3cyITZIur7E+Mj3R54NtlN9HwHykgKTJf0pmU=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.5/fuse.min.js" integrity="sha256-Yrh3VGzE4d9b4KANknPJAhfcKt9SgHTL0v/FrJFoPzw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/loglevel/1.6.4/loglevel.min.js" integrity="sha256-ACTlnmNCkOooSKkPCKYbiex8WLE82aeiN+Z9ElZag5Q=" crossorigin="anonymous"></script>
<!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->
@ -54,12 +56,16 @@
<div class="col-md-4 col-xl-3 chat">
<div class="card mb-sm-3 mb-md-0 contacts_card">
<div class="card-header">
<div class="input-group">
<input type="text" placeholder="Search..." name="" class="form-control search">
<div class="input-group-prepend">
<span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
<form action="#" id="user-search">
<div class="input-group">
<input type="text" placeholder="Search..." id="user-search-term" class="form-control search">
<button class="search-cancel" id="user-search-cancel" hidden><i class="fas fa-times"></i></button>
<div class="input-group-prepend">
<button class="input-group-text search_btn"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
</form>
</div>
<div class="card-body contacts_body">
<ui class="contacts">
@ -76,7 +82,7 @@
</div>
</li>
</ui>
<ui class="contacts">
<ui class="contacts" id="contacts-box">
<th:block th:each="au: ${activeUsers}">
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
@ -89,7 +95,7 @@
<div th:switch="${au.online}">
<p th:case="true" th:text="${au.userName} + ' is online'">Khalid is online</p>
<th:block th:case="false">
<th:block th:if="${au.lastActive == null}" >
<th:block th:if="${au.lastActive == null}">
<p th:text="'User has not logged in yet'"></p>
</th:block>
<th:block th:if="${au.lastActive != null}">
@ -106,7 +112,6 @@
<div style="color: rgba(255,255,255,0.7);">Hello how are you</div>
</div>
</div>
</li>
</th:block>
</ui>
@ -255,6 +260,42 @@
</div>
</template>
<template id="user-contact-online-template">
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span class="to-user-span">{{userName}}</span>
<p>{{userName}} is online</p>
</div>
<div class="d-flex flex-column ml-auto">
<div class="text-right">Dec 25</div>
<div style="color: rgba(255,255,255,0.7);">Hello how are you</div>
</div>
</div>
</li>
</template>
<template id="user-contact-offline-template">
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
</div>
<div class="user_info">
<span class="to-user-span">{{userName}}</span>
<p>Last active {{lastActive}}</p>
</div>
<div class="d-flex flex-column ml-auto">
<div class="text-right">Dec 25</div>
<div style="color: rgba(255,255,255,0.7);">Hello how are you</div>
</div>
</div>
</li>
</template>
</body>
<script th:src="@{js/chat.js}" type="text/javascript"></script>
<script src="../static/js/chatStatic.js" th:if="false"></script>

2
chatto/src/main/resources/templates/registration.html
View File

@ -59,7 +59,7 @@
<div class="form-group">
<label for="captcha">Enter this captcha:
<img th:src="@{'/img/' + ${userRegistrationDTO.captchaID}}" />
<img th:src="@{'/img/captcha/' + ${userRegistrationDTO.captchaID}}" />
</label>
<input class="form-control" type="text" id="captcha" th:field="*{captchaInput}" required>
</div>