Skip to content
Snippets Groups Projects
Commit e3049f6c authored by Katarzyna Szlejter's avatar Katarzyna Szlejter
Browse files

Merge main into pincode-view

parents 3e382922 ae325e33
No related branches found
No related tags found
2 merge requests!17Pincode view,!16Pincode view
Pipeline #224230 failed
......@@ -77,20 +77,46 @@ export const API = {
} else {
router.push("/")
}
})
.catch(() => {
throw new Error("Profile not found or not accessible")
})
},
/**
* Upload profile image
*
* @param {Blob} image - the image file contents to upload. Must be a JPEG no bigger than 512kB
* @param {Number} profileId - the ID of the profile to upload this image to
* @returns {Promise<String>} A Promise that resolves to the URL of the uploaded image
*/
uploadProfileImage: async (image, profileId) => {
const authStore = useAuthStore();
let fd = new FormData();
fd.append("file", image);
fd.append("profileId", profileId);
return axios.post(`${import.meta.env.VITE_BACKEND_URL}/img`, fd, {
headers: {
Authorization: `Bearer ${authStore.token}`,
}
})
.then((response) => {
return response.data;
})
.catch(() => {
throw new Error();
})
},
/**
* Sends a request to create a new profile on the currently logged in account
*
* @typedef {{name: string, profileImageUrl: string, isRestricted: boolean}} ProfileType
* @param {ProfileType} profile
* @returns
* @typedef {{name: string, id?: number, accountId?: number, profileImageUrl: string, isRestricted: boolean}} ProfileType
* @param {ProfileType} profile - the partial data of profile to create
* @returns {Promise<ProfileType>} the full profile after saving, with id and account ID set
*/
addProfile: async (profile) => {
const authStore = useAuthStore();
......@@ -98,9 +124,8 @@ export const API = {
throw new Error();
}
return axios.post(import.meta.env.VITE_BACKEND_URL + '/profile', {
return axios.post(import.meta.env.VITE_BACKEND_URL + '/profile', profile, {
headers: { Authorization: "Bearer " + authStore.token },
body: profile
})
.then((response) => {
return response.data;
......
<script>
import Toggle from '../components/Toggle.vue';
import { mapStores } from 'pinia';
import router from '../router'
import { API } from '../util/API';
import { useAuthStore } from '../stores/authStore'
export default {
data: () => {
......@@ -14,20 +16,33 @@ export default {
};
},
methods: {
submit() {
this.profile.isRestricted = this.$refs.toggle.state;
API.addProfile(this.profile);
async submit() {
await API.addProfile(this.profile)
.then((profile) => {
let id = profile.id;
let image = document.getElementById("profile_img").files[0];
API.uploadProfileImage(image, id)
.then((updatedProfile) => {
this.authStore.profile = updatedProfile;
router.push("/");
});
})
},
updateImg() {
let file = document.getElementById("avatar").files[0];
let file = document.getElementById("profile_img").files[0];
let reader = new FileReader();
reader.onload = function (ev) {
document.getElementById("avatar_preview").src = ev.target.result;
document.getElementById("profile_img_preview").src = ev.target.result;
};
reader.readAsDataURL(file);
}
},
components: { Toggle }
computed: {
...mapStores(useAuthStore)
}
}
</script>
......@@ -36,20 +51,21 @@ export default {
<h1>Ny profil</h1>
<form action="todo" method="post">
<label for="avatar" id="avatar_label">
<label for="profile_img" id="profile_img_label">
<div class="img_hover">
<img :src="image" alt="fjes" id="avatar_preview">
<img :src="image" alt="fjes" id="profile_img_preview">
<p class="hover_text">
Klikk for å endre
</p>
</div>
</label>
<input type="file" name="avatar" id="avatar" @change="updateImg">
<input @change="updateImg" type="file"
accept=".jpeg, .jpg" id="profile_img" name="profile_img">
<label for="name">Navn</label>
<input name="name" type="text" v-model="profile.name">
<div class="check_container">
<label for="child">Begrenset:</label>
<Toggle ref="toggle" />
<label for="limited">Begrenset:</label>
<input type="checkbox" name="limited" id="limited">
</div>
</form>
<button @click="submit">Opprett</button>
......@@ -84,7 +100,7 @@ main {
}
}
#avatar_label {
#profile_img_label {
display: flex;
justify-content: center;
width: 100%;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment