Merge branch 'profilmeldinger' into 'main'

Profilmeldinger

See merge request !26

src/components/EatFridgeItemModal.vue

 <template>
   <div v-if="visible" id="popup">
-      <div id="exitBtn" @click="close"><Icon  icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
+      <div id="exitBtn" @click="close"><button :aria-label="'close menu'">X</button></div>
 
       <h2>{{ this.fridgeItem.item.name }}</h2>
       <p id="sliderDisplay">{{sliderValue}} {{this.fridgeItem.amount.unit}}</p>
@@ -66,6 +66,7 @@ export default {
           };
 
           API.updateFridge(request)
+
               .catch((error)=>
                   console.log(error)
               );
@@ -159,6 +160,15 @@ export default {
 
 }
 
+#exitBtn button {
+    width:2em;
+    height:2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1em;
+}
+
 button {
   margin:.1em;
   font-weight: bolder;

src/components/EditProfile.vue

@@ -52,12 +52,9 @@ import { useAuthStore } from "@/stores/authStore";
 import router from "../router";
 export default {
     name: "EditProfile",
-    components: {Icon},
     data() {
         return {
             alertMsg:'',
-            initialName: '', //used to compare with updated values
-            initialRestriction: '',
             image: "profile/default_avatar.png",
         }
     },
@@ -71,13 +68,8 @@ export default {
               upImage: "profile/default_avatar.png",
           }
         },
-        iconColor() {
-            return "#D9D9D9"
-        },
     },
