diff --git a/package-lock.json b/package-lock.json
index bf8401f585cf13c85d81e6a8f01912a151578266..894267d8427354bf139f24226b19df82101d6cf5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@heroicons/vue": "^1.0.6",
"@mdi/font": "5.9.55",
+ "@vue-hero-icons/outline": "^1.7.2",
"@vuelidate/core": "^2.0.0-alpha.40",
"@vuelidate/validators": "^2.0.0-alpha.28",
"axios": "^0.26.1",
@@ -2826,6 +2827,14 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/@vue-hero-icons/outline": {
+ "version": "1.7.2",
+ "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+ "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+ "dependencies": {
+ "babel-helper-vue-jsx-merge-props": "^2.0.3"
+ }
+ },
"node_modules/@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"dev": true,
@@ -4171,6 +4180,11 @@
"follow-redirects": "^1.14.8"
}
},
+ "node_modules/babel-helper-vue-jsx-merge-props": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+ "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+ },
"node_modules/babel-jest": {
"version": "27.5.1",
"dev": true,
@@ -16880,6 +16894,14 @@
"version": "21.0.0",
"dev": true
},
+ "@vue-hero-icons/outline": {
+ "version": "1.7.2",
+ "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+ "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+ "requires": {
+ "babel-helper-vue-jsx-merge-props": "^2.0.3"
+ }
+ },
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"dev": true
@@ -17766,6 +17788,11 @@
"follow-redirects": "^1.14.8"
}
},
+ "babel-helper-vue-jsx-merge-props": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+ "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+ },
"babel-jest": {
"version": "27.5.1",
"dev": true,
diff --git a/package.json b/package.json
index 66788b9ffdf616d6288db4223c4c69ed8106e191..e02ef530fc185de6dac101e77ea5d312fc4374b0 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"@heroicons/vue": "^1.0.6",
"@mdi/font": "5.9.55",
+ "@vue-hero-icons/outline": "^1.7.2",
"@vuelidate/core": "^2.0.0-alpha.40",
"@vuelidate/validators": "^2.0.0-alpha.28",
"axios": "^0.26.1",
diff --git a/public/favicon.ico b/public/favicon.ico
index 2bbee9c7589aa7943fe472849934b7f220ed43cd..d899f3ca760e7fa3736c98bba9641cc472e4da64 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/additem.png b/src/assets/additem.png
deleted file mode 100644
index 90717a87fef71f1c0a37ba3b80150954f52673c0..0000000000000000000000000000000000000000
Binary files a/src/assets/additem.png and /dev/null differ
diff --git a/src/assets/members.png b/src/assets/members.png
deleted file mode 100644
index 51775f6bead51014d3143631c292421752d024b6..0000000000000000000000000000000000000000
Binary files a/src/assets/members.png and /dev/null differ
diff --git a/src/assets/messages.png b/src/assets/messages.png
deleted file mode 100644
index b8c15889efc747b700220ca819b2c12caa09e780..0000000000000000000000000000000000000000
Binary files a/src/assets/messages.png and /dev/null differ
diff --git a/src/assets/newCommunity.png b/src/assets/newCommunity.png
deleted file mode 100644
index 73bfba9f8000cecabb461394d7fe2f6b90c02b56..0000000000000000000000000000000000000000
Binary files a/src/assets/newCommunity.png and /dev/null differ
diff --git a/src/assets/notifications.png b/src/assets/notifications.png
deleted file mode 100644
index a612605af4bc91be42f5989632fb3287aac7bbfd..0000000000000000000000000000000000000000
Binary files a/src/assets/notifications.png and /dev/null differ
diff --git a/src/assets/profile.png b/src/assets/profile.png
deleted file mode 100644
index 79b3e5f3624b8db0593ca77997f52633c34f7de9..0000000000000000000000000000000000000000
Binary files a/src/assets/profile.png and /dev/null differ
diff --git a/src/assets/removeIcon.png b/src/assets/removeIcon.png
deleted file mode 100644
index 3c66b2a75ff7d81fd33622bf13a903f838f114ee..0000000000000000000000000000000000000000
Binary files a/src/assets/removeIcon.png and /dev/null differ
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index a14c390128eea359968f895e823ecc620be36645..4299b4fb75df6e6e739f1ba49c8f925ff3c21734 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -12,25 +12,22 @@
</div>
<ul class="flex">
<li>
- <img
+ <PlusIcon
class="m-6 cursor-pointer h-7"
- src="../../assets/additem.png"
alt="Legg til"
@click="$router.push('/addNewItem')"
/>
</li>
<li>
- <img
+ <ChatAlt2Icon
class="m-6 cursor-pointer h-7"
- src="../../assets/messages.png"
alt="Meldinger"
@click="$router.push('/messages')"
/>
</li>
<li>
- <img
+ <UserCircleIcon
class="m-6 cursor-pointer h-7"
- src="../../assets/profile.png"
alt="Profil"
@click="loadProfile"
/>
@@ -41,10 +38,17 @@
<script>
import { parseUserFromToken } from "@/utils/token-utils";
+import {PlusIcon, ChatAlt2Icon, UserCircleIcon} from "@heroicons/vue/outline";
export default {
name: "NavBar.vue",
+ components:{
+ PlusIcon,
+ ChatAlt2Icon,
+ UserCircleIcon,
+ },
+
methods: {
async loadProfile() {
if (this.$store.state.user.token !== null) {
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 3973a7150e78a731c03457dc4ba5c6ae45a4416a..1181886de152acbe09fd32f0a8ec1ef83892dd96 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,5 @@
<template>
- <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
+ <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
<!-- Component heading -->
<h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
@@ -158,13 +158,6 @@
</button> -->
<!-- Button for removing an image -->
- <button
- class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
- v-show="imageAdded"
- @click="removeImage"
- >
- <img src="../../assets/removeIcon.png" alt="Remove icon image" />
- </button>
</div>
<!-- Div box for showing all chosen images -->
@@ -174,7 +167,7 @@
</div>
<!-- Save item button -->
- <div class="flex justify-center mt-10">
+ <div class="flex justify-center mt-10 float-right">
<Button
@click="saveClicked"
id="saveButton"
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9e52408f85d5623f1706b998dd77f457d6baba22..d4357ece0b3edda8be6672925ad64bf59c3391a2 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,7 +1,7 @@
<template>
- <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
+ <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
<!-- Component heading -->
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
+ <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
<!-- Title -->
<div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index f3259d7e0976297467fba469ab74b43a6e386b8b..cb51ca9932065456e7d10fa59dcf865d34098141 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,5 +1,5 @@
<template>
- <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
+ <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
<div class="px-6 py-4 mt-4">
<h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Logg på</h3>
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 55599fee7a5ff53de223645d460d98186dfe3604..667da928ac0430fea928a78723f73af715622209 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -1,7 +1,10 @@
<template>
<div
- class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
+
+ <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</h3>
+
<div
id="firstPasswordField"
:class="{ error: v$.user.password.$errors.length }"
@@ -14,7 +17,7 @@
<input
type="password"
v-model="v$.user.password.$model"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
/>
<!-- error message -->
<div v-for="(error, index) of v$.user.password.$errors" :key="index">
@@ -44,7 +47,7 @@
<input
type="password"
v-model="v$.user.rePassword.$model"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
/>
<!-- error message -->
<div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
@@ -59,25 +62,27 @@
</div>
<div id="buttonsField" class="mt-6">
- <button
+ <Button
+ class="float-right"
@click="setNewPassword"
- class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
- >
- Endre passord
- </button>
+ :text="'Sett ny passord'"
+ />
</div>
</div>
</template>
<script>
import useVuelidate from "@vuelidate/core";
-import { required, minLength, sameAs } from "@vuelidate/validators";
+import { required, minLength, sameAs, helpers } from "@vuelidate/validators";
import { doNewPassword } from "@/utils/apiutil";
import { mapState } from "vuex";
+import Button from "@/components/BaseComponents/ColoredButton";
export default {
name: "NewPasswordForm.vue",
+ components:{
+ Button,},
setup() {
return { v$: useVuelidate() };
},
@@ -85,13 +90,12 @@ export default {
return {
user: {
password: {
- required,
- minLength: minLength(8),
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
+ minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
},
rePassword: {
- required,
- minLength: minLength(8),
- sameAs: sameAs(this.user.password),
+ sameAs: helpers.withMessage('Passordene må være like', sameAs(this.user.password)),
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
},
},
};
@@ -129,7 +133,7 @@ export default {
if (newPasswordResponse.newPasswordSet === true) {
console.log("New password set");
- await this.$router.push("/endre");
+ await this.$router.push("/");
} else if (newPasswordResponse.newPasswordSet === false) {
console.log("Couldn't set new password");
} else {
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 5eef8afa9a6e08b2828e0b665dc125f7e22138c9..a95929b191f876e2a8cb9f9665216eb17d3bf1b8 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,6 +1,6 @@
<template>
<div
- class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
+ class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
<h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny bruker</h3>
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index fa75650e93ef002ca97c3eebe85a567c0581efa4..a3232e339f78a7ce82eee0a3199b966d9bc90178 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -1,5 +1,8 @@
<template>
- <div class="resetPassword">
+ <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+
+ <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</h3>
+
<div
id="emailField"
class="m-6"
@@ -14,10 +17,11 @@
<input
type="email"
id="email"
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
placeholder="eksempel@eksempel.no"
v-model="v$.email.$model"
required
+ @keyup.enter="sendHome"
/>
<!-- error message -->
<div v-for="(error, index) of v$.email.$errors" :key="index">
@@ -30,22 +34,27 @@
</div>
</div>
</div>
+ <Button
+ class="float-right"
+ @click="sendHome"
+ :text="'Tilbakestill passord'"
+ />
</div>
- <button
- @click="sendHome"
- class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
- >
- Send e-post
- </button>
+
</div>
</template>
<script>
import useVuelidate from "@vuelidate/core";
import { required, email, helpers } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
+
export default {
name: "ResetPassword.vue",
+ components:{
+ Button,
+ },
data() {
return {
showError: false,
@@ -58,7 +67,7 @@ export default {
validations() {
return {
email: {
- required,
+ required: helpers.withMessage('Feltet må være utfylt', required),
email: helpers.withMessage(`E-posten er ugyldig`, email),
},
};
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 5d8f87603e1cbe47fb7d30fb6a499d2be05731f7..11d8aa5d04e24e9a9e306cdc4cc0fa3dff2a5c6f 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -27,7 +27,7 @@
v-show="dropdown"
class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 "
>
- <ul class="py-1 absolute bg-white" aria-labelledby="dropdownDefault">
+ <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
<li>
<router-link
to=""
diff --git a/src/views/CommunityViews/NewCommunityView.vue b/src/views/CommunityViews/NewCommunityView.vue
index 38eacf3ba70f4df9c97093d2e5712fb961dc4c4d..f78ccde49e36551c8f47530ef8ed51bd944ce1a1 100644
--- a/src/views/CommunityViews/NewCommunityView.vue
+++ b/src/views/CommunityViews/NewCommunityView.vue
@@ -1,5 +1,8 @@
<template>
- <NewCommunity />
+ <div class="h-screen grid md:mt-8">
+ <NewCommunity />
+ </div>
+
</template>
<script>
diff --git a/src/views/CommunityViews/NewItemView.vue b/src/views/CommunityViews/NewItemView.vue
index 8bbca71dd407668fe3de9abd0720d41eeea1c508..172ba809e4d552ba05319941ed1921b859e7ac28 100644
--- a/src/views/CommunityViews/NewItemView.vue
+++ b/src/views/CommunityViews/NewItemView.vue
@@ -1,5 +1,8 @@
<template>
- <AddNewItem></AddNewItem>
+ <div class="h-screen grid md:mt-8">
+ <AddNewItem/>
+ </div>
+
</template>
<script>
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 09d909a1ab309b57dcded51cf99cf8f96d0742c3..a9ed621ce4caf797b5482b014e707429d27712a1 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="h-screen grid">
+ <div class="h-screen grid md:mt-8">
<LoginForm></LoginForm>
</div>
</template>
diff --git a/src/views/FormViews/NewPasswordView.vue b/src/views/FormViews/NewPasswordView.vue
index 710ce20f0fc1b334635f7703bb2c74902ec93bca..1c08586c58f04a984fa22a5af77219c79907c145 100644
--- a/src/views/FormViews/NewPasswordView.vue
+++ b/src/views/FormViews/NewPasswordView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="newPasswordPage">
+ <div class="h-screen grid md:mt-8">
<NewPasswordForm></NewPasswordForm>
</div>
</template>
@@ -13,11 +13,3 @@ export default {
},
};
</script>
-
-<style scoped>
-.newPasswordPage {
- background-color: white;
- height: 100%;
- overflow: auto;
-}
-</style>
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index 2b431f1d01e0312d4b450f11b18ea78c5a033d70..93013987e5e31384c4391768e5468a6bc77df35d 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="h-screen grid">
+ <div class="h-screen grid md:mt-8">
<RegisterFormComponent />
</div>
</template>
diff --git a/src/views/FormViews/ResetPasswordView.vue b/src/views/FormViews/ResetPasswordView.vue
index 2345d329aafdc34d561fc78a8a965639e9304c1c..284c4fe3582728f817ad5fb7b6fbb98373dd38dc 100644
--- a/src/views/FormViews/ResetPasswordView.vue
+++ b/src/views/FormViews/ResetPasswordView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="resetPassword">
+ <div class="h-screen grid md:mt-8">
<ResetPassword></ResetPassword>
</div>
</template>
@@ -13,11 +13,3 @@ export default {
},
};
</script>
-
-<style scoped>
-.resetPassword {
- background-color: white;
- height: 100%;
- overflow: auto;
-}
-</style>
diff --git a/vue.config.js b/vue.config.js
index 3ec0170c3cb07b201b38bd62b0da6f140b0713a9..e77733af29c6ce1ad2798aee7bb9f3b932f7635f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,7 +4,7 @@ module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
- args[0].title = "Borrow Company";
+ args[0].title = "Borrow Community";
return args;
});
},