ProfileCreationView.vue

<script>
import Toggle from '../components/Toggle.vue';
import { API } from '../util/API';

export default {
    data: () => {
        return {
            image: "profile/default_avatar.png",
            profile: {
                profileImageUrl: "",
                name: "",
                isRestricted: false
            }
        };
    },
    methods: {
        submit() {
            this.profile.isRestricted = this.$refs.toggle.state;
            API.addProfile(this.profile);
        },
        updateImg() {
            let file = document.getElementById("avatar").files[0];
            let reader = new FileReader();
            reader.onload = function (ev) {
                document.getElementById("avatar_preview").src = ev.target.result;
            };
            reader.readAsDataURL(file);
        }
    },
    components: { Toggle }
}
</script>

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

        <form action="todo" method="post">
            <label for="avatar" id="avatar_label">
                <div class="img_hover">
                    <img :src="image" alt="fjes" id="avatar_preview">
                    <p class="hover_text">
                        Klikk for å endre
                    </p>
                </div>
            </label>
            <input type="file" name="avatar" id="avatar" @change="updateImg">
            <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" />
            </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;
    }
}

#avatar_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>