Components and views fixes, HeroIcon added

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/vue": "^1.0.6",
         "@mdi/font": "5.9.55",
+        "@vue-hero-icons/outline": "^1.7.2",
         "@vuelidate/core": "^2.0.0-alpha.40",
         "@vuelidate/validators": "^2.0.0-alpha.28",
         "axios": "^0.26.1",
@@ -2826,6 +2827,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vue-hero-icons/outline": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+      "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+      "dependencies": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "dev": true,
@@ -4171,6 +4180,11 @@
         "follow-redirects": "^1.14.8"
       }
     },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "dev": true,
@@ -16880,6 +16894,14 @@
       "version": "21.0.0",
       "dev": true
     },
+    "@vue-hero-icons/outline": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+      "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+      "requires": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "dev": true
@@ -17766,6 +17788,11 @@
         "follow-redirects": "^1.14.8"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-jest": {
       "version": "27.5.1",
       "dev": true,

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/vue": "^1.0.6",
     "@mdi/font": "5.9.55",
+    "@vue-hero-icons/outline": "^1.7.2",
     "@vuelidate/core": "^2.0.0-alpha.40",
     "@vuelidate/validators": "^2.0.0-alpha.28",
     "axios": "^0.26.1",

src/components/BaseComponents/NavBar.vue

@@ -12,25 +12,22 @@
     </div>
     <ul class="flex">
       <li>
-        <img
+        <PlusIcon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/additem.png"
           alt="Legg til"
           @click="$router.push('/addNewItem')"
         />
       </li>
       <li>
-        <img
+        <ChatAlt2Icon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/messages.png"
           alt="Meldinger"
           @click="$router.push('/messages')"
         />
       </li>
       <li>
-        <img
+        <UserCircleIcon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/profile.png"
           alt="Profil"
           @click="loadProfile"
         />
@@ -41,10 +38,17 @@
 
 <script>
 import { parseUserFromToken } from "@/utils/token-utils";
+import {PlusIcon, ChatAlt2Icon, UserCircleIcon} from "@heroicons/vue/outline";
 
 export default {
   name: "NavBar.vue",
 
+  components:{
+    PlusIcon,
+    ChatAlt2Icon,
+    UserCircleIcon,
+  },
+
   methods: {
     async loadProfile() {
       if (this.$store.state.user.token !== null) {

src/components/CommunityComponents/NewCommunityForm.vue

 <template>
-  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
     <!-- Component heading -->
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
 
@@ -158,13 +158,6 @@
         </button> -->
 
         <!-- Button for removing an image -->
-        <button
-          class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
-          v-show="imageAdded"
-          @click="removeImage"
-        >
-          <img src="../../assets/removeIcon.png" alt="Remove icon image" />
-        </button>
       </div>
 
       <!-- Div box for showing all chosen images -->
@@ -174,7 +167,7 @@
     </div>
 
     <!-- Save item button -->
-    <div class="flex justify-center mt-10">
+    <div class="flex justify-center mt-10 float-right">
       <Button
         @click="saveClicked"
         id="saveButton"

src/components/CommunityComponents/NewItemForm.vue

 <template>
-  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
     <!-- Component heading -->
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
 
     <!-- Title -->
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">

src/components/FormComponents/LoginForm.vue

 <template>
-  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
     <div class="px-6 py-4 mt-4">
 
       <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Logg på</h3>

src/components/FormComponents/NewPasswordForm.vue

 <template>
   <div
-    class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
+      class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
+
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</h3>
+
     <div
       id="firstPasswordField"
       :class="{ error: v$.user.password.$errors.length }"
@@ -14,7 +17,7 @@
       <input
         type="password"
         v-model="v$.user.password.$model"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
       />
       <!-- error message -->
       <div v-for="(error, index) of v$.user.password.$errors" :key="index">
@@ -44,7 +47,7 @@
       <input
         type="password"
         v-model="v$.user.rePassword.$model"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
       />
       <!-- error message -->
       <div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
@@ -59,25 +62,27 @@
     </div>
 
     <div id="buttonsField" class="mt-6">
-      <button
+      <Button
+          class="float-right"
         @click="setNewPassword"
-        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-      >
-        Endre passord
-      </button>
+        :text="'Sett ny passord'"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
-import { required, minLength, sameAs } from "@vuelidate/validators";
+import { required, minLength, sameAs, helpers } from "@vuelidate/validators";
 import { doNewPassword } from "@/utils/apiutil";
 import { mapState } from "vuex";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "NewPasswordForm.vue",
 
+  components:{
+    Button,},
   setup() {
     return { v$: useVuelidate() };
   },
@@ -85,13 +90,12 @@ export default {
     return {
       user: {
         password: {
-          required,
-          minLength: minLength(8),
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
+          minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
         },
         rePassword: {
-          required,
-          minLength: minLength(8),
-          sameAs: sameAs(this.user.password),
+          sameAs: helpers.withMessage('Passordene må være like', sameAs(this.user.password)),
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
         },
       },
     };
@@ -129,7 +133,7 @@ export default {
 
       if (newPasswordResponse.newPasswordSet === true) {
         console.log("New password set");
-        await this.$router.push("/endre");
+        await this.$router.push("/");
       } else if (newPasswordResponse.newPasswordSet === false) {
         console.log("Couldn't set new password");
       } else {

src/components/FormComponents/RegisterForm.vue

 <template>
   <div
-    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
+    class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
   >
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny bruker</h3>
 

src/components/FormComponents/ResetPasswordForm.vue

 <template>
-  <div class="resetPassword">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</h3>
+
     <div
       id="emailField"
       class="m-6"
@@ -14,10 +17,11 @@
         <input
           type="email"
           id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
           placeholder="eksempel@eksempel.no"
           v-model="v$.email.$model"
           required
+          @keyup.enter="sendHome"
         />
         <!-- error message -->
         <div v-for="(error, index) of v$.email.$errors" :key="index">
@@ -30,22 +34,27 @@
           </div>
         </div>
       </div>
+      <Button
+          class="float-right"
+          @click="sendHome"
+          :text="'Tilbakestill passord'"
+      />
     </div>
-    <button
-      @click="sendHome"
-      class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-    >
-      Send e-post
-    </button>
+
   </div>
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
+
 export default {
   name: "ResetPassword.vue",
 
+  components:{
+    Button,
+  },
   data() {
     return {
       showError: false,
@@ -58,7 +67,7 @@ export default {
   validations() {
     return {
       email: {
-        required,
+        required: helpers.withMessage('Feltet må være utfylt', required),
         email: helpers.withMessage(`E-posten er ugyldig`, email),
       },
     };

src/components/UserProfileComponents/LargeProfileCard.vue

@@ -27,7 +27,7 @@
         v-show="dropdown"
         class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 "
       >
-        <ul class="py-1 absolute bg-white" aria-labelledby="dropdownDefault">
+        <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
           <li>
             <router-link
               to=""

src/views/CommunityViews/NewCommunityView.vue

 <template>
-  <NewCommunity />
+  <div class="h-screen grid md:mt-8">
+    <NewCommunity />
+  </div>
+
 </template>
 
 <script>

src/views/CommunityViews/NewItemView.vue

 <template>
-  <AddNewItem></AddNewItem>
+  <div class="h-screen grid md:mt-8">
+    <AddNewItem/>
+  </div>
+
 </template>
 
 <script>