diff --git a/package-lock.json b/package-lock.json index c8c1d66ed8d37a545dfbe8b073ea9da453dd1042..6288b5e8f450dce33a11bb73d5304bbfa4617d14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "@iconify/vue": "^4.1.1", "jwt-decode": "^3.1.2", "pinia": "^2.0.28", "pinia-plugin-persistedstate": "^3.1.0", + "sass": "^1.62.0", "vue": "^3.2.45", "vue-router": "^4.1.6" }, @@ -460,6 +462,25 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@iconify/types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", + "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==" + }, + "node_modules/@iconify/vue": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz", + "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==", + "dependencies": { + "@iconify/types": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/cyberalien" + }, + "peerDependencies": { + "vue": ">=3" + } + }, "node_modules/@sideway/address": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", @@ -787,6 +808,18 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/arch": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", @@ -944,6 +977,14 @@ "tweetnacl": "^0.14.3" } }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, "node_modules/blob-util": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz", @@ -965,6 +1006,17 @@ "balanced-match": "^1.0.0" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/buffer": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", @@ -1090,6 +1142,32 @@ "node": ">= 0.8.0" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/ci-info": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz", @@ -1743,6 +1821,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/follow-redirects": { "version": "1.15.2", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", @@ -1817,7 +1906,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -1908,6 +1996,17 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/global-dirs": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz", @@ -2056,6 +2155,11 @@ } ] }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" + }, "node_modules/indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -2090,6 +2194,17 @@ "node": ">=10" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-ci": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz", @@ -2114,6 +2229,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -2123,6 +2246,17 @@ "node": ">=8" } }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-installed-globally": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz", @@ -2139,6 +2273,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-path-inside": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", @@ -2628,6 +2770,14 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -2788,6 +2938,17 @@ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", @@ -2982,6 +3143,17 @@ "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/request-progress": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz", @@ -3141,6 +3313,22 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.0.tgz", + "integrity": "sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", @@ -3511,6 +3699,17 @@ "node": ">=8.17.0" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/tough-cookie": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", diff --git a/package.json b/package.json index b392ca412259eca234815b99c796379d76c9f257..15414b14944f16ee558f5f8996f3e134ce050fa0 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,11 @@ "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress run --e2e'" }, "dependencies": { + "@iconify/vue": "^4.1.1", "jwt-decode": "^3.1.2", "pinia": "^2.0.28", "pinia-plugin-persistedstate": "^3.1.0", + "sass": "^1.62.0", "vue": "^3.2.45", "vue-router": "^4.1.6" }, diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 08a12f649545eb9af934874dcbdc7d1b9fe1b0f3..1be20597730e2b463eff69fa4dc526222fce60e3 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -17,7 +17,6 @@ <div id = "logoContainer" :style="{ width: logoSize, height: logoSize }" > <img src="../components/icons/logo.png" alt="logo"> </div> - <!--<Icon icon="mdi:leaf-circle" :color="iconColor" :style="{ fontSize: logoSize }" />--> </RouterLink> </li> <li> diff --git a/src/router/index.js b/src/router/index.js index 0b2841aded68f1cbbeee667bea732d0ed6f79d98..aafa3fe2e1f74b5ee24d75f51ac88c2d9a321c32 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,8 +1,6 @@ import { createRouter, createWebHistory } from 'vue-router' -import HomeView from "@/views/HomeView.vue"; import ProfileSettings from "@/views/ProfileSettings.vue"; import MissingPage from "@/views/MissingPage.vue"; - import HomeView from '../views/HomeView.vue' import LoginView from '../views/LoginView.vue' import SelectProfileView from '../views/SelectProfileView.vue' @@ -25,6 +23,7 @@ const router = createRouter({ name: "selectProfile", component: SelectProfileView }, + { path: '/profileSettings', name: 'profileSettings', component: ProfileSettings diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 1a6a64bc4d6c95261ff93ac97f43c52c958cc4f4..f48bdb8b8a0387e69a60df399ba20b89274397be 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -51,7 +51,7 @@ </main> </template> -<style> +<style scoped> .login-container { display: flex; diff --git a/src/views/ProfileSettings.vue b/src/views/ProfileSettings.vue index 03eea5b091b22b5e1b84a30e3d964afa0df254da..181ff313de2889ff1734d5115895500368772ea2 100644 --- a/src/views/ProfileSettings.vue +++ b/src/views/ProfileSettings.vue @@ -9,18 +9,18 @@ <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" /> </div> - <h2>{{profile.name}}</h2> + <h2>{{currentProfile.name}}</h2> <button id="changeUserBtn" >Bytt bruker</button> <form @submit.prevent="submit"> <label for="brukernavn">Profilnavn</label><br> - <input type="text" required v-model="profile.name"><br> + <input type="text" required v-model="currentProfile.name"><br> <br> <h4>Brukertype</h4> - <input type="radio" id="normal" value="false" v-model="profile.isRestricted"> + <input type="radio" id="normal" value="false"> <label for="normal"> Standard</label><br> - <input type="radio" id="restricted" value="true" v-model="profile.isRestricted"> + <input type="radio" id="restricted" value="true" > <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br> <br> @@ -76,10 +76,10 @@ <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br> <p>Epost:</p> - <p>{{user.username}}</p><br> + <p>{{userStore.user.email}}</p><br> <label for="password">Endre passord</label><br> - <input type="password" id="password" v-model="user.password"> + <input type="password" id="password" > <button class="saveBtn" @click="saveAccountSettings">Lagre kontoinnstillinger</button> @@ -104,40 +104,54 @@ import {Icon} from "@iconify/vue"; import {API} from "@/util/API"; -//import { mapState } from "pinia"; -//import { useAuthStore } from "@/stores/authStore"; +import {mapState, mapStores} from "pinia"; +import { useAuthStore } from "@/stores/authStore"; export default { name: "ProfileSettings", components: {Icon}, + setup() { + const userStore = useAuthStore() + return {...mapStores(userStore)} + }, computed: { - //...mapState(useAuthStore, ['user']), + currentUser() { + const store = useAuthStore() + return store.user; + }, + currentProfile() { + const store = useAuthStore() + return store.profile; + }, iconColor() { return "#000000" }, hasProfileImage() { - return this.profile.image.length > 0; + return false; + //return this.profile.image.length > 0; } }, data() { return { - user: { + /*user: { id: "", username: "petter@hello.no", password: "", }, - profile: { + qprofile: { name: "Petter", isRestricted: false, image: "../components/images/w66XcIlw.jpeg", - }, + },*/ foodPreferences: [], allergens: [], deletionConfirmation: false, } }, beforeMount(){ + //...mapStores(useAuthStore), + //TODO: Hent bruker //todo hent profil }, diff --git a/src/views/SelectProfileView.vue b/src/views/SelectProfileView.vue index 6dc0b9fd642dc6d232a22a38ebb5f95725ea1503..1697e621c8bf7a1f7b288e9b10b9bbd052e198e3 100644 --- a/src/views/SelectProfileView.vue +++ b/src/views/SelectProfileView.vue @@ -1,5 +1,5 @@ <script> - import { API } from '@/util/API.js'; +import { API } from '@/util/API.js'; export default { data() {