UI Admin aproape finalizat

2024-04-03 02:09:12 +03:00
parent fb957a6f97
commit af8c295d75
134 changed files with 5014 additions and 1045 deletions
@@ -2,7 +2,7 @@
 <project version="4">
  <component name="ProjectModuleManager">
    <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>
  </component>
 </project>
@@ -0,0 +1,6 @@
+{
+  "id": "a7635c7a-d6a0-43dc-8e24-552ab33239b8",
+  "name": "CEO",
+  "email": "ceo@yourfirm.com",
+  "password": "405ee6885be5385223830874bd6dcfca"
+}
@@ -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"
+  }
+}
@@ -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;
+    }
+});
@@ -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)
+});
@@ -16,77 +16,48 @@ body, html {

 .container {
    display: flex;
-    flex-direction: row;
+    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    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{
    color: #1B1A55;
-    font-size: 4vh;
-    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;
+    font-size: 0.8rem;
    text-align: center;
-    font-size: 5vh;
-}
-
-.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;
+    text-transform: uppercase;
 }

 button {
    font-weight: bold;
-    width: 40%;
+    width: 25%;
    font-size: 1rem;
    padding: 10px;
    border: none;
    border-radius: 5px;
-    margin-top: 5px;
+    margin-top: 20px;
    cursor: pointer;
 }

@@ -94,12 +65,7 @@ button:hover{
    filter: brightness(85%);
 }

-button[name="continue"] {
-    background-color: #F44336;
-    color: white;
-}
-
-button[name="back"] {
-    background-color: #23BDEE;
+button[name="close"] {
+    background-color: #2196F3;
    color: white;
 }
@@ -30,7 +30,7 @@ body, html {
    margin-bottom: 10rem;
 }

-.signup-form {
+.login-form {
    background-color: #535C91;
    opacity: 71;
    padding: 9vh 3vh 5vh;
@@ -39,27 +39,26 @@ body, html {
    width: 25%;
 }

-.signup-form-title{
+.login-form-title{
    margin: 0 0 5vh 0;
    text-align: center;
 }

-.signup-form-title h2{
+.login-form-title h2{
    color: #FFFFFF;
    font-size: 5vh;
    margin: 0;
    padding: 0;
 }

-.signup-form hr{
+.login-form hr{
    width: 40%;
 }

-.signup-form-content{
+.login-form-content{
    display: flex;
-    flex-direction: column;
-    align-content: center;
    flex-wrap: wrap;
+    justify-content: center;
 }

 input {
@@ -76,7 +75,7 @@ input {

 button {
    font-weight: bold;
-    width: 40%;
+    width: 35%;
    font-size: 1rem;
    padding: 10px;
    border: none;
@@ -89,14 +88,21 @@ button:hover{
    filter: brightness(85%);
 }

-.signup-form-footer{
+.login-form-footer{
    margin-top: 3vh;
    display: flex;
+    flex-wrap: wrap;
    align-content: center;
-    justify-content: center;
+    align-items: center;
+    justify-content: space-evenly;
 }

-.signup-form button[name="submit"] {
+button[name="submit"] {
    background-color: #F44336;
    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 {
    display: flex;
    flex-direction: row;
@@ -23,12 +93,7 @@ body, html {
    text-align: center;
 }

-h1, h2{
-    padding: 0;
-    margin: 0;
-}
-
-.left_block{
+.left_block {
    display: flex;
    flex-direction: column;
    background-color: #535C91;
@@ -39,46 +104,29 @@ h1, h2{
    color: white;
 }

-.left_block_top{
+.left_block_top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
-}
-
-.left_block_top_left{
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
    text-align: left;
 }

-.left_block_top_left hr{
-    margin: 0 0 1rem 0;
-    width: 45%;
+.left_block_top h1 {
+    padding: 0;
+    margin: 0;
 }

-.left_block_top_right{
-    width: 10vw;
-
-    display: flex;
-    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_top img {
+    margin: 0 3vw 0 5vw;
+    width: 8vw;
+    height: 8vw;
 }

-.left_block_content{
-    display: flex;
-    justify-content: start;
-    align-items: center;
+.left_block_content {
    margin: 2rem 0 2rem 0;
 }

-.left_block_buttons{
+.left_block_buttons {
    display: flex;
    flex-direction: row;
    align-content: center;
@@ -86,10 +134,10 @@ h1, h2{
    justify-content: center;
 }

-button{
+button {
    margin: 0 1rem 0 1rem;
-    width: 10vw;
-    height: 5vh;
+    width: 15vw;
+    height: 10vh;

    border: none;
    border-radius: 10px;
@@ -105,17 +153,17 @@ button{
    transition: background-color 0.3s ease;
 }

-button:hover{
+button:hover {
    filter: brightness(85%);
 }

-.left_block_footer{
+.left_block_footer {
    display: flex;
    align-items: center;
    justify-content: end;
 }

-.right_block{
+.right_block {
    display: flex;
    flex-direction: column;
    background-color: #535C91;
@@ -126,26 +174,14 @@ button:hover{
    color: white;
 }

-.security_level_form_title{
+.notifications {
    display: flex;
-    flex-wrap: wrap;
-    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;
+    margin: 1rem 2rem 2rem 3rem;
    flex-direction: column;
    align-items: start;

-    height: 20vh; /* Fixed height */
-    width: 100%; /* Full width */
+    height: 40vh; /* Fixed height */
+    width: 80%; /* Full width */
    overflow: auto; /* Enable scrolling */

    font-size: 1.2rem;
@@ -153,33 +189,42 @@ button:hover{
    font-weight: bold;
 }

-.security_level_form_content::-webkit-scrollbar {
+.notifications::-webkit-scrollbar {
    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 */
 }

-.security_level_form_content::-webkit-scrollbar-thumb {
+.notifications::-webkit-scrollbar-thumb {
    background: #535C91; /* Updated handle color */
    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 */
 }

-button[name="back"]{
-    background-color: #23BDEE;
-}
-
-button[name="submit"]{
+button[name="logout"] {
+    margin: 0;
+    padding: 0;
+    width: 10vw;
+    height: 5vh;
    background-color: #F44336;
 }

-button[name="select_file"]{
-    margin: 0;
-    width: 8vw;
+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;
 }
@@ -31,7 +31,7 @@ body, html {
    margin-bottom: 10rem;
 }

-.signup-form {
+.profile-form {
    background-color: #535C91;
    opacity: 71;
    padding: 13vh 3vh 5vh;
@@ -40,11 +40,15 @@ body, html {
    width: 25%;
 }

-.signup-form-title{
+.profile-form-title{
    margin-bottom: 5vh;
 }

-.signup-form-title h2 {
+.profile-form hr{
+    width: 40%;
+}
+
+.profile-form-title h2 {
    color: #FFFFFF;
    margin: 0;
    padding: 0;
@@ -52,42 +56,20 @@ body, html {
    font-size: 5vh;
 }

-.signup-form button {
-    width: 100%;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-    margin-top: 5px;
-    cursor: pointer;
+.profile-form-content{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 }

-.signup-form-footer{
+.profile-form-footer{
    margin-top: 7vh;
    display: flex;
    flex-direction: row;
+    justify-content: center;
 }

-.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 {
+input {
    text-align: center;
    color: white;
    font-weight: bold;
@@ -99,7 +81,28 @@ body, html {
    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;
    color: white;
 }
+
+button[name="login"] {
+    background-color: #2196F3;
+    color: white;
+    margin-right: 5rem;
+}
@@ -28,6 +28,10 @@ h1, h2{
    margin: 0;
 }

+h2{
+    font-size: 1rem;
+}
+
 .left_block{
    display: flex;
    flex-direction: column;
@@ -120,13 +124,13 @@ button:hover{
    flex-direction: column;
    background-color: #535C91;
    opacity: 71;
-    padding: 2rem;
+    padding: 2rem 4rem 2rem 2rem;
    border-radius: 1rem;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
    color: white;
 }

-.security_level_form_title{
+.choose_user_form_title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
@@ -134,11 +138,11 @@ button:hover{
    align-content: start;
 }

-.security_level_form_title hr{
-    width: 40%;
+.choose_user_form_title hr{
+    width: 80%;
 }

-.security_level_form_content{
+.choose_user_form_content{
    display: flex;
    margin: 1rem 7rem 2rem 0.5rem;
    flex-direction: column;
@@ -153,20 +157,20 @@ button:hover{
    font-weight: bold;
 }

-.security_level_form_content::-webkit-scrollbar {
+.choose_user_form_content::-webkit-scrollbar {
    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 */
 }

-.security_level_form_content::-webkit-scrollbar-thumb {
+.choose_user_form_content::-webkit-scrollbar-thumb {
    background: #535C91; /* Updated handle color */
    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 */
 }

@@ -62,26 +62,48 @@ input{

 .signup-form-content{
    display: flex;
-    margin-left: 2rem;
+    margin: 1rem 2rem 2rem 3rem;
    flex-direction: column;
    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;
    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{
    margin-top: 5vh;
    display: flex;
+    flex-wrap: wrap;
    flex-direction: row;
-    justify-content: center;
+    justify-content: space-between;
    align-items: center;
-    align-content: space-between;
 }

 button {
    font-weight: bold;
-    width: 40%;
+    width: 30%;
    font-size: 1rem;
    padding: 10px;
    border: none;
@@ -94,7 +116,7 @@ button:hover{
    filter: brightness(85%);
 }

-button[name="continue"] {
+button[name="submit"] {
    background-color: #F44336;
    color: white;
 }
@@ -69,13 +69,12 @@ input {
 }

 .signup-form-footer{
+    margin-top: 3vh;
    display: flex;
-    flex-direction: row;
    flex-wrap: wrap;
-    justify-content: space-between;
    align-content: center;
    align-items: center;
-    margin-top: 7vh;
+    justify-content: space-evenly;
 }

 button {
@@ -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;
+    }
+}
@@ -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>
@@ -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 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">
+    <link rel="stylesheet" href="../css/transition.css">
+
+    <script src="../js/main_menu.js"></script>
+
+    <title>Main Page</title>
+
 </head>
 <body>
 <div class="container">
@@ -13,26 +18,27 @@
        <div class="left_block_top">
            <div>
                <h1>WELCOME BACK,</h1>
-                <h1>'username'!</h1>
+                <h1 id="username_field"></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>
+                <button id="backup" name="menu_button">Set backup directory</button>
+                <button id="manage_department" name="menu_button">Manage 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>
+                <button id="change_info" name="menu_button">Change your info</button>
+                <button id="share_file" name="menu_button">Share a file</button>
            </div>
            <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 class="left_block_footer">
-            <button name="logout">Logout</button>
+            <button id="logout" name="logout">Logout</button>
        </div>
    </div>
    <div class="right_block">
@@ -40,16 +46,8 @@
            <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 id="notifications" class="notifications">
+
        </div>
    </div>
 </div>
@@ -4,9 +4,13 @@
    <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/manage_departments.css">
+    <link rel="stylesheet" href="../css/transition.css">
+
    <script src="../js/manage_departments.js"></script>
+
+    <title>Manage Departments</title>
 </head>
 <body>
 <div class="container">
@@ -4,8 +4,13 @@
    <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/manage_users.css">
+    <link rel="stylesheet" href="../css/transition.css">
+
+    <script src="../js/manage_users.js"></script>
+
+    <title>Manage Users</title>
 </head>
 <body>
 <div class="container">
@@ -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>
@@ -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 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/sign_up_confirmation.css">
+    <link rel="stylesheet" href="../css/transition.css">
+    <script src="../js/sign_up_confirmation.js"></script>
+    <title>Setup Completion</title>
 </head>
 <body>
 <div class="container">
    <div class="header">
        <h1>ALL THE SETUP IS DONE!</h1>
        <h2>LET’S PROCEED TO THE</h2>
-        <h2>MAIN PAGE</h2>
+        <h2>LOGIN PAGE</h2>
    </div>
 </div>
 </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>
@@ -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;
+}
@@ -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));
+        }
+    });
+});
@@ -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!';
+        }
+    }
+});
@@ -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));
+        }
+    });
+});
@@ -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));
+        }
+    });
+});
@@ -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));;
+        }
+    });
+});
@@ -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;
-}
@@ -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;
-}
@@ -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>
@@ -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,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>
@@ -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%;
-}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -3,7 +3,8 @@
    "id": "a7635c7a-d6a0-43dc-8e24-552ab33239b8",
    "name": "CEO",
    "email": "ceo@yourfirm.com",
-    "password": "405ee6885be5385223830874bd6dcfca"
+    "password": "405ee6885be5385223830874bd6dcfca",
+    "department": ""
  },
  {
    "id": "ffc90aca-bb31-4641-9a43-30b343924e8a",
@@ -2,11 +2,6 @@ const path = require("path");
 const fs = require("fs");

 function SetAdminValuesMiddleware(req, res, next){
-    if(!req.path.startsWith('/admin')){
-        next();
-        return res;
-    }
-
    try{
        const configFilePath = path.join(__dirname, '..', 'db', 'config.json');
        const config = JSON.parse(fs.readFileSync(configFilePath));
@@ -2,7 +2,7 @@ const Joi = require('joi');

 const usersLoginModel = Joi.object({
    email: Joi.string().email().required(),
-    password: Joi.string().min(8).max(20).required()
+    password: Joi.string().required()
 });

 module.exports = usersLoginModel;
--- a/Show More
+++ b/Show More