Merge branch 'opprett-profil' into 'main'

Profil-oppretting fungerer

See merge request !11

src/components/Toggle.vue

+<script>
+export default {
+    data: () => {
+        return {
+            state: false,
+        }
+    },
+    emits: ['toggled'],
+    methods: {
+        emitUpdate() {
+            this.state = !this.state;
+            this.$emit('toggled');
+        }
+    }
+}
+</script>
+
+<template>
+    <label class="toggle">
+        <input type="checkbox" @change="emitUpdate">
+        <span class="toggle_slider"></span>
+    </label>
+</template>
+
+<style scoped lang="scss">
+$width: 40px;
+$height: calc(2 * $width / 3);
+
+$on-color: green;
+$off-color: #cccccc;
+
+.toggle {
+    position: relative;
+    display: inline-block;
+
+    border-radius: calc($height / 2);
+
+    width: $width;
+    height: $height;
+
+    background-color: $off-color;
+
+    input {
+        display: none;
+    }
+}
+
+.toggle_slider {
+    position: absolute;
+    cursor: pointer;
+
+    border-radius: calc($height / 2);
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background-color: #ccc;
+
+    &:before {
+        position: absolute;
+        content: "";
+
+        border-radius: 50%;
+
+        height: calc(0.8 * $height);
+        width: calc(0.8 * $height);
+        left: calc(0.1 * $height);
+        top: calc(0.1 * $height);
+
+        background-color: white;
+        transition: 200ms;
+    }
+}
+
+input:checked+.toggle_slider {
+    background-color: $on-color;
+}
+
+input:focus+.toggle_slider {
+    box-shadow: 0 0 1px white;
+}
+
+input:checked+.toggle_slider:before {
+    transform: translateX(calc($width / 3));
+}
+</style>
\ No newline at end of file

src/util/API.js

@@ -82,7 +82,13 @@ export const API = {
 
     },
 
-    // Sends the user into the "register profile" view 
+    /**
+     * 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 
+     */
     addProfile: async (profile) => {
       const authStore = useAuthStore();
       if (!authStore.isLoggedIn) {
@@ -93,6 +99,11 @@ export const API = {
         headers: { Authorization: "Bearer " + authStore.token },
         body: profile
       })
+      .then((response) => {
+        return response.data;
+      }).catch(() => {
+        throw new Error();
+      })
     },
 
     // Returns all profiles to the logged in user

src/views/ProfileCreationView.vue

 <script>
+import Toggle from '../components/Toggle.vue';
+import { API } from '../util/API';
+
 export default {
     data: () => {
         return {
@@ -8,24 +11,23 @@ export default {
                 name: "",
                 isRestricted: false
             }
-        }
+        };
     },
     methods: {
         submit() {
-            console.log(this.profile)
+            this.profile.isRestricted = this.$refs.toggle.state;
+            API.addProfile(this.profile);
         },
-
-        updateImg(e) {
-            let file = document.getElementById('avatar').files[0];
+        updateImg() {
+            let file = document.getElementById("avatar").files[0];
             let reader = new FileReader();
-
-            reader.onload = function(ev) {
+            reader.onload = function (ev) {
                 document.getElementById("avatar_preview").src = ev.target.result;
-            }
-
+            };
             reader.readAsDataURL(file);
         }
-    }
+    },
+    components: { Toggle }
 }
 </script>
 
@@ -47,7 +49,7 @@ export default {
             <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">
+                <Toggle ref="toggle" />
             </div>
         </form>
         <button @click="submit">Opprett</button>
@@ -57,6 +59,8 @@ export default {
 <style scoped lang="scss">
 @import '../style.scss';
 
+$gap: 1em;
+
 $img-size: 150px;
 
 input[type="file"] {
@@ -73,7 +77,11 @@ main {
     justify-content: center;
     align-items: center;
 
-    gap: 1em;
+    gap: $gap;
+
+    form {
+        gap: $gap;
+    }
 }
 
 #avatar_label {
@@ -108,6 +116,8 @@ main {
         width: $img-size;
         border-radius: 50%;
 
+        object-fit: cover;
+
         transition: all 300ms ease;
     }
 }
@@ -131,7 +141,6 @@ form {
     max-width: 20em;
 }
 
-
 button {
     padding: .5rem 1rem;
     border: 2px $green solid;