From 51d51c3a326cd3fbef25571c9c6e376acac2c35f Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 4 Jun 2021 14:05:05 +0200 Subject: [PATCH] - Improved alerts - Improved modal - Fixed get_curr_path() function - Improved tools.js - Cleaned up - Refactoring --- Frontend/index.html | 41 +---- Frontend/static/css/components.css | 2 +- Frontend/static/css/{popup.css => modal.css} | 27 ++- Frontend/static/js/alert.js | 22 ++- Frontend/static/js/callbacks.js | 66 ------- Frontend/static/js/dropdown.js | 30 ++++ Frontend/static/js/generate_directory_tree.js | 2 +- Frontend/static/js/index.js | 161 +++++++++-------- Frontend/static/js/modal.js | 28 +++ Frontend/static/js/tools.js | 36 ++-- Frontend/static/js/views.js | 163 ++++++++++-------- 11 files changed, 300 insertions(+), 278 deletions(-) rename Frontend/static/css/{popup.css => modal.css} (61%) delete mode 100644 Frontend/static/js/callbacks.js create mode 100644 Frontend/static/js/dropdown.js create mode 100644 Frontend/static/js/modal.js diff --git a/Frontend/index.html b/Frontend/index.html index 4918e8c..a25fb47 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -2,13 +2,14 @@ - Filemanager + File Manager + + - @@ -18,7 +19,7 @@ - + @@ -33,43 +34,13 @@
-
- - -
- - - -
- -
- - -
-
-
+
-
-
+
diff --git a/Frontend/static/css/components.css b/Frontend/static/css/components.css index 3a9ad46..194a742 100644 --- a/Frontend/static/css/components.css +++ b/Frontend/static/css/components.css @@ -44,7 +44,7 @@ header { font-size: 2em; } -.logout { +#logout { grid-column: 2; width: 100%; display: flex; diff --git a/Frontend/static/css/popup.css b/Frontend/static/css/modal.css similarity index 61% rename from Frontend/static/css/popup.css rename to Frontend/static/css/modal.css index 189b657..17bd541 100644 --- a/Frontend/static/css/popup.css +++ b/Frontend/static/css/modal.css @@ -1,5 +1,4 @@ -.modal { - display: none; +#modal { position: fixed; z-index: 100000; padding-top: 100px; @@ -17,31 +16,43 @@ padding: 20px; border: 1px solid #888; width: 90%; - height: 80%; + border-radius: 5px; + display: flex; + flex-direction: column; + justify-content: space-between; } -.modal_header { +.divider { + background: #585858; + height: 0.1em; + margin: 0.5em 0 0.5em; +} + +#modal_header { display: grid; grid-template-columns: 90% 10%; } -.modal_header #modal_title { +#modal_header #modal_title { grid-column: 1; margin: 0; } -.modal_header > span { +#modal_header > span { grid-column: 2; display: flex; justify-content: flex-end; align-items: center; } -.modal_header span i { +#modal_header span i { cursor: pointer; } -.modal_content { +#modal_content { + display: flex; + justify-content: center; + align-items: center; background-color: #fefefe; width: 100%; height: calc(100% - 16px - 2em); diff --git a/Frontend/static/js/alert.js b/Frontend/static/js/alert.js index 1c90417..c15cc2a 100644 --- a/Frontend/static/js/alert.js +++ b/Frontend/static/js/alert.js @@ -1,21 +1,37 @@ function create_error_view(text) { + let id = get_random_id(); let error = document.createElement('div'); - error.innerHTML = `
+ + error.innerHTML = `
${text}
`; document.getElementById('error_wrapper').innerHTML = ''; - document.getElementById('error_wrapper').appendChild(error.firstChild); + document.getElementById('error_wrapper').appendChild(error); + + setTimeout(function () { + if (typeof (document.getElementById(id)) != 'undefined' && document.getElementById(id) != null) { + document.getElementById(id).remove(); + } + }, 10000); } function create_success_view(text) { + let id = get_random_id(); let error = document.createElement('div'); - error.innerHTML = `
+ + error.innerHTML = `
${text}
`; document.getElementById('error_wrapper').innerHTML = ''; document.getElementById('error_wrapper').appendChild(error.firstChild); + + setTimeout(function () { + if (typeof (document.getElementById(id)) != 'undefined' && document.getElementById(id) != null) { + document.getElementById(id).remove(); + } + }, 10000); } \ No newline at end of file diff --git a/Frontend/static/js/callbacks.js b/Frontend/static/js/callbacks.js deleted file mode 100644 index 8c8800b..0000000 --- a/Frontend/static/js/callbacks.js +++ /dev/null @@ -1,66 +0,0 @@ -function logout_callback(response, code) { - if (code === 200) { - sessionStorage.removeItem('authorization'); - location.reload(); - } else { - create_error_view(response['error'] + ` Return to root directory`); - } -} - -function remove_callback(response, code) { - if (code === 200) { - create_success_view("Successfully deleted."); - url_changed(); - } else { - create_error_view(response); - } -} - -function save_file_callback(response, code) { - if (code === 200) { - create_success_view("Saved file successfully"); - } else { - create_error_view(JSON.parse(response)['error']); - } -} - - -function show_image_callback(response, code) { - if (code === 200) { - document.getElementsByClassName("modal_content")[0].innerHTML = `Image`; - } else { - create_error_view(response['error'] + ` Return to root directory`); - } -} - -function show_text_callback(response, code) { - if (code === 200) { - document.getElementsByClassName("modal_content")[0].innerHTML = ` - - `; - } else { - create_error_view(response['error'] + ` Return to root directory`); - } -} - -function show_audio_callback(response, code) { - if (code === 200) { - document.getElementsByClassName("modal_content")[0].innerHTML = ``; - } else { - create_error_view(response['error'] + ` Return to root directory`); - } -} - -function show_video_callback(response, code) { - if (code === 200) { - document.getElementsByClassName("modal_content")[0].innerHTML = ``; - } else { - create_error_view(response['error'] + ` Return to root directory`); - } -} \ No newline at end of file diff --git a/Frontend/static/js/dropdown.js b/Frontend/static/js/dropdown.js new file mode 100644 index 0000000..6a6fd93 --- /dev/null +++ b/Frontend/static/js/dropdown.js @@ -0,0 +1,30 @@ +function download_file(path, mimetype) { + let file = path.split('/'); + let filename = file[file.length - 1]; + + httpGetAsync(base_url + path, null, function (response, code) { + if (code === 200) { + let element = document.createElement('a'); + element.setAttribute('href', 'data:' + mimetype + ',' + encodeURIComponent(response)); + element.setAttribute('download', filename); + + element.style.display = 'none'; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + } else { + create_error_view("Error " + response); + } + }); +} + +function remove_file(filename) { + httpDeleteAsync(base_url + filename, null, function (response, code) { + if (code === 200) { + create_success_view("Successfully deleted."); + path_changed(); + } else { + create_error_view(response); + } + }); +} \ No newline at end of file diff --git a/Frontend/static/js/generate_directory_tree.js b/Frontend/static/js/generate_directory_tree.js index 2f9221d..1cc9390 100644 --- a/Frontend/static/js/generate_directory_tree.js +++ b/Frontend/static/js/generate_directory_tree.js @@ -50,7 +50,7 @@ function create_tree_view() { function tree_onclick(url) { window.history.pushState('index', 'Filemanager', 'index.html?path=' + url); - url_changed(); + path_changed(); } function create_list_view(dataRoot, elementRoot, url) { diff --git a/Frontend/static/js/index.js b/Frontend/static/js/index.js index b8657cf..b60f424 100644 --- a/Frontend/static/js/index.js +++ b/Frontend/static/js/index.js @@ -7,7 +7,7 @@ window.addEventListener('load', function () { create_base_view(); create_logout_view(); create_tree_data(''); - url_changed(); + path_changed(); } else { console.log('Not logged in'); create_login_view(); @@ -15,49 +15,37 @@ window.addEventListener('load', function () { }); window.addEventListener('popstate', function () { - url_changed(); + path_changed(); }); -function url_changed() { - let curr_dir = get_path(); - - if (curr_dir !== null) { - if (curr_dir.startsWith('/') || curr_dir === '') { - httpGetAsync(base_url + curr_dir, null, show_files); - } else { - // Malformed url if curr_dir does not start with / - httpGetAsync(base_url + '/' + curr_dir, null, show_files); - } - } else { - httpGetAsync(base_url, null, show_files); - } +function path_changed() { + let curr_dir = get_curr_path(); + httpGetAsync(base_url + curr_dir, null, show_files); } function login() { let username = document.getElementById("username").value; let password = document.getElementById("password").value; - const xmlHttp = new XMLHttpRequest(); - xmlHttp.onreadystatechange = function () { - if (this.readyState === 4) { - if (xmlHttp.status === 200) { - sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token'])); + httpPostAsync(base_url + '/login', 'username=' + username + '&password=' + password, function (response, code) { + if (code === 200) { + sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(response)['token'])); - create_base_view(); - create_logout_view(); - create_tree_data(''); - url_changed(); - } else if (xmlHttp.status === 401) { - create_error_view("Wrong username or password!"); - } else { - create_error_view("Unknown error!"); + create_base_view(); + create_logout_view(); + create_tree_data(''); + path_changed(); + } else if (code === 401) { + create_error_view("Wrong username or password!"); + } else { + try { + response = JSON.parse(response); + create_error_view(response['error'] + ` Return to root directory`); + } catch (e) { + create_error_view(`Unrecoverable error! Return to root directory`); } } - } - - xmlHttp.open("POST", base_url + '/login', true); - xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xmlHttp.send('username=' + username + '&password=' + password); + }) } function show_files(response, code) { @@ -72,15 +60,15 @@ function show_files(response, code) { // Error try { response = JSON.parse(response); - create_error_view(response['error'] + ` Return to root directory`); + create_error_view(response['error'] + ` Return to root directory`); } catch (e) { - create_error_view(`Unrecoverable error! Return to root directory`); + create_error_view(`Unrecoverable error! Return to root directory`); } } } function one_dir_back() { - let curr_dir = get_path(); + let curr_dir = get_curr_path(); if (curr_dir !== null) { let dir = curr_dir.split('/'); @@ -94,48 +82,81 @@ function one_dir_back() { } function save_file(filename, content) { - document.getElementById('modal').style.display = 'none'; - httpPostAsync(base_url + filename, content, save_file_callback); -} - -function download_file(filename) { - let file = filename.split('/'); - saveFile(base_url + filename, file[file.length - 1]); -} - -function remove_file(filename) { - httpDeleteAsync(base_url + filename, null, remove_callback); + remove_modal(); + httpPostAsync(base_url + filename, 'content=' + btoa(content), function (response, code) { + if (code === 200) { + create_success_view("Saved file successfully"); + } else { + create_error_view(JSON.parse(response)['error']); + } + }); } function add_folder() { - document.getElementById('modal_title').innerText = 'Create Folder'; - - document.getElementsByClassName("modal_content")[0].innerHTML = ` - - `; - - document.getElementById('modal').style.display = 'block'; + let content = ``; + let footer = ` + `; + create_modal('Create Folder', content, footer); } function add_file() { - document.getElementById('modal_title').innerText = 'Create File'; - - document.getElementsByClassName("modal_content")[0].innerHTML = ` - - - - - `; - - document.getElementById('modal').style.display = 'block'; + let content = `
+ + +
`; + let footer = ` + `; + create_modal('Create File', content, footer); } -function create_text_file() { - let path = get_path(); - if (path === null) path = ''; - save_file(path + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim()); +function upload_file() { + let content = ``; + let footer = ` + `; + create_modal('Upload File', content, footer); } -function get_path() { - return findGetParameter('path'); +function api_create_folder(name) { + httpPostAsync(base_url + get_curr_path() + '/' + name, 'type=dir', function (response, code) { + remove_modal(); + path_changed(); + + if (code === 200) { + create_success_view('Created directory successfully'); + } else { + try { + response = JSON.parse(response); + create_error_view(response['error']); + } catch (e) { + create_error_view(`Unrecoverable error! Return to root directory`); + } + } + }); +} + +function api_upload_file() { // TODO + let files = document.getElementById('modal_content').children[0].children[0].files[0]; + console.log(files); + + // let formData = new FormData(); + // formData.append('local', files, files.name); + // + // httpPostAsync(base_url + get_curr_path() + '/' + files.name, 'newFile=' + formData, function (response, code) { + // console.log(code) + // console.log(response) + // }) +} + +function get_curr_path() { + let curr_dir = findGetParameter('path'); + if (curr_dir === null) { + curr_dir = ''; + } + + if (!curr_dir.startsWith('/') && curr_dir !== '') { + // Malformed url if curr_dir does not start with / + curr_dir = '/' + curr_dir; + } + + return curr_dir; } \ No newline at end of file diff --git a/Frontend/static/js/modal.js b/Frontend/static/js/modal.js new file mode 100644 index 0000000..24243ea --- /dev/null +++ b/Frontend/static/js/modal.js @@ -0,0 +1,28 @@ +function create_modal(title, content, footer) { + let div = document.createElement('div'); + div.innerHTML = `` + document.body.appendChild(div.firstChild); +} + +function remove_modal() { + document.getElementById('modal').remove(); +} + +function change_modal_content(content) { + document.getElementById("modal_content").innerHTML = content; +} \ No newline at end of file diff --git a/Frontend/static/js/tools.js b/Frontend/static/js/tools.js index 13a85f6..b53c910 100644 --- a/Frontend/static/js/tools.js +++ b/Frontend/static/js/tools.js @@ -11,30 +11,6 @@ function httpGetAsync(url, data, callback) { xmlHttp.send(null); } -function saveFile(url, filename, mimetype) { - const xmlHttp = new XMLHttpRequest(); - xmlHttp.onreadystatechange = function () { - if (this.readyState === 4) { - if (xmlHttp.status === 200) { - let element = document.createElement('a'); - element.setAttribute('href', 'data:' + mimetype + ',' + encodeURIComponent(xmlHttp.responseText)); - element.setAttribute('download', filename); - - element.style.display = 'none'; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - } else { - create_error_view("Error " + xmlHttp.status); - } - } - } - - xmlHttp.open("GET", url, true); - xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization')); - xmlHttp.send(null); -} - function httpPostAsync(url, data, callback) { const xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function () { @@ -46,7 +22,7 @@ function httpPostAsync(url, data, callback) { xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization')); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - xmlHttp.send('content=' + btoa(data)); + xmlHttp.send(data); } function httpDeleteAsync(url, data, callback) { @@ -73,4 +49,14 @@ function findGetParameter(parameterName) { if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); }); return result; +} + +function get_random_id() { + let s4 = function () { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + } + + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } \ No newline at end of file diff --git a/Frontend/static/js/views.js b/Frontend/static/js/views.js index 57e3273..98d39e0 100644 --- a/Frontend/static/js/views.js +++ b/Frontend/static/js/views.js @@ -1,9 +1,27 @@ function create_base_view() { - let tmp = document.createElement('div'); + let tmp; + tmp = document.createElement('div'); tmp.innerHTML = `
`; document.getElementById("wrapper").innerHTML = tmp.innerHTML; + + + tmp = document.createElement('div'); + tmp.innerHTML = `
+ + +
+ +
+ +
+ + + +
+
` + document.getElementsByTagName('main')[0].appendChild(tmp); } function create_login_view() { @@ -25,22 +43,53 @@ function create_login_view() {
`; - document.getElementById("wrapper").innerHTML = ''; - document.getElementById("wrapper").appendChild(tmp.firstChild); + document.getElementById("wrapper").innerHTML = tmp.innerHTML; } function create_logout_view() { let logout = document.createElement('div'); - logout.classList.add('logout'); + logout.id = 'logout'; logout.innerText = 'Logout'; logout.onclick = function () { - httpGetAsync(base_url + '/logout', null, logout_callback); + httpGetAsync(base_url + '/logout', null, function (response, code) { + if (code === 200) { + sessionStorage.removeItem('authorization'); + document.getElementById('logout').remove(); + document.getElementById('context_menu').parentElement.remove(); + create_login_view(); + } else { + create_error_view(response['error'] + ` Return to root directory`); + } + }); } document.getElementsByClassName('app-header')[0].appendChild(logout); } +function get_icon(type) { + switch (type.split('/')[0]) { + case 'application': + return 'apps'; + case 'audio': + return 'music_note'; + case 'drawing': + return 'gesture'; + case 'image': + return 'image'; + case 'message': + return 'mail'; + case 'multipart': + return 'note_add'; + case 'text': + return 'description'; + case 'video': + return 'movie'; + default: + return 'article'; + } +} + function create_main_view(data) { - let curr_dir = get_path(); + let curr_dir = get_curr_path(); let files = document.createElement('div'); files.innerHTML = `
@@ -58,10 +107,10 @@ function create_main_view(data) { `; // Previous directory - if (curr_dir !== null && curr_dir !== '') { + if (curr_dir !== '/') { files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () { window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back()); - url_changed(); + path_changed(); })); } @@ -70,7 +119,7 @@ function create_main_view(data) { if (data[i]['Type'] === 'dir') { files.getElementsByTagName('tbody')[0].appendChild(add_table_row("folder", data[i]['Name'], "directory", curr_dir, true, function () { window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']); - url_changed(); + path_changed(); })); } } @@ -78,50 +127,19 @@ function create_main_view(data) { // Files for (let i = 0; i < data.length; i++) { if (data[i]['Type'] !== 'dir') { - let icon = ''; - switch (data[i]['Type'].split('/')[0]) { - case 'application': - icon = 'apps'; - break; - case 'audio': - icon = 'music_note'; - break; - case 'drawing': - icon = 'gesture'; - break; - case 'image': - icon = 'image'; - break; - case 'message': - icon = 'mail'; - break; - case 'multipart': - icon = 'note_add'; - break; - case 'text': - icon = 'description'; - break; - case 'video': - icon = 'movie'; - break; - default: - icon = 'article'; - break; - } - - files.getElementsByTagName('tbody')[0].appendChild(add_table_row(icon, data[i]['Name'], data[i]['Type'], curr_dir, true, function () { + files.getElementsByTagName('tbody')[0].appendChild(add_table_row(get_icon(data[i]['Type']), data[i]['Name'], data[i]['Type'], curr_dir, true, function () { show_file_view(curr_dir + '/' + data[i]['Name'], data[i]['Type']); })); } } // Path - let s = `
/
`; + let s = `
/
`; if (curr_dir !== null) { let folders = curr_dir.split('/'); for (let i = 1; i < folders.length; i++) { - if (folders[i] !== '') s = s.concat(`
${folders[i]}
`); + if (folders[i] !== '') s = s.concat(`
${folders[i]}
`); } } files.getElementsByTagName('div')[0].innerHTML = s; @@ -159,42 +177,49 @@ function add_table_row(icon, name, type, path, context, click_function) { } function show_file_view(data, type) { - let modal = document.getElementById("modal"); - let title = document.getElementById("modal_title"); - let modal_content = document.getElementsByClassName("modal_content")[0]; - - switch (type.split('/')[0]) { - case 'application': - modal_content.innerHTML = ``; - break; case 'audio': - httpGetAsync(base_url + data + '?format=base64', null, show_audio_callback); - break; - case 'drawing': - modal_content.innerHTML = ``; + create_modal(`File: ${data}`, ``); + httpGetAsync(base_url + data + '?format=base64', null, function (response, code) { + if (code === 200) { + change_modal_content(``); + } else { + create_error_view(response['error'] + ` Return to root directory`); + } + }); break; case 'image': - httpGetAsync(base_url + data + '?format=base64', null, show_image_callback); - break; - case 'message': - modal_content.innerHTML = ``; - break; - case 'multipart': - modal_content.innerHTML = ``; + create_modal(`File: ${data}`, ``); + httpGetAsync(base_url + data + '?format=base64', null, function (response, code) { + if (code === 200) { + change_modal_content(`Image`); + } else { + create_error_view(response['error'] + ` Return to root directory`); + } + }); break; case 'text': - httpGetAsync(base_url + data, null, show_text_callback); + create_modal(`File: ${data}`, ``); + httpGetAsync(base_url + data, null, function (response, code) { + if (code === 200) { + change_modal_content(`
`); + } else { + create_error_view(response['error'] + ` Return to root directory`); + } + }); break; case 'video': - httpGetAsync(base_url + data + '?format=base64', null, show_video_callback); + create_modal(`File: ${data}`, ``); + httpGetAsync(base_url + data + '?format=base64', null, function (response, code) { + if (code === 200) { + change_modal_content(``); + } else { + create_error_view(response['error'] + ` Return to root directory`); + } + }); break; default: - modal_content.innerHTML = ``; + create_modal(`File: ${data}`, `Cannot open file!`); break; } - - title.innerHTML = `File: ${data}`; - - modal.style.display = "block"; } \ No newline at end of file