UI User relativ functional

2024-04-01 22:44:09 +03:00
parent 79e508d3de
commit fb957a6f97
18 changed files with 381 additions and 83 deletions
@@ -167,6 +167,14 @@ ipcMain.handle('open-backup-dir-dialog', async (event) => {
    }
 });

+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);
@@ -8,5 +8,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
    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)
 });
@@ -22,7 +22,7 @@ body, html {
    min-height: 100vh;
 }

-.signup-form {
+.department-form {
    background-color: #535C91;
    opacity: 71;
    padding: 8vh 3vh 5vh;
@@ -31,24 +31,24 @@ body, html {
    width: 25%;
 }

-.signup-form-title{
+.department-form-title{
    margin-bottom: 5vh;
    color: #FFFFFF;
    text-align: center;
 }

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

-.signup-form-title hr{
+.department-form-title hr{
    width: 65%;
 }

-.signup-form-content{
+.department-form-content{
    display: flex;
    margin-left: 2rem;
    flex-direction: column;
@@ -58,11 +58,11 @@ body, html {
    font-weight: bold;
 }

-.signup-form-content input{
+.department-form-content input{
    margin: 0.7rem;
 }

-.signup-form-footer{
+.department-form-footer{
    margin-top: 7vh;
    display: flex;
    flex-wrap: wrap;
@@ -86,12 +86,12 @@ button:hover{
    filter: brightness(85%);
 }

-.signup-form button[name="continue"] {
+button[name="submit"] {
    background-color: #F44336;
    color: white;
 }

-.signup-form button[name="back"] {
+button[name="back"] {
    background-color: #23BDEE;
    color: white;
 }
@@ -28,6 +28,10 @@ h1, h2{
    margin: 0;
 }

+h2{
+    font-size: 1rem;
+}
+
 .left_block{
    display: flex;
    flex-direction: column;
@@ -120,7 +124,7 @@ 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;
@@ -135,7 +139,7 @@ button:hover{
 }

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

 .choose_user_form_content{
@@ -4,29 +4,29 @@
    <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">
+    <link rel="stylesheet" href="../css/transition.css">
+
+    <script src="../js/change_department.js"></script>
+
+    <title>Department Selection</title>
 </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>
+    <form id="departmentForm" class="department-form">
+        <div class="department-form-title">
+            <h2>Choose your department</h2>
+            <hr>
+        </div>
+        <div class="department-form-content">

-            </div>
-            <div class="signup-form-footer">
-                <button type="button" name="back">Back</button>
-                <button type="submit" name="continue">Continue</button>
-            </div>
-        </form>
-    </div>
+        </div>
+        <div class="department-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>
@@ -4,7 +4,11 @@
    <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>
@@ -18,36 +22,26 @@
                <h2>(can be whatever resource from the system)</h2>
            </div>
            <div class="left_block_top_right">
-                <h2>No file chosen</h2>
+                <h2 id="fileName"></h2>
            </div>
        </div>
        <div class="left_block_content">
-            <button type="button" name="select_file">Select</button>
+            <button id="selectFile" 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>
+            <button id="backButton" type="button" name="back">Back</button>
+            <button id="submitButton" 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>
+    <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>
@@ -0,0 +1,82 @@
+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('.department-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('main_menu.html');
+            console.log('Content changed successfully');
+        } catch (error) {
+            console.error('Error changing content:', error);
+        }
+    });
+
+    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('loginData.json');
+            if (!result.success) {
+                throw new Error('Error reading the file. Please try again later.');
+            }
+
+            const data = JSON.parse(result.content);
+            const id = data.id;
+
+            await fetch(`http://localhost:5000/users/${id}`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': 'uc_api'
+                },
+                body: JSON.stringify({
+                    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));
+                    return;
+                }
+
+                window.electronAPI.changeContent('main_menu.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));
+        }
+    });
+});
@@ -35,22 +35,63 @@ document.addEventListener('DOMContentLoaded', async function () {
    ceoSubmitButton.addEventListener('click', async function(event) {
        event.preventDefault();
        const password = document.getElementById('ceo_password').value;
-        const ceoPassword = getCeoPassword();
+
        if (password === '') {
-            alert('Please enter a password.');
+            await window.electronAPI.showAlert('Please enter password')
+                .then(() => console.log('Alert window opened'))
+                .catch(error => console.error('Error showing alert:', error));
            return;
        }

-        if(password !== ceoPassword){
+        let fetchResult;
+        let fetchJson = undefined;
+
+        fetchResult = await fetch('http://localhost:5000/admin/reset_key', {
+            method: 'GET',
+            headers: {
+                'x-api-key': 'uc_api'
+            }
+        })
+
+        if(!fetchResult.ok){
+            await window.electronAPI.showAlert('Internal server error. Please try again later!')
+                .then(() => console.log('Alert window opened'))
+                .catch(error => console.error('Error showing alert:', error));
+            return;
+        }
+
+        fetchJson = await fetchResult.json();
+        const adminKey = fetchJson['data'];
+
+        fetchResult = await fetch('http://localhost:5000/admin/validate_admin_password', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': 'uc_api',
+                'admin-key': adminKey
+            },
+            body: JSON.stringify({
+                password: password
+            })
+        })
+
+        if(!fetchResult.ok){
+            await window.electronAPI.showAlert('The password is incorrect')
+                .then(() => console.log('Alert window opened'))
+                .catch(error => console.error('Error showing alert:', error));
            return;
        }

        if (triggerSource === 'change_department') {
+            window.electronAPI.changeContent('change_department.html')
+                .then(() => console.log('Navigated to dashboard'))
+                .catch(error => console.error('Error navigating:', error));
        } else if (triggerSource === 'decrypt') {
            await decryptFiles()
        }

        overlay.style.display = 'none';
+        triggerSource = '';
    });

    checkFileExists()
@@ -132,8 +173,6 @@ document.addEventListener('DOMContentLoaded', async function () {
            const userData = await window.electronAPI.readFile('loginData.json');
            const userJson = JSON.parse(userData.content);
            const username = userJson.name;
-            console.log(userData);
-            console.log(username);

            const usernameField = document.getElementById('username_field');
            if (usernameField) {
@@ -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'))
+});