UI Admin aproape finalizat

This commit is contained in:
andrei-mihnea-cerbu
2024-04-03 02:09:12 +03:00
parent fb957a6f97
commit af8c295d75
134 changed files with 5014 additions and 1045 deletions
View File
View File
+1 -1
View File
@@ -2,7 +2,7 @@
<project version="4"> <project version="4">
<component name="ProjectModuleManager"> <component name="ProjectModuleManager">
<modules> <modules>
<module fileurl="file://$PROJECT_DIR$/.idea/HTML UI.iml" filepath="$PROJECT_DIR$/.idea/HTML UI.iml" /> <module fileurl="file://$PROJECT_DIR$/.idea/CEO.iml" filepath="$PROJECT_DIR$/.idea/CEO.iml" />
</modules> </modules>
</component> </component>
</project> </project>
View File
+6
View File
@@ -0,0 +1,6 @@
{
"id": "a7635c7a-d6a0-43dc-8e24-552ab33239b8",
"name": "CEO",
"email": "ceo@yourfirm.com",
"password": "405ee6885be5385223830874bd6dcfca"
}
+1966
View File
File diff suppressed because it is too large Load Diff
+23
View File
@@ -0,0 +1,23 @@
{
"name": "proiect-licenta",
"productName": "Aplicatie",
"version": "1.0.0",
"description": "Aplicatie P2P pentru stocarea resurselor digitale",
"main": "src/main/main.js",
"scripts": {
"start": "electron --trace-warnings ./src/main/main.js",
"dev": "electronmon --trace-warnings ./src/main/main.js"
},
"author": "Cerbu Andrei - Mihnea",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.3",
"electron": "^29.1.5",
"express": "^4.19.2",
"nodemon": "^3.1.0",
"toastify-js": "^1.12.0"
},
"devDependencies": {
"electronmon": "^2.0.2"
}
}
+199
View File
@@ -0,0 +1,199 @@
const { app, BrowserWindow, screen, ipcMain, dialog } = require('electron');
const fs = require('fs');
const path = require('path');
const isMac = process.platform === 'darwin';
let html_page = undefined;
let mainWindow = undefined;
let alertWindow = undefined;
const createMainWindow = ((title, width, height) => {
mainWindow = new BrowserWindow({
title: title,
width: width,
height: height,
resizable: false,
icon: path.join(__dirname, '..', 'renderer', 'assets', 'hard-disk.png'),
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
});
html_page = 'login.html';
//mainWindow.setMenu(null);
mainWindow.loadFile(path.join(__dirname, '..', 'renderer', 'html', 'login.html'))
.then(() => {
console.log('Main window loaded!')
})
.catch(err => console.error('Failed to load main window:', err));
});
const createAlertWindow = (title, width, height) => {
alertWindow = new BrowserWindow({
width: width,
height: height,
title: title,
icon: path.join(__dirname, '..', 'renderer', 'assets', 'hard-disk.png'),
resizable: false,
webPreferences: {
nodeIntegration: false,
preload: path.join(__dirname, 'preload.js')
}
});
//alertWindow.setMenu(null);
alertWindow.loadFile(path.join(__dirname, '..', 'renderer', 'html', 'alert_modal.html')).then(() => {
console.log('Alert window loaded!')
})
.catch(err => console.error('Failed to load alert window:', err));
alertWindow.on('closed', () => {
alertWindow = undefined;
});
}
function showAlert(message) {
if (alertWindow === undefined) {
const title = 'Alert';
const mainScreen = screen.getPrimaryDisplay();
const { width, height } = mainScreen.size;
createAlertWindow(title, width/4, height/4);
}
alertWindow.webContents.once('dom-ready', () => {
alertWindow.webContents.executeJavaScript(`showAlert("${message}")`);
});
}
app.whenReady().then(() => {
const title = "Application";
const mainScreen = screen.getPrimaryDisplay();
const { width, height } = mainScreen.size;
createMainWindow(title, width / 1.5, height / 1.5);
app.on('activate', () => {
if(BrowserWindow.getAllWindows().length === 0){
createMainWindow(title, width, height);
}
});
});
app.on('window-all-closed', () => {
if(!isMac){
app.quit();
}
});
ipcMain.handle('write-file', async (event, fileName, content) => {
try {
let filePath = path.join(__dirname, '..', '..', fileName);
await fs.promises.writeFile(filePath, content);
console.log(`File successfully written to ${filePath}`);
return { success: true };
} catch (error) {
console.error('Failed to write file:', error);
return { success: false, error: error.message };
}
});
ipcMain.handle('delete-file', async (event, fileName) => {
try {
let filePath = path.join(__dirname, '..', '..', fileName);
console.log(filePath);
await fs.promises.unlink(filePath);
console.log(`File ${filePath} successfully deleted`);
return { success: true };
} catch (error) {
console.error('Failed to delete file:', error);
return { success: false, error: error.message };
}
});
ipcMain.handle('read-file', async (event, fileName) => {
try {
let filePath = path.join(__dirname, '..', '..', fileName);
const content = await fs.promises.readFile(filePath, 'utf-8');
return { success: true, content };
} catch (error) {
console.error('Error reading file:', error);
return { success: false, error: error.message };
}
});
ipcMain.handle('change-content', async (event, nextPage) => {
try {
html_page = nextPage;
mainWindow.webContents.executeJavaScript(`
document.body.classList.add('fade-out');
`);
await new Promise(resolve => setTimeout(resolve, 1000));
await mainWindow.loadFile(path.join(__dirname, '..', 'renderer', 'html', nextPage));
mainWindow.webContents.executeJavaScript(`
document.body.classList.add('fade-in');
`);
return true;
} catch (error) {
console.error('Error changing content:', error);
return false;
}
});
ipcMain.handle('open-backup-dir-dialog', async (event) => {
try {
const result = await dialog.showOpenDialog({
properties: ['openDirectory'],
});
if (result.canceled || result.filePaths.length === 0) {
return {canceled: true}
}
const dirPath = result.filePaths[0];
await fs.promises.writeFile(
path.join(__dirname, '..', '..', 'dirBackup.json'),
JSON.stringify({
path: dirPath,
structure: {}
}, null, 2));
return true;
} catch (error) {
console.error('Error opening file dialog:', error);
return { error: error.message };
}
});
ipcMain.handle('open-file-dialog', async (event) => {
const result = await dialog.showOpenDialog({
properties: ['openFile']
});
return result.filePaths[0] || '';
});
ipcMain.handle('check-file-exists', async (event, fileName) => {
try {
const filePath = path.join(__dirname, '..', '..', fileName);
return await fs.promises.access(filePath)
.then(() => true)
.catch(() => false);
} catch (error) {
console.error('Error checking file existence:', error);
throw error; // Propagate the error to the renderer process
}
});
ipcMain.handle('show-alert', async (event, message) =>{
showAlert(message);
});
ipcMain.on('close-alert-window', () => {
if (alertWindow) {
alertWindow.close();
alertWindow = undefined;
}
});
+13
View File
@@ -0,0 +1,13 @@
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
writeFile: (fileName, content) => ipcRenderer.invoke('write-file', fileName, content),
readFile: (fileName) => ipcRenderer.invoke('read-file', fileName),
deleteFile: (fileName) => ipcRenderer.invoke('delete-file', fileName),
changeContent: (nextPage) => ipcRenderer.invoke('change-content', nextPage),
showAlert: (message) => ipcRenderer.invoke('show-alert', message),
closeAlertWindow: () => ipcRenderer.send('close-alert-window'),
openBackupDirDialog: () => ipcRenderer.invoke('open-backup-dir-dialog'),
openFileDialog: () => ipcRenderer.invoke('open-file-dialog'),
checkFileExists: (fileName) => ipcRenderer.invoke('check-file-exists', fileName)
});

