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
            },
            pin: "",
            errorMsg: ""
        };
    },
    methods: {
        async submit() {
            const authStore = useAuthStore()
            await API.addProfile(this.profile)
                .then((profile) => {
                    let id = profile.id;

                    let image = document.getElementById("profile_img").files[0];

                    if (typeof image === 'undefined') {
                        authStore.profile = profile;
                        API.getProfiles();
                        router.push("/");
                    } else {
                        API.uploadProfileImage(image, id)
                            .then((updatedProfile) => {
                                authStore.profile = updatedProfile;
                                API.getProfiles();
                                router.push("/");
                            });
                    }

                })
                .catch(() => {
                    this.errorMsg = "Oops! Dette navnet er allerede i bruk på en annen profil, bruk et annet navn"
                })
        },
        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" v-model="this.profile.isRestricted" name="limited" id="limited">
            </div>
            <div v-if="!this.profile.isRestricted" class="pincode-container">
                <label for="pincode-field">PIN:</label>
                <input id="pincode-field" type="tel" v-model="pin" maxlength="4" placeholder="0000" />
            </div>
        </form>
        <p>{{ this.errorMsg }}</p>
        <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;
    }

    p {
        max-width: 20em;
    }
}

#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;
}

.pincode-container {
    width: 100%;
    display: flex;

    input {
        border-radius: .2em;
        border: 1px solid black;
        height: 50px;
        width: 105px;
        margin: 0 5px;
        font-size: 38px;
        padding: 5px;
    }
}

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

    max-width: 20em;
}

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

    font-weight: bold;
}
</style>