diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index ba09d59f309de8f11d6f51ff20970e8ec9fea59f..120cfe434e692a74fb3567f5e1d9c8350c2f5d72 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -28,29 +28,53 @@
</div>
</div>
<div>
- <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
+ <!-- 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"
+ />
- <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>
+ <CustomFooterModal
+ @close="this.dialogOpen = false"
+ :visible="dialogOpen"
+ title="Kan ikke bli med"
+ message="Logg inn først for å bli med i en gruppe."
+ />
+ </div>
- <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+ <!-- 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>
- </span>
+ <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+ </div>
</div>
</div>
</template>
<script>
import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import { JoinOpenCommunity, GetIfUserAlreadyInCommunity } from "@/utils/apiutil";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+
export default {
name: "CommunityHeader",
components: {
CommunityHamburger,
+ ColoredButton,
+ CustomFooterModal,
},
data(){
return{
hamburgerOpen: false,
+ dialogOpen: false,
+ member: true,
}
},
props: {
@@ -65,6 +89,7 @@ export default {
}
},
methods: {
+ //To open and close the hamburger menu
toggle: function (){
if(this.hamburgerOpen){
this.hamburgerOpen = false;
@@ -72,7 +97,26 @@ export default {
else{
this.hamburgerOpen = true;
}
+ },
+ joinCommunity: async function(id){
+ const response = await JoinOpenCommunity(id);
+ if(response === "Login to join any community"){
+ this.dialogOpen = true;
+ }
+ else{
+ window.location.reload();
+ }
+ },
+ 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/InputField.vue b/src/components/BaseComponents/InputField.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46fb4fc61a3e964c7c768148f3f546b92e2fa1cf
--- /dev/null
+++ b/src/components/BaseComponents/InputField.vue
@@ -0,0 +1,10 @@
+<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>
\ No newline at end of file
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 8004946f513cee97738fbd7b432d5651dd7e117c..20ad43cb2022468cfd0bdcf9706fa317127d55f8 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -6,6 +6,7 @@
class="mb-5"
/>
+
<!-- Search field -->
<div class="relative" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index d75938f456c1ed61aad0ebc89db8e04a2282bc2f..e6806f59f695d76c8a4cb8c76b6e1a4443813101 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -6,17 +6,37 @@
:message="community.description"
>
<div class="flex justify-center p-2">
+ <!-- If a user is not a member in the community, this button will show -->
<ColoredButton
v-if="!member"
:text="'Bli med'"
@click="goToJoin(community.communityId)"
+ class="m-2"
/>
+
+ <!-- If a user is member this button will show -->
<ColoredButton
v-if="member"
:text="'GÃ¥ til'"
@click="goToGroup(community.communityId)"
+ class="m-2"
+ />
+
+ <!-- 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"
/>
</div>
+
+ <!-- If a user is not logges in and tries to join a community, this message shows -->
+ <div class="flex justify-center p-2">
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ {{ responseToUser }}
+ </p>
+ </div>
</CustomFooterModal>
<div
@click="toggleDialog()"
@@ -44,6 +64,7 @@
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
+import { JoinOpenCommunity } from "@/utils/apiutil";
export default {
name: "CommunityListItem",
@@ -56,6 +77,7 @@ export default {
data() {
return {
dialogOpen: false,
+ responseToUser: '',
};
},
props: {
@@ -66,8 +88,14 @@ export default {
goToGroup(id) {
this.$router.push("/community/" + id);
},
- goToJoin(id) {
- this.$router.push("/community/" + id + "/join");
+ async goToJoin(id) {
+ const response = await JoinOpenCommunity(id);
+ if(response === "Login to join any community"){
+ this.responseToUser = "Logg inn først for å bli med i en gruppe";
+ }
+ else{
+ this.$router.push("/community/" + id);
+ }
},
toggleDialog() {
this.dialogOpen = !this.dialogOpen;
diff --git a/src/components/CommunityComponents/ItemCard.vue b/src/components/CommunityComponents/ItemCard.vue
index 4f4b52526a96f32d29ed839245254a5c12228f1e..089dc01a8043d3409d6806537e853cf95017cc28 100644
--- a/src/components/CommunityComponents/ItemCard.vue
+++ b/src/components/CommunityComponents/ItemCard.vue
@@ -1,6 +1,6 @@
<template>
<div class="mt-5">
- <div class="w-52 rounded bg-gray-200">
+ <div class="w-4/5 rounded bg-gray-200">
<img
class="w-full"
:src="item.img || require('../../assets/default-product.png')"
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 932ee1146ce2ab0610ffd413eee1a0ea9f120abb..daa10d2bc3c3c0c51938da8f888881a1d53ed734 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,9 +1,7 @@
<template>
- <div class="m-6">
+ <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] 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">
@@ -59,7 +57,7 @@
<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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
v-model="v$.group.name.$model"
required
/>
@@ -84,7 +82,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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
v-model="v$.group.place.$model"
required
/>
@@ -112,7 +110,7 @@
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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
required
></textarea>
@@ -177,13 +175,12 @@
<!-- Save item button -->
<div class="flex justify-center mt-10">
- <button
+ <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 +189,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/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index aef1b495ed5f14beffac289d9bc794ddff5db979..62b1c065a3900ed537c8f4499d785b0634acb38c 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,9 +1,7 @@
<template>
- <div class="m-6">
+ <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] 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">Utleie</h3>
<!-- Title -->
<div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -15,7 +13,7 @@
<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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
v-model="v$.item.title.$model"
required
/>
@@ -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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
>
<option class="text-gray-400" value="" disabled selected>
Select a category
@@ -76,7 +74,7 @@
>
<select
v-model="v$.item.selectGroup.$model"
- 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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
>
<option class="text-gray-400" value="" disabled selected>
Select a Group
@@ -113,7 +111,7 @@
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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
required
/>
@@ -140,7 +138,7 @@
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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
required
></textarea>
@@ -164,7 +162,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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
v-model="v$.item.address.$model"
id="adress"
required
@@ -200,12 +198,10 @@
accept="image/png, image/jpeg"
/>
- <button
+ <Button
+ :text="'Velg bilde'"
@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>
+ />
<div v-for="image in item.images" :key="image" class="m-2">
<img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
@@ -214,13 +210,12 @@
<!-- Save item button -->
<div class="flex justify-center">
- <button
+ <Button
+ :text="'Lagre'"
@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>
</div>
</template>
@@ -229,6 +224,7 @@
import useVuelidate from "@vuelidate/core";
import { parseUserFromToken } from "@/utils/token-utils";
import { postNewItem } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
import {
required,
@@ -241,6 +237,10 @@ import {
export default {
name: "AddNewItem",
+ components:{
+ Button,
+ },
+
setup() {
return { v$: useVuelidate() };
},
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c0b698adbeda116c4b3ac997948abc9461..f3259d7e0976297467fba469ab74b43a6e386b8b 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,66 @@
<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
- >
- <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">
+ <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
+ <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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+ 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 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"
+ 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"
+ class="text-red-600 text-sm"
+ 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>
- </div>
- <div
- id="passwordField"
- class="m-6"
- :class="{ error: v$.user.password.$errors.length }"
- >
- <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"
- >
- <div
- class="text-red-600 text-sm"
- v-show="showError"
- id="passwordErrorId"
- >
- {{ error.$message }}
+ <div class="flex items-center justify-between mt-8 ">
+ <router-link to="/resetPassword" class="text-blue-500">Glemt passord?</router-link>
+
+ <Button @click="loginClicked" :text="'Logg på'"></Button>
</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"
- >
- 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 class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700">
+ <router-link to="/register" class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline">Opprette ny konto</router-link>
+ </div>
+ <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-blue-400 hover:underline">{{ message }}</label>
</div>
</div>
</template>
@@ -101,10 +69,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 +84,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),
},
},
};
@@ -136,11 +108,12 @@ export default {
methods: {
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 +127,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 +134,6 @@ export default {
console.log("Something went wrong");
}
},
-
- validate() {
- this.$refs.form.validate();
- },
},
};
</script>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 3f4551a3e677e01b48cfcc29cb889b21d9bf04c1..5eef8afa9a6e08b2828e0b665dc125f7e22138c9 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,133 +1,176 @@
<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 m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
>
- <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
- Opprett ny bruker
- </h2>
+ <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny bruker</h3>
<form @submit.prevent>
- <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
- v-model="email"
- id="email"
+ <div class="grid grid-cols-1 gap-6 mt-4">
+ <div >
+ <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"
+ 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
- v-model="password"
- id="password"
+ <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"
+ 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
- v-model="confirmPassword"
+ <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"
+ 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
- data-test="firstNameTest"
+ <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"
+ 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
- v-model="lastName"
+ <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"
+ 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
- v-model="address"
+ <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"
+ 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 +182,27 @@ 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: sameAs(this.password) },
- firstName: { required },
- lastName: { required },
- address: { required },
+ 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)},
};
},
methods: {
async submit() {
//Display loading symbol
- this.loading = true;
+ this.showError = true;
//Validate form
const result = await this.v$.$validate();
@@ -203,48 +249,9 @@ 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/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 7c558f7639e7a9600dd979cca546f6e4de6401a6..1417e8dce366bae30df45cf16bd4d2bc10f63526 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 mt-[10%] p-6"
>
- <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
@@ -25,9 +25,9 @@
<div
id="dropdown"
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"
+ 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" aria-labelledby="dropdownDefault">
<li>
<router-link
to=""
@@ -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/utils/apiutil.js b/src/utils/apiutil.js
index 254d776260e8f64b495be6934b9ad0935b8a44d6..5f6a2261b6e74816f4c69cb3646ccbe51bf84928 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -186,3 +186,40 @@ export async function GetMembersOfCommunity(communityID) {
console.error(error);
});
}
+
+export function JoinOpenCommunity(communityId) {
+
+ if(tokenHeader().Authorization == "Bearer " + null){
+ console.log("ikke logget på!");
+ return "Login to join any community";
+ }
+
+ return axios
+ .post(API_URL + "communities/" + communityId + "/join", communityId, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
+}
+
+export async function GetIfUserAlreadyInCommunity(communityID) {
+ if(tokenHeader().Authorization == "Bearer " + null){
+ return false;
+ }
+
+ return axios
+ .get(API_URL + "communities/" + communityID + "/user/status", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ return error;
+ });
+}
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c538e3b4796b193048f943bd1be4fee2b88..09d909a1ab309b57dcded51cf99cf8f96d0742c3 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">
<LoginForm></LoginForm>
</div>
</template>
@@ -12,12 +12,4 @@ export default {
LoginForm,
},
};
-</script>
-
-<style scoped>
-.loginPage {
- background-color: white;
- height: 100%;
- overflow: auto;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index e5d5683596755787a0955be481d1b38d91f4a378..2b431f1d01e0312d4b450f11b18ea78c5a033d70 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">
<RegisterFormComponent />
</div>
</template>
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index c4ea15c9d2d5c8f640b8180c226a64e4555535a2..b44558f50dd0a231b1822b6007b947ad16dd2c7c 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="h-screen bg-gray-200 grid place-items-center">
+ <div>
<large-profile-card :isCurrentUser="true" class="align-top" />
</div>
</template>
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
new file mode 100644
index 0000000000000000000000000000000000000000..b18026618f7dea1253f990a46ed5d438fd89a9bf
--- /dev/null
+++ b/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
@@ -0,0 +1,62 @@
+// 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/community-component-tests/__snapshots__/item-card.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
index a6765453f028760966f7f76701f1f0eea6877ec6..232516e6546b4be3f3852f589671a41a1e929911 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
@@ -5,7 +5,7 @@ exports[`ItemCard component renders correctly 1`] = `
class="mt-5"
>
<div
- class="w-52 rounded bg-gray-200"
+ class="w-4/5 rounded bg-gray-200"
>
<img
alt="Item image"
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 a975fa560f988edeb59aee0a62e951b18b9192e2..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ /dev/null
@@ -1,214 +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 mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- >
- Gruppe
- </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"
- >
- <option
- class="text-gray-400"
- disabled=""
- value=""
- >
- Select a Group
- </option>
-
- <option
- class="text-gray-900 text-sm"
- >
- 4040
- </option>
- <option
- class="text-gray-900 text-sm"
- >
- 4041
- </option>
-
- </select>
- <!-- error message for select box -->
-
-
- </div>
- <!-- price -->
- <div
- class="mb-6"
- >
- <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/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__/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/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");