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/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
index 74091bb360a25e7d489994c4aded8e59544445e5..842c89e97c17bdc5bf5e35149be61c93449e45ed 100644
--- a/src/components/BaseComponents/ColoredButton.vue
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -1,6 +1,6 @@
<template>
<button
- class="block 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 px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
>
{{ text }}
</button>
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index 120cfe434e692a74fb3567f5e1d9c8350c2f5d72..9d36eafc7790593410c54a64a51c3406cb1eeed7 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -31,27 +31,44 @@
<!-- If the user is not a member in the community, this button will show -->
<div v-if="!member">
<ColoredButton
- v-if="!member"
- :text="'Bli med'"
- @click="joinCommunity(community.communityId)"
- class="m-2"
+ v-if="!member"
+ :text="'Bli med'"
+ @click="joinCommunity(community.communityId)"
+ class="m-2"
/>
- <CustomFooterModal
+ <CustomFooterModal
@close="this.dialogOpen = false"
:visible="dialogOpen"
title="Kan ikke bli med"
message="Logg inn først for å bli med i en gruppe."
- />
+ />
</div>
<!-- If the user is member of the community, this hamburger menu will show -->
<div v-if="member">
- <svg @click="toggle" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
- </svg>
+ <svg
+ @click="toggle"
+ xmlns="http://www.w3.org/2000/svg"
+ class="w-9 h-9 cursor-pointer"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M4 6h16M4 12h16M4 18h16"
+ />
+ </svg>
- <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+ <CommunityHamburger
+ v-if="hamburgerOpen"
+ class="origin-top-right absolute right-0"
+ :community-i-d="community.communityId"
+ />
+ <!-- class="absolute" -->
</div>
</div>
</div>
@@ -60,7 +77,10 @@
<script>
import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
import ColoredButton from "@/components/BaseComponents/ColoredButton";
-import { JoinOpenCommunity, GetIfUserAlreadyInCommunity } from "@/utils/apiutil";
+import {
+ JoinOpenCommunity,
+ GetIfUserAlreadyInCommunity,
+} from "@/utils/apiutil";
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
export default {
@@ -70,12 +90,12 @@ export default {
ColoredButton,
CustomFooterModal,
},
- data(){
- return{
+ data() {
+ return {
hamburgerOpen: false,
dialogOpen: false,
member: true,
- }
+ };
},
props: {
adminStatus: Boolean,
@@ -86,37 +106,37 @@ export default {
visibility: Number,
location: String,
picture: String,
- }
+ },
},
methods: {
//To open and close the hamburger menu
- toggle: function (){
- if(this.hamburgerOpen){
+ toggle: function () {
+ if (this.hamburgerOpen) {
this.hamburgerOpen = false;
- }
- else{
+ } else {
this.hamburgerOpen = true;
}
},
- joinCommunity: async function(id){
+ joinCommunity: async function (id) {
const response = await JoinOpenCommunity(id);
- if(response === "Login to join any community"){
+ if (response === "Login to join any community") {
this.dialogOpen = true;
- }
- else{
+ } else {
window.location.reload();
}
},
- getIfUserInCommunity: async function(){
- try{
- this.member = await GetIfUserAlreadyInCommunity(this.$router.currentRoute.value.params.communityID);
- } catch (error){
+ getIfUserInCommunity: async function () {
+ try {
+ this.member = await GetIfUserAlreadyInCommunity(
+ this.$router.currentRoute.value.params.communityID
+ );
+ } catch (error) {
console.log(error);
}
- }
+ },
},
beforeMount() {
this.getIfUserInCommunity();
- }
+ },
};
</script>
diff --git a/src/components/BaseComponents/CustomFooterModal.vue b/src/components/BaseComponents/CustomFooterModal.vue
index 8a6e57ca1707d02d53ab57a00b3c2626587f146d..e9b5467276a554a723968b7a48581428a9df78ea 100644
--- a/src/components/BaseComponents/CustomFooterModal.vue
+++ b/src/components/BaseComponents/CustomFooterModal.vue
@@ -2,7 +2,7 @@
<!-- Main modal -->
<div
v-if="visible"
- class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
>
<div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
<!-- Modal content -->
diff --git a/src/components/BaseComponents/IconButton.vue b/src/components/BaseComponents/IconButton.vue
index 4bacbdf64c9f36c6ce5e9bc29146e24737f55ea4..973f04c78f374cdb6f8e728c59bd416d1aca4cf8 100644
--- a/src/components/BaseComponents/IconButton.vue
+++ b/src/components/BaseComponents/IconButton.vue
@@ -1,7 +1,7 @@
<template>
<!-- Icon button -->
<button
- class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
>
<div class="flex flex-row px-5 py-2.5 h-10">
<!-- Icon slot: Default content "Ban"-icon -->
diff --git a/src/components/BaseComponents/InputField.vue b/src/components/BaseComponents/InputField.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6cbb32e98ed5e1f94ec9b784ea492b9b138048e
--- /dev/null
+++ b/src/components/BaseComponents/InputField.vue
@@ -0,0 +1,11 @@
+<template>
+ <input
+ 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"
+ />
+</template>
+
+<script>
+export default {
+ name: "InputField",
+};
+</script>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index a14c390128eea359968f895e823ecc620be36645..58020e292abccaa07ac2e7cfa6d66f30961e42fc 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,6 +1,6 @@
<template>
<nav
- class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+ class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
>
<div class="logo">
<img
@@ -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')"
+ @click="$router.push('/newItem')"
/>
</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/BaseComponents/NotificationModal.vue b/src/components/BaseComponents/NotificationModal.vue
index 5883ed10714253ab7a6ffe1f0416c5af75f5166a..1fa362f504d38cb7380d0ad26a1f8316c74fe823 100644
--- a/src/components/BaseComponents/NotificationModal.vue
+++ b/src/components/BaseComponents/NotificationModal.vue
@@ -2,7 +2,7 @@
<!-- Main modal -->
<div
v-if="visible"
- class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
>
<div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
<!-- Modal content -->
diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index d3e016a3d4b947d0b90cedb3ea9e07093a47a206..d6996776b48e22224434b1696f64e2cdb5fa3aef 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -34,7 +34,9 @@ export default {
methods: {
color() {
console.log(this.userID);
- return this?.message.from == this.userID ? "bg-gray-300" : "bg-blue-600";
+ return this?.message.from == this.userID
+ ? "bg-gray-300"
+ : "bg-primary-medium";
},
textColor() {
return this?.message.from == this.userID ? "text-gray-900" : "text-white";
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 73e9d646ef59b404c97a090e9934b4834ecc535e..2ff217132d67798d84e31a7d166ee007e4d615ba 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -1,33 +1,33 @@
<template>
<div
- id="dropdown"
- class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+ id="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" >
+ <ul class="py-1">
<li id="newItem">
<router-link
- to="/addNewItem"
- class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
- >Opprett Utleie</router-link
+ to="/newItem"
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Opprett Utleie</router-link
>
</li>
<li id="getMembers">
<router-link
- :to="'/group/' + communityID + '/memberlist'"
- class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
- >Se Medlemmer
+ :to="'/community/' + communityID + '/memberlist'"
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Se Medlemmer
</router-link>
</li>
<li id="adminGroup">
<router-link
- :to="'/group/' + communityID + '/memberlist'"
- class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
- >Administrer Gruppe</router-link
+ :to="'/community/' + communityID + '/memberlist'"
+ class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >Administrer Gruppe</router-link
>
</li>
<li id="leaveGroup">
<div
- class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Forlat Gruppe
</div>
@@ -42,6 +42,5 @@ export default {
props: {
communityID: Number,
},
-}
+};
</script>
-
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 20ad43cb2022468cfd0bdcf9706fa317127d55f8..badc88b33e5961701c1f83fa004420df60af97f4 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -6,7 +6,6 @@
class="mb-5"
/>
-
<!-- Search field -->
<div class="relative" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
@@ -24,7 +23,7 @@
<input
type="text"
id="searchInput"
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
placeholder="Search"
v-model="search"
/>
@@ -42,7 +41,7 @@
</template>
<script>
-import ItemCard from "@/components/CommunityComponents/ItemCard";
+import ItemCard from "@/components/ItemComponents/ItemCard";
import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
export default {
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index e6806f59f695d76c8a4cb8c76b6e1a4443813101..28e910a7c60693985ec5fdcb9fc49b6a6e7aad6d 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -24,10 +24,10 @@
<!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
<ColoredButton
- v-if="!member && community.visibility===1"
- :text="'GÃ¥ til'"
- @click="goToGroup(community.communityId)"
- class="m-2"
+ v-if="!member && community.visibility === 1"
+ :text="'GÃ¥ til'"
+ @click="goToGroup(community.communityId)"
+ class="m-2"
/>
</div>
@@ -77,7 +77,7 @@ export default {
data() {
return {
dialogOpen: false,
- responseToUser: '',
+ responseToUser: "",
};
},
props: {
@@ -90,10 +90,9 @@ export default {
},
async goToJoin(id) {
const response = await JoinOpenCommunity(id);
- if(response === "Login to join any community"){
+ if (response === "Login to join any community") {
this.responseToUser = "Logg inn først for å bli med i en gruppe";
- }
- else{
+ } else {
this.$router.push("/community/" + id);
}
},
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index edd765faa9acf48700659998d0cbff63536a9adb..b8360de5851fd26e86d6e9c5925f68eec3011e31 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,5 +1,9 @@
<template>
- <CommunityHeader :admin-status="false" :community="community" class="mb-5 mt-5"/>
+ <CommunityHeader
+ :admin-status="false"
+ :community="community"
+ class="mb-5 mt-5"
+ />
<ul>
<li v-for="member in memberlist" :key="member.userId">
<user-list-item-card :admin="admin" :user="member" />
@@ -26,17 +30,21 @@ export default {
props: {
admin: Boolean,
},
- methods:{
- getAllMembersOfCommunity: async function(){
- this.memberlist = await GetMembersOfCommunity(this.$router.currentRoute.value.params.id);
+ methods: {
+ getAllMembersOfCommunity: async function () {
+ this.memberlist = await GetMembersOfCommunity(
+ this.$router.currentRoute.value.params.id
+ );
+ },
+ getCommunity: async function () {
+ this.community = await GetCommunity(
+ this.$router.currentRoute.value.params.id
+ );
},
- getCommunity: async function(){
- this.community = await GetCommunity(this.$router.currentRoute.value.params.id);
- }
},
beforeMount() {
this.getAllMembersOfCommunity();
this.getCommunity();
- }
+ },
};
</script>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index bb3a4d8edfd877b35648111b8b9a28d4ab2c9575..d9bf923296a42c70521274ba6dcc5e275b75bb22 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,9 +1,11 @@
<template>
- <div class="m-6">
+ <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 -->
- <div class="flex justify-center mt-6">
- <p class="text-4xl">Opprett Gruppe</p>
- </div>
+ <h3
+ class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ >
+ Opprett ny gruppe
+ </h3>
<!-- Radio boxes -->
<div class="mt-6">
@@ -14,7 +16,7 @@
>
<div class="form-check">
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="radio"
name="flexRadioDefault"
id="flexRadioOpen"
@@ -32,7 +34,7 @@
</div>
<div class="form-check">
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="radio"
name="flexRadioDefault"
id="flexRadioPrivate"
@@ -59,18 +61,18 @@
<input
type="text"
id="title"
- class="bg-gray-200 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="v$.group.name.$model"
required
/>
<!-- error message for title-->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.group.name.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -84,18 +86,18 @@
>
<input
type="text"
- class="bg-gray-200 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="v$.group.place.$model"
required
/>
<!-- error message for place-->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.group.place.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -112,17 +114,17 @@
id="description"
rows="4"
v-model="v$.group.description.$model"
- class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
required
></textarea>
<!-- error message for description -->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.group.description.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -148,9 +150,7 @@
<!-- Button for adding an image -->
<div class="inline-flex rounded-md shadow-sm">
- <div class="text-red-500 uppercase text-center">
- midlertidig fjernet
- </div>
+ <div class="text-error uppercase text-center">midlertidig fjernet</div>
<!-- <button
@click="$refs.file.click()"
class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
@@ -160,13 +160,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 -->
@@ -176,14 +169,13 @@
</div>
<!-- Save item button -->
- <div class="flex justify-center mt-10">
- <button
+ <div class="flex justify-center mt-10 float-right">
+ <Button
@click="saveClicked"
- class="content-center 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 sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
id="saveButton"
+ :text="'Lagre'"
>
- Lagre
- </button>
+ </Button>
</div>
</div>
</template>
@@ -192,10 +184,14 @@
import useVuelidate from "@vuelidate/core";
import { required, helpers, maxLength } from "@vuelidate/validators";
import { postNewgroup } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
export default {
name: "CreateNewGroup.vue",
+ components: {
+ Button,
+ },
setup() {
return { v$: useVuelidate() };
},
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c0b698adbeda116c4b3ac997948abc9461..a3c4dd2f9e049ec7b1fe18c68427659223bbd9d7 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,88 @@
<template>
- <div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
- <div class="flex justify-center text-2xl">Logg inn</div>
- <div
- id="emailField"
- class="m-6"
- :class="{ error: v$.user.email.$errors.length }"
- >
- <div class="mb-6">
- <label
- for="email"
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >E-post</label
+ <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>
+
+ <div>
+ <div
+ class="w-full mt-6"
+ :class="{ error: v$.user.email.$errors.length }"
+ >
+ <input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ type="email"
+ placeholder="Skriv inn din e-postadresse *"
+ v-model="v$.user.email.$model"
+ required
+ />
+ <!-- error message -->
+ <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="emailErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
+ </div>
+
+ <div
+ class="w-full mt-6"
+ :class="{ error: v$.user.password.$errors.length }"
>
- <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"
- placeholder="eksempel@eksempel.no"
- v-model="v$.user.email.$model"
- required
- />
- <!-- error message -->
- <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+ <input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ type="password"
+ placeholder="Vennligst oppgi passordet ditt *"
+ v-model="v$.user.password.$model"
+ @keyup.enter="loginClicked"
+ required
+ />
+ <!-- error message -->
<div
class="text-red-600 text-sm"
- v-show="showError"
- id="emailErrorId"
+ v-for="(error, index) of v$.user.password.$errors"
+ :key="index"
>
- {{ error.$message }}
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="passwordErrorId"
+ >
+ {{ error.$message }}
+ </div>
</div>
</div>
+
+ <div class="flex items-center justify-between mt-8">
+ <router-link to="/resetPassword" class="text-primary-medium"
+ >Glemt passord?</router-link
+ >
+
+ <Button @click="loginClicked" :text="'Logg på'"></Button>
+ </div>
</div>
</div>
<div
- id="passwordField"
- class="m-6"
- :class="{ error: v$.user.password.$errors.length }"
+ class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
>
- <label
- for="password"
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >Passord</label
- >
- <input
- type="password"
- id="password"
- 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"
- v-model="v$.user.password.$model"
- required
- @keyup.enter="loginClicked"
- />
- <!-- error message -->
- <div
- class="text-red"
- v-for="(error, index) of v$.user.password.$errors"
- :key="index"
+ <router-link
+ to="/register"
+ class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
+ >Opprette ny konto</router-link
>
- <div
- class="text-red-600 text-sm"
- v-show="showError"
- id="passwordErrorId"
- >
- {{ error.$message }}
- </div>
- </div>
</div>
-
- <div id="buttonsField" class="m-6">
- <div class="align-items: flex-end; mb-6">
- <div class="ml-3 text-sm">
- <router-link
- to="/resetPassword"
- class="text-blue-600 flex justify-end"
- >Glemt passord</router-link
- >
- </div>
- </div>
- <button
- @click="loginClicked"
- class="w-full 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 px-5 py-2.5"
+ <div class="flex items-center justify-center text-center bg-gray-50">
+ <label
+ class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+ >{{ message }}</label
>
- Logg inn
- </button>
- <div class="align-items: flex-end; mb-6 mt-12">
- <div class="text-sm">
- <router-link to="register" class="text-blue-600 flex justify-center"
- >Ny bruker</router-link
- >
- </div>
- </div>
- <div class="flex justify-center">
- <label>{{ message }}</label>
- </div>
</div>
</div>
</template>
@@ -101,10 +91,14 @@
import useVuelidate from "@vuelidate/core";
import { required, email, helpers } from "@vuelidate/validators";
import { doLogin } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
export default {
name: "LoginForm.vue",
+ components: {
+ Button,
+ },
setup() {
return { v$: useVuelidate() };
},
@@ -112,11 +106,11 @@ export default {
return {
user: {
email: {
- required,
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
email: helpers.withMessage(`E-posten er ugyldig`, email),
},
password: {
- required,
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
},
},
};
@@ -138,9 +132,9 @@ export default {
async loginClicked() {
this.showError = true;
- this.v$.user.email.$touch();
+ this.v$.user.$touch();
- if (this.v$.user.email.$invalid) {
+ if (this.v$.user.$invalid) {
console.log("Ugyldig, avslutter...");
return;
}
@@ -154,7 +148,6 @@ export default {
if (loginResponse.isLoggedIn === false) {
this.message = "Feil e-post/passord";
- this.$store.commit("logout");
} else if (loginResponse.isLoggedIn === true) {
this.$store.commit("saveToken", loginResponse.token);
await this.$router.push("/");
@@ -162,10 +155,6 @@ export default {
console.log("Something went wrong");
}
},
-
- validate() {
- this.$refs.form.validate();
- },
},
};
</script>
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 3f4551a3e677e01b48cfcc29cb889b21d9bf04c1..a2fc3c208a551402412bb31dffc3e73fac640275 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,133 +1,192 @@
<template>
- <section
- class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+ <div
+ class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
- <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
+ <h3
+ class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ >
Opprett ny bruker
- </h2>
+ </h3>
<form @submit.prevent>
- <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
+ <div class="grid grid-cols-1 gap-6 mt-4">
<div>
- <label class="text-gray-700 dark:text-gray-200" for="email"
- >E-mail</label
- >
<input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="email"
id="email"
type="email"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+ placeholder="E-post adresse"
/>
+ <!-- error message -->
+ <div
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.email.$errors"
+ :key="index"
+ >
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="emailErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="password"
- >Passord</label
- >
<input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="password"
id="password"
type="password"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+ placeholder="Passord"
/>
+ <!-- error message -->
+ <div
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.password.$errors"
+ :key="index"
+ >
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="passwordErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
- >Bekreft Passord</label
- >
<input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="confirmPassword"
id="confirmPassword"
type="password"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+ placeholder="Bekreft passord"
/>
+ <!-- error message -->
+ <div
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.confirmPassword.$errors"
+ :key="index"
+ >
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="confirmPasswordErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="firstName"
- >Fornavn</label
- >
<input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
data-test="firstNameTest"
v-model="firstName"
id="firstName"
type="text"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+ placeholder="Fornavn"
/>
+ <!-- error message -->
+ <div
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.firstName.$errors"
+ :key="index"
+ >
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="firstNameErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="lastName"
- >Etternavn</label
- >
<input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="lastName"
id="lastName"
type="text"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+ placeholder="Etternavn"
/>
+ <!-- error message -->
+ <div
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.lastName.$errors"
+ :key="index"
+ >
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="lastNameErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
</div>
<div>
- <label class="text-gray-700 dark:text-gray-200" for="address"
- >Addresse</label
- >
<input
+ 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="address"
id="address"
type="text"
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+ placeholder="Adresse"
/>
+ <!-- error message -->
+ <div
+ class="text-red-600 text-sm"
+ v-for="(error, index) of v$.address.$errors"
+ :key="index"
+ >
+ <div
+ class="text-red-600 text-sm"
+ v-show="showError"
+ id="addressErrorId"
+ >
+ {{ error.$message }}
+ </div>
+ </div>
</div>
</div>
<div class="flex justify-end mt-6">
- <button
- class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
- @click="submit()"
- type="submit"
- :disabled="loading"
- >
- <div v-if="loading">
- <div v-if="loading" class="lds-ring">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div v-else>Lagre</div>
- </button>
+ <Button @click="submit" :text="'Lagre'"></Button>
</div>
</form>
- </section>
- <ul data-test="errorMessageList">
- <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
- <li v-for="error of v$.$errors" :key="error.$uid">
- <!-- {{ error.$validator }} -->
- Field
- {{ error.$property }}
- has error:
- {{ error.$message }}
- </li>
- </ul>
+ </div>
</template>
<script>
import useVuelidate from "@vuelidate/core";
import { doLogin, registerUser } from "@/utils/apiutil";
-import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import {
+ required,
+ email,
+ minLength,
+ sameAs,
+ helpers,
+} from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
// const isEmailTaken = (value) =>
// fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
export default {
+ components: {
+ Button,
+ },
setup: () => ({ v$: useVuelidate() }),
data() {
return {
+ showError: false,
errorMessage: "",
- loading: false,
email: "",
password: "",
confirmPassword: "",
@@ -139,24 +198,39 @@ export default {
validations() {
return {
email: {
- required,
- email,
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
+ email: helpers.withMessage("E-posten er ugyldig", email),
// isUnique: helpers.withAsync(isEmailTaken),
},
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)
+ ),
+ },
+ confirmPassword: {
+ sameAs: helpers.withMessage(
+ "Passordene må være like",
+ sameAs(this.password)
+ ),
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
+ },
+ firstName: {
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
+ },
+ lastName: {
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
+ },
+ address: {
+ required: helpers.withMessage(`Feltet må være utfylt`, required),
},
- confirmPassword: { sameAs: sameAs(this.password) },
- firstName: { required },
- lastName: { required },
- address: { required },
};
},
methods: {
async submit() {
//Display loading symbol
- this.loading = true;
+ this.showError = true;
//Validate form
const result = await this.v$.$validate();
@@ -203,48 +277,8 @@ export default {
const response = await registerUser(registerInfo);
- if (response.status === 200) return true;
- return false;
+ return response.status === 200;
},
},
};
</script>
-
-<style scoped>
-/* https://loading.io/css/ */
-.lds-ring {
- display: inline-block;
- position: relative;
- width: 20px;
- height: 20px;
-}
-.lds-ring div {
- box-sizing: border-box;
- display: block;
- position: absolute;
- width: 16px;
- height: 16px;
- margin: 2px;
- border: 2px solid #fff;
- border-radius: 50%;
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
- animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
- animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
- animation-delay: -0.15s;
-}
-@keyframes lds-ring {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-</style>
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/CommunityComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue
similarity index 100%
rename from src/components/CommunityComponents/ItemCard.vue
rename to src/components/ItemComponents/ItemCard.vue
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
similarity index 79%
rename from src/components/CommunityComponents/NewItemForm.vue
rename to src/components/ItemComponents/NewItemForm.vue
index 9012fdccddf250cb3ed592cba2a445f2e3205333..afdc189b33be225940c69094f0863884daa486f0 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -1,9 +1,7 @@
<template>
- <div class="m-6">
+ <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 -->
- <div class="flex justify-center">
- <p class="text-4xl mb-6 mt-6">Utleie</p>
- </div>
+ <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 }">
@@ -15,18 +13,18 @@
<input
type="text"
id="title"
- class="bg-gray-200 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="v$.item.title.$model"
required
/>
<!-- error message for title-->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.item.title.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -42,7 +40,7 @@
<select
v-model="v$.item.select.$model"
id="categories"
- class="bg-gray-200 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
>
<option class="text-gray-400" value="" disabled selected>
Select a category
@@ -58,11 +56,11 @@
<!-- error message for select box -->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.item.select.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -96,7 +94,6 @@
<label class="text-red-600 text-sm block">{{ groupErrorMessage }}</label>
</div>
-
<!-- price -->
<div class="mb-6 mt-4" :class="{ error: v$.item.price.$errors.length }">
<label
@@ -108,17 +105,17 @@
type="number"
v-model="v$.item.price.$model"
id="price"
- class="bg-gray-200 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
required
/>
<!-- error message for price -->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.item.price.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -135,17 +132,17 @@
id="description"
rows="4"
v-model="v$.item.description.$model"
- class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
required
></textarea>
<!-- error message for description -->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.item.description.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -159,7 +156,7 @@
>
<input
type="text"
- class="bg-gray-200 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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="v$.item.address.$model"
id="adress"
required
@@ -167,11 +164,11 @@
<!-- error message for address-->
<div
- class="text-red"
+ class="text-error"
v-for="(error, index) of v$.item.address.$errors"
:key="index"
>
- <div class="text-red-600 text-sm">
+ <div class="text-error text-sm">
{{ error.$message }}
</div>
</div>
@@ -195,12 +192,7 @@
accept="image/png, image/jpeg"
/>
- <button
- @click="$refs.file.click()"
- class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
- >
- Velg bilde
- </button>
+ <Button :text="'Velg bilde'" @click="$refs.file.click()" />
<div v-for="image in item.images" :key="image" class="m-2">
<img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
@@ -208,14 +200,8 @@
</div>
<!-- Save item button -->
- <div class="flex justify-center">
- <button
- @click="saveClicked"
- class="content-center 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 sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
- id="saveButton"
- >
- Lagre
- </button>
+ <div class="float-right">
+ <Button :text="'Lagre'" @click="saveClicked" id="saveButton" />
</div>
</div>
</template>
@@ -224,6 +210,8 @@
import useVuelidate from "@vuelidate/core";
import { parseUserFromToken } from "@/utils/token-utils";
import { postNewItem, getMyGroups } from "@/utils/apiutil";
+import { postNewItem } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
import {
required,
@@ -236,6 +224,10 @@ import {
export default {
name: "AddNewItem",
+ components: {
+ Button,
+ },
+
setup() {
return { v$: useVuelidate() };
},
diff --git a/src/components/CommunityComponents/SearchItemList.vue b/src/components/ItemComponents/SearchItemList.vue
similarity index 93%
rename from src/components/CommunityComponents/SearchItemList.vue
rename to src/components/ItemComponents/SearchItemList.vue
index 51f51ac4ead6c2e8468c88d52d6c48a3a1e13467..00ed0583f51be18a36e249fb9e04a599a840d862 100644
--- a/src/components/CommunityComponents/SearchItemList.vue
+++ b/src/components/ItemComponents/SearchItemList.vue
@@ -16,7 +16,7 @@
<input
type="text"
id="searchInput"
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
placeholder="Search"
v-model="search"
/>
@@ -31,7 +31,7 @@
</template>
<script>
-import ItemCard from "@/components/CommunityComponents/ItemCard";
+import ItemCard from "@/components/ItemComponents/ItemCard";
export default {
name: "SearchItemListComponent",
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 19d25964791090645d982f2ee5875a26a6b396e6..7ee44e43946ce93d577ae888efc9923d71f7aacc 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,13 +1,13 @@
<template>
<div
- class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+ class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
- <div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
+ <div v-show="isCurrentUser" class="float-right px-4 pt-4">
<button
id="dropdownDefault"
data-dropdown-toggle="dropdown"
@click="dropdown = !dropdown"
- class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+ class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
type="button"
>
<svg
@@ -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" aria-labelledby="dropdownDefault">
+ <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
<li>
<router-link
to=""
@@ -37,7 +37,7 @@
</li>
<li>
<router-link
- :to="'/user/' + id + '/groups'"
+ :to="'/user/' + id + '/communites'"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Mine grupper
</router-link>
@@ -67,7 +67,7 @@
<li>
<router-link
to=""
- class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ class="block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Slett bruker</router-link
>
</li>
@@ -75,7 +75,7 @@
</div>
</div>
- <div class="flex flex-col items-center pb-10">
+ <div class="flex flex-col items-center pb-10 mt-16 z-5">
<img
class="mb-3 w-24 h-24 rounded-full shadow-lg"
src="../../assets/defaultUserProfileImage.jpg"
diff --git a/src/components/UserProfileComponents/Rating.vue b/src/components/UserProfileComponents/Rating.vue
index c6e7e8252f2fb8916098f3a1ab8b6a2a7290eb62..8aff6bad071841e4f6baf1c2825ca748b46c095f 100644
--- a/src/components/UserProfileComponents/Rating.vue
+++ b/src/components/UserProfileComponents/Rating.vue
@@ -47,7 +47,7 @@ export default {
methods: {
getFill(i) {
if (i <= this.rating) {
- return "w-5 h-5 text-yellow-400";
+ return "w-5 h-5 text-warn";
}
return "w-5 h-5 text-gray-300 dark:text-gray-500";
},
diff --git a/src/router/index.js b/src/router/index.js
index 31ebabc8df5f12718e9f02da3c8083b966da2db5..436a688cd7721a4f54c21dff55db17571030e5b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,5 @@
import store from "@/store";
import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/CommunityViews/CommunityView.vue";
-import LoginView from "../views/FormViews/LoginView.vue";
-import NewPasswordView from "../views/FormViews/NewPasswordView";
/**
* Guards routes. If token is null, no user is logged in and only the
@@ -21,7 +18,7 @@ const routes = [
{
path: "/",
name: "home",
- component: HomeView,
+ component: () => import("../views/CommunityViews/CommunityView.vue"),
},
{
path: "/profile/:id",
@@ -37,27 +34,24 @@ const routes = [
{
path: "/messages",
name: "messages",
- component: () =>
- import(
- /* webpackChunkName: "register" */ "../views/ChatViews/ChatView.vue"
- ),
+ component: () => import("../views/ChatViews/ChatView.vue"),
beforeEnter: guardRoute,
},
{
path: "/login",
name: "login",
- component: LoginView,
+ component: () => import("../views/FormViews/LoginView.vue"),
},
{
path: "/newPassword",
name: "newPassword",
- component: NewPasswordView,
+ component: () => import("../views/FormViews/NewPasswordView"),
beforeEnter: guardRoute,
},
{
path: "/searchItemList",
name: "searchItemList",
- component: () => import("../views/CommunityViews/SearchItemListView.vue"),
+ component: () => import("../views/ItemViews/SearchItemListView.vue"),
},
{
path: "/resetPassword",
@@ -65,20 +59,21 @@ const routes = [
component: () => import("../views/FormViews/ResetPasswordView.vue"),
},
{
- path: "/createNewGroup",
- name: "createNewGroup",
+ path: "/newCommunity",
+ name: "newCommunity",
component: () => import("../views/CommunityViews/NewCommunityView.vue"),
+ beforeEnter: guardRoute,
},
{
- path: "/group/:id/memberlist",
+ path: "/community/:id/memberlist",
name: "memberlist",
component: () => import("../views/CommunityViews/MemberListView.vue"),
beforeEnter: guardRoute,
},
{
- path: "/addNewItem",
- name: "addNewItem",
- component: () => import("../views/CommunityViews/NewItemView.vue"),
+ path: "/newItem",
+ name: "newItem",
+ component: () => import("../views/ItemViews/NewItemView.vue"),
beforeEnter: guardRoute,
},
{
@@ -88,13 +83,14 @@ const routes = [
beforeEnter: guardRoute,
},
{
- path: "/user/:id/groups",
- name: "myGroups",
+ path: "/user/:id/communities",
+ name: "myCommunities",
component: () => import("../views/CommunityViews/MyCommunitiesView.vue"),
+ beforeEnter: guardRoute,
},
{
path: "/community/:communityID",
- name: "GroupHome",
+ name: "communityHome",
component: () => import("../views/CommunityViews/CommunityHomeView.vue"),
},
{
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 9fd39f5f305a7592f633795254899fa3cf3883a8..97b774a1c48dc778df7996ae32c0e743e7435f6e 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -2,9 +2,9 @@
<div v-if="loggedIn">
<div class="flex flex-row p-4 relative">
<p class="capitalize font-bold w-full">Mine felleskap</p>
- <PlusIcon
+ <UserAddIcon
class="cursor-pointer max-h-6 max-w-6 float-right grow"
- @click="$router.push('/createNewGroup')"
+ @click="$router.push('/newCommunity')"
v-if="loggedIn"
alt="Lag ett nytt felleskap"
/>
@@ -18,7 +18,7 @@
<script>
import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-import { PlusIcon } from "@heroicons/vue/outline";
+import { UserAddIcon } from "@heroicons/vue/outline";
export default {
name: "HomeView",
@@ -31,7 +31,7 @@ export default {
},
components: {
CommunityList,
- PlusIcon,
+ UserAddIcon,
},
async created() {
this.publicCommunities = await getVisibleGroups();
diff --git a/src/views/CommunityViews/MemberListView.vue b/src/views/CommunityViews/MemberListView.vue
index f3b0bd4aed89b8682b0a98602e9fb43e49537a06..9f63b476d52810f37e88b726803ca54b6ccc9266 100644
--- a/src/views/CommunityViews/MemberListView.vue
+++ b/src/views/CommunityViews/MemberListView.vue
@@ -1,5 +1,5 @@
<template>
- <MemberList/>
+ <MemberList />
</template>
<script>
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/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c538e3b4796b193048f943bd1be4fee2b88..ec6fa68a7c9b217e2d199d2bd8b9d8781556343a 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="loginPage">
+ <div class="h-screen grid md:mt-8">
<LoginForm></LoginForm>
</div>
</template>
@@ -13,11 +13,3 @@ export default {
},
};
</script>
-
-<style scoped>
-.loginPage {
- background-color: white;
- height: 100%;
- overflow: auto;
-}
-</style>
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 e5d5683596755787a0955be481d1b38d91f4a378..93013987e5e31384c4391768e5468a6bc77df35d 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="h-screen bg-gray-200 content-center grid place-items-center">
+ <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/src/views/CommunityViews/NewItemView.vue b/src/views/ItemViews/NewItemView.vue
similarity index 54%
rename from src/views/CommunityViews/NewItemView.vue
rename to src/views/ItemViews/NewItemView.vue
index 8bbca71dd407668fe3de9abd0720d41eeea1c508..fa8ba75077b76aa1a1af647d9b54ea9bf599a7ac 100644
--- a/src/views/CommunityViews/NewItemView.vue
+++ b/src/views/ItemViews/NewItemView.vue
@@ -1,9 +1,12 @@
<template>
- <AddNewItem></AddNewItem>
+ <div class="h-screen grid md:mt-8">
+ <AddNewItem/>
+ </div>
+
</template>
<script>
-import AddNewItem from "@/components/CommunityComponents/NewItemForm";
+import AddNewItem from "@/components/ItemComponents/NewItemForm";
export default {
name: "AddNewItemView.vue",
diff --git a/src/views/CommunityViews/SearchItemListView.vue b/src/views/ItemViews/SearchItemListView.vue
similarity index 71%
rename from src/views/CommunityViews/SearchItemListView.vue
rename to src/views/ItemViews/SearchItemListView.vue
index 1725bf8e672f75b7fe3e2600f6ae9bffaf4c063c..7da50f9397c5dee29f471267b8cb08866edcccfb 100644
--- a/src/views/CommunityViews/SearchItemListView.vue
+++ b/src/views/ItemViews/SearchItemListView.vue
@@ -3,7 +3,7 @@
</template>
<script>
-import SearchItemListComponent from "@/components/CommunityComponents/SearchItemList";
+import SearchItemListComponent from "@/components/ItemComponents/SearchItemList";
export default {
name: "SearchItemListView",
components: {
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index c4ea15c9d2d5c8f640b8180c226a64e4555535a2..430082e1e6e06586d7384c8bac8b91727978c768 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,6 +1,6 @@
<template>
- <div class="h-screen bg-gray-200 grid place-items-center">
- <large-profile-card :isCurrentUser="true" class="align-top" />
+ <div>
+ <LargeProfileCard :isCurrentUser="true" class="md:mt-8" />
</div>
</template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7cd4f37efd95627b8f362e1b210fd12b384925d9..1108079401f30bb7cfcf539149d36ff105100116 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,34 @@ module.exports = {
darkMode: "class",
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
- extend: {},
+ colors: {
+ white: "#fff",
+ black: "#000",
+ gray: {
+ 50: "#f9fafb",
+ 100: "#f3f4f6",
+ 200: "#e5e7eb",
+ 300: "#d1d5db",
+ 400: "#9ca3af",
+ 500: "#6b7280",
+ 600: "#4b5563",
+ 700: "#374151",
+ 800: "#1f2937",
+ 900: "#111827",
+ },
+ primary: {
+ light: "#306EC1",
+ medium: "#004aad",
+ dark: "#003884",
+ },
+ secondary: {
+ light: "#653273",
+ dark: "#731050",
+ },
+ error: "#E23636",
+ warn: "#EDB95E",
+ success: "#82DD55",
+ },
},
plugins: [],
};
diff --git a/tests/unit/api-mock-tests/apiutil-memberlist.spec.js b/tests/unit/api-mock-tests/apiutil-memberlist.spec.js
index b3e41326b676400d5f708534b71d005eb1e57709..34fb55066190781d9d2aead4d106b2c6ea3c8098 100644
--- a/tests/unit/api-mock-tests/apiutil-memberlist.spec.js
+++ b/tests/unit/api-mock-tests/apiutil-memberlist.spec.js
@@ -1,37 +1,35 @@
-import {GetMembersOfCommunity} from "@/utils/apiutil";
+import { GetMembersOfCommunity } from "@/utils/apiutil";
import axios from "axios";
jest.mock("axios");
describe("testing mocking of apiutil.js", () => {
+ it("check that existing group returns correct members", async () => {
+ const expectedResponse = {
+ member1: {
+ userId: 2,
+ email: "erik@erik.com",
+ firstName: "erik",
+ lastName: "hansen",
+ address: "gløshaugen",
+ picture: "ok",
+ },
- it("check that existing group returns correct members", async () => {
+ member2: {
+ userId: 1,
+ email: "test@test.com",
+ firstName: "test",
+ lastName: "testesen",
+ address: "oslo",
+ picture: "ok",
+ },
+ };
- const expectedResponse = {
- member1: {
- userId: 2,
- email: "erik@erik.com",
- firstName: "erik",
- lastName: "hansen",
- address: "gløshaugen",
- picture: "ok"
- },
+ axios.get.mockImplementation(() =>
+ Promise.resolve({ data: expectedResponse })
+ );
- member2: {
- userId: 1,
- email: "test@test.com",
- firstName: "test",
- lastName: "testesen",
- address: "oslo",
- picture: "ok"
- },
- };
-
- axios.get.mockImplementation(() =>
- Promise.resolve({ data: expectedResponse })
- );
-
- const communityMembersResponse = await GetMembersOfCommunity(4040);
- expect(communityMembersResponse).toBe(expectedResponse);
- })
+ const communityMembersResponse = await GetMembersOfCommunity(4040);
+ expect(communityMembersResponse).toBe(expectedResponse);
+ });
});
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
deleted file mode 100644
index 4a8d6370547ec8f2d5faee8131dc1432a0d3a7e5..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColoredButtonComponent renders correctly 1`] = `
-<button
- class="block 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 px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
->
- hei
-</button>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
deleted file mode 100644
index b18026618f7dea1253f990a46ed5d438fd89a9bf..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CommunityHeader component renders correctly 1`] = `
-<div
- class="flex items-center justify-between mx-4"
->
- <div
- class="flex-1 min-w-0"
- >
- <h2
- class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
- >
- String
- </h2>
- <div
- class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
- >
- <div
- class="mt-2 flex items-center text-sm text-gray-500"
- >
- <svg
- aria-hidden="true"
- class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- clip-rule="evenodd"
- d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
- fill-rule="evenodd"
- />
- </svg>
- String
- </div>
- </div>
- </div>
- <div>
- <!-- If the user is not a member in the community, this button will show -->
- <!--v-if-->
- <!-- If the user is member of the community, this hamburger menu will show -->
- <div>
- <svg
- class="w-9 h-9 cursor-pointer"
- fill="none"
- stroke="currentColor"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M4 6h16M4 12h16M4 18h16"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- />
- </svg>
- <!--v-if-->
- <!-- class="absolute" -->
- </div>
- </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
deleted file mode 100644
index f178175b1fa2913054cc18585b8dd831f1099858..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
+++ /dev/null
@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButtonComponent renders correctly 1`] = `
-<div
- data-v-app=""
->
-
- <!-- Main modal -->
- <div
- class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
- >
- <div
- class="relative w-full h-full max-w-2xl p-4 md:h-auto"
- >
- <!-- Modal content -->
- <div
- class="relative bg-white rounded-lg shadow dark:bg-gray-700"
- >
- <!-- Modal header -->
- <div
- class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
- >
- <h3
- class="text-xl font-semibold text-gray-900 dark:text-white"
- >
- String
- </h3>
- <button
- class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
- >
- <svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- clip-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- fill-rule="evenodd"
- />
- </svg>
- </button>
- </div>
- <!-- Modal body -->
- <div
- class="p-6 space-y-6"
- >
- <p
- class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
- >
- String
- </p>
- </div>
- <!-- Modal footer -->
- <div
- class="rounded-b border-t border-gray-200 dark:border-gray-600"
- >
- <!-- Slot: Add any html you want here -->
-
- <div
- class="fake-msg"
- >
- String
- </div>
-
- </div>
- </div>
- </div>
- </div>
-
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
deleted file mode 100644
index 62007d4ff8d81f1ece9bf91271163ca179d7383d..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButtonComponent renders correctly 1`] = `
-<div
- data-v-app=""
->
-
- <!-- Icon button -->
- <button
- class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
- >
- <div
- class="flex flex-row px-5 py-2.5 h-10"
- >
- <!-- Icon slot: Default content "Ban"-icon -->
- <div
- class="h-6 w-6"
- >
-
- <svg
- aria-hidden="true"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg>
-
- </div>
- <p>
- hei
- </p>
- </div>
- </button>
-
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
deleted file mode 100644
index 3929918739cf7ffa3409de46e8c6bd3b6abd14f8..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavBar component renders correctly 1`] = `
-<nav
- class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
->
- <div
- class="logo"
- >
- <img
- alt="BoCo logo"
- class="m-1 ml-4 cursor-pointer h-12"
- src=""
- />
- </div>
- <ul
- class="flex"
- >
- <li>
- <img
- alt="Legg til"
- class="m-6 cursor-pointer h-7"
- src=""
- />
- </li>
- <li>
- <img
- alt="Meldinger"
- class="m-6 cursor-pointer h-7"
- src=""
- />
- </li>
- <li>
- <img
- alt="Profil"
- class="m-6 cursor-pointer h-7"
- src=""
- />
- </li>
- </ul>
-</nav>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
deleted file mode 100644
index 6c2259b3f623090effe8ff37ced149d9e72da832..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationModal component renders correctly 1`] = `
-<div
- data-v-app=""
->
-
- <!-- Main modal -->
- <div
- class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
- >
- <div
- class="relative w-full h-full max-w-2xl p-4 md:h-auto"
- >
- <!-- Modal content -->
- <div
- class="relative bg-white rounded-lg shadow dark:bg-gray-700"
- >
- <!-- Modal header -->
- <div
- class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
- >
- <h3
- class="text-xl font-semibold text-gray-900 dark:text-white"
- >
- String
- </h3>
- <button
- class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
- >
- <svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- clip-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- fill-rule="evenodd"
- />
- </svg>
- </button>
- </div>
- <!-- Modal body -->
- <div
- class="p-6 space-y-6"
- >
- <p
- class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
- >
- String
- </p>
- </div>
- </div>
- </div>
- </div>
-
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/color-button.spec.js b/tests/unit/component-tests/base-component-tests/color-button.spec.js
index f4e8a11d706cc3b757b4c238c808011af94de192..29300503d6aeae9159b782520be94ebb502ce44c 100644
--- a/tests/unit/component-tests/base-component-tests/color-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/color-button.spec.js
@@ -1,23 +1,19 @@
import { mount } from "@vue/test-utils";
-import ColoredButton from "@/components/BaseComponents/ColoredButton.vue"
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
describe("ColoredButtonComponent", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(ColoredButton, {
- //passing prop to component
- props: {
- text: "hei"
- }
+ //passing prop to component
+ props: {
+ text: "hei",
+ },
});
});
- it("renders correctly", () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/base-component-tests/community-header.spec.js b/tests/unit/component-tests/base-component-tests/community-header.spec.js
index 2195ce373c26c2a664afdd49e97641529d84ff5d..97e5cd0889634e1205031c5ee1fe253e4892a6c1 100644
--- a/tests/unit/component-tests/base-component-tests/community-header.spec.js
+++ b/tests/unit/component-tests/base-component-tests/community-header.spec.js
@@ -1,31 +1,27 @@
import { mount } from "@vue/test-utils";
-import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue"
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue";
describe("CommunityHeader component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(CommunityHeader, {
- //passing prop to component
- props: {
- adminStatus: true,
- community: {
- communityId: 1,
- name: "String",
- description: "String",
- visibility: 0,
- location: "String",
- picture: "String",
- },
- }
+ //passing prop to component
+ props: {
+ adminStatus: true,
+ community: {
+ communityId: 1,
+ name: "String",
+ description: "String",
+ visibility: 0,
+ location: "String",
+ picture: "String",
+ },
+ },
});
});
- it("renders correctly", () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
index 78af6ef591ce36420890d664cdf7c37076511e00..5afb8f9cb6f6d966856b1a59516062300c80e2b1 100644
--- a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
@@ -1,28 +1,24 @@
import { mount } from "@vue/test-utils";
-import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue"
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
describe("IconButtonComponent", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(CustomFooterModal, {
- //passing prop to component
- props: {
- visible: true,
- title: "String",
- message: "String",
- },
- slots: {
- default: '<div class="fake-msg">String</div>'
- }
+ //passing prop to component
+ props: {
+ visible: true,
+ title: "String",
+ message: "String",
+ },
+ slots: {
+ default: '<div class="fake-msg">String</div>',
+ },
});
});
- it("renders correctly", () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/base-component-tests/icon-button.spec.js b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
index a45c915a6439cf3847ff0d09bc0a0ab24e386f82..376fb18f1f3ba20d4e417f7f615c2136f908016b 100644
--- a/tests/unit/component-tests/base-component-tests/icon-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
@@ -1,23 +1,19 @@
import { mount } from "@vue/test-utils";
-import IconButton from "@/components/BaseComponents/IconButton.vue"
+import IconButton from "@/components/BaseComponents/IconButton.vue";
describe("IconButtonComponent", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(IconButton, {
- //passing prop to component
- props: {
- text: "hei"
- }
+ //passing prop to component
+ props: {
+ text: "hei",
+ },
});
});
- it("renders correctly", () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
index 0f365733c3b5b5c0fb8171b7b292761a76b0afed..556dd737972108fccdd326ccea4133af1ddbe377 100644
--- a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
+++ b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
@@ -1,5 +1,5 @@
import { mount } from "@vue/test-utils";
-import NavBar from "@/components/BaseComponents/NavBar.vue"
+import NavBar from "@/components/BaseComponents/NavBar.vue";
describe("NavBar component", () => {
let wrapper;
@@ -8,11 +8,7 @@ describe("NavBar component", () => {
wrapper = mount(NavBar);
});
- it("renders correctly", () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
index 8db68edc59a23e8164b35db818cc47b256743959..c005e4f94aec3da15453735e5e1b267884104baf 100644
--- a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
@@ -1,25 +1,21 @@
import { mount } from "@vue/test-utils";
-import NotificationModal from "@/components/BaseComponents/NotificationModal.vue"
+import NotificationModal from "@/components/BaseComponents/NotificationModal.vue";
describe("NotificationModal component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(NotificationModal, {
- //passing prop to component
- props: {
- visible: true,
- title: "String",
- message: "String",
- }
+ //passing prop to component
+ props: {
+ visible: true,
+ title: "String",
+ message: "String",
+ },
});
});
- it("renders correctly", () => {
- expect(wrapper.element).toMatchSnapshot();
- });
-
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
deleted file mode 100644
index a9b5043d55edf9d7bd0a52eb64e803ffc04f50e5..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ /dev/null
@@ -1,181 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreateNewGroup elements rendering renders correctly 1`] = `
-<div
- class="m-6"
->
- <!-- Component heading -->
- <div
- class="flex justify-center mt-6"
- >
- <p
- class="text-4xl"
- >
- Opprett Gruppe
- </p>
- </div>
- <!-- Radio boxes -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="radioBoxLabel"
- >
- Synlighet
- </label>
- <div
- class="form-check"
- >
- <input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- id="flexRadioOpen"
- name="flexRadioDefault"
- type="radio"
- value="Ã…pen"
- />
- <label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioOpen"
- id="radioBoxOpenLabel"
- >
- Ã…pen
- </label>
- </div>
- <div
- class="form-check"
- >
- <input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- id="flexRadioPrivate"
- name="flexRadioDefault"
- type="radio"
- value="Privat"
- />
- <label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioPrivate"
- id="radioBoxPrivateLabel"
- >
- Privat
- </label>
- </div>
- </div>
- <!-- Title -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="titleLabel"
- >
- Gruppenavn
- </label>
- <input
- class="bg-gray-200 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"
- id="title"
- required=""
- type="text"
- />
- <!-- error message for title-->
-
-
- </div>
- <!-- Place -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >
- By/Sted
- </label>
- <input
- class="bg-gray-200 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"
- required=""
- type="text"
- />
- <!-- error message for place-->
-
-
- </div>
- <!-- Description -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="descriptionLabel"
- >
- Beskrivelse
- </label>
- <textarea
- class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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"
- id="description"
- required=""
- rows="4"
- />
- <!-- error message for description -->
-
-
- </div>
- <!-- Images -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
- >
- Bilde
- </label>
- <input
- accept="image/png, image/jpeg"
- multiple=""
- style="display: none;"
- type="file"
- />
- <!-- Button for adding an image -->
- <div
- class="inline-flex rounded-md shadow-sm"
- >
- <div
- class="text-red-500 uppercase text-center"
- >
- midlertidig fjernet
- </div>
- <!-- <button
- @click="$refs.file.click()"
- class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
- :disabled="imageAdded"
- >
- Velg bilde
- </button> -->
- <!-- Button for removing an image -->
- <button
- class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
- style="display: none;"
- >
- <img
- alt="Remove icon image"
- src=""
- />
- </button>
- </div>
- <!-- Div box for showing all chosen images -->
-
-
- </div>
- <!-- Save item button -->
- <div
- class="flex justify-center mt-10"
- >
- <button
- class="content-center 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 sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
- id="saveButton"
- >
- Lagre
- </button>
- </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
deleted file mode 100644
index 9481b244b29873fb25e396f3f757ef1fc1f2b1e5..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ /dev/null
@@ -1,204 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewItemForm component renders correctly 1`] = `
-<div
- class="m-6"
->
- <!-- Component heading -->
- <div
- class="flex justify-center"
- >
- <p
- class="text-4xl mb-6 mt-6"
- >
- Utleie
- </p>
- </div>
- <!-- Title -->
- <div
- class="mb-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="titleLabel"
- >
- Tittel
- </label>
- <input
- class="bg-gray-200 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"
- id="title"
- required=""
- type="text"
- />
- <!-- error message for title-->
-
-
- </div>
- <!-- Select category -->
- <div
- class="mb-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="selectCategoryLabel"
- >
- Kategori
- </label>
- <select
- class="bg-gray-200 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"
- id="categories"
- >
- <option
- class="text-gray-400"
- disabled=""
- value=""
- >
- Select a category
- </option>
-
- <option
- class="text-gray-900 text-sm"
- >
- Hage
- </option>
- <option
- class="text-gray-900 text-sm"
- >
- Kjøkken
- </option>
- <option
- class="text-gray-900 text-sm"
- >
- Musikk
- </option>
- <option
- class="text-gray-900 text-sm"
- >
- Annet
- </option>
-
- </select>
- <!-- error message for select box -->
-
-
- </div>
- <!-- Select Group -->
- <div
- class="mb-6"
- >
- <label
- class="block text-sm font-medium text-gray-900 dark:text-gray-400"
- >
- Grupper
- </label>
- <div
- class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
- >
- <ul
- aria-labelledby="dropdownDefault"
- class="py-1"
- >
- <li>
-
-
- </li>
- </ul>
- </div>
- <label
- class="text-red-600 text-sm block"
- />
- </div>
- <!-- price -->
- <div
- class="mb-6 mt-4"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="priceLabel"
- >
- Pris
- </label>
- <input
- class="bg-gray-200 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"
- id="price"
- required=""
- type="number"
- />
- <!-- error message for price -->
-
-
- </div>
- <!-- Description -->
- <div
- class="mb-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="descriptionLabel"
- >
- Beskrivelse
- </label>
- <textarea
- class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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"
- id="description"
- required=""
- rows="4"
- />
- <!-- error message for description -->
-
-
- </div>
- <!-- Address -->
- <div
- class="mb-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >
- Adresse
- </label>
- <input
- class="bg-gray-200 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"
- id="adress"
- required=""
- type="text"
- />
- <!-- error message for address-->
-
-
- </div>
- <!-- Images -->
- <div>
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
- >
- Bilder
- </label>
- <input
- accept="image/png, image/jpeg"
- multiple=""
- style="display: none;"
- type="file"
- />
- <button
- class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
- >
- Velg bilde
- </button>
-
-
- </div>
- <!-- Save item button -->
- <div
- class="flex justify-center"
- >
- <button
- class="content-center 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 sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
- id="saveButton"
- >
- Lagre
- </button>
- </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
index d00db1aa89b9e18df7639635f6bf0fe7b6de9820..59eecbb9003356b0debaa8228f3785d489e3ec98 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
@@ -26,7 +26,7 @@ exports[`SearchItemListComponent elements rendering renders correctly 1`] = `
</svg>
</span>
<input
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
id="searchInput"
placeholder="Search"
type="text"
diff --git a/tests/unit/component-tests/community-component-tests/add-new-item.spec.js b/tests/unit/component-tests/community-component-tests/add-new-item.spec.js
index 417812b108f62b53c5762732a59d4e969b8e4c3c..9026411b4cfe97a22636a8eb1d54fa12a224bc0c 100644
--- a/tests/unit/component-tests/community-component-tests/add-new-item.spec.js
+++ b/tests/unit/component-tests/community-component-tests/add-new-item.spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from "@vue/test-utils";
-import AddNewItem from "@/components/CommunityComponents/NewItemForm.vue";
+import AddNewItem from "@/components/ItemComponents/NewItemForm.vue";
describe("addNewItem elements rendering", () => {
it("renders all labels", () => {
diff --git a/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js b/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js
index 658e30ee73eb2eb7ccee7b880151927f84c6e7b2..a6834e8680d1d61c29962436e568165fb8c2b937 100644
--- a/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js
@@ -2,12 +2,12 @@ import { shallowMount } from "@vue/test-utils";
import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger.vue";
describe("CommunityHamburger elements rendering", () => {
- it("renders all li fields", () => {
- const wrapper = shallowMount(CommunityHamburger);
+ it("renders all li fields", () => {
+ const wrapper = shallowMount(CommunityHamburger);
- expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
- expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
- expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
- expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
- });
+ expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
+ expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
+ expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
+ expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
+ });
});
diff --git a/tests/unit/component-tests/community-component-tests/community-list-item.spec.js b/tests/unit/component-tests/community-component-tests/community-list-item.spec.js
index 177ad076e6a9be8d375040c92446951f71935f81..3610f19312ab656bfbe7881c21e072626b164cb1 100644
--- a/tests/unit/component-tests/community-component-tests/community-list-item.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-list-item.spec.js
@@ -1,23 +1,23 @@
import { mount } from "@vue/test-utils";
-import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue"
+import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
describe("CommunityListItem component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(CommunityListItem, {
- //passing prop to component
- props: {
- community: {
- communityId: 0,
- name: "string",
- description: "string",
- visibility: 0,
- location: "string",
- picture: "string"
- },
- member: false,
- }
+ //passing prop to component
+ props: {
+ community: {
+ communityId: 0,
+ name: "string",
+ description: "string",
+ visibility: 0,
+ location: "string",
+ picture: "string",
+ },
+ member: false,
+ },
});
});
@@ -28,4 +28,4 @@ describe("CommunityListItem component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/community-list.spec.js b/tests/unit/component-tests/community-component-tests/community-list.spec.js
index 89518291810964e6903a888424ef6630d756ead7..fbd0968070e19814478e839c92245089f09013b8 100644
--- a/tests/unit/component-tests/community-component-tests/community-list.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-list.spec.js
@@ -1,31 +1,31 @@
import { mount } from "@vue/test-utils";
-import CommunityList from "@/components/CommunityComponents/CommunityList.vue"
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
describe("CommunityList component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(CommunityList, {
- props:{
- groupList: [
- {
- communityId: 0,
- name: "string",
- description: "string",
- visibility: 0,
- location: "string",
- picture: "string"
- },
- {
- communityId: 0,
- name: "string",
- description: "string",
- visibility: 0,
- location: "string",
- picture: "string"
- },
- ]
- }
+ props: {
+ groupList: [
+ {
+ communityId: 0,
+ name: "string",
+ description: "string",
+ visibility: 0,
+ location: "string",
+ picture: "string",
+ },
+ {
+ communityId: 0,
+ name: "string",
+ description: "string",
+ visibility: 0,
+ location: "string",
+ picture: "string",
+ },
+ ],
+ },
});
});
@@ -36,4 +36,4 @@ describe("CommunityList component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/item-card.spec.js b/tests/unit/component-tests/community-component-tests/item-card.spec.js
index e6725d6dac3f852a0be7ce702f06c62b9c899733..998c8d4f7d4c90b9407b6cea2d0db8cfa3ea242e 100644
--- a/tests/unit/component-tests/community-component-tests/item-card.spec.js
+++ b/tests/unit/component-tests/community-component-tests/item-card.spec.js
@@ -1,19 +1,19 @@
import { mount } from "@vue/test-utils";
-import ItemCard from "@/components/CommunityComponents/ItemCard.vue"
+import ItemCard from "@/components/ItemComponents/ItemCard.vue";
describe("ItemCard component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(ItemCard, {
- props:{
- item: {
- img: "String",
- address: "String",
- title: "String",
- pricePerDay: 0,
- }
- }
+ props: {
+ item: {
+ img: "String",
+ address: "String",
+ title: "String",
+ pricePerDay: 0,
+ },
+ },
});
});
@@ -24,4 +24,4 @@ describe("ItemCard component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
index 4559d4a832accadfd67fd70df516d6a71be8b316..03406c0a54a73cedc2be643c3741015749183312 100644
--- a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
+++ b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
@@ -1,5 +1,5 @@
import { mount } from "@vue/test-utils";
-import NewItemForm from "@/components/CommunityComponents/NewItemForm.vue"
+import NewItemForm from "@/components/ItemComponents/NewItemForm.vue";
describe("NewItemForm component", () => {
let wrapper;
@@ -15,4 +15,4 @@ describe("NewItemForm component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/search-item-list.spec.js b/tests/unit/component-tests/community-component-tests/search-item-list.spec.js
index 145a56a66093be7fb062785bafbd11fa6c116f7a..691b8c4bce2d2057528870f628ce99d116cd3e8e 100644
--- a/tests/unit/component-tests/community-component-tests/search-item-list.spec.js
+++ b/tests/unit/component-tests/community-component-tests/search-item-list.spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from "@vue/test-utils";
-import SearchItemListComponent from "@/components/CommunityComponents/SearchItemList.vue";
+import SearchItemListComponent from "@/components/ItemComponents/SearchItemList.vue";
describe("SearchItemListComponent elements rendering", () => {
let wrapper;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
deleted file mode 100644
index c712a500effa0e3f64c2187aaa330efdc6fb68a6..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoginForm component renders correctly 1`] = `
-<div
- class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16"
->
- <div
- class="flex justify-center text-2xl"
- >
- Logg inn
- </div>
- <div
- class="m-6"
- id="emailField"
- >
- <div
- class="mb-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- for="email"
- >
- E-post
- </label>
- <input
- 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"
- id="email"
- placeholder="eksempel@eksempel.no"
- required=""
- type="email"
- />
- <!-- error message -->
-
-
- </div>
- </div>
- <div
- class="m-6"
- id="passwordField"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- for="password"
- >
- Passord
- </label>
- <input
- 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"
- id="password"
- required=""
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="m-6"
- id="buttonsField"
- >
- <div
- class="align-items: flex-end; mb-6"
- >
- <div
- class="ml-3 text-sm"
- >
- <router-link
- class="text-blue-600 flex justify-end"
- to="/resetPassword"
- >
- Glemt passord
- </router-link>
- </div>
- </div>
- <button
- class="w-full 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 px-5 py-2.5"
- >
- Logg inn
- </button>
- <div
- class="align-items: flex-end; mb-6 mt-12"
- >
- <div
- class="text-sm"
- >
- <router-link
- class="text-blue-600 flex justify-center"
- to="register"
- >
- Ny bruker
- </router-link>
- </div>
- </div>
- <div
- class="flex justify-center"
- >
- <label />
- </div>
- </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
deleted file mode 100644
index 8ecfffa14f203f189c5ed8a266f9787f14eeb86d..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ /dev/null
@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewPasswordForm component renders correctly 1`] = `
-<div
- class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
->
- <div
- class=""
- id="firstPasswordField"
- >
- <label
- class="block text-sm text-gray-800 dark:text-gray-200"
- for="password"
- >
- Nytt passord
- </label>
- <input
- 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"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="mt-4"
- id="secondPasswordField"
- >
- <div
- class="flex items-center justify-between"
- >
- <label
- class="block text-sm text-gray-800 dark:text-gray-200"
- for="rePassword"
- >
- Gjenta nytt passord
- </label>
- </div>
- <input
- 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"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="mt-6"
- id="buttonsField"
- >
- <button
- 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>
- </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
deleted file mode 100644
index f1a63d05fc1ff431b8677b83e799442934955b68..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ /dev/null
@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RegisterFormComponent renders correctly 1`] = `
-<div
- data-v-app=""
->
-
- <section
- class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
- >
- <h2
- class="text-lg font-semibold text-gray-700 capitalize dark:text-white"
- >
- Opprett ny bruker
- </h2>
- <form>
- <div
- class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"
- >
- <div>
- <label
- class="text-gray-700 dark:text-gray-200"
- for="email"
- >
- E-mail
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
- id="email"
- type="email"
- />
- </div>
- <div>
- <label
- class="text-gray-700 dark:text-gray-200"
- for="password"
- >
- Passord
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
- id="password"
- type="password"
- />
- </div>
- <div>
- <label
- class="text-gray-700 dark:text-gray-200"
- for="confirmPassword"
- >
- Bekreft Passord
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
- id="confirmPassword"
- type="password"
- />
- </div>
- <div>
- <label
- class="text-gray-700 dark:text-gray-200"
- for="firstName"
- >
- Fornavn
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
- data-test="firstNameTest"
- id="firstName"
- type="text"
- />
- </div>
- <div>
- <label
- class="text-gray-700 dark:text-gray-200"
- for="lastName"
- >
- Etternavn
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
- id="lastName"
- type="text"
- />
- </div>
- <div>
- <label
- class="text-gray-700 dark:text-gray-200"
- for="address"
- >
- Addresse
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
- id="address"
- type="text"
- />
- </div>
- </div>
- <div
- class="flex justify-end mt-6"
- >
- <button
- class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
- type="submit"
- >
- <div>
- Lagre
- </div>
- </button>
- </div>
- </form>
- </section>
- <ul
- data-test="errorMessageList"
- >
- <!--v-if-->
-
-
- </ul>
-
-</div>
-`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
deleted file mode 100644
index e2fd53153e1a948a06f396c1f77ad5b978e48eb0..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ /dev/null
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResetPasswordForm component renders correctly 1`] = `
-<div
- class="resetPassword"
->
- <div
- class="m-6"
- id="emailField"
- >
- <div
- class="mb-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- for="email"
- >
- E-post
- </label>
- <input
- 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"
- id="email"
- placeholder="eksempel@eksempel.no"
- required=""
- type="email"
- />
- <!-- error message -->
-
-
- </div>
- </div>
- <button
- 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>
-`;
diff --git a/tests/unit/component-tests/user-component-tests/login-form.spec.js b/tests/unit/component-tests/user-component-tests/login-form.spec.js
index ef07685bce250e5ed49e0415b75f9c2224aba16f..40fa711393e969435a609474c0f550f179513135 100644
--- a/tests/unit/component-tests/user-component-tests/login-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/login-form.spec.js
@@ -1,5 +1,5 @@
import { mount } from "@vue/test-utils";
-import LoginForm from "@/components/FormComponents/LoginForm.vue"
+import LoginForm from "@/components/FormComponents/LoginForm.vue";
describe("LoginForm component", () => {
let wrapper;
@@ -15,4 +15,4 @@ describe("LoginForm component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/user-component-tests/new-password-form.spec.js b/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
index 738e6df439c544ed2692e461f8fc9cc9cbc52ec4..638e597bd9b130a6b2a1c69a0b724b3414436648 100644
--- a/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
@@ -1,5 +1,5 @@
import { mount } from "@vue/test-utils";
-import NewPasswordForm from "@/components/FormComponents/NewPasswordForm.vue"
+import NewPasswordForm from "@/components/FormComponents/NewPasswordForm.vue";
describe("NewPasswordForm component", () => {
let wrapper;
@@ -15,4 +15,4 @@ describe("NewPasswordForm component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/user-component-tests/rating.spec.js b/tests/unit/component-tests/user-component-tests/rating.spec.js
index 4435347be1fe0d9dbfdf53f929cb525087d8f9ab..cdbcee60fc44be8c4e04b9f2dc4a42756f5a6699 100644
--- a/tests/unit/component-tests/user-component-tests/rating.spec.js
+++ b/tests/unit/component-tests/user-component-tests/rating.spec.js
@@ -1,5 +1,5 @@
import { mount } from "@vue/test-utils";
-import Rating from "@/components/UserProfileComponents/Rating.vue"
+import Rating from "@/components/UserProfileComponents/Rating.vue";
describe("Rating component", () => {
let wrapper;
@@ -15,4 +15,4 @@ describe("Rating component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
index b6a4474a3c1a8081c89c0dc2cb3e75b1ea0c513c..142860bf75a1138bfa4351ffb688c9982f01adbe 100644
--- a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
+++ b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
@@ -16,15 +16,8 @@ describe("RegisterFormComponent", () => {
expect(wrapper.exists()).toBeTruthy();
});
- it("renders error message to user", async () => {
- await wrapper.setData({ errorMessage: "test message" });
- expect(wrapper.find('li[data-test="customErrorMsg"]').text()).toBe(
- "test message"
- );
- });
-
it("renders the h2 text correctly", () => {
- expect(wrapper.find("h2").text()).toBe("Opprett ny bruker");
+ expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
});
it("has a button", () => {
@@ -36,11 +29,6 @@ describe("RegisterFormComponent", () => {
expect(wrapper.vm.firstName).toBe("Gunnar");
});
- it("displays 5 error messages when submit is clicked with no data", async () => {
- await wrapper.find("button").trigger("click");
- expect(wrapper.findAll("li").length).toBe(5);
- });
-
/* it("button click with correct sum", () => {
wrapper.setData({ guess: "15" });
const button = wrapper.find("button");
diff --git a/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js b/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
index e063a65ba1b599ad3db54182b6fb8243b83c4f4f..1dc9f0a4f379129d888436a42d40bf354ae56f66 100644
--- a/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
@@ -1,5 +1,5 @@
import { mount } from "@vue/test-utils";
-import ResetPasswordForm from "@/components/FormComponents/ResetPasswordForm.vue"
+import ResetPasswordForm from "@/components/FormComponents/ResetPasswordForm.vue";
describe("ResetPasswordForm component", () => {
let wrapper;
@@ -15,4 +15,4 @@ describe("ResetPasswordForm component", () => {
it("is instantiated", () => {
expect(wrapper.exists()).toBeTruthy();
});
-});
\ No newline at end of file
+});
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;
});
},