WIP step before loading screen

Author: supalarry

frontend/src/components/app/onboarding/Location.vue

@@ -0,0 +1,54 @@
+<template>
+  <SingleChoice
+    v-bind:slide="{
+      key: 'location',
+      current: slide.current,
+      count: slide.count,
+      header: 'Location',
+      subheader: 'Would you like to share your location to get potential matches closer to you?',
+      options: ['yes', 'no'],
+      buttonText: slide.buttonText}"
+      v-on:saveInput="saveLocation"></SingleChoice>
+</template>
+
+<script>
+import SingleChoice from '@/components/app/onboarding/SingleChoice.vue';
+
+export default {
+  props: ['slide'],
+  components: {
+    SingleChoice,
+  },
+  methods: {
+    async saveLocation(...args) {
+      const [key, value] = args;
+      if (key === 'location') {
+        if (value === 'yes') {
+          navigator.geolocation.getCurrentPosition(
+            this.locationAllowed,
+            this.locationDenied,
+            { enableHighAccuracy: true },
+          );
+        } else {
+          await this.locationDenied();
+        }
+      }
+    },
+    async locationAllowed(position) {
+      const { latitude } = position.coords;
+      const { longitude } = position.coords;
+      await this.sendLocation({ lat: latitude, lng: longitude, ip: '0.0.0.0' });
+    },
+    async locationDenied() {
+      let ipRequest = await fetch('https://api.ipify.org?format=json');
+      ipRequest = await ipRequest.json();
+      const { ip } = ipRequest;
+      await this.sendLocation({ ip });
+    },
+    async sendLocation(data) {
+      await this.$http.put('/profile/edit/geolocation', data);
+      this.$emit('nextSlide');
+    },
+  },
+};
+</script>

frontend/src/components/app/onboarding/SingleChoice.vue

@@ -3,6 +3,7 @@
   <section class="onboarding-sub-container">
     <h1 class="text-gray-matcha">{{slide.current}} / {{slide.count}}</h1>
     <h1 class="onboarding-sub-container-content-heading leading-none">{{slide.header}}</h1>
+    <p v-if="slide.subheader" class="text-gray-matcha text-center max-w-xs w-full mt-4">{{slide.subheader}}</p>
     <div v-bind:class="{'onboarding-selection-button-container': true, 'justify-center': slide.options.length < 5}">
       <SelectionButton v-for="(option, index) in slide.options" :key="index + option"
         v-bind:val="option"

frontend/src/router/index.js

@@ -9,6 +9,7 @@ import AccountVerifiedError from '../views/auth/AccountVerifiedError.vue';
 import ResetPassword from '../views/auth/ResetPassword.vue';
 import ResetPasswordError from '../views/auth/ResetPasswordError.vue';
 import Onboarding from '../views/app/Onboarding.vue';
+import Browse from '../views/app/Browse.vue';
 import store from '../store/index';
 
 Vue.use(VueRouter);
@@ -29,6 +30,17 @@ function notLoggedInRedirectLogin(to, from, next) {
   }
 }
 
+function blockRepeatedOnboarding(to, from, next) {
+  const user = store.getters.getLoggedInUser;
+  if (user && user.is_profile_completed) {
+    next('/browse');
+  } else if (user && !user.is_profile_completed) {
+    next();
+  } else {
+    next('/accounts/signin');
+  }
+}
+
 const routes = [
   {
     path: '/',
@@ -81,6 +93,12 @@ const routes = [
     path: '/onboarding',
     name: 'Onboarding',
     component: Onboarding,
+    beforeEnter: blockRepeatedOnboarding,
+  },
+  {
+    path: '/browse',
+    name: Browse,
+    component: Browse,
     beforeEnter: notLoggedInRedirectLogin,
   },
 ];

frontend/src/store/modules/user.js

@@ -17,6 +17,9 @@ const mutations = {
   logout(state) {
     state.user = null;
   },
+  profileCompleted(state) {
+    state.user.is_profile_completed = true;
+  },
 };
 
 const actions = {
@@ -26,6 +29,9 @@ const actions = {
   logout(state) {
     state.commit('logout');
   },
+  profileCompleted(state) {
+    state.commit('profileCompleted');
+  },
 };
 
 export default {

frontend/src/views/app/Onboarding.vue

@@ -80,6 +80,14 @@
       buttonText}"
       v-on:saveInput="saveInput"
       v-if="slideCurrent === 6"></Textblock>
+    <Location
+      v-bind:slide="{
+      key: 'location',
+      current: slideCurrent,
+      count: slideCount,
+      buttonText}"
+      v-on:nextSlide="nextSlide"
+      v-if="slideCurrent === 7"></Location>
   </div>
 </template>
 
@@ -90,6 +98,7 @@ import SingleChoice from '@/components/app/onboarding/SingleChoice.vue';
 import MultipleChoice from '@/components/app/onboarding/MultipleChoice.vue';
 import MainAndSecondaryImagesUpload from '@/components/app/onboarding/MainAndSecondaryImagesUpload.vue';
 import Textblock from '@/components/app/onboarding/Textblock.vue';
+import Location from "@/components/app/onboarding/Location";
 
 export default {
   components: {
@@ -98,24 +107,30 @@ export default {
     MultipleChoice,
     MainAndSecondaryImagesUpload,
     Textblock,
+    Location,
   },
   data: () => ({
     slideCurrent: 0,
-    slideCount: 6,
+    slideCount: 7,
     userData: {},
   }),
   methods: {
     saveInput(...args) {
       let [key, value] = args;
       if (key === 'birthdate') {
         value = this.formatBirthdate(value);
+      } else if (key === 'location') {
+        value = this.processLocation(value);
       }
       this.userData[key] = value;
       this.nextSlide();
     },
-    nextSlide() {
+    async nextSlide() {
       if (this.slideCurrent === this.slideCount) {
-        this.$router.push('/browse');
+        await this.$http.post('/profile/complete', this.userData);
+        await this.$store.dispatch('profileCompleted');
+        console.log('setting up profile might take a while');
+        // await this.$router.push('/browse');
       }
       if (this.slideCurrent < this.slideCount) {
         this.slideCurrent += 1;
@@ -132,6 +147,13 @@ export default {
       let birthyear = new Date().getFullYear() - age;
       return '01/01/' + birthyear;
     },
+    processLocation(allowAccessToLocation) {
+      if (allowAccessToLocation) {
+        navigator.geolocation.getCurrentPosition(function(position) {
+          console.log(position.coords.latitude + position.coords.longitude);
+        });
+      }
+    }
   },
   computed: {
     buttonText() {