startet på innstillingsside

src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from "@/views/HomeView.vue";
+import ProfileSettings from "@/views/ProfileSettings.vue";
+import MissingPage from "@/views/MissingPage.vue";
 
 
 const router = createRouter({
@@ -10,6 +12,16 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/profileSettings',
+      name: 'profileSettings',
+      component: ProfileSettings
+    },
+    {
+      path: '/:catchAll(.*)',
+      name: "404 Page not found" ,
+      component: MissingPage }
+
   ]
 })
 

src/views/MissingPage.vue

+<template>
+    <h1>404</h1>
+    <h2>Oida, denne siden finnes ikke</h2>
+    <RouterLink to="/">Gå tilbake til forsiden</RouterLink>
+</template>
+
+<script>
+export default {
+    name: "MissingPage"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/ProfileSettings.vue

+<template>
+    <main>
+
+        <h1>Profilinnstillinger</h1>
+
+        <div id = "profilepicture">
+            <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
+        </div>
+        <button id="changeUserBtn">Bytt bruker</button>
+
+        <form @submit.prevent="submit">
+            <label for="brukernavn">Navn</label><br>
+            <input type="text" required><br>
+
+            <h3>Brukertype</h3>
+            <input type="radio" id="normal" name="userType" value="normal">
+            <label for="normal">Vanlig</label><br>
+
+            <input type="radio" id="restricted" name="userType" value="restricted">
+            <label for="restricted">Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
+
+            <br>
+            <h3>Profilbilde</h3>
+            <div id="changeUserImage">
+                <div id = "profilepicture">
+                    <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
+                    <img src="#" alt="profile picture">
+                </div>
+                <button>Endre bilde</button>
+            </div>
+
+            <div id = "submitbuttonBox">
+                <button>Lagre brukerinnstillinger</button>
+                <button>Slett brukerprofil</button>
+            </div>
+
+        </form>
+
+        <h1>App-innstillinger</h1>
+
+        <form @submit.prevent="submit">
+
+            <h2>Matpreferanser</h2>
+            <input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
+            <label for="vegetar"> vegetar </label><br>
+            <input type="checkbox" id="vegan" name="vegan" value="vegan">
+            <label for="vegetar"> vegan </label><br>
+
+            <br>
+
+            <h3>Allergener</h3>
+            <input type="checkbox" id="gluten" name="gluten" value="Gluten">
+            <label for="vehicle1"> gluten</label><br>
+            <input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
+            <label for="vehicle1">nøtter</label><br>
+
+            <button>Lagre Appinnstillinger</button>
+
+        </form>
+
+        <h1>Konto-innstillinger</h1>
+        <form @submit.prevent="submit">
+
+            <label for="email">Epost</label><br>
+            <input type="text" id="email">
+
+            <label for="password">Passord</label><br>
+            <input type="password" id="password">
+
+            <button>Lagre Appinnstillinger</button>
+
+        </form>
+
+    </main>
+
+</template>
+
+<script>
+
+import {Icon} from "@iconify/vue";
+
+export default {
+    name: "ProfileSettings",
+    components: {Icon},
+    computed: {
+        iconColor() {
+            return "#000000"
+        }
+    }
+}
+</script>
+
+<style scoped lang ="scss">
+#profilepicture {
+    border-radius:50%;
+    width:50px;
+    background-color: white;
+    border: 2px solid black;
+}
+
+#changeUserImage {
+    display:flex;
+}
+
+form {
+    background-color: base.$grey;
+    color: black;
+    align-content: end;
+
+    padding: 2em;
+
+    margin-top: 2em;
+    margin-bottom: 2em;
+}
+
+input[type="text"],
+
+input[type="password"]{
+    width: 100%;
+    padding: .5em;
+}
+#submitbuttonBox {
+    display:flex;
+    justify-content: space-between;
+}
+button {
+    background-color: base.$red;
+    color: black;
+    border: 1px solid black;
+    margin: 1em;
+}
+#changeUserBtn {
+    padding:.9em;
+    padding-right: 1.5em;
+}
+
+main {
+    background-color: white;
+    color:black;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 90%;
+    text-align: left;
+}
+
+
+</style>
\ No newline at end of file