diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue index f90e6b8ad61984c9e79e2af77fcefe7600e59863..877d5f9c32d417610137f77ff0b2503ab1f59bfc 100644 --- a/src/components/EditProfile.vue +++ b/src/components/EditProfile.vue @@ -52,7 +52,6 @@ import { useAuthStore } from "@/stores/authStore"; import router from "../router"; export default { name: "EditProfile", - components: {Icon}, data() { return { alertMsg:'', @@ -69,11 +68,8 @@ export default { upImage: "profile/default_avatar.png", } }, - iconColor() { - return "#D9D9D9" - }, }, - beforeMount() {//used to compare with changed values + beforeMount() { if(this.profile.profileImageUrl !== ''){ this.image = this.profile.profileImageUrl; } @@ -83,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; @@ -198,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; +} @@ -263,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 diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue index 8e5e024b1585d6d88f8cd29a97dfb6454e783885..b158eba82c24cf871cad104d1a626cf7bc3d867f 100644 --- a/src/views/SettingsView.vue +++ b/src/views/SettingsView.vue @@ -27,9 +27,6 @@ export default { components: {Icon}, computed: { ...mapStores(useAuthStore), - iconColor() { - return "#000000" - }, }, beforeMount() { if (!useAuthStore().isLoggedIn) {