From d59a4c8c66959ff9e5c811d468b17795697e5802 Mon Sep 17 00:00:00 2001
From: Ville Mustonen <villemustonen@Villes-Air.home>
Date: Thu, 22 Aug 2024 11:17:12 +0300
Subject: [PATCH] 2fa finished

---
 Frontend/src/js/modals/changeEmail.js         |  2 +-
 .../src/js/modals/changeProfilePicture.js     | 66 +++++++++++++++++++
 Frontend/src/js/modals/login.js               |  2 +-
 Frontend/src/js/modals/logout.js              |  0
 4 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 Frontend/src/js/modals/changeProfilePicture.js
 delete mode 100644 Frontend/src/js/modals/logout.js

diff --git a/Frontend/src/js/modals/changeEmail.js b/Frontend/src/js/modals/changeEmail.js
index 651392d..38a38ac 100644
--- a/Frontend/src/js/modals/changeEmail.js
+++ b/Frontend/src/js/modals/changeEmail.js
@@ -68,7 +68,7 @@ export function handleEmailUpdate(userData) {
         })
         .catch(error => {
             console.error('Error:', error);
-            showMessage('Error updating email', '#ProfileModal', 'error');
+            showMessage('Error sending verification code', '#ProfileModal', 'error');
         });
     });
 
diff --git a/Frontend/src/js/modals/changeProfilePicture.js b/Frontend/src/js/modals/changeProfilePicture.js
new file mode 100644
index 0000000..6f2da04
--- /dev/null
+++ b/Frontend/src/js/modals/changeProfilePicture.js
@@ -0,0 +1,66 @@
+ import { showMessage } from './messages.js';
+
+// Function to toggle the profile picture update form visibility
+export function toggleProfilePictureForm() {
+    const imageUploadForm = document.getElementById('imageUploadForm');
+    if (imageUploadForm.style.display === 'none' || imageUploadForm.style.display === '') {
+        imageUploadForm.style.display = 'flex';
+        imageUploadForm.style.flexDirection = 'column';
+    } else {
+        imageUploadForm.style.display = 'none';
+    }
+}
+
+// Function to handle the profile picture update process
+export function handleProfilePictureUpdate(userData) {
+    document.getElementById('imageInput').addEventListener('change', (event) => {
+        const fileInput = event.target;
+        const fileNameDisplay = document.getElementById('fileName');
+        if (fileInput.files.length > 0) {
+            fileNameDisplay.textContent = fileInput.files[0].name;
+        } else {
+            fileNameDisplay.textContent = 'No file chosen';
+        }
+    });
+
+    document.getElementById('imageUploadForm').addEventListener('submit', (event) => {
+        event.preventDefault();
+        const imageInput = document.getElementById('imageInput');
+        const file = imageInput.files[0];
+        if (!file) {
+            console.error('No image selected');
+            showMessage('No image selected', '#ProfileModal', 'error');
+            return;
+        }
+        const formData = new FormData();
+        formData.append('avatar', file);
+
+        fetch(`/user/${userData.id}/`, {
+            method: 'PATCH',
+            headers: {
+                'Authorization': `Bearer ${userData.token}`
+            },
+            body: formData
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log('Image uploaded successfully:', data);
+            showMessage('Profile picture updated successfully', '#ProfileModal', 'accept');
+            document.getElementById('avatar').src = `${data.avatar}?t=${new Date().getTime()}`;
+            document.getElementById('imageUploadForm').style.display = 'none';
+            document.getElementById('imageInput').value = '';
+            document.getElementById('fileName').textContent = 'No file chosen';
+        })
+        .catch(error => {
+            console.error('Error uploading image:', error);
+            showMessage('Error uploading image', '#ProfileModal', 'error');
+            document.getElementById('imageInput').value = '';
+            document.getElementById('fileName').textContent = 'No file chosen';
+        });
+    });
+}
diff --git a/Frontend/src/js/modals/login.js b/Frontend/src/js/modals/login.js
index 6478707..35a0490 100644
--- a/Frontend/src/js/modals/login.js
+++ b/Frontend/src/js/modals/login.js
@@ -102,11 +102,11 @@ function handleOtpVerification(event, username, password) {
 }
 
 function completeLogin(data) {
+    document.getElementById('loginVerificationCode').value = '';
     showMessage('Login successful', '#loginModal', 'accept');
     sessionStorage.setItem('userData', JSON.stringify({ id: data.id, token: data.access, refresh: data.refresh }));
     sessionStorage.setItem('isLoggedIn', 'true');
     setTimeout(() => {
-        document.getElementById('loginVerificationCode').value = '';
         document.getElementById('loginModal').querySelector('.close').click();
         document.getElementById('loginForm').reset();
         document.getElementById('loginVerification').style.display = 'none';
diff --git a/Frontend/src/js/modals/logout.js b/Frontend/src/js/modals/logout.js
deleted file mode 100644
index e69de29..0000000