ProfileCreationView.vue

<script>
import { mapStores } from 'pinia';
import router from '../router'
import { API } from '../util/API';
import { useAuthStore } from '../stores/authStore'

export default {
    data: () => {
        return {
            image: "profile/default_avatar.png",
            profile: {
                profileImageUrl: "",
                name: "",
                isRestricted: false
            }
        };
    },
    methods: {
        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("profile_img").files[0];
            let reader = new FileReader();
            reader.onload = function (ev) {
                document.getElementById("profile_img_preview").src = ev.target.result;
            };
            reader.readAsDataURL(file);
        }
    },
    computed: {
        ...mapStores(useAuthStore)
    }
}
</script>

<template>
    <main>
        <h1>Ny profil</h1>

        <form @submit.prevent="submit">
            <label for="profile_img" id="profile_img_label">
                <div class="img_hover">
                    <img :src="image" alt="fjes" id="profile_img_preview">
                    <p class="hover_text">
                        Klikk for å endre
                    </p>
                </div>
            </label>
            <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="limited">Begrenset:</label>
                <input type="checkbox" name="limited" id="limited">
            </div>
        </form>
        <button @click="submit">Opprett</button>
    </main>
</template>

<style scoped lang="scss">
@import '../style.scss';

$gap: 1em;

$img-size: 150px;

input[type="file"] {
    display: none;
}

main {
    display: flex;
    flex-direction: column;

    padding-top: 15%;

    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: $gap;

    form {
        gap: $gap;
    }
}

#profile_img_label {
    display: flex;
    justify-content: center;
    width: 100%;
}

.check_container {
    display: flex;
    gap: .5em;
}

.img_hover {
    display: flex;

    justify-content: center;
    align-items: center;

    &:hover .hover_text {
        visibility: visible;
        opacity: 1;
    }

    &:hover img {
        filter: brightness(70%);
        border-radius: 25%;
    }

    img {
        height: $img-size;
        width: $img-size;
        border-radius: 50%;

        object-fit: cover;

        transition: all 300ms ease;
    }
}

.hover_text {
    position: absolute;

    font-weight: bold;

    color: #fff;
    visibility: hidden;
    opacity: 0;

    transition: all 350ms eases;
}

form {
    display: flex;
    flex-direction: column;

    max-width: 20em;
}

button {
    padding: .5rem 1rem;
    border: 2px $green solid;
    border-radius: .5rem;
    background-color: $light-green;

    color: white;
    font-weight: bold;
}
</style>