add age selection to onboarding

Author: supalarry

frontend/src/assets/css/tailwind.css

@@ -355,6 +355,20 @@
     .onboarding-textarea:active, .onboarding-textarea:focus {
         outline: none;
     }
+
+    .onboarding-selection-button-container {
+        @apply h-64;
+        @apply pb-1;
+        @apply my-8;
+        @apply border-b-4;
+        @apply max-w-xs;
+        @apply border-white-matcha;
+        @apply flex;
+        @apply flex-col;
+        @apply items-center;
+        @apply w-full;
+        @apply overflow-scroll;
+    }
 }
 
 @tailwind utilities;

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

@@ -4,7 +4,7 @@
     <h1 class="text-gray-matcha">{{slide.current}} / {{slide.count}}</h1>
     <h1 class="onboarding-sub-container-content-heading leading-none">{{slide.header}}</h1>
     <p class="mt-2 text-gray-matcha">{{optionsSelectedCount}} / {{slide.maxOptionsForSelection}}</p>
-    <div class="h-64 pb-1 my-8 border-b-4 max-w-xs border-white-matcha flex flex-col items-center w-full overflow-scroll">
+    <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"
         v-bind:canBeSelected="canSelectMoreOptions"

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

@@ -3,7 +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>
-    <div class="h-64 flex flex-col items-center justify-center w-full">
+    <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"
         v-bind:canBeSelected="true"

frontend/src/views/app/Onboarding.vue

@@ -5,6 +5,16 @@
       v-bind:slide="{buttonText}"
       v-on:nextSlide="nextSlide"
       v-if="slideCurrent === 0"></Introduction>
+    <SingleChoice
+      v-bind:slide="{
+      key: 'age',
+      current: slideCurrent,
+      count: slideCount,
+      header: 'My age',
+      options: generateAllowedAge(),
+      buttonText}"
+      v-on:saveInput="saveInput"
+      v-if="slideCurrent === 1"></SingleChoice>
     <SingleChoice
       v-bind:slide="{
       key: 'gender',
@@ -14,7 +24,7 @@
       options: ['Male', 'Female', 'Other'],
       buttonText}"
       v-on:saveInput="saveInput"
-      v-if="slideCurrent === 1"></SingleChoice>
+      v-if="slideCurrent === 2"></SingleChoice>
     <SingleChoice
       v-bind:slide="{
       key: 'orientation',
@@ -24,7 +34,7 @@
       options: ['Heterosexual', 'Homosexual', 'Bi-sexual', 'Other'],
       buttonText}"
       v-on:saveInput="saveInput"
-      v-if="slideCurrent === 2"></SingleChoice>
+      v-if="slideCurrent === 3"></SingleChoice>
     <MultipleChoice
       v-bind:slide="{
       key: 'interests' ,
@@ -46,7 +56,7 @@
       maxOptionsForSelection: 10,
       buttonText}"
       v-on:saveInput="saveInput"
-      v-if="slideCurrent === 3"></MultipleChoice>
+      v-if="slideCurrent === 4"></MultipleChoice>
     <MainAndSecondaryImagesUpload
       v-bind:slide="{
       key: 'images',
@@ -58,7 +68,7 @@
       maxImagesAllowed: 5,
       buttonText}"
       v-on:saveInput="saveInput"
-      v-if="slideCurrent === 4"></MainAndSecondaryImagesUpload>
+      v-if="slideCurrent === 5"></MainAndSecondaryImagesUpload>
     <Textblock
       v-bind:slide="{
       key: 'bio',
@@ -69,11 +79,12 @@
       placeholder: 'I am best described as ...',
       buttonText}"
       v-on:saveInput="saveInput"
-      v-if="slideCurrent === 5"></Textblock>
+      v-if="slideCurrent === 6"></Textblock>
   </div>
 </template>
 
 <script>
+/* eslint-disable */
 import Introduction from '@/components/app/onboarding/Introduction.vue';
 import SingleChoice from '@/components/app/onboarding/SingleChoice.vue';
 import MultipleChoice from '@/components/app/onboarding/MultipleChoice.vue';
@@ -90,7 +101,7 @@ export default {
   },
   data: () => ({
     slideCurrent: 0,
-    slideCount: 5,
+    slideCount: 6,
     userData: {},
   }),
   methods: {
@@ -108,6 +119,13 @@ export default {
         this.slideCurrent += 1;
       }
     },
+    generateAllowedAge() {
+      const ages = [];
+      for (let i = 18; i < 100; i += 1) {
+        ages.push(i);
+      }
+      return ages;
+    },
   },
   computed: {
     buttonText() {