diff --git a/FullstackProsjekt/src/frontend/package-lock.json b/FullstackProsjekt/src/frontend/package-lock.json
index 473b285423121261672f5673ce67abc88c7150b1..6f68140662e01454ca5cc7e3901e2a80a4d3550b 100644
--- a/FullstackProsjekt/src/frontend/package-lock.json
+++ b/FullstackProsjekt/src/frontend/package-lock.json
@@ -32,6 +32,7 @@
"start-server-and-test": "^2.0.3",
"vite": "^5.1.6",
"vite-plugin-vue-devtools": "^7.0.18",
+ "vite-svg-loader": "^5.1.0",
"vitest": "^1.4.0"
}
},
@@ -1689,6 +1690,15 @@
"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
"dev": true
},
+ "node_modules/@trysound/sax": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+ "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+ "dev": true,
+ "engines": {
+ "node": ">=10.13.0"
+ }
+ },
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -2815,6 +2825,47 @@
"node": ">= 8"
}
},
+ "node_modules/css-select": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+ "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+ "dev": true,
+ "dependencies": {
+ "boolbase": "^1.0.0",
+ "css-what": "^6.1.0",
+ "domhandler": "^5.0.2",
+ "domutils": "^3.0.1",
+ "nth-check": "^2.0.1"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/fb55"
+ }
+ },
+ "node_modules/css-tree": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+ "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+ "dev": true,
+ "dependencies": {
+ "mdn-data": "2.0.30",
+ "source-map-js": "^1.0.1"
+ },
+ "engines": {
+ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+ }
+ },
+ "node_modules/css-what": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+ "dev": true,
+ "engines": {
+ "node": ">= 6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/fb55"
+ }
+ },
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2827,6 +2878,39 @@
"node": ">=4"
}
},
+ "node_modules/csso": {
+ "version": "5.0.5",
+ "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+ "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+ "dev": true,
+ "dependencies": {
+ "css-tree": "~2.2.0"
+ },
+ "engines": {
+ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+ "npm": ">=7.0.0"
+ }
+ },
+ "node_modules/csso/node_modules/css-tree": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+ "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+ "dev": true,
+ "dependencies": {
+ "mdn-data": "2.0.28",
+ "source-map-js": "^1.0.1"
+ },
+ "engines": {
+ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+ "npm": ">=7.0.0"
+ }
+ },
+ "node_modules/csso/node_modules/mdn-data": {
+ "version": "2.0.28",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+ "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+ "dev": true
+ },
"node_modules/cssstyle": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
@@ -3059,6 +3143,61 @@
"node": ">=6.0.0"
}
},
+ "node_modules/dom-serializer": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+ "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+ "dev": true,
+ "dependencies": {
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.2",
+ "entities": "^4.2.0"
+ },
+ "funding": {
+ "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+ }
+ },
+ "node_modules/domelementtype": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+ "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/fb55"
+ }
+ ]
+ },
+ "node_modules/domhandler": {
+ "version": "5.0.3",
+ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+ "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+ "dev": true,
+ "dependencies": {
+ "domelementtype": "^2.3.0"
+ },
+ "engines": {
+ "node": ">= 4"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/domhandler?sponsor=1"
+ }
+ },
+ "node_modules/domutils": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+ "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+ "dev": true,
+ "dependencies": {
+ "dom-serializer": "^2.0.0",
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/domutils?sponsor=1"
+ }
+ },
"node_modules/duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -4860,6 +4999,12 @@
"integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
"dev": true
},
+ "node_modules/mdn-data": {
+ "version": "2.0.30",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+ "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+ "dev": true
+ },
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6162,6 +6307,40 @@
"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
"dev": true
},
+ "node_modules/svgo": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
+ "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
+ "dev": true,
+ "dependencies": {
+ "@trysound/sax": "0.2.0",
+ "commander": "^7.2.0",
+ "css-select": "^5.1.0",
+ "css-tree": "^2.3.1",
+ "css-what": "^6.1.0",
+ "csso": "^5.0.5",
+ "picocolors": "^1.0.0"
+ },
+ "bin": {
+ "svgo": "bin/svgo"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/svgo"
+ }
+ },
+ "node_modules/svgo/node_modules/commander": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+ "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+ "dev": true,
+ "engines": {
+ "node": ">= 10"
+ }
+ },
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6767,6 +6946,18 @@
"vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0"
}
},
+ "node_modules/vite-svg-loader": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
+ "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
+ "dev": true,
+ "dependencies": {
+ "svgo": "^3.0.2"
+ },
+ "peerDependencies": {
+ "vue": ">=3.2.13"
+ }
+ },
"node_modules/vitest": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.4.0.tgz",
diff --git a/FullstackProsjekt/src/frontend/package.json b/FullstackProsjekt/src/frontend/package.json
index 697013c6f4c061d90f89d1486f781003961d0d76..de3785797ed1ff54cd0121dca1c92213786fb63f 100644
--- a/FullstackProsjekt/src/frontend/package.json
+++ b/FullstackProsjekt/src/frontend/package.json
@@ -38,6 +38,7 @@
"start-server-and-test": "^2.0.3",
"vite": "^5.1.6",
"vite-plugin-vue-devtools": "^7.0.18",
+ "vite-svg-loader": "^5.1.0",
"vitest": "^1.4.0"
}
}
diff --git a/FullstackProsjekt/src/frontend/src/assets/Svg.vue b/FullstackProsjekt/src/frontend/src/assets/Svg.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b12767bce8e5d5fc5b80d5b0e6429f512b7a24c8
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/assets/Svg.vue
@@ -0,0 +1,29 @@
+<script setup>
+import {defineAsyncComponent} from "vue";
+
+const props = defineProps({
+ name:{
+ type:String, required:true
+ }
+})
+const icon = defineAsyncComponent(()=>
+ import((`../components/icons/${props.name}.svg`))
+)
+</script>
+
+
+<template>
+ <component class="icon" :is="icon"/>
+</template>
+
+<style>
+.icon{
+ height: 20px;
+ width: 20px;
+ display: inline-block;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ margin-left: 40px;
+}
+</style>
diff --git a/FullstackProsjekt/src/frontend/src/assets/icon.css b/FullstackProsjekt/src/frontend/src/assets/icon.css
deleted file mode 100644
index 629beb9e39ce336c748b8a7bc4960f9630961b68..0000000000000000000000000000000000000000
--- a/FullstackProsjekt/src/frontend/src/assets/icon.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.icon-home{
- background-image: url("../components/icons/home.png");
- height: 50px;
-}
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index e0c68bb8df53971b01ee34395dddad1b3ad4c53f..e722a4ebd87b8894923bd606446a554da972c31d 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -3,13 +3,12 @@ body {
margin: 0 0 0 27px;
background-color: #F2F2F2;
}
+
.space{
margin: 100px;
-
}
.table{
- width: 450px;
padding: 10px;
background-color: #dcdcdc;
}
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/about-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/about-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3222097f56c51e88a1d6733ede834a653875c131
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/about-icon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>about</title>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="about-white" fill="#000000" transform="translate(42.666667, 42.666667)">
+ <path d="M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z" id="Shape">
+
+</path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/analytics.png b/FullstackProsjekt/src/frontend/src/components/icons/analytics.png
deleted file mode 100644
index 9b99d65f1c8f59a3ab063398ce769a0c30e89eee..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/analytics.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/clock.png b/FullstackProsjekt/src/frontend/src/components/icons/clock.png
deleted file mode 100644
index 3726d6924237ade143e49cf7b98112c52b3a11ab..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/clock.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/cross.png b/FullstackProsjekt/src/frontend/src/components/icons/cross.png
deleted file mode 100644
index 91b567924d441b6f93bd0e0e9558c070a9d9374e..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/cross.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/dashboard-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/dashboard-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fecc302bcb28fc9445e2de966de0f3855aa14844
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/dashboard-icon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.918 10.0005H7.082C6.66587 9.99708 6.26541 10.1591 5.96873 10.4509C5.67204 10.7427 5.50343 11.1404 5.5 11.5565V17.4455C5.5077 18.3117 6.21584 19.0078 7.082 19.0005H9.918C10.3341 19.004 10.7346 18.842 11.0313 18.5502C11.328 18.2584 11.4966 17.8607 11.5 17.4445V11.5565C11.4966 11.1404 11.328 10.7427 11.0313 10.4509C10.7346 10.1591 10.3341 9.99708 9.918 10.0005Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.918 4.0006H7.082C6.23326 3.97706 5.52559 4.64492 5.5 5.4936V6.5076C5.52559 7.35629 6.23326 8.02415 7.082 8.0006H9.918C10.7667 8.02415 11.4744 7.35629 11.5 6.5076V5.4936C11.4744 4.64492 10.7667 3.97706 9.918 4.0006Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.082 13.0007H17.917C18.3333 13.0044 18.734 12.8425 19.0309 12.5507C19.3278 12.2588 19.4966 11.861 19.5 11.4447V5.55666C19.4966 5.14054 19.328 4.74282 19.0313 4.45101C18.7346 4.1592 18.3341 3.9972 17.918 4.00066H15.082C14.6659 3.9972 14.2654 4.1592 13.9687 4.45101C13.672 4.74282 13.5034 5.14054 13.5 5.55666V11.4447C13.5034 11.8608 13.672 12.2585 13.9687 12.5503C14.2654 12.8421 14.6659 13.0041 15.082 13.0007Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.082 19.0006H17.917C18.7661 19.0247 19.4744 18.3567 19.5 17.5076V16.4936C19.4744 15.6449 18.7667 14.9771 17.918 15.0006H15.082C14.2333 14.9771 13.5256 15.6449 13.5 16.4936V17.5066C13.525 18.3557 14.2329 19.0241 15.082 19.0006Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/dashboard.png b/FullstackProsjekt/src/frontend/src/components/icons/dashboard.png
deleted file mode 100644
index 6ce3fd0d231712806f93a68acdb95e2b8359bbee..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/dashboard.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/eye.png b/FullstackProsjekt/src/frontend/src/components/icons/eye.png
deleted file mode 100644
index afa5d381338d9b10d4a6c6e3cc8e229f5c2ae159..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/eye.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/feedback-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/feedback-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..94a68b769302a7fa34d5e5e6214be6555fb4b46e
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/feedback-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 1C17.6569 1 19 2.34315 19 4C19 4.55228 18.5523 5 18 5C17.4477 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H16C16.5523 21 17 20.5523 17 20V19C17 18.4477 17.4477 18 18 18C18.5523 18 19 18.4477 19 19V20C19 21.6569 17.6569 23 16 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H16Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7991 8.20087C20.4993 7.90104 20.0132 7.90104 19.7133 8.20087L11.9166 15.9977C11.7692 16.145 11.6715 16.3348 11.6373 16.5404L11.4728 17.5272L12.4596 17.3627C12.6652 17.3285 12.855 17.2308 13.0023 17.0835L20.7991 9.28666C21.099 8.98682 21.099 8.5007 20.7991 8.20087ZM18.2991 6.78666C19.38 5.70578 21.1325 5.70577 22.2134 6.78665C23.2942 7.86754 23.2942 9.61999 22.2134 10.7009L14.4166 18.4977C13.9744 18.9398 13.4052 19.2327 12.7884 19.3355L11.8016 19.5C10.448 19.7256 9.2744 18.5521 9.50001 17.1984L9.66448 16.2116C9.76728 15.5948 10.0602 15.0256 10.5023 14.5834L18.2991 6.78666Z" fill="#0F0F0F"/>
+<path d="M5 7C5 6.44772 5.44772 6 6 6H14C14.5523 6 15 6.44772 15 7C15 7.55228 14.5523 8 14 8H6C5.44772 8 5 7.55228 5 7Z" fill="#0F0F0F"/>
+<path d="M5 11C5 10.4477 5.44772 10 6 10H10C10.5523 10 11 10.4477 11 11C11 11.5523 10.5523 12 10 12H6C5.44772 12 5 11.5523 5 11Z" fill="#0F0F0F"/>
+<path d="M5 15C5 14.4477 5.44772 14 6 14H7C7.55228 14 8 14.4477 8 15C8 15.5523 7.55228 16 7 16H6C5.44772 16 5 15.5523 5 15Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/feedback.png b/FullstackProsjekt/src/frontend/src/components/icons/feedback.png
deleted file mode 100644
index 32e3bf46baaccece92ec2c30b09335b0817c0ea9..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/feedback.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/hide-password-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/hide-password-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a48c56d5bdc6b7d696033898e1a522c1f424f4b4
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/hide-password-icon.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M2.99902 3L20.999 21M9.8433 9.91364C9.32066 10.4536 8.99902 11.1892 8.99902 12C8.99902 13.6569 10.3422 15 11.999 15C12.8215 15 13.5667 14.669 14.1086 14.133M6.49902 6.64715C4.59972 7.90034 3.15305 9.78394 2.45703 12C3.73128 16.0571 7.52159 19 11.9992 19C13.9881 19 15.8414 18.4194 17.3988 17.4184M10.999 5.04939C11.328 5.01673 11.6617 5 11.9992 5C16.4769 5 20.2672 7.94291 21.5414 12C21.2607 12.894 20.8577 13.7338 20.3522 14.5" stroke="#242F40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/home-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/home-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d9f3ee33ac24aa9fab9c90ae04fd8a236260628d
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/home-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 22L2 22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M2 11L6.06296 7.74968M22 11L13.8741 4.49931C12.7784 3.62279 11.2216 3.62279 10.1259 4.49931L9.34398 5.12486" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M4 22V9.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M20 9.5V13.5M20 22V17.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393M9 22V17" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/home.png b/FullstackProsjekt/src/frontend/src/components/icons/home.png
deleted file mode 100644
index a8ddbd0fd7d3ff66de387e049eba4a40d0aec3c3..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/home.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/info-button.png b/FullstackProsjekt/src/frontend/src/components/icons/info-button.png
deleted file mode 100644
index 777599267a569f0abcce41d5166712044da4e5d8..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/info-button.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/login-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/login-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f8b781c5f1a77ef8e461281a9aafffa369704234
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/login-icon.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.00098 11.999L16.001 11.999M16.001 11.999L12.501 8.99902M16.001 11.999L12.501 14.999" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.2429 22 18.8286 22 16.0002 22H15.0002C12.1718 22 10.7576 22 9.87889 21.1213C9.11051 20.3529 9.01406 19.175 9.00195 17" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/menu-burger.png b/FullstackProsjekt/src/frontend/src/components/icons/menu-burger.png
deleted file mode 100644
index 71dc200e10a3163158a379775c85eceac567c5d0..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/menu-burger.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/plus.png b/FullstackProsjekt/src/frontend/src/components/icons/plus.png
deleted file mode 100644
index 8854e5d431975ae42efc0392766057959f157eb6..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/plus.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/show-password-icon.svg b/FullstackProsjekt/src/frontend/src/components/icons/show-password-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e06070c99f8a7ace0fa4ceef59445c983fbc69bd
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/show-password-icon.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="#242F40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="#242F40" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/user.png b/FullstackProsjekt/src/frontend/src/components/icons/user.png
deleted file mode 100644
index 2fc27b91470c89c962e92f808f82a411b16319b8..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/user.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
index a6a6af34ac1785546260d93e85c5dcd0f420f556..f31870d1a79b56bb8d5b67a8b0dfc5e3131e1cd7 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
@@ -1,16 +1,31 @@
<script>
-import {collapsed, toggleSideBar, sidebarWidth} from "@/components/shared/sidebar/state.js";
+import { collapsed, toggleSideBar, sidebarWidth } from "@/components/shared/sidebar/state.js";
import SidebarLink from "@/components/shared/sidebar/SidebarLink.vue";
+import Svg from "@/assets/Svg.vue";
export default {
- components: {SidebarLink},
+ components: {Svg, SidebarLink},
props: {},
setup() {
- return{ collapsed,toggleSideBar,sidebarWidth }
+ const handleClickOutside = (event) => {
+ const sidebar = document.querySelector('.sidebar');
+ if (sidebar && !sidebar.contains(event.target)) {
+ collapsed.value = true; // Collapse the sidebar
+ }
+ }
+
+ document.addEventListener('click', handleClickOutside);
+
+ const beforeUnmount = () => {
+ document.removeEventListener('click', handleClickOutside);
+ };
+
+ return { collapsed, toggleSideBar, sidebarWidth, beforeUnmount };
}
}
</script>
+
<template>
<div class="sidebar" :style="{width: sidebarWidth}">
<h1>
@@ -23,13 +38,14 @@ export default {
</span>
</h1>
- <SidebarLink to="/" icon="fas fa-home">Home</SidebarLink>
- <SidebarLink to="/dashboard" icon="fas fa-columns">Dashboard</SidebarLink>
- <SidebarLink to="/about" icon="fas fa-chart-bar">About</SidebarLink>
- <SidebarLink to="/feedback" icon="fas fa-users">Feedback</SidebarLink>
- <SidebarLink to="/login" icon="fas fa-image">Login</SidebarLink>
+ <SidebarLink to="/" icon="home-icon">Home</SidebarLink>
+ <SidebarLink to="/dashboard" icon="dashboard-icon">Dashboard</SidebarLink>
+ <SidebarLink to="/about" icon="about-icon">About</SidebarLink>
+ <SidebarLink to="/feedback" icon="feedback-icon">Feedback</SidebarLink>
+ <SidebarLink to="/login" icon="login-icon">Login</SidebarLink>
<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
+ <Svg name="sidebar-arrow.png" class="icon"/>
<button class="iconButton"> <img id="icon" src="../../icons/sidebar-arrow.png"/> </button>
</span>
</div>
@@ -57,7 +73,7 @@ export default {
bottom: 0;
padding: 0.5rem;
- transition: 0.3s ease;
+ transition: 0.25s ease;
display: flex;
flex-direction: column;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
index 8555eca13ae60bbc4664a2500c76d106d885e359..23c1b48275745a2e7dfef436f95ab61c763d544f 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
@@ -2,8 +2,10 @@
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { collapsed } from './state.js'
+import Svg from "@/assets/Svg.vue";
export default {
+ components: {Svg},
props: {
to: { type: String, required: true },
icon: { type: String, required: true }
@@ -18,7 +20,7 @@ export default {
<template>
<router-link :to="to" class="link" :class="{ active: isActive }">
- <i class="icon" :class="icon" />
+ <Svg name="icon" :class="icon"/>
<transition name="fade">
<span v-if="!collapsed">
<slot />
@@ -27,17 +29,8 @@ export default {
</router-link>
</template>
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
- transition: opacity 0.1s;
-}
-
-.fade-enter,
-.fade-leave-to {
- opacity: 0;
-}
+<style scoped>
.link {
display: flex;
align-items: center;
@@ -65,9 +58,5 @@ export default {
color: #242F40;
}
-.link .icon {
- flex-shrink: 0;
- width: 25px;
- margin-right: 10px;
-}
+
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/main.js b/FullstackProsjekt/src/frontend/src/main.js
index 342d0a314f3fa2238239ff84e997c28196dd936c..31f1da8e07e5d8b2e9351af5fa57b71bb79c687b 100644
--- a/FullstackProsjekt/src/frontend/src/main.js
+++ b/FullstackProsjekt/src/frontend/src/main.js
@@ -1,5 +1,6 @@
import './assets/main.css'
+
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import "../src/assets/axios.js";
diff --git a/FullstackProsjekt/src/frontend/src/views/AboutView.vue b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
index b1574d2dbb242800d7bca30c551e5740f50ec7b7..74dede255c285ad028a918bc3de6d2ac221a3233 100644
--- a/FullstackProsjekt/src/frontend/src/views/AboutView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
@@ -1,8 +1,13 @@
<script setup>
+import Svg from '../assets/Svg.vue'
</script>
<template>
<body>
<h1> This is about page</h1>
</body>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index e62d15ee4f71331307cac86dbdad81f52b3ff268..644da8f5280e7d7ce9a7e92921ccd00a954abbe7 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -3,13 +3,19 @@
<template>
<body class="dashboard">
- <h1>Dashboard</h1>
- <input class="searchBox" placeholder="Search for category..."> <br>
- <router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link>
+ <div class="top-bar">
+
+ <div class="search-container">
+ <input class="searchBox" placeholder="Search for category...">
+ </div> <br>
+ <div class="create-container">
+ <router-link to="/overviewQuiz" class="create-btn">CREATE QUIZ</router-link>
+ </div>
+
+ </div>
<div class="row">
<div class="course-col">
<h3>Quiz 1</h3>
- <img id="quizImg" src="../components/photos/background.png"/>
<p>Insert photo </p>
</div>
<div class="course-col">
@@ -45,25 +51,41 @@
.dashboard{
padding: 20px;
}
+.top-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.search-container {
+ flex-grow: 1; /* Grow to take available space */
+ margin-right: 10px; /* Adjust margin between search box and button */
+}
+
+.create-container {
+ flex-shrink: 0; /* Do not shrink */
+}
.searchBox{
width: 250px;
padding: 10px;
- margin-bottom: 50px;
+ margin: 0 auto; /* Center horizontally */
+ display: block;
+ text-align: center;
}
-.hero-btn{
- display: inline-block;
+.create-btn{
text-decoration: none;
- color: #242F40;
- border: 1px solid #242F40;
+ color: #E5E5E5;
padding: 12px 34px;
font-size: 16px;
- background: transparent;
- position: relative;
cursor: pointer;
+ margin-bottom: 60px;
+ background-color: #242F40;
}
-.hero-btn:hover{
+.create-btn:hover{
border: 1px solid #CCA43B;
+ color: #242F40;
background: #CCA43B;
transition: 1s;
}
@@ -86,12 +108,6 @@
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}
-#quizImg{
- height: 200px;
- border-radius: 5px;
- display: flex;
-
-}
@media (max-width: 700px){
.text-box h1{
@@ -101,6 +117,9 @@
.row{
flex-direction: column;
}
+ .create-btn{
+ display: flex;
+ }
}
</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index b1d8fe14b161351441473defd4a85435fc4782c6..8f566717704a95cafa327feb55eb25236dcdfd64 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -1,5 +1,7 @@
<script>
+import Svg from '../assets/Svg.vue'
+
export default {
data() {
return {
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index c8eed39c4def7e9727e471d66624f60f50cd89e1..3d9894d15b5d79e7c0d3e5af9dcab8edc0dc2420 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -1,122 +1,131 @@
<script>
import axios from "axios";
+import Svg from "@/assets/Svg.vue";
export default {
name: 'Login',
+ components: {Svg},
data() {
return {
email: '',
password: '',
+ showPassword: false // Add showPassword property
}
},
- methods:{
- async handleSubmit(){
+ methods: {
+ async handleSubmit() {
const response = await axios.post('login', {
email: this.email,
password: this.password
});
localStorage.setItem('token', response.data.token)
-
+ },
+ togglePasswordVisibility() {
+ this.showPassword = !this.showPassword;
}
}
}
</script>
-
<template>
- <body >
-
+ <body>
<div class="loginPage">
- <form @submit.prevent="handleSubmit">
- <div class="login">
- <h1 id="login">Login</h1>
- <p> Sign in to your already existing account</p>
- <div class="loginBox">
- <label>Email</label> <br>
- <input type="email" placeholder="JohnDoe@email.com" required v-model="email" /> <br>
- <label>Password</label> <br>
- <input type="password" required v-model="password" /> <br>
- <router-link to="/signup" id="signUpLink">SIGNUP</router-link>
- </div>
- </div>
- <div class="submit-section">
- <input id="submit" type="submit"/>
- </div>
- </form>
+ <form @submit.prevent="handleSubmit">
+ <div class="login">
+ <h1 id="login">Login</h1>
+ <p> Sign in to your already existing account</p>
+ <div class="loginBox">
+ <label>Email</label> <br>
+ <input type="email" placeholder="JohnDoe@email.com" required v-model="email"/> <br>
+ <label>Password</label> <br>
+ <input :type="showPassword ? 'text' : 'password'" required v-model="password"/>
+ <button type="button" class="showPasswordIcon" @click="togglePasswordVisibility">
+ <Svg v-if="showPassword" :name="'hide-password-icon'" />
+ <Svg v-else :name="'show-password-icon'" />
+ </button><br>
+ <router-link to="/signup" id="signUpLink">SIGNUP</router-link>
+ </div>
+ </div>
+ <div class="submit-section">
+ <input id="submit" type="submit"/>
+ </div>
+ </form>
</div>
-
</body>
</template>
+<style>
+.loginPage {
+ padding-top: 85px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- <style>
- .loginPage {
- padding-top: 85px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .login {
- text-align: center;
- padding: 20px;
- border-radius: 15px;
- align-items: center;
- border-style: solid;
- margin: 20px;
- max-width: 450px;
- }
-
- .loginBox {
- padding: 20px;
- }
+.login {
+ text-align: center;
+ padding: 20px;
+ border-radius: 15px;
+ align-items: center;
+ border-style: solid;
+ margin: 20px;
+ max-width: 450px;
+}
- label {
- display: inline-block;
- margin-right: 10px;
- font-weight: bold;
- }
+.loginBox {
+ padding: 20px;
+}
- input {
- padding: 5px;
- border-radius: 5px;
- border: none;
- min-width: 250px;
- background-color: #E5E5E5;
- margin: 10px;
- }
+label {
+ display: inline-block;
+ margin-right: 10px;
+ font-weight: bold;
+}
- input::placeholder {
- color: #b0b0b0;
- }
+input {
+ padding: 5px;
+ border-radius: 5px;
+ border: none;
+ min-width: 250px;
+ background-color: #E5E5E5;
+ margin: 10px;
+}
- #signUpLink{
- color: #CCA43B;
- padding: 10px;
- }
+input::placeholder {
+ color: #b0b0b0;
+}
+.showPasswordIcon{
+ border-color: transparent;
+ cursor: pointer;
+ margin-left: 0;
+}
+#signUpLink {
+ color: #CCA43B;
+ padding: 10px;
+}
- .submit-section {
- display: flex;
- justify-content: center;
- align-items: center;
- }
+.submit-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- #submit {
- min-width: 150px;
- min-height: 60px;
- font-size: 24px;
- border-radius: 6px;
- background-color: #242F40;
- color: white;
- border: none;
- cursor: pointer;
- margin-top: 20px;
- }
+#submit {
+ min-width: 150px;
+ min-height: 60px;
+ font-size: 24px;
+ border-radius: 6px;
+ background-color: #242F40;
+ color: white;
+ border: none;
+ cursor: pointer;
+ margin-top: 20px;
+}
- #submit:hover:enabled {
- background-color: rgba(23, 55, 44, 0.9);
- transition: 0.5s;
- }
+#submit:hover:enabled {
+ background-color: rgba(23, 55, 44, 0.9);
+ transition: 0.5s;
+}
- </style>
+</style>
diff --git a/FullstackProsjekt/src/frontend/src/views/SignupView.vue b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
index 4b902b8a6991eada770d82cbb459d8e407c6b05f..2cea418225aab581fe7fd48766b5e1a9b6d105d7 100644
--- a/FullstackProsjekt/src/frontend/src/views/SignupView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
@@ -1,5 +1,6 @@
<script>
+ import Svg from '../assets/Svg.vue'
import axios from "axios";
export default {
name: 'Register',
@@ -45,9 +46,9 @@
<label>Email</label> <br>
<input type="email" required v-model="email" placeholder="JohnDoe@email.com"/> <br>
<label>Password</label> <br>
- <input type="password" required v-model="password" /> <br>
+ <input type="text" required v-model="password" /> <br>
<label>Confirm Password</label> <br>
- <input type="password" required v-model="password_confirm" /> <br>
+ <input type="text" required v-model="password_confirm" /> <br>
</div>
</div>
<div class="submit-section">
diff --git a/FullstackProsjekt/src/frontend/vite.config.js b/FullstackProsjekt/src/frontend/vite.config.js
index ca4f95a56c0f693dcd56717c28fa9d1edc627f9e..4c6d275b3a8e0e7a236a2ca0119805ff0b4b47c0 100644
--- a/FullstackProsjekt/src/frontend/vite.config.js
+++ b/FullstackProsjekt/src/frontend/vite.config.js
@@ -3,12 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
+import svgLoader from 'vite-svg-loader'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VueDevTools(),
+ svgLoader()
],
resolve: {
alias: {