Before

Width:  |  Height:  |  Size: 298 KiB

After

Width:  |  Height:  |  Size: 298 KiB

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

@@ -16,77 +16,48 @@ body, html {
.container { .container {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
text-align: center; }
h1{
margin: 0;
padding: 0;
}
.main_component{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #535C91;
opacity: 71;
padding: 2vh;
border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
width: 90vw;
height: 80vh;
} }
.header{ .header{
color: #1B1A55; color: #1B1A55;
font-size: 4vh; font-size: 0.8rem;
text-transform: uppercase;
line-height: 2.5rem;
margin-bottom: 10rem;
}
.signup-form {
background-color: #535C91;
opacity: 71;
padding: 8vh 3vh 5vh;
border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
width: 25%;
}
.signup-form-title{
margin-bottom: 5vh;
}
.signup-form-title h2 {
color: #FFFFFF;
margin: 0;
padding: 0;
text-align: center; text-align: center;
font-size: 5vh; text-transform: uppercase;
}
.signup-form hr{
width: 65%;
}
input{
margin: 0 0 1rem 0;
}
.signup-form-content{
display: flex;
margin-left: 2rem;
flex-direction: column;
align-items: start;
font-size: 1.5rem;
color: white;
font-weight: bold;
}
.signup-form-footer{
margin-top: 5vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: space-between;
} }
button { button {
font-weight: bold; font-weight: bold;
width: 40%; width: 25%;
font-size: 1rem; font-size: 1rem;
padding: 10px; padding: 10px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
margin-top: 5px; margin-top: 20px;
cursor: pointer; cursor: pointer;
} }
@@ -94,12 +65,7 @@ button:hover{
filter: brightness(85%); filter: brightness(85%);
} }
button[name="continue"] { button[name="close"] {
background-color: #F44336; background-color: #2196F3;
color: white; color: white;
} }
button[name="back"] {
background-color: #23BDEE;
color: white;
}
@@ -30,7 +30,7 @@ body, html {
margin-bottom: 10rem; margin-bottom: 10rem;
} }
.signup-form { .login-form {
background-color: #535C91; background-color: #535C91;
opacity: 71; opacity: 71;
padding: 9vh 3vh 5vh; padding: 9vh 3vh 5vh;
@@ -39,27 +39,26 @@ body, html {
width: 25%; width: 25%;
} }
.signup-form-title{ .login-form-title{
margin: 0 0 5vh 0; margin: 0 0 5vh 0;
text-align: center; text-align: center;
} }
.signup-form-title h2{ .login-form-title h2{
color: #FFFFFF; color: #FFFFFF;
font-size: 5vh; font-size: 5vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.signup-form hr{ .login-form hr{
width: 40%; width: 40%;
} }
.signup-form-content{ .login-form-content{
display: flex; display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
} }
input { input {
@@ -76,7 +75,7 @@ input {
button { button {
font-weight: bold; font-weight: bold;
width: 40%; width: 35%;
font-size: 1rem; font-size: 1rem;
padding: 10px; padding: 10px;
border: none; border: none;
@@ -89,14 +88,21 @@ button:hover{
filter: brightness(85%); filter: brightness(85%);
} }
.signup-form-footer{ .login-form-footer{
margin-top: 3vh; margin-top: 3vh;
display: flex; display: flex;
flex-wrap: wrap;
align-content: center; align-content: center;
justify-content: center; align-items: center;
justify-content: space-evenly;
} }
.signup-form button[name="submit"] { button[name="submit"] {
background-color: #F44336; background-color: #F44336;
color: white; color: white;
}
button[name="signin"] {
background-color: #2196F3;
color: white;
} }
@@ -14,6 +14,76 @@ body, html {
} }
.overlay {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.85);
z-index: 2;
cursor: pointer;
}
.ceo-validation-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background: #1B1A55;
border-radius: 10px;
cursor: default;
}
.ceo-validation-form h2 {
text-align: center;
color: white;
}
.form-actions {
text-align: center;
padding-top: 20px;
}
.form-actions button {
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input {
text-align: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
width: 80%;
padding: 1rem;
margin: 0.7rem;
background-color: #1B1A55;
border-radius: 10px;
}
#back_button {
background-color: #f44336;
width: 35%;
height: auto;
color: white;
}
#submit_button {
background-color: #4CAF50;
width: 35%;
height: auto;
color: white;
}
.container { .container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -23,12 +93,7 @@ body, html {
text-align: center; text-align: center;
} }
h1, h2{ .left_block {
padding: 0;
margin: 0;
}
.left_block{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #535C91; background-color: #535C91;
@@ -39,46 +104,29 @@ h1, h2{
color: white; color: white;
} }
.left_block_top{ .left_block_top {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
}
.left_block_top_left{
display: flex;
flex-direction: column;
justify-content: start;
text-align: left; text-align: left;
} }
.left_block_top_left hr{ .left_block_top h1 {
margin: 0 0 1rem 0; padding: 0;
width: 45%; margin: 0;
} }
.left_block_top_right{ .left_block_top img {
width: 10vw; margin: 0 3vw 0 5vw;
width: 8vw;
display: flex; height: 8vw;
flex-wrap: wrap;
align-content: center;
justify-content: center;
padding: 0 2vh 0 2vh;
background-color: #1B1A55;
margin: 0 0 0 5vw;
border-radius: 1rem;
} }
.left_block_content{ .left_block_content {
display: flex;
justify-content: start;
align-items: center;
margin: 2rem 0 2rem 0; margin: 2rem 0 2rem 0;
} }
.left_block_buttons{ .left_block_buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-content: center; align-content: center;
@@ -86,10 +134,10 @@ h1, h2{
justify-content: center; justify-content: center;
} }
button{ button {
margin: 0 1rem 0 1rem; margin: 0 1rem 0 1rem;
width: 10vw; width: 15vw;
height: 5vh; height: 10vh;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
@@ -105,17 +153,17 @@ button{
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover{ button:hover {
filter: brightness(85%); filter: brightness(85%);
} }
.left_block_footer{ .left_block_footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: end; justify-content: end;
} }
.right_block{ .right_block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #535C91; background-color: #535C91;
@@ -126,26 +174,14 @@ button:hover{
color: white; color: white;
} }
.security_level_form_title{ .notifications {
display: flex; display: flex;
flex-wrap: wrap; margin: 1rem 2rem 2rem 3rem;
flex-direction: column;
justify-content: left;
align-content: start;
}
.security_level_form_title hr{
width: 40%;
}
.security_level_form_content{
display: flex;
margin: 1rem 7rem 2rem 0.5rem;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
height: 20vh; /* Fixed height */ height: 40vh; /* Fixed height */
width: 100%; /* Full width */ width: 80%; /* Full width */
overflow: auto; /* Enable scrolling */ overflow: auto; /* Enable scrolling */
font-size: 1.2rem; font-size: 1.2rem;
@@ -153,33 +189,42 @@ button:hover{
font-weight: bold; font-weight: bold;
} }
.security_level_form_content::-webkit-scrollbar { .notifications::-webkit-scrollbar {
width: 10px; /* Reduced width of the scrollbar by 2px */ width: 10px; /* Reduced width of the scrollbar by 2px */
} }
.security_level_form_content::-webkit-scrollbar-track { .notifications::-webkit-scrollbar-track {
background: #1B1A55; /* Updated track color */ background: #1B1A55; /* Updated track color */
} }
.security_level_form_content::-webkit-scrollbar-thumb { .notifications::-webkit-scrollbar-thumb {
background: #535C91; /* Updated handle color */ background: #535C91; /* Updated handle color */
border: 2px solid #1B1A55; /* Adding a border to effectively reduce the thumb size */ border: 2px solid #1B1A55; /* Adding a border to effectively reduce the thumb size */
} }
.security_level_form_content::-webkit-scrollbar-thumb:hover { .notifications::-webkit-scrollbar-thumb:hover {
background: #555; /* Updated handle color on hover */ background: #555; /* Updated handle color on hover */
} }
button[name="back"]{ button[name="logout"] {
background-color: #23BDEE; margin: 0;
} padding: 0;
width: 10vw;
button[name="submit"]{ height: 5vh;
background-color: #F44336; background-color: #F44336;
} }
button[name="select_file"]{ button[name="alert"] {
margin: 0; margin: 0.7rem;
width: 8vw; background-color: #F44336;
}
button[name="notification"] {
margin: 0.7rem;
background-color: #23BDEE;
}
button[name="menu_button"] {
margin: 0.7rem;
background-color: #1B1A55; background-color: #1B1A55;
} }
@@ -31,7 +31,7 @@ body, html {
margin-bottom: 10rem; margin-bottom: 10rem;
} }
.signup-form { .profile-form {
background-color: #535C91; background-color: #535C91;
opacity: 71; opacity: 71;
padding: 13vh 3vh 5vh; padding: 13vh 3vh 5vh;
@@ -40,11 +40,15 @@ body, html {
width: 25%; width: 25%;
} }
.signup-form-title{ .profile-form-title{
margin-bottom: 5vh; margin-bottom: 5vh;
} }
.signup-form-title h2 { .profile-form hr{
width: 40%;
}
.profile-form-title h2 {
color: #FFFFFF; color: #FFFFFF;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -52,42 +56,20 @@ body, html {
font-size: 5vh; font-size: 5vh;
} }
.signup-form button { .profile-form-content{
width: 100%; display: flex;
padding: 10px; flex-wrap: wrap;
border: none; justify-content: center;
border-radius: 5px;
margin-top: 5px;
cursor: pointer;
} }
.signup-form-footer{ .profile-form-footer{
margin-top: 7vh; margin-top: 7vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
} }
.signup-form button{ input {
font-weight: bold;
width: 40%;
font-size: 1rem;
}
.signup-form button:hover{
filter: brightness(85%);
}
.signup-form hr{
width: 40%;
}
.signup-form button[name="login"] {
background-color: #2196F3;
color: white;
margin-right: 5rem;
}
.signup-form input {
text-align: center; text-align: center;
color: white; color: white;
font-weight: bold; font-weight: bold;
@@ -99,7 +81,28 @@ body, html {
border-radius: 10px; border-radius: 10px;
} }
.signup-form button[name="submit"] { button {
font-weight: bold;
width: 35%;
font-size: 1rem;
padding: 10px;
border: none;
border-radius: 5px;
margin-top: 1rem;
cursor: pointer;
}
button:hover{
filter: brightness(85%);
}
button[name="submit"] {
background-color: #F44336; background-color: #F44336;
color: white; color: white;
}
button[name="login"] {
background-color: #2196F3;
color: white;
margin-right: 5rem;
} }
@@ -28,6 +28,10 @@ h1, h2{
margin: 0; margin: 0;
} }
h2{
font-size: 1rem;
}
.left_block{ .left_block{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -120,13 +124,13 @@ button:hover{
flex-direction: column; flex-direction: column;
background-color: #535C91; background-color: #535C91;
opacity: 71; opacity: 71;
padding: 2rem; padding: 2rem 4rem 2rem 2rem;
border-radius: 1rem; border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
color: white; color: white;
} }
.security_level_form_title{ .choose_user_form_title{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
@@ -134,11 +138,11 @@ button:hover{
align-content: start; align-content: start;
} }
.security_level_form_title hr{ .choose_user_form_title hr{
width: 40%; width: 80%;
} }
.security_level_form_content{ .choose_user_form_content{
display: flex; display: flex;
margin: 1rem 7rem 2rem 0.5rem; margin: 1rem 7rem 2rem 0.5rem;
flex-direction: column; flex-direction: column;
@@ -153,20 +157,20 @@ button:hover{
font-weight: bold; font-weight: bold;
} }
.security_level_form_content::-webkit-scrollbar { .choose_user_form_content::-webkit-scrollbar {
width: 10px; /* Reduced width of the scrollbar by 2px */ width: 10px; /* Reduced width of the scrollbar by 2px */
} }
.security_level_form_content::-webkit-scrollbar-track { .choose_user_form_content::-webkit-scrollbar-track {
background: #1B1A55; /* Updated track color */ background: #1B1A55; /* Updated track color */
} }
.security_level_form_content::-webkit-scrollbar-thumb { .choose_user_form_content::-webkit-scrollbar-thumb {
background: #535C91; /* Updated handle color */ background: #535C91; /* Updated handle color */
border: 2px solid #1B1A55; /* Adding a border to effectively reduce the thumb size */ border: 2px solid #1B1A55; /* Adding a border to effectively reduce the thumb size */
} }
.security_level_form_content::-webkit-scrollbar-thumb:hover { .choose_user_form_content::-webkit-scrollbar-thumb:hover {
background: #555; /* Updated handle color on hover */ background: #555; /* Updated handle color on hover */
} }
@@ -62,26 +62,48 @@ input{
.signup-form-content{ .signup-form-content{
display: flex; display: flex;
margin-left: 2rem; margin: 1rem 2rem 2rem 3rem;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
font-size: 1.5rem;
height: 20vh; /* Fixed height */
width: 80%; /* Full width */
overflow: auto; /* Enable scrolling */
font-size: 1.2rem;
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.signup-form-content::-webkit-scrollbar {
width: 10px; /* Reduced width of the scrollbar by 2px */
}
.signup-form-content::-webkit-scrollbar-track {
background: #1B1A55; /* Updated track color */
}
.signup-form-content::-webkit-scrollbar-thumb {
background: #535C91; /* Updated handle color */
border: 2px solid #1B1A55; /* Adding a border to effectively reduce the thumb size */
}
.signup-form-content::-webkit-scrollbar-thumb:hover {
background: #555; /* Updated handle color on hover */
}
.signup-form-footer{ .signup-form-footer{
margin-top: 5vh; margin-top: 5vh;
display: flex; display: flex;
flex-wrap: wrap;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
align-content: space-between;
} }
button { button {
font-weight: bold; font-weight: bold;
width: 40%; width: 30%;
font-size: 1rem; font-size: 1rem;
padding: 10px; padding: 10px;
border: none; border: none;
@@ -94,7 +116,7 @@ button:hover{
filter: brightness(85%); filter: brightness(85%);
} }
button[name="continue"] { button[name="submit"] {
background-color: #F44336; background-color: #F44336;
color: white; color: white;
} }
@@ -69,13 +69,12 @@ input {
} }
.signup-form-footer{ .signup-form-footer{
margin-top: 3vh;
display: flex; display: flex;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
align-content: center; align-content: center;
align-items: center; align-items: center;
margin-top: 7vh; justify-content: space-evenly;
} }
button { button {
+25
View File
@@ -0,0 +1,25 @@
.fade-in {
animation: fadeInAnimation 0.5s ease-in forwards;
}
.fade-out {
animation: fadeOutAnimation 0.5s ease-out forwards;
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOutAnimation {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/alert_modal.css">
<script src="../js/alert_modal.js"></script>
<title>Alert Modal</title>
</head>
<body>
<div id="myModal" class="container">
<div class="main_component">
<div class="header">
<!--Here goes the message-->
<h1 id="modal-message"></h1>
</div>
<button id="closeButton" name="close">Close</button>
</div>
</div>
</body>
</html>
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/login.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/login.js"></script>
<title>Login</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>DO WE KNOW</h1>
<h1>EACH OTHER?</h1>
</div>
<form id="loginForm" class="login-form">
<div class="login-form-title">
<h2>Login</h2>
<hr>
</div>
<div class="login-form-content">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</div>
<div class="login-form-footer">
<button id="signin" type="submit" name="signin">Sign in</button>
<button id="submit" type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
@@ -4,8 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon"> <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Main Page</title>
<link rel="stylesheet" href="../css/main_menu.css"> <link rel="stylesheet" href="../css/main_menu.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/main_menu.js"></script>
<title>Main Page</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -13,26 +18,27 @@
<div class="left_block_top"> <div class="left_block_top">
<div> <div>
<h1>WELCOME BACK,</h1> <h1>WELCOME BACK,</h1>
<h1>'username'!</h1> <h1 id="username_field"></h1>
<h2>Hope you have a productive day!</h2> <h2>Hope you have a productive day!</h2>
</div> </div>
<img src="../assets/user_1144760.png" alt=""> <img src="../assets/user_1144760.png" alt="">
</div> </div>
<div class="left_block_content"> <div class="left_block_content">
<div class="left_block_buttons"> <div class="left_block_buttons">
<button name="menu_button">Change backup directory location</button> <button id="backup" name="menu_button">Set backup directory</button>
<button name="menu_button">Change work department</button> <button id="manage_department" name="menu_button">Manage work department</button>
</div> </div>
<div class="left_block_buttons"> <div class="left_block_buttons">
<button name="menu_button">Change your info</button> <button id="change_info" name="menu_button">Change your info</button>
<button name="menu_button">Share a file</button> <button id="share_file" name="menu_button">Share a file</button>
</div> </div>
<div class="left_block_buttons"> <div class="left_block_buttons">
<button name="menu_button">Decrypt files</button> <button id="decrypt" name="menu_button">Decrypt files</button>
<button id="manage_users" name="menu_button">Manage users</button>
</div> </div>
</div> </div>
<div class="left_block_footer"> <div class="left_block_footer">
<button name="logout">Logout</button> <button id="logout" name="logout">Logout</button>
</div> </div>
</div> </div>
<div class="right_block"> <div class="right_block">
@@ -40,16 +46,8 @@
<h1>NOTIFICATIONS</h1> <h1>NOTIFICATIONS</h1>
<hr> <hr>
</div> </div>
<div> <div id="notifications" class="notifications">
<div>
<button name="alert">Set your backup directory!</button>
</div>
<div>
<button name="notification">You received a file from 'username'!</button>
</div>
<div>
<button name="notification">Decrypt complete!</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -4,9 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon"> <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Share File</title>
<link rel="stylesheet" href="../css/manage_departments.css"> <link rel="stylesheet" href="../css/manage_departments.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/manage_departments.js"></script> <script src="../js/manage_departments.js"></script>
<title>Manage Departments</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -4,8 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon"> <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Department Selection</title>
<link rel="stylesheet" href="../css/manage_users.css"> <link rel="stylesheet" href="../css/manage_users.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/manage_users.js"></script>
<title>Manage Users</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/profile.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/profile.js"></script>
<title>Profile</title>
</head>
<body>
<div class="container">
<form id="profileForm" class="profile-form">
<div class="profile-form-title">
<h2>Profile</h2>
<hr>
</div>
<div class="profile-form-content">
<input type="email" name="email" placeholder="Email">
<input type="text" name="username" placeholder="Username">
</div>
<div class="profile-form-footer">
<button type="button" name="login">Back</button>
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/share_file.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/share_file.js"></script>
<title>Share File</title>
</head>
<body>
<div class="container">
<div class="left_block">
<div class="left_block_top">
<div class="left_block_top_left">
<h1>SHARE A FILE</h1>
<hr>
<h2>First select the file you want to share</h2>
<h2>(can be whatever resource from the system)</h2>
</div>
<div class="left_block_top_right">
<h2 id="fileName"></h2>
</div>
</div>
<div class="left_block_content">
<button id="selectFile" type="button" name="select_file">Select</button>
</div>
<div class="left_block_footer">
<button id="backButton" type="button" name="back">Back</button>
<button id="submitButton" type="submit" name="submit">Submit</button>
</div>
</div>
<form id="userDestForm" class="right_block">
<div class="choose_user_form_title">
<h1>USERS</h1>
<hr>
</div>
<div class="choose_user_form_content">
<!-- Insert the users from the database -->
</div>
</form>
</div>
</body>
</html>
@@ -4,15 +4,17 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon"> <link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Setup Completion</title>
<link rel="stylesheet" href="../css/sign_up_confirmation.css"> <link rel="stylesheet" href="../css/sign_up_confirmation.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/sign_up_confirmation.js"></script>
<title>Setup Completion</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h1>ALL THE SETUP IS DONE!</h1> <h1>ALL THE SETUP IS DONE!</h1>
<h2>LETS PROCEED TO THE</h2> <h2>LETS PROCEED TO THE</h2>
<h2>MAIN PAGE</h2> <h2>LOGIN PAGE</h2>
</div> </div>
</div> </div>
</body> </body>
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/sign_up_department.css">
<link rel="stylesheet" href="../css/transition.css">
<script src="../js/sign_up_departments.js"></script>
<title>Department Selection</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>TELL ME MORE</h1>
<h1>ABOUT</h1>
<h1>YOUR WORK</h1>
</div>
<form id="signupForm" class="signup-form">
<div class="signup-form-title">
<h2>Choose your department</h2>
<hr>
</div>
<div class="signup-form-content">
<!-- add the list query for departments-->
</div>
<div class="signup-form-footer">
<button id="back" type="button" name="back">Back</button>
<button id="submit" type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/transition.css">
<link rel="stylesheet" href="../css/sing_up_profile.css">
<script src="../js/sign_up_profile.js"></script>
<title>Signup</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>LET US MEET</h1>
<h1>EACH OTHER</h1>
</div>
<form id="signupForm" class="signup-form">
<div class="signup-form-title">
<h2>Sign Up</h2>
<hr>
</div>
<div>
<input type="email" name="email" placeholder="Email">
<input type="text" name="name" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="signup-form-footer">
<button id="login" type="button" name="login">Login</button>
<button id="continue" type="submit" name="submit">Continue</button>
</div>
</form>
</div>
+11
View File
@@ -0,0 +1,11 @@
document.addEventListener('DOMContentLoaded', () => {
const closeButton = document.getElementById('closeButton');
closeButton.addEventListener('click', () => {
window.electronAPI.closeAlertWindow();
});
});
function showAlert(message) {
const modalMessage = document.getElementById('modal-message');
modalMessage.textContent = message;
}
+89
View File
@@ -0,0 +1,89 @@
document.addEventListener('DOMContentLoaded', async function () {
const signinButton = document.getElementById('signin');
const submitButton = document.getElementById('submit');
await window.electronAPI.readFile('loginData.json')
.then(async result => {
const loginData = JSON.parse(result.content);
const { email, password } = loginData;
const response = await fetch('http://localhost:5000/users/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'uc_api'
},
body: JSON.stringify({
email: email,
password: password
})
});
if(response.ok) {
window.electronAPI.changeContent('main_menu.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
}
}).catch(async error => {
console.error('Can\'t read loginData');
await window.electronAPI.deleteFile('loginData.json')
});
signinButton.addEventListener('click', function (e) {
window.electronAPI.changeContent('sign_up_profile.html')
.then(() => console.log('Content changed successfully'))
.catch(error => console.error('Error changing content:', error));
});
submitButton.addEventListener('click', async function (e) {
try {
e.preventDefault();
console.log('Submit button clicked');
const form = document.getElementById('loginForm');
const formData = new FormData(form);
const email = formData.get('email');
const password = formData.get('password');
if (!email || !password) {
throw new Error('Both email and password are required.');
}
const response = await fetch('http://localhost:5000/users/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'uc_api'
},
body: JSON.stringify({
email: email,
password: password
})
});
switch (response.status) {
case 401:
throw new Error('Invalid credentials!');
case 500:
throw new Error('Internal server error. Try again later!');
}
const responseBody = await response.json();
const result = await window.electronAPI.writeFile('loginData.json', JSON.stringify(responseBody.message, null, 2));
if (!result.success) {
throw new Error('Error writing to file. Please try again later.');
}
window.electronAPI.changeContent('main_menu.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
} catch (error) {
await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error showing alert:', error));
}
});
});
+118
View File
@@ -0,0 +1,118 @@
document.addEventListener('DOMContentLoaded', async function () {
const backupButton = document.getElementById('backup');
const manageDepartmentButton = document.getElementById('manage_department');
const manageUsersButton = document.getElementById('manage_users');
const changeInfoButton = document.getElementById('change_info');
const shareFileButton = document.getElementById('share_file');
const decryptButton = document.getElementById('decrypt');
const logoutButton = document.getElementById('logout');
await insertUsername();
checkDirBackupFileExists()
.then(() => console.log('verificare facuta'));
manageUsersButton.addEventListener('click', async function(){
window.electronAPI.changeContent('manage_users.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
});
manageDepartmentButton.addEventListener('click', async function(){
window.electronAPI.changeContent('manage_departments.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
});
backupButton.addEventListener('click', function () {
console.log('Set backup directory button clicked!');
window.electronAPI.openBackupDirDialog()
.then(() => console.log('Back-up directory set'))
.catch(async error => await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error showing alert:', error)));
});
changeInfoButton.addEventListener('click', function () {
console.log('Change your info button clicked!');
window.electronAPI.changeContent('profile.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
});
shareFileButton.addEventListener('click', function () {
console.log('Share a file button clicked!');
window.electronAPI.changeContent('share_file.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
});
logoutButton.addEventListener('click', async function () {
console.log('Logout button clicked!');
await window.electronAPI.deleteFile('loginData.json');
window.electronAPI.changeContent('login.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
});
decryptButton.addEventListener('click', async function (){
});
async function decryptFiles(){
}
async function checkDirBackupFileExists() {
try {
// Make an IPC call to check file existence
const fileExists = await window.electronAPI.checkFileExists('dirBackup.json');
if (!fileExists) {
const notificationsDiv = document.getElementById('notifications');
const button = document.createElement('button');
button.id = 'backup_alert';
button.name = 'alert';
button.textContent = 'Set your backup directory!';
button.addEventListener('click', handleButtonClick);
notificationsDiv.appendChild(button);
}
} catch (error) {
console.error('Error checking file existence:', error);
}
}
async function handleButtonClick() {
console.log('Button clicked!');
await window.electronAPI.openBackupDirDialog()
.then(() => console.log('Back-up directory set'))
.catch(async error => await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error showing alert:', error)));
const button = document.getElementById('backup_alert');
button.remove();
}
async function insertUsername() {
try {
const userData = await window.electronAPI.readFile('loginData.json');
const userJson = JSON.parse(userData.content);
const username = userJson.name;
const usernameField = document.getElementById('username_field');
if (usernameField) {
usernameField.textContent = username + '!';
}
} catch (error) {
console.error('Error loading username:', error);
const usernameField = document.getElementById('username_field');
usernameField.textContent = 'User!';
}
}
});
View File
+82
View File
@@ -0,0 +1,82 @@
document.addEventListener('DOMContentLoaded', async function () {
try {
const result = await window.electronAPI.readFile('loginData.json');
const loginData = JSON.parse(result.content);
// Set values for the inputs
const emailInput = document.querySelector('input[name="email"]');
const usernameInput = document.querySelector('input[name="username"]');
emailInput.value = loginData.email;
usernameInput.value = loginData.name;
} catch (error) {
console.error('Error reading login data:', error);
}
const backButton = document.querySelector('button[name="login"]');
const submitButton = document.querySelector('button[name="submit"]');
// Add event listeners for the back and submit buttons
backButton.addEventListener('click', function () {
console.log('Back button clicked!');
window.electronAPI.changeContent('main_menu.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
});
submitButton.addEventListener('click', async function (e) {
try {
e.preventDefault();
console.log('Submit button clicked!');
const emailInput = document.querySelector('input[name="email"]');
const usernameInput = document.querySelector('input[name="username"]');
const result = await window.electronAPI.readFile('loginData.json');
const loginData = JSON.parse(result.content);
const {id, department} = loginData;
const email = emailInput.value;
const name = usernameInput.value;
const response = await fetch(`http://localhost:5000/users/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'uc_api'
},
body: JSON.stringify({
name: name,
email: email,
})
});
switch (response.status) {
case 400:
throw new Error('Email format invalid!')
case 409:
throw new Error('Email already in system!')
case 500:
throw new Error('Internal server error. Try again later!')
}
await window.electronAPI.writeFile('loginData.json', JSON.stringify({
id: id,
name: name,
email: email,
password: password,
department: department
}));
window.electronAPI.changeContent('main_menu.html')
.then(() => console.log('Navigated to dashboard'))
.catch(error => console.error('Error navigating:', error));
}catch(error) {
await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error showing alert:', error));
}
});
});
+104
View File
@@ -0,0 +1,104 @@
document.addEventListener("DOMContentLoaded", function() {
let pathToFile = '';
function updateFileName() {
const fileNameElement = document.getElementById('fileName');
if (pathToFile.trim() === '') {
fileNameElement.textContent = 'No file chosen';
} else {
fileNameElement.textContent = pathToFile.split('\\').pop().split('/').pop();
}
}
// Call the function to update file name on DOMContentLoaded
updateFileName();
async function fetchUsersAndCreateCheckboxes() {
const result = await window.electronAPI.readFile('loginData.json');
const loginData = JSON.parse(result.content);
const {id} = loginData;
fetch('http://localhost:5000/users', {
method: 'GET',
headers: {
'x-api-key': 'uc_api'
}
})
.then(response => response.json())
.then(data => {
const usersDiv = document.querySelector('.choose_user_form_content');
usersDiv.innerHTML = '';
data['data'].forEach(user => {
if (user.id !== id) {
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'users';
checkbox.value = user.id;
const label = document.createElement('label');
label.innerHTML = `${user.name}`;
label.insertBefore(checkbox, label.firstChild); // Insert checkbox before the label's first child
usersDiv.appendChild(label);
}
});
})
.catch(error => console.error('Error fetching users:', error));
}
document.getElementById('selectFile').addEventListener('click', async function () {
console.log('Select file button clicked');
try {
pathToFile = await window.electronAPI.openFileDialog();
updateFileName();
} catch (error) {
console.error('Error opening file dialog:', error);
}
});
document.getElementById('backButton').addEventListener('click', async function () {
console.log('Back button clicked');
try {
await window.electronAPI.changeContent('main_menu.html');
console.log('Content changed successfully');
} catch (error) {
console.error('Error changing content:', error);
}
});
document.getElementById('submitButton').addEventListener('click', async function (event) {
event.preventDefault();
console.log('Submit button clicked');
if (pathToFile === '' || pathToFile.length === 0) {
await window.electronAPI.showAlert('File not chosen!')
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error changing content:', error));
return
}
const form = document.getElementById('userDestForm');
const checkboxes = form.querySelectorAll('input[name="users"]');
const selectedUserIds = [];
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selectedUserIds.push(checkbox.value);
}
});
if(selectedUserIds === []){
await window.electronAPI.showAlert('No user selected!')
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error changing content:', error));
return;
}
//TODO: logic to send files
});
fetchUsersAndCreateCheckboxes().then(() => console.log('Page rendered'))
});
@@ -0,0 +1,7 @@
document.addEventListener('DOMContentLoaded', async function() {
await new Promise(resolve => setTimeout(resolve, 2000));
window.electronAPI.changeContent('login.html')
.then(() => console.log('Content changed successfully'))
.catch(error => console.error('Error changing content:', error));
});
@@ -0,0 +1,93 @@
document.addEventListener('DOMContentLoaded', async function() {
try {
// Make API call to fetch department data
const response = await fetch('http://localhost:5000/departments', {
method: 'GET',
headers: {
'x-api-key': 'uc_api'
}
});
const res = await response.json();
const data = res['data'];
const formContent = document.querySelector('.signup-form-content');
data.forEach(department => {
const label = document.createElement('label');
label.innerHTML = `<input type="radio" name="dept" value="${department.id}">${department.name}`;
formContent.appendChild(label);
});
} catch (error) {
await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error changing content:', error));
}
document.getElementById('back').addEventListener('click', async function() {
try {
await window.electronAPI.changeContent('sign_up_profile.html');
console.log('Content changed successfully');
} catch (error) {
console.error('Error changing content:', error);
}
});
// Handler for the continue button
document.getElementById('submit').addEventListener('click', async function(e) {
e.preventDefault();
const selectedDept = document.querySelector('input[name="dept"]:checked').value;
try {
if (!selectedDept) {
throw new Error('No department had been selected!.');
}
let result = await window.electronAPI.readFile('signupData.json');
if (!result.success) {
throw new Error('Error reading the file. Please try again later.');
}
const data = JSON.parse(result.content);
const email = data.email;
const name = data.name;
const password = data.password;
result = await window.electronAPI.deleteFile('signupData.json');
if (!result.success) {
throw new Error('Error deleting the file. Please try again later.');
}
await fetch('http://localhost:5000/users/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'uc_api'
},
body: JSON.stringify({
name: name,
email: email,
password: password,
department: selectedDept,
})
}).then(async response => {
if(!response.ok){
await window.electronAPI.showAlert("Internal server error. Try again later!")
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error changing content:', error));
}
window.electronAPI.changeContent('sign_up_confirmation.html')
.then(() => console.log('Content changed successfully'))
.catch(error => console.error('Error changing content:', error));
}).catch(error => {
console.error(error);
});
} catch (error) {
await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error changing content:', error));
}
});
});
+81
View File
@@ -0,0 +1,81 @@
document.addEventListener('DOMContentLoaded', function () {
const cancelButton = document.getElementById('login');
const continueButton = document.getElementById('continue');
cancelButton.addEventListener('click', function () {
console.log(`'Login' button clicked!`);
window.electronAPI.changeContent('login.html')
.then(() => console.log('Content changed successfully'))
.catch(error => console.error('Error changing content:', error));
});
continueButton.addEventListener('click', async function (e) {
try {
e.preventDefault();
console.log('Continue button clicked');
const form = document.getElementById('signupForm');
const formData = new FormData(form);
const email = formData.get('email');
const name = formData.get('name');
const password = formData.get('password');
if (!email || !name || !password) {
throw new Error('All fields are required.');
}
if(password.length < 8){
throw new Error('Password must have minimum length 8!');
}
let statusFetch = 200;
await fetch('http://localhost:5000/users/validate_email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'uc_api'
},
body: JSON.stringify({
email: email
})
}).then(async response => {
const responseData = await response.json();
statusFetch = response.status;
console.error(responseData.message);
})
.catch(error => {
console.log(error);
})
switch(statusFetch){
case 500:
throw new Error('Internal server error! Try again later');
case 400:
throw new Error('Not a valid email!');
case 409:
throw new Error('Email already exists in system!');
}
const formDataJSON = {};
formData.forEach((value, key) => {
formDataJSON[key] = value;
});
const result = await window.electronAPI.writeFile('signupData.json', JSON.stringify(formDataJSON));
if (!result.success) {
throw new Error('Error writing to file. Please try again later.');
}
window.electronAPI.changeContent('sign_up_departments.html')
.then(() => console.log('Content changed successfully'))
.catch(error => console.error('Error changing content:', error));
}
catch (error) {
await window.electronAPI.showAlert(error.message)
.then(() => console.log('Alert window opened'))
.catch(error => console.error('Error changing content:', error));;
}
});
});
-128
View File
@@ -1,128 +0,0 @@
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: normal;
background-image: url('../assets/background.png');
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
text-align: center;
}
.left_block{
display: flex;
flex-direction: column;
background-color: #535C91;
opacity: 71;
padding: 2rem;
border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
color: white;
}
.left_block_top{
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
}
.left_block_top h1{
padding: 0;
margin: 0;
}
.left_block_top img{
margin: 0 3vw 0 5vw;
width: 8vw;
height: 8vw;
}
.left_block_content{
margin: 2rem 0 2rem 0;
}
.left_block_buttons{
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
button{
margin: 0 1rem 0 1rem;
width: 15vw;
height: 10vh;
border: none;
border-radius: 10px;
color: white;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
outline: none;
transition: background-color 0.3s ease;
}
button:hover{
filter: brightness(85%);
}
.left_block_footer{
display: flex;
align-items: center;
justify-content: end;
}
.right_block{
display: flex;
flex-direction: column;
background-color: #535C91;
opacity: 71;
padding: 2rem;
border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
color: white;
}
button[name="logout"]{
margin: 0;
padding: 0;
width: 10vw;
height: 5vh;
background-color: #F44336;
}
button[name="alert"]{
margin: 0.7rem;
background-color: #F44336;
}
button[name="notification"]{
margin: 0.7rem;
background-color: #23BDEE;
}
button[name="menu_button"]{
margin: 0.7rem;
background-color: #1B1A55;
}
-105
View File
@@ -1,105 +0,0 @@
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: normal;
background-image: url('../assets/background.png');
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
text-align: center; /* Center the text for all child elements */
}
.header{
color: #1B1A55;
font-size: 4vh;
text-transform: uppercase;
line-height: 2.5rem;
margin-bottom: 10rem;
}
.signup-form {
background-color: #535C91;
opacity: 71;
padding: 13vh 3vh 5vh;
border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
width: 25%;
}
.signup-form-title{
margin-bottom: 5vh;
}
.signup-form-title h2 {
color: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
font-size: 5vh;
}
.signup-form button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
margin-top: 5px;
cursor: pointer;
}
.signup-form-footer{
margin-top: 7vh;
display: flex;
flex-direction: row;
}
.signup-form button{
font-weight: bold;
width: 40%;
font-size: 1rem;
}
.signup-form button:hover{
filter: brightness(85%);
}
.signup-form hr{
width: 40%;
}
.signup-form button[name="login"] {
background-color: #2196F3;
color: white;
margin-right: 5rem;
}
.signup-form input {
text-align: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
width: 70%;
padding: 1rem;
margin: 0.7rem;
background-color: #1B1A55;
border-radius: 10px;
}
.signup-form button[name="submit"] {
background-color: #F44336;
color: white;
}
-33
View File
@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Login</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>DO WE KNOW</h1>
<h1>EACH OTHER?</h1>
</div>
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Login</h2>
<hr>
</div>
<div class="signup-form-content">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</div>
<div class="signup-form-footer">
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
-31
View File
@@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Signup</title>
<link rel="stylesheet" href="../css/profile.css">
</head>
<body>
<div class="container">
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Profile</h2>
<hr>
</div>
<div>
<input type="email" name="email" placeholder="Email">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="signup-form-footer">
<button type="button" name="login">Back</button>
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
-53
View File
@@ -1,53 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Share File</title>
<link rel="stylesheet" href="../css/share_file.css">
</head>
<body>
<div class="container">
<div class="left_block">
<div class="left_block_top">
<div class="left_block_top_left">
<h1>SHARE A FILE</h1>
<hr>
<h2>First select the file you want to share</h2>
<h2>(can be whatever resource from the system)</h2>
</div>
<div class="left_block_top_right">
<h2>No file chosen</h2>
</div>
</div>
<div class="left_block_content">
<button type="button" name="select_file">Select</button>
</div>
<div class="left_block_footer">
<button type="button" name="back">Back</button>
<button type="submit" name="submit">Submit</button>
</div>
</div>
<div class="right_block">
<form action="/signup" method="post">
<div class="choose_user_form_title">
<h2>USERS</h2>
<hr>
</div>
<div class="choose_user_form_content">
<label><input type="radio" name="dept" value="accounting">user1</label>
<label><input type="radio" name="dept" value="developer">user2</label>
<label><input type="radio" name="dept" value="designer">user3</label>
<label><input type="radio" name="dept" value="accounting">Contabilitate</label>
<label><input type="radio" name="dept" value="developer">Programator</label>
<label><input type="radio" name="dept" value="designer">Designer</label>
<label><input type="radio" name="dept" value="accounting">Contabilitate</label>
<label><input type="radio" name="dept" value="developer">Programator</label>
<label><input type="radio" name="dept" value="designer">Designer</label>
</div>
</form>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

-97
View File
@@ -1,97 +0,0 @@
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: normal;
background-image: url('../assets/background.png');
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
}
.signup-form {
background-color: #535C91;
opacity: 71;
padding: 8vh 3vh 5vh;
border-radius: 1rem;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
width: 25%;
}
.signup-form-title{
margin-bottom: 5vh;
color: #FFFFFF;
text-align: center;
}
.signup-form-title h2 {
color: #FFFFFF;
margin: 0;
padding: 0;
font-size: 5vh;
}
.signup-form-title hr{
width: 65%;
}
.signup-form-content{
display: flex;
margin-left: 2rem;
flex-direction: column;
align-items: start;
font-size: 1.5rem;
color: white;
font-weight: bold;
}
.signup-form-content input{
margin: 0.7rem;
}
.signup-form-footer{
margin-top: 7vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
align-items: center;
}
button {
font-weight: bold;
width: 35%;
font-size: 1rem;
padding: 10px;
border: none;
border-radius: 5px;
margin-top: 5px;
cursor: pointer;
}
button:hover{
filter: brightness(85%);
}
.signup-form button[name="continue"] {
background-color: #F44336;
color: white;
}
.signup-form button[name="back"] {
background-color: #23BDEE;
color: white;
}
@@ -1,37 +0,0 @@
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: normal;
background-image: url('../assets/background.png');
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
text-align: center; /* Center the text for all child elements */
}
.header{
color: #1B1A55;
font-size: 4vh;
text-transform: uppercase;
line-height: 2.5rem;
margin-bottom: 10rem;
}
img{
width:20%;
height: 20%;
}
-31
View File
@@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Department Selection</title>
<link rel="stylesheet" href="../css/change_department.css">
</head>
<body>
<div class="container">
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Choose your department</h2>
<hr>
</div>
<div class="signup-form-content">
<label><input type="radio" name="dept" value="accounting">Contabilitate</label>
<label><input type="radio" name="dept" value="developer"> Programator</label>
<label><input type="radio" name="dept" value="designer"> Designer</label>
</div>
<div class="signup-form-footer">
<button type="button" name="back">Back</button>
<button type="submit" name="continue">Continue</button>
</div>
</form>
</div>
</div>
</body>
</html>
-33
View File
@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Login</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>DO WE KNOW</h1>
<h1>EACH OTHER?</h1>
</div>
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Login</h2>
<hr>
</div>
<div class="signup-form-content">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</div>
<div class="signup-form-footer">
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
-57
View File
@@ -1,57 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Main Page</title>
<link rel="stylesheet" href="../css/main_menu.css">
</head>
<body>
<div class="container">
<div class="left_block">
<div class="left_block_top">
<div>
<h1>WELCOME BACK,</h1>
<h1>'username'!</h1>
<h2>Hope you have a productive day!</h2>
</div>
<img src="../assets/user_1144760.png" alt="">
</div>
<div class="left_block_content">
<div class="left_block_buttons">
<button name="menu_button">Change backup directory location</button>
<button name="menu_button">Change work department</button>
</div>
<div class="left_block_buttons">
<button name="menu_button">Change your info</button>
<button name="menu_button">Share a file</button>
</div>
<div class="left_block_buttons">
<button name="menu_button">Decrypt files</button>
</div>
</div>
<div class="left_block_footer">
<button name="logout">Logout</button>
</div>
</div>
<div class="right_block">
<div>
<h1>NOTIFICATIONS</h1>
<hr>
</div>
<div>
<div>
<button name="alert">Set your backup directory!</button>
</div>
<div>
<button name="notification">You received a file from 'username'!</button>
</div>
<div>
<button name="notification">Decrypt complete!</button>
</div>
</div>
</div>
</div>
</body>
</html>
-31
View File
@@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Signup</title>
<link rel="stylesheet" href="../css/profile.css">
</head>
<body>
<div class="container">
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Profile</h2>
<hr>
</div>
<div>
<input type="email" name="email" placeholder="Email">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="signup-form-footer">
<button type="button" name="login">Back</button>
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
@@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Setup Completion</title>
<link rel="stylesheet" href="../css/sending_file_confirmation.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>SENDING THE FILE!</h1>
<h2>PlEASE WAIT</h2>
<img src="../assets/loading.gif" alt="Description of GIF">
</div>
</div>
</body>
</html>
-53
View File
@@ -1,53 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Share File</title>
<link rel="stylesheet" href="../css/share_file.css">
</head>
<body>
<div class="container">
<div class="left_block">
<div class="left_block_top">
<div class="left_block_top_left">
<h1>SHARE A FILE</h1>
<hr>
<h2>First select the file you want to share</h2>
<h2>(can be whatever resource from the system)</h2>
</div>
<div class="left_block_top_right">
<h2>No file chosen</h2>
</div>
</div>
<div class="left_block_content">
<button type="button" name="select_file">Select</button>
</div>
<div class="left_block_footer">
<button type="button" name="back">Back</button>
<button type="submit" name="submit">Submit</button>
</div>
</div>
<div class="right_block">
<form action="/signup" method="post">
<div class="choose_user_form_title">
<h2>USERS</h2>
<hr>
</div>
<div class="choose_user_form_content">
<label><input type="radio" name="dept" value="accounting">user1</label>
<label><input type="radio" name="dept" value="developer">user2</label>
<label><input type="radio" name="dept" value="designer">user3</label>
<label><input type="radio" name="dept" value="accounting">Contabilitate</label>
<label><input type="radio" name="dept" value="developer">Programator</label>
<label><input type="radio" name="dept" value="designer">Designer</label>
<label><input type="radio" name="dept" value="accounting">Contabilitate</label>
<label><input type="radio" name="dept" value="developer">Programator</label>
<label><input type="radio" name="dept" value="designer">Designer</label>
</div>
</form>
</div>
</div>
</body>
</html>
-35
View File
@@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/sign_up_start.css">
<title>Signup</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>LET US MEET</h1>
<h1>EACH OTHER</h1>
</div>
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Sign Up</h2>
<hr>
</div>
<div>
<input type="email" name="email" placeholder="Email">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="signup-form-footer">
<button type="button" name="login">Login</button>
<button type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
@@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../assets/hard-disk.ico" type="image/x-icon">
<title>Department Selection</title>
<link rel="stylesheet" href="../css/set_departments.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>TELL ME MORE</h1>
<h1>ABOUT</h1>
<h1>YOUR WORK</h1>
</div>
<div class="signup-form">
<form action="/signup" method="post">
<div class="signup-form-title">
<h2>Choose your department</h2>
<hr>
</div>
<div class="signup-form-content">
<label><input type="radio" name="dept" value="accounting">Contabilitate</label>
<label><input type="radio" name="dept" value="developer"> Programator</label>
<label><input type="radio" name="dept" value="designer"> Designer</label>
</div>
<div class="signup-form-footer">
<button type="submit" name="continue">Continue</button>
</div>
</form>
</div>
</div>
</body>
</html>
View File
View File
View File
View File
@@ -3,7 +3,8 @@
"id": "a7635c7a-d6a0-43dc-8e24-552ab33239b8", "id": "a7635c7a-d6a0-43dc-8e24-552ab33239b8",
"name": "CEO", "name": "CEO",
"email": "ceo@yourfirm.com", "email": "ceo@yourfirm.com",
"password": "405ee6885be5385223830874bd6dcfca" "password": "405ee6885be5385223830874bd6dcfca",
"department": ""
}, },
{ {
"id": "ffc90aca-bb31-4641-9a43-30b343924e8a", "id": "ffc90aca-bb31-4641-9a43-30b343924e8a",
@@ -2,11 +2,6 @@ const path = require("path");
const fs = require("fs"); const fs = require("fs");
function SetAdminValuesMiddleware(req, res, next){ function SetAdminValuesMiddleware(req, res, next){
if(!req.path.startsWith('/admin')){
next();
return res;
}
try{ try{
const configFilePath = path.join(__dirname, '..', 'db', 'config.json'); const configFilePath = path.join(__dirname, '..', 'db', 'config.json');
const config = JSON.parse(fs.readFileSync(configFilePath)); const config = JSON.parse(fs.readFileSync(configFilePath));
@@ -2,7 +2,7 @@ const Joi = require('joi');
const usersLoginModel = Joi.object({ const usersLoginModel = Joi.object({
email: Joi.string().email().required(), email: Joi.string().email().required(),
password: Joi.string().min(8).max(20).required() password: Joi.string().required()
}); });
module.exports = usersLoginModel; module.exports = usersLoginModel;

Some files were not shown because too many files have changed in this diff Show More