Skip to content

Commit

Permalink
Merge pull request #126 from KajaBraz/home_page_update_and_fix
Browse files Browse the repository at this point in the history 
Home page update and fix (input validation and connection)
  • Loading branch information
@KajaBraz
KajaBraz authored May 12, 2024
2 parents 3a530b9 + d97399f commit c100e50
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 56 deletions.
15 changes: 11 additions & 4 deletions chatbox_tests/test_arsenic.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import asyncio
import multiprocessing
import os.path
import time
from typing import Union

import arsenic
Expand Down Expand Up @@ -71,9 +70,17 @@ async def test_open_chatbox_home_link(chatbox_server, http_server):
for url in ['localhost:5000/', 'localhost:5000/home']:
await session.get(url)
header_elem = await session.get_element('#chatBoxTitle')

assert page_title in await header_elem.get_text()
assert page_subtitle in await header_elem.get_text()
chat_elem = await session.get_element('#findChat')
typed_chat = await chat_elem.get_attribute('value')
typed_login = await arsenic_tests_helpers.get_login_input_value(session)
connect_button = await session.get_element('#connectButton')
button_text = await connect_button.get_text()

assert await header_elem.get_text() == f'{page_title}\n{page_subtitle}'
assert typed_chat != ''
assert typed_login != ''
assert await connect_button.is_enabled() is True
assert button_text == 'Connect'

await arsenic.stop_session(session)

Expand Down
54 changes: 35 additions & 19 deletions server_http/static/common_functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ function retrieve_display_login(user_name) {
}


