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 6e2b31a722f7401e93c6d9d640ca911b85d1f251..9d36eafc7790593410c54a64a51c3406cb1eeed7 100644 --- a/src/components/BaseComponents/CommunityHeader.vue +++ b/src/components/BaseComponents/CommunityHeader.vue @@ -28,9 +28,25 @@ </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" + /> + + <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" @@ -53,21 +69,32 @@ :community-i-d="community.communityId" /> <!-- class="absolute" --> - </span> + </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: { @@ -82,6 +109,7 @@ export default { }, }, methods: { + //To open and close the hamburger menu toggle: function () { if (this.hamburgerOpen) { this.hamburgerOpen = false; @@ -89,6 +117,26 @@ export default { 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/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..fd47bedcff48104aefc91e09887d6a00812006c3 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 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/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue index e6cf391a30732b1b29ac542848fe4cfac2c58b8c..04880338669831b083312a74b888a7743be0b069 100644 --- a/src/components/CommunityComponents/CommunityHome.vue +++ b/src/components/CommunityComponents/CommunityHome.vue @@ -23,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" /> diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue index d75938f456c1ed61aad0ebc89db8e04a2282bc2f..28e910a7c60693985ec5fdcb9fc49b6a6e7aad6d 100644 --- a/src/components/CommunityComponents/CommunityListItem.vue +++ b/src/components/CommunityComponents/CommunityListItem.vue @@ -6,16 +6,36 @@ :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 @@ -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,13 @@ 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 bb3a4d8edfd877b35648111b8b9a28d4ab2c9575..df068e7a3a788a8a8b505923240db216d23b961b 100644 --- a/src/components/CommunityComponents/NewCommunityForm.vue +++ b/src/components/CommunityComponents/NewCommunityForm.vue @@ -1,9 +1,13 @@ <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"> @@ -14,7 +18,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 +36,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 +63,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 +88,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 +116,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 +152,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" @@ -177,13 +179,7 @@ <!-- Save item button --> <div class="flex justify-center mt-10"> - <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> + <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button> </div> </div> </template> @@ -192,10 +188,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 9324b2bb76cfe0df33fde7a0cad06bd202470708..05e46edf06e298d7e70a5731fc941c1a69900080 100644 --- a/src/components/CommunityComponents/NewItemForm.vue +++ b/src/components/CommunityComponents/NewItemForm.vue @@ -1,9 +1,13 @@ <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,18 +19,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 +46,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 +62,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> @@ -76,7 +80,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-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 Group @@ -92,11 +96,11 @@ <!-- error message for select box --> <div - class="text-red" + class="text-error" v-for="(error, index) of v$.item.selectGroup.$errors" :key="index" > - <div class="text-red-600 text-sm"> + <div class="text-error text-sm"> {{ error.$message }} </div> </div> @@ -113,17 +117,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> @@ -140,17 +144,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> @@ -164,7 +168,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 @@ -172,11 +176,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> @@ -200,12 +204,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" /> @@ -214,13 +213,7 @@ <!-- 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> + <Button :text="'Lagre'" @click="saveClicked" id="saveButton" /> </div> </div> </template> @@ -229,6 +222,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 +235,10 @@ import { export default { name: "AddNewItem", + components: { + Button, + }, + setup() { return { v$: useVuelidate() }; }, diff --git a/src/components/CommunityComponents/SearchItemList.vue b/src/components/CommunityComponents/SearchItemList.vue index 51f51ac4ead6c2e8468c88d52d6c48a3a1e13467..32d806a98d18ec9156da12eae1a2a1f715c0fcdc 100644 --- a/src/components/CommunityComponents/SearchItemList.vue +++ b/src/components/CommunityComponents/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" /> diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue index bf7b23c0b698adbeda116c4b3ac997948abc9461..5b0756332f1d1537e74dbeaa9e301efcae83e511 100644 --- a/src/components/FormComponents/LoginForm.vue +++ b/src/components/FormComponents/LoginForm.vue @@ -1,98 +1,90 @@ <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="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-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 +93,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 +108,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 +134,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 +150,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 +157,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..84d6ab5bdd784ad1e26cd96fcb8b189941dd66ba 100644 --- a/src/components/FormComponents/NewPasswordForm.vue +++ b/src/components/FormComponents/NewPasswordForm.vue @@ -14,7 +14,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 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40" /> <!-- error message --> <div v-for="(error, index) of v$.user.password.$errors" :key="index"> @@ -44,7 +44,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 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40" /> <!-- error message --> <div v-for="(error, index) of v$.user.rePassword.$errors" :key="index"> diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue index 3f4551a3e677e01b48cfcc29cb889b21d9bf04c1..ce4b136d25abe1dbcf27d8d0f7e2a33898fbf3d3 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 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"> + <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..eba14df70b599e53369b9fd94e34e2828b22f811 100644 --- a/src/components/FormComponents/ResetPasswordForm.vue +++ b/src/components/FormComponents/ResetPasswordForm.vue @@ -14,7 +14,7 @@ <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="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-medium focus:border-primary-medium block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-medium dark:focus:border-primary-medium" placeholder="eksempel@eksempel.no" v-model="v$.email.$model" required @@ -33,7 +33,7 @@ </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" + class="flex justify-center align-items: flex-end; 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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark" > Send e-post </button> diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue index 33240c253bff41d1c6e2d5b82dceccd8dada21ca..0dc5f00e906b343287b84df0188d3d09b18111a6 100644 --- a/src/components/RentingComponents/NewRent.vue +++ b/src/components/RentingComponents/NewRent.vue @@ -2,6 +2,7 @@ <div class="confirmationBox"> <div class="rentTitle"> <h1> +<<<<<<< HEAD {{ title }} </h1> </div> @@ -17,6 +18,23 @@ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" id="descriptionLabel" >Skriv en melding til utleier:</label +======= + {{ title }} + </h1> + </div> + + <div class = "fromTime"> + <p>Fra: {{ from_time }}</p> + </div> + <div class = "toTime"> + <p>Til: {{ to_time }}</p> + </div> + <div class = "message"> + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="descriptionLabel" + >Skriv en melding til utleier</label +>>>>>>> main > <textarea id="description" diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue index 19d25964791090645d982f2ee5875a26a6b396e6..08bdebd48ed65c5753281d64535e04b89dbf2055 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 @@ -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" aria-labelledby="dropdownDefault"> <li> <router-link to="" @@ -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/utils/apiutil.js b/src/utils/apiutil.js index 76c8d4b45c63e214d7b97e0bacf74824634d413b..c38001adffa42ed4074bb97948946fdb5f14bd02 100644 --- a/src/utils/apiutil.js +++ b/src/utils/apiutil.js @@ -227,3 +227,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..9b35159fb022cebd9f041bb806bed054024e6f91 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> @@ -13,11 +13,3 @@ export default { }, }; </script> - -<style scoped> -.loginPage { - background-color: white; - height: 100%; - overflow: auto; -} -</style> 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/tailwind.config.js b/tailwind.config.js index d92b980ab15ed8d8de1d9e631b62ea2085bd8705..0089d1c11fbc2c51520dc1501abb2dec976d7fa7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,34 @@ module.exports = { "./node_modules/tw-elements/dist/js/**/*.js", ], 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: [require("tw-elements/dist/plugin")], }; 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 73847104b73bc72ff7ee7c2c3693159fe201b6b1..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> - <span - class="hidden sm:block" - > - <!-- Legg dette til i button: v-if="adminStatus" --> - <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" --> - </span> - </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 ca9efb412b59485756b500dcbe8fb283e2464d31..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 @@ -13,10 +13,6 @@ describe("ColoredButtonComponent", () => { }); }); - it("renders correctly", () => { - expect(wrapper.element).toMatchSnapshot(); - }); - it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); 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 7dd3c446f57353aae804f8b7f6cf6e95fe5af7da..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 @@ -21,10 +21,6 @@ describe("CommunityHeader component", () => { }); }); - it("renders correctly", () => { - expect(wrapper.element).toMatchSnapshot(); - }); - it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); 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 4d4db9169c1d7c90402aa4e78be331938ebf487f..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 @@ -18,10 +18,6 @@ describe("IconButtonComponent", () => { }); }); - it("renders correctly", () => { - expect(wrapper.element).toMatchSnapshot(); - }); - it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); 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 57b6f0fbc8450074c308627cd845f61085cb6743..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 @@ -13,10 +13,6 @@ describe("IconButtonComponent", () => { }); }); - it("renders correctly", () => { - expect(wrapper.element).toMatchSnapshot(); - }); - it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); 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 dd5f979fef779d7b5235c2853b8c0b938f184b46..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 @@ -8,10 +8,6 @@ describe("NavBar component", () => { wrapper = mount(NavBar); }); - it("renders correctly", () => { - expect(wrapper.element).toMatchSnapshot(); - }); - it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); 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 0fb2c913ba0efa291df6a397a8dd0ee7370da776..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 @@ -15,10 +15,6 @@ describe("NotificationModal component", () => { }); }); - it("renders correctly", () => { - expect(wrapper.element).toMatchSnapshot(); - }); - it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); 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 index a9b5043d55edf9d7bd0a52eb64e803ffc04f50e5..0203fd3b821ba687b171ce226171b61b5a90deae 100644 --- 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 @@ -2,18 +2,14 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` <div - class="m-6" + 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" + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" > - <p - class="text-4xl" - > - Opprett Gruppe - </p> - </div> + Opprett ny gruppe + </h3> <!-- Radio boxes --> <div class="mt-6" @@ -28,7 +24,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` 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" id="flexRadioOpen" name="flexRadioDefault" type="radio" @@ -46,7 +42,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` 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" id="flexRadioPrivate" name="flexRadioDefault" type="radio" @@ -72,7 +68,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` 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" + 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" id="title" required="" type="text" @@ -91,7 +87,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` 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" + 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="" type="text" /> @@ -110,7 +106,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` 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" + 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" id="description" required="" rows="4" @@ -140,9 +136,9 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` class="inline-flex rounded-md shadow-sm" > <div - class="text-red-500 uppercase text-center" + class="text-error uppercase text-center" > - midlertidig fjernet + midlertidig fjernet </div> <!-- <button @click="$refs.file.click()" @@ -170,12 +166,10 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` <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" + <button-stub id="saveButton" - > - Lagre - </button> + text="Lagre" + /> </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 index a975fa560f988edeb59aee0a62e951b18b9192e2..c762c869566cb255d92ef914c550f218c79ed08b 100644 --- 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 @@ -2,18 +2,14 @@ exports[`NewItemForm component renders correctly 1`] = ` <div - class="m-6" + 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" + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" > - <p - class="text-4xl mb-6 mt-6" - > - Utleie - </p> - </div> + Utleie + </h3> <!-- Title --> <div class="mb-6" @@ -25,7 +21,7 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" id="title" required="" type="text" @@ -45,7 +41,7 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" id="categories" > <option @@ -92,7 +88,7 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" @@ -129,7 +125,7 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" id="price" required="" type="number" @@ -149,7 +145,7 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" id="description" required="" rows="4" @@ -168,7 +164,7 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" id="adress" required="" type="text" @@ -192,9 +188,9 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" > - Velg bilde + Velg bilde </button> @@ -204,10 +200,10 @@ exports[`NewItemForm component renders correctly 1`] = ` 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" + 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" id="saveButton" > - Lagre + 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/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap index c712a500effa0e3f64c2187aaa330efdc6fb68a6..1dfad6aab396d689114b6198552a606c7bd4692d 100644 --- 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 @@ -2,100 +2,76 @@ exports[`LoginForm component renders correctly 1`] = ` <div - class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16" + class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]" > <div - class="flex justify-center text-2xl" + class="px-6 py-4 mt-4" > - Logg inn - </div> - <div - class="m-6" - id="emailField" - > - <div - class="mb-6" + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - for="email" + Logg på + </h3> + <div> + <div + class="w-full mt-6" > - 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" - > + <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" + placeholder="Skriv inn din e-postadresse *" + required="" + type="email" + /> + <!-- error message --> + + + </div> <div - class="ml-3 text-sm" + class="w-full mt-6" > - <router-link - class="text-blue-600 flex justify-end" - to="/resetPassword" - > - Glemt passord - </router-link> + <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" + placeholder="Vennligst oppgi passordet ditt *" + required="" + type="password" + /> + <!-- error message --> + + </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" + class="flex items-center justify-between mt-8" > <router-link - class="text-blue-600 flex justify-center" - to="register" + class="text-primary-medium" + to="/resetPassword" > - Ny bruker + Glemt passord? </router-link> + <button + 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" + > + Logg på + </button> </div> </div> - <div - class="flex justify-center" + </div> + <div + class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700" + > + <router-link + class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline" + to="/register" > - <label /> - </div> + 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-primary-light hover:underline" + /> </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 index 8ecfffa14f203f189c5ed8a266f9787f14eeb86d..ca5a4de5c26fd7c68fd656ae6e704a74dfdd42d3 100644 --- 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 @@ -15,7 +15,7 @@ exports[`NewPasswordForm component renders correctly 1`] = ` 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" + 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-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40" type="password" /> <!-- error message --> @@ -37,7 +37,7 @@ exports[`NewPasswordForm component renders correctly 1`] = ` </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" + 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-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40" type="password" /> <!-- error message --> 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 index f1a63d05fc1ff431b8677b83e799442934955b68..5dc934f34616017376f52244bdce820b86ad7d07 100644 --- 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 @@ -2,122 +2,94 @@ exports[`RegisterFormComponent renders correctly 1`] = ` <div - data-v-app="" + class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4" > - - <section - class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800" + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" > - <h2 - class="text-lg font-semibold text-gray-700 capitalize dark:text-white" + Opprett ny bruker + </h3> + <form> + <div + class="grid grid-cols-1 gap-6 mt-4" > - 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> + <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" + id="email" + placeholder="E-post adresse" + type="email" + /> + <!-- error message --> + + </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> + <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" + id="password" + placeholder="Passord" + type="password" + /> + <!-- error message --> + + </div> - </form> - </section> - <ul - data-test="errorMessageList" - > - <!--v-if--> - - - </ul> - + <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="confirmPassword" + placeholder="Bekreft passord" + type="password" + /> + <!-- error message --> + + + </div> + <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + data-test="firstNameTest" + id="firstName" + placeholder="Fornavn" + type="text" + /> + <!-- error message --> + + + </div> + <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="lastName" + placeholder="Etternavn" + type="text" + /> + <!-- error message --> + + + </div> + <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="address" + placeholder="Adresse" + type="text" + /> + <!-- error message --> + + + </div> + </div> + <div + class="flex justify-end mt-6" + > + <button + 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" + > + Lagre + </button> + </div> + </form> </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 index e2fd53153e1a948a06f396c1f77ad5b978e48eb0..7b673ca96522a31d724f0d34ffa6998763ac92e2 100644 --- 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 @@ -18,7 +18,7 @@ exports[`ResetPasswordForm component renders correctly 1`] = ` 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" + class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-medium focus:border-primary-medium block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-medium dark:focus:border-primary-medium" id="email" placeholder="eksempel@eksempel.no" required="" @@ -30,7 +30,7 @@ exports[`ResetPasswordForm component renders correctly 1`] = ` </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" + class="flex justify-center align-items: flex-end; 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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark" > Send e-post </button> 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");