success message on location change

Author: supalarry

frontend/src/views/app/Settings.vue

@@ -106,7 +106,8 @@
         <div class="text-center px-8 py-8 border-t border-gray-300 w-full">
           <h1 class="inline-block mr-3 font-bold text-gray-matcha leading-none">Location</h1>
           <h1 class="text-md font-normal opacity-50 text-gray-matcha mx-auto pb-2 max-w-sm">If you refused sharing location, it will be approximated from your computer address </h1>
-          <h1 class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
+          <h1 v-if="!locationUpdateSuccess" class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer" v-on:click="updateLocation()">Update current location</h1>
+          <h1 v-else class="mx-auto onboarding-sub-container-content-button-outline max-w-sm border font-normal mt-2 px-2 cursor-pointer text-green-500">Success</h1>
         </div>
         <div class="text-center py-8 w-full px-8 border-t border-gray-300">
           <h1 class="font-bold text-gray-matcha">Images<span class="text-md font-normal ml-2 opacity-50 text-gray-matcha">{{this.$store.getters.getLoggedInUser.images.length}} / 5</span></h1>
@@ -160,6 +161,7 @@ export default {
     image: {
       error: null,
     },
+    locationUpdateSuccess: false,
   }),
   computed: {
     getShow() {
@@ -179,13 +181,21 @@ export default {
       const { longitude } = position.coords;
       const locationData = { lat: latitude, lng: longitude, ip: '0.0.0.0' };
       await this.$http.put('/profile/edit/geolocation', locationData);
+      this.locationUpdateSuccess = true;
+      setTimeout(() => {
+        this.locationUpdateSuccess = false;
+      }, 3000);
     },
     async locationDenied() {
       let ipRequest = await fetch('https://api.ipify.org?format=json');
       ipRequest = await ipRequest.json();
       const { ip } = ipRequest;
       const locationData = { ip };
       await this.$http.put('/profile/edit/geolocation', locationData);
+      this.locationUpdateSuccess = true;
+      setTimeout(() => {
+        this.locationUpdateSuccess = false;
+      }, 3000);
     },
     async selectFile() {
       this.image.error = '';