function disable_button(text = BUTTON_CONNECTED) {
function disable_connect_button(text = BUTTON_CONNECTED) {
connect_button.innerHTML = text;
connect_button.style.opacity = 0.5;
connect_button.disabled = true;
}


function enable_button(text = BUTTON_CONNECT) {
function enable_connect_button(text = BUTTON_CONNECT) {
connect_button.innerHTML = text;
connect_button.style.opacity = 1;
connect_button.disabled = false;
Expand Down Expand Up @@ -102,13 +102,25 @@ function is_unchanged(typed_login, typed_chat) {
return typed_login == login.slice(0, -ID_LENGTH) && typed_chat === chat;
}


function inspect_inputs_updates(typed_login, typed_chat, login_elem, chat_elem, key_event) {
var modified_inputs;
var correct_inputs;

if (is_unchanged(typed_login, typed_chat)) {
disable_connect_button();
mark_correct_input(login_elem);
mark_correct_input(chat_elem);
disable_button();

modified_inputs = false;
correct_inputs = true;

} else if (typed_login.length === 0 || typed_chat.length === 0) {
disable_button(BUTTON_CONNECT);
disable_connect_button(BUTTON_CONNECT);

modified_inputs = true;
correct_inputs = false;

if (typed_login.length === 0) {
mark_correct_input(login_elem);
}
Expand All @@ -120,33 +132,37 @@ function inspect_inputs_updates(typed_login, typed_chat, login_elem, chat_elem,
let valid_login = validate_input(typed_login, MAX_INPUT_LENGTH);
let valid_chat = validate_input(typed_chat, MAX_INPUT_LENGTH);

modified_inputs = true;
correct_inputs = valid_login && valid_chat;

if (valid_login && valid_chat) {
enable_connect_button();
mark_correct_input(login_elem);
mark_correct_input(chat_elem);
enable_button();

if (key_event.code == 'Enter') {
window.location.href = open_chat_page(chat_elem.value);
}

} else if (!valid_login && !valid_chat) {
mark_incorrect_input(login_elem);
mark_incorrect_input(chat_elem);
disable_button(BUTTON_CONNECT);

} else if (!valid_login) {
mark_incorrect_input(login_elem);
mark_correct_input(chat_elem);
disable_button(BUTTON_CONNECT);

} else if (!valid_chat) {
mark_incorrect_input(chat_elem);
mark_correct_input(login_elem);
disable_button(BUTTON_CONNECT);
} else {
disable_connect_button(BUTTON_CONNECT);

if (!valid_login && !valid_chat) {
mark_incorrect_input(login_elem);
mark_incorrect_input(chat_elem);
} else if (!valid_login) {
mark_incorrect_input(login_elem);
mark_correct_input(chat_elem);
} else if (!valid_chat) {
mark_incorrect_input(chat_elem);
mark_correct_input(login_elem);
}
}
}
return [modified_inputs, correct_inputs];
}


function open_chat_page(destination_chat) {
if (validate_input(destination_chat)) {
window.location.href = `${window.location.origin}/chat/${destination_chat}`;
Expand Down
1 change: 1 addition & 0 deletions server_http/static/config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
const SERVER_ADDRESS = "localhost:11000";
40 changes: 28 additions & 12 deletions server_http/static/home_script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
var my_name_element = document.getElementById("login");
var connect_button = document.getElementById("connectButton");
var chat_destination_element = document.getElementById("findChat");
var connect_button = document.getElementById("connectButton");


function store_input() {
Expand Down Expand Up @@ -64,23 +64,24 @@ function update_stored_chats(new_chat) {
window.onload = function () {
let full_user_name = localStorage.getItem(ACTIVE_USER_STORAGE);
let short_name;
let user_id;

if (full_user_name) {
short_name = retrieve_display_login(full_user_name);
} else {
short_name = generate_random_string(5);
user_id = generate_random_string(ID_LENGTH);
full_user_name = short_name + user_id
}

my_name_element.value = short_name;
chat_destination_element.value = DEFAULT_CHAT_NAME;
chat = DEFAULT_CHAT_NAME;

disable_button(BUTTON_CONNECT);
retrieve_stored_recent_chats();
}

login = full_user_name;

document.onkeyup = (e) => {
if (e.code === 'Enter') {
store_input()
open_chat_page(chat_destination_element.value);
}
enable_connect_button(BUTTON_CONNECT);
retrieve_stored_recent_chats();
}


Expand All @@ -94,13 +95,28 @@ my_name_element.onkeyup = (e) => {
let typed_login = my_name_element.value;
let typed_chat = chat_destination_element.value;

inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);
let [_, is_correct] = inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);

if (is_correct) {
enable_connect_button();
}
if (e.code === 'Enter') {
store_input()
open_chat_page(chat_destination_element.value);
}
}


chat_destination_element.onkeyup = (e) => {
let typed_login = my_name_element.value;
let typed_chat = chat_destination_element.value;

inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);
let [_, is_correct] = inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);

if (is_correct) {
enable_connect_button();
}
if (e.code === 'Enter') {
open_chat_page(chat_destination_element.value);
}
}
12 changes: 5 additions & 7 deletions server_http/static/main_script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function connect(user_name, chat_name) {
}
let short_name = retrieve_display_login(user_name);
if (not_blank(short_name) && not_blank(chat_name)) {
var url = `ws://${server_address}/${chat_name}/${user_name}`;
var url = `ws://${SERVER_ADDRESS}/${chat_name}/${user_name}`;
console.log("url", url);
webSocket = new WebSocket(url);

Expand Down Expand Up @@ -441,7 +441,7 @@ function activate_actions_on_entering_chat() {
add_chat(chat);
console.log(login, chat);

disable_button();
disable_connect_button();
}


Expand All @@ -463,7 +463,6 @@ var share_button = document.querySelector("#clipboard");

var login = "";
var chat = "";
var server_address = "localhost:11000";
var webSocket = null;
var active_recent_chats = [];
var recently_used_chats = [];
Expand Down Expand Up @@ -510,7 +509,6 @@ window.onunload = function () {
}



connect_button.onclick = () => {
console.log("clicking connect");
chat_change(chat_destination_element.value);
Expand All @@ -521,7 +519,7 @@ my_name_element.onkeyup = (e) => {
let typed_login = my_name_element.value;
let typed_chat = chat_destination_element.value;

inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);
let [_modified, _correct] = inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);

if (e.code === 'Enter') {
chat_change(chat_destination_element.value);
Expand All @@ -533,9 +531,9 @@ chat_destination_element.onkeyup = (e) => {
let typed_login = my_name_element.value;
let typed_chat = chat_destination_element.value;

inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);
let [_modified, _correct] = inspect_inputs_updates(typed_login, typed_chat, my_name_element, chat_destination_element, e);

if (e.code === 'Enter') {
if (e.code === 'Enter') {
chat_change(chat_destination_element.value);
}
}
Expand Down
17 changes: 3 additions & 14 deletions server_http/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,8 @@ <h1>ChatBox</h1>
<h2>Web Messagging App</h2>
</div>

<div class="homeSection" id="welcomeChatContainer">
<h2>Say hello to other users in general chat:</h2>

<a id="welcomeChatLink" href="http://localhost:5000/chat/WelcomeInChatBox">
<button>WelcomeInChatBox</button>
</a>

</div>

<hr>

<div class="homeSection" id="customChatContainer">
<h2>Join other chats or create a new one:</h2>
<h2>Choose your login and enter chat:</h2>

<div>
<input id="login" placeholder="Your Name">
Expand All @@ -45,7 +34,7 @@ <h2>Join other chats or create a new one:</h2>
</div>

<div>
<input id="findChat" placeholder="Chat Name" value="{{ requestedChatName }}">
<input id="findChat" placeholder="Chat Name">
<i class="tooltip" id="chatNameInfo">&#9432;
<span class="tooltipText">Chat name restrictions:
- at least 1 character long
Expand All @@ -67,7 +56,7 @@ <h2> Jump to your previously visited chats by clicking on the below tiles:</h2>
<div id="recentChatsList"></div>
</div>


<script src="{{ url_for('static', filename='config.js') }}"></script>
<script src="{{ url_for('static', filename='constants.js') }}"></script>
<script src="{{ url_for('static', filename='home_script.js') }}"></script>
<script src="{{ url_for('static', filename='common_functions.js') }}"></script>
Expand Down
1 change: 1 addition & 0 deletions server_http/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ <h3>Active Users:</h3>
</div>

<!-- <script src="lc_emoji_picker.min.js" type="text/javascript"></script> -->
<script src="{{ url_for('static', filename='config.js') }}"></script>
<script src="{{ url_for('static', filename='constants.js') }}"></script>
<script src="{{ url_for('static', filename='main_script.js') }}"></script>
<script src="{{ url_for('static', filename='common_functions.js') }}"></script>
Expand Down

0 comments on commit c100e50

Please sign in to comment.