Final frontend version(?)

frontend/src/components/Mappa/Mappa.vue

@@ -41,7 +41,6 @@ onMounted(() => {
         return emergency.coordinates.lat !== null &&
             emergency.coordinates.lon !== null;
     })
-    console.log(filteredEmergencies)
 });
 </script>
 
@@ -70,7 +69,7 @@ onMounted(() => {
         </l-map>
 
         <router-link v-if="loggedUser.token && loggedUser.role === 'citizen'" to="/invia_segnalazione">
-            <button class="btn-segnalazione btn btn-warning btn-md">
+            <button class="btn-segnalazione btn btn-warning btn-lg">
                 <ExclamationTriangleIcon class="size-8" />
                 Segnala!
             </button>
@@ -95,8 +94,12 @@ onMounted(() => {
 
 .btn-segnalazione {
     position: absolute;
-    bottom: 27px;
-    right: 10px;
     z-index: 500;
+    border: 2px #808080 solid;
+
+    width: 200px;
+    height: 50px;
+    bottom: 35px;
+    right: 15px;
 }
 </style>

frontend/src/views/user/ViewAccedi.vue

@@ -79,6 +79,11 @@ onMounted(() => {
         createToast("info", "Accedi!", "Per visualizzare la pagina, devi prima effettuare l'accesso");
     }
 
+    // Toast di reindirizzamento dopo cambio password
+    if (route.query.passwordChange === 'true') {
+        createToast("info", "Accedi!", "Dopo il cambio della password devi rieffettuare l'accesso");
+    }
+
     google.accounts.id.initialize({
         client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
         callback: handleCredentialResponse

frontend/src/views/user/ViewProfilo.vue

@@ -12,8 +12,9 @@ import { reports, getMyReports } from '@/data/reports'
 const route = useRoute()
 const router = useRouter()
 
-const password = ref()
-const confirmPassword = ref()
+const oldPassword = ref("")
+const newPassword = ref("")
+const confirmNewPassword = ref("")
 const showPassword = ref(false)
 
 const showToast = ref(false)
@@ -63,6 +64,51 @@ function formatRole(role) {
     return (role === "citizen") ? "Cittadino" : "Operatore";
 }
 
+// Funzione per cambiare la password dell'utente
+async function changePassword() {
+    if (newPassword.value.length < 8) {
+        createToast("warning", "Attenzione!", "Inserisci una password di almeno 8 caratteri");
+        return;
+    }
+
+    if (newPassword.value === "" || confirmNewPassword.value === "") {
+        createToast("warning", "Attenzione!", "I campi non possono essere vuoti");
+        return;
+    }
+
+    if (newPassword.value !== confirmNewPassword.value) {
+        createToast("warning", "Attenzione!", "Le password non corrispondono");
+        return;
+    }
+
+    try {
+        const apiPassword = import.meta.env.VITE_API_BASE_URL + "/users/"
+
+        const resp = await fetch(apiPassword + loggedUser.id + "/password", {
+            method: 'PUT',
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${loggedUser.token}`,
+            },
+            body: JSON.stringify({
+                oldPassword: oldPassword.value,
+                newPassword: newPassword.value
+            }),
+        });
+
+        // Se il cambio password va a buon fine, effettuo il logout e reindirizzo alla pagina di login
+        if (resp.ok) {
+            clearLoggedUser();
+            router.push({ path: '/accedi', query: { passwordChange: 'true' } });
+        } else {
+            const errorData = await resp.json();
+            createToast("error", "Errore!", errorData.message);
+        }
+    } catch (error) {
+        createToast("error", "Errore!", error.message);
+    }
+}
+
 function togglePasswordView() {
     const passwordInput = document.getElementById("passwordInput");
 
@@ -148,10 +194,15 @@ function createToast(type, title, msg) {
                 </form>
                 <h3 class="text-lg font-bold mb-4">Cambia password:</h3>
                 <form>
-                    <div class="join w-full">
-                        <label class="input input-bordered join-item flex items-center gap-2 mb-4 full-width">
+                    <label class="input input-bordered flex items-center gap-2 mb-3">
+                        <KeyIcon class="size-5 opacity-70"></KeyIcon>
+                        <input v-model="oldPassword" type="password" class="grow" placeholder="Vecchia password"
+                            required />
+                    </label>
+                    <div class="join w-full mb-3">
+                        <label class="input input-bordered join-item flex items-center gap-2 full-width">
                             <KeyIcon class="size-5 opacity-70" />
-                            <input id="passwordInput" v-model="password" type="password" class="grow"
+                            <input v-model="newPassword" id="passwordInput" type="password" class="grow"
                                 placeholder="Nuova password" required />
                         </label>
                         <button @click="togglePasswordView()" type="button"
@@ -162,10 +213,10 @@ function createToast(type, title, msg) {
                     </div>
                     <label class="input input-bordered flex items-center gap-2">
                         <KeyIcon class="size-5 opacity-70"></KeyIcon>
-                        <input v-model="confirmPassword" type="password" class="grow"
+                        <input v-model="confirmNewPassword" type="password" class="grow"
                             placeholder="Conferma nuova password" required />
                     </label>
-                    <input @click="changePassowrd()" type="button" value="Cambia password"
+                    <input @click="changePassword()" type="button" value="Cambia password"
                         class="btn btn-primary btn-outline float-end rounded-lg mt-6" />
                     <div class="modal-action">
                         <form method="dialog">

frontend/src/views/user/ViewRegistrati.vue

@@ -9,6 +9,7 @@ import { EnvelopeIcon, EyeIcon, EyeSlashIcon, KeyIcon } from "@heroicons/vue/24/
 const router = useRouter()
 
 const apiRegister = import.meta.env.VITE_API_BASE_URL
+
 const email = ref()
 const password = ref()
 const confirmPassword = ref()