Profil-opprettelse (ikke funksjonell)

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
 import SelectProfileView from '../views/SelectProfileView.vue'
+import ProfileCreationView from '../views/ProfileCreationView.vue'
 import RegisterAccountView from '../views/RegisterAccountView.vue'
 
 const router = createRouter({
@@ -22,6 +23,11 @@ const router = createRouter({
       name: "selectProfile",
       component: SelectProfileView
     },
+    {
+      path: '/newProfile',
+      name: "newProfile",
+      component: ProfileCreationView
+    },
     {
       path: '/registerAccount',
       name: 'registerAccount',

src/util/API.js

@@ -83,8 +83,16 @@ export const API = {
     },
 
     // Sends the user into the "register profile" view 
-    addProfile: async () => {
-        console.log("todo");
+    addProfile: async (profile) => {
+      const authStore = useAuthStore();
+      if (!authStore.isLoggedIn) {
+          throw new Error();
+      }
+
+      return axios.post(import.meta.env.VITE_BACKEND_URL + '/profile', {
+        headers: { Authorization: "Bearer " + authStore.token },
+        body: profile
+      })
     },
 
     // Returns all profiles to the logged in user

src/views/ProfileCreationView.vue

+<script>
+export default {
+    data: () => {
+        return {
+            image: "profile/default_avatar.png",
+            profile: {
+                profileImageUrl: "",
+                name: "",
+                isRestricted: false
+            }
+        }
+    },
+    methods: {
+        submit() {
+            console.log(this.profile)
+        },
+
+        updateImg(e) {
+            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);
+        }
+    }
+}
+</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>
+                <input name="child" type="checkbox" v-model="profile.isRestricted">
+            </div>
+        </form>
+        <button @click="submit">Opprett</button>
+    </main>
+</template>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+$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: 1em;
+}
+
+#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%;
+
+        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>
\ No newline at end of file