Merge branch 'main' into community-admin

package-lock.json

@@ -16,6 +16,7 @@
         "axios": "^0.26.1",
         "core-js": "^3.8.3",
         "cssom": "^0.5.0",
+        "heroicons": "^1.0.6",
         "jwt-decode": "^3.1.2",
         "net": "^1.0.2",
         "roboto-fontface": "*",
@@ -7540,6 +7541,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "dev": true,
@@ -19967,6 +19973,11 @@
       "version": "1.2.0",
       "dev": true
     },
+    "heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "highlight.js": {
       "version": "10.7.3",
       "dev": true

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "cssom": "^0.5.0",
+    "heroicons": "^1.0.6",
     "jwt-decode": "^3.1.2",
     "net": "^1.0.2",
     "roboto-fontface": "*",

src/components/CommunityComponents/CommunityHome.vue

@@ -140,7 +140,6 @@ export default {
       this.items = await GetListingsInCommunity(this.communityID);
       for (var i = 0; i < this.items.length; i++) {
         let images = await getItemPictures(this.items[i].listingID);
-        console.log(images);
         if (images.length > 0) {
           this.items[i].img = images[0].picture;
         }

src/components/CommunityComponents/CommunityList.vue

@@ -8,6 +8,7 @@
 
 <script>
 import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
+//import Join
 
 export default {
   name: "CommunityList",

src/components/CommunityComponents/CommunityListItem.vue

@@ -8,12 +8,20 @@
     <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"
+        v-if="!member && community.visibility!==0"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
         class="m-2"
       />
 
+        <ColoredButton
+        v-if="!member && community.visibility===0"
+        :text="'Spør om å bli med'"
+        @click="goToRequest(community.communityId)"
+        class="m-2"
+        />
+
+      
       <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
@@ -96,6 +104,9 @@ export default {
         this.$router.push("/community/" + id);
       }
     },
+    goToRequest(id){
+        this.$router.push("/community/" + id + "/private/join")
+    },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;
     },

src/components/CommunityComponents/CommunityRequestForm.vue

+<template>
+  <div
+    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+  >
+    <!-- Component heading -->
+    <div
+      class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
+    >
+      Bli med i: {{community.name}}
+    </div>
+
+
+    <!-- message -->
+    <div class="mt-6" :class="{ error: v$.message.$errors.length }">
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="messageLabel"
+        > Melding til administrator av gruppa: </label
+      >
+      <textarea
+        id="message"
+        rows="4"
+        v-model="message"
+        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 message -->
+      <div
+        class="text-error"
+        v-for="(error, index) of v$.message.$errors"
+        :key="index"
+      >
+        <div class="text-error text-sm">
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Save item button -->
+    <div class="flex justify-center mt-10 float-right">
+      <Button @click="saveClicked" id="saveButton" :text="'Send'"> </Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required, helpers, maxLength } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
+import {tokenHeader}  from "@/utils/token-utils";
+import {GetCommunity} from "@/utils/apiutil";
+
+export default {
+  name: "CommunityRequestForm.vue",
+
+  components: {
+    Button,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
+  validations() {
+    return {
+        message: {
+          required: helpers.withMessage(
+            () => "Meldingen kan ikke være tom",
+            required
+          ),
+          max: helpers.withMessage(
+            () => `Meldingen kan inneholde max 200 tegn`,
+            maxLength(200)
+          ),
+        },
+
+    };
+  },
+  data() {
+    return {
+        message: "",
+        communityId: null,
+        community: {},
+    };
+  },
+  computed: {
+  },
+  methods: {
+    //TODO fix so that community id is set (not null)
+    async saveClicked() {
+        this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+
+      await axios.post(process.env.VUE_APP_BASEURL+ `communities/${this.communityID}/private/join`, {message: this.message, }, {headers: tokenHeader()} );
+    },
+     getCommunityFromAPI: async function () {
+      this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+        console.log("Dette er community id =" + this.communityID)
+      this.community = await GetCommunity(this.communityID);
+      console.log(this.community)
+    }
+  },
+   async created() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
+  },
+};
+</script>

src/components/FormComponents/NewPasswordForm.vue

@@ -134,12 +134,19 @@ export default {
         return;
       }
 
-      const newPasswordInfo = {
-        token: this.token,
-        newPassword: this.password,
-      };
+      const newPassword = this.user.password;
 
-      const newPasswordResponse = doNewPassword(newPasswordInfo);
+      const newPasswordResponse = await doNewPassword(newPassword);
+
+      if (newPasswordResponse != null) {
+        console.log("New password set");
+        this.$store.commit("saveToken", newPasswordResponse);
+        await this.$router.push("/");
+      } else {
+        console.log("Couldn't set new password");
+      }
+
+      /*
 
       if (newPasswordResponse.newPasswordSet === true) {
         console.log("New password set");
@@ -149,6 +156,8 @@ export default {
       } else {
         console.log("Something went wrong");
       }
+
+      */
     },
     validate() {
       this.$refs.form.validate();

src/router/index.js

@@ -94,6 +94,11 @@ const routes = [
     name: "communityHome",
     component: () => import("../views/CommunityViews/CommunityHomeView.vue"),
   },
+  {
+    path: "/community/:communityID/private/join",
+    name: "communityRequest",
+    component: () => import("../views/CommunityViews/CommunityRequestView.vue"),
+  },
   {
     beforeEnter: guardRoute,
     path: "/test",

src/utils/apiutil.js

@@ -84,15 +84,22 @@ export function getAverageRating(userid) {
       console.error(error);
     });
 }
-export function doNewPassword() {
-  //m
-  //add newPasswordInfo to input
-  const auth = { newPasswordSet: false };
-  //return axios
-  //.post(API_URL + "newPassword", newPasswordInfo)
-  //.then((response) => {auth.newPasswordSet = true;return auth;})
-  //.catch((error) => {console.error(error);return auth;});
-  return auth; //remove after axios is added
+export async function doNewPassword(password) {
+  let res = await axios({
+    method: "put",
+    url: API_URL + "user/profile/password",
+    headers: tokenHeader(),
+    data: {
+      password: password,
+    },
+  })
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  return res.data;
 }
 
 export function postNewItem(itemInfo) {
@@ -215,6 +222,8 @@ export async function GetListingsInCommunity(communityID) {
     });
 }
 
+
+
 export async function GetMembersOfCommunity(communityID) {
   return axios
     .get(API_URL + "community/" + communityID + "/members", {

src/views/CommunityViews/CommunityRequestView.vue

+<template>
+  <CommunityRequestForm />
+</template>
+
+<script>
+import CommunityRequestForm from "@/components/CommunityComponents/CommunityRequestForm.vue";
+export default {
+  name: "CommunityRequestView",
+  components: {
+    CommunityRequestForm,
+  },
+};
+</script>