-    beforeMount() {//used to compare with changed values
-        this.initialName = this.profile.name;
-        this.initialRestriction = this.profile.restricted;
+    beforeMount() {
         if(this.profile.profileImageUrl !== ''){
             this.image = this.profile.profileImageUrl;
         }
@@ -87,12 +79,23 @@ export default {
             router.push("/selectProfile");
         },
         updateImg() {
+            this.alertMsg=""
             let file = document.getElementById("profile_img").files[0];
+            let fileSize = file.size
             let reader = new FileReader();
             reader.onload = function (ev) {
                 document.getElementById("profile_img_preview").src = ev.target.result;
             };
             reader.readAsDataURL(file);
+            if(fileSize>524288){ //if image is bigger than 512kB
+                this.alertMsg = "Bildet er for stort (" + Math.ceil(fileSize/1024) + "kB) Maksimal bildestørrelse er 512kB"
+            }
+
+            if(file.name.split('.jpeg').length===1 && file.name.split('.jpg').length===1 ){
+                this.alertMsg="filtypen støttes ikke (bildet må være av type .jpg/.jpeg)"
+            }
+
+
         },
         async deleteProfile() {
                 const id = this.profile.id;
@@ -106,14 +109,11 @@ export default {
             const id = this.profile.id;
 
             let newName = null;
-            let newRestricted = null;
+            let newRestricted = this.updatedProfile.upRestricted
 
-            if(this.updatedProfile.upName !== this.initialName){
+            if(this.updatedProfile.upName !== this.profile.name){
                 newName = this.updatedProfile.upName
             }
-            if(this.updatedProfile.upRestricted !== this.initialRestriction){
-                newRestricted = this.updatedProfile.upRestricted
-            }
 
             API.updateProfile(
                 id,{
@@ -123,6 +123,7 @@ export default {
                 }
             ).then((savedProfile)=>{
                 useAuthStore().setProfile(savedProfile);
+
                 const id = this.profile.id;
                 let image = document.getElementById("profile_img").files[0];
 
@@ -142,28 +143,23 @@ export default {
                 this.alertMsg = "Profil oppdatert."
             }).catch(error=> {
                 console.log(error)
-                if (error.message === '400') {
-                    if(newRestricted){
+
+                switch (error.message){
+                    case '400':
+                    {
                         this.alertMsg = '‼️Det oppsto en feil: Sørg for at det finnes mist en standard profil på kontoen‼️ '
-                    } else if(this.updatedProfile.name !== this.initialName || this.updatedProfile.name) {
+                        break;
+                    }
+                    case '409':
+                    {
                         this.alertMsg = '‼️Det oppsto en feil: Det finnes allerede en bruker med samme navn‼️'
+                        break;
                     }
-                }else{
-                    this.alertMsg = "‼️Det oppsto en feil.‼️"
+                    default:
+                        this.alertMsg = "‼️Det oppsto en feil.‼️"
                 }
             })
         },
-
-
-
-
-
-        updateImage(){
-            //todo update image preview
-        },
-        chooseProfilePicture(){
-            this.alertMsg = "skriv inn bildelenke i feltet, og oppdater innstillinger"
-        },
     }
 }
 
@@ -174,7 +170,6 @@ export default {
 input[type="radio"] {
   width: 2em;
   height: 2em;
-
 }
 
 #changeUserBtn {
@@ -210,7 +205,22 @@ img {
     justify-content: space-between;
 }
 
+input[type=file]::file-selector-button {
+  background-color: base.$light-green;
+  color: base.$white;
+  border: none;
+  font-weight: bold;
+  padding: 8px 14px;
+  width: 50%;
+  border-radius: 10px;
+  cursor: pointer;
+  margin: 10px;
+  transition: color .2s;
+}
 
+input[type=file]::file-selector-button:hover {
+  background-color: base.$light-green-hover;
+}
 
 
 
@@ -275,7 +285,6 @@ button {
   display: flex;
   width:100%;
   justify-content: center;
-  color: base.$light-green;
   font-weight: bold;
 }
 </style>
\ No newline at end of file

src/components/FridgeItem.vue

 <template>
 <div id ="item">
-    <img :src="getImage" alt="">
+    <div>
+        <img :src="getImage" :alt="'bilde av ' + this.fridgeItem.item.name">
+    </div>
+
     <div id="itemInfo">
         <p id="fridgeItemName">{{ this.fridgeItem.item.name }} {{
                 this.fridgeItem.amount.quantity
@@ -95,9 +98,9 @@ export default {
       },
         formatDate(){ //formats expiration date as dd.mm.yyyy
             let fullExpirationDate = new Date(this.fridgeItem.exp_date);
-            let day = fullExpirationDate.getDate();
+            let day = fullExpirationDate.getDate().toString().padStart(2,'0');
             let month= (fullExpirationDate.getMonth()+1).toString().padStart(2,'0');
-            let year= fullExpirationDate.getFullYear().toString().padStart(2,'0');
+            let year= fullExpirationDate.getFullYear().toString();
             return day + "." + month + "." + year;
         }
 
@@ -109,9 +112,7 @@ export default {
 #item {
     background-color: base.$white;
     color: black;
-    padding: 1em;
-    padding-left: 2em;
-    padding-right:2em;
+    padding: 1em 2em;
     display:flex;
     align-items: center;
     justify-content: space-between;
@@ -127,14 +128,14 @@ export default {
     font-size: 1.2em;
 }
 
-
 img {
     width: 3rem;
-    height: 3em;
+    height: 3rem;
     border-radius: 50%;
-    background-color: #00663C;
+    background-color: base.$light-grey;
     margin-right:.6em;
     object-fit: cover;
+
 }
 
 #itemInfo{

src/util/API.js

@@ -234,6 +234,7 @@ export const API = {
         axios.put(`${import.meta.env.VITE_BACKEND_URL}/fridge/ingredientsAmount`, request,{
             headers: { Authorization: `Bearer ${authStore.token}` },
         }).then((response) => {
+            authStore.setFridge(response.data);
             return response.data;
         }).catch(()=> {
             throw new Error("Could modify ingredient. ");

src/views/SettingsView.vue

@@ -27,9 +27,6 @@ export default {
     components: {Icon},
     computed: {
         ...mapStores(useAuthStore),
-        iconColor() {
-            return "#000000"
-        },
     },
     beforeMount() {
         if (!useAuthStore().isLoggedIn) {