:construction: Set up new Auth component to survey

frontend/src/components/onboarding/Auth.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+.wait-message
+    p.verify-message Thanks for signing up!
+    p.verify-message We'll just need you to verify your email address to continue. Please check your email!
+    w-button.ma1.grow(
+        @click='handleSubmit'
+    ) TEST BUTTON
+</template>
+
+<script>
+// import { Authenticator } from '../services/auth.service.js'
+export default {
+    name: 'Auth',
+    props: {
+        question: {
+            required: true,
+            type: String,
+            default: 'authenticated question!!',
+        },
+    },
+    emits: ['update-answers'],
+    created() {
+        // TODO: Put front end ping here to send email via Brevo on the backend
+        console.log('hi from auth :=>')
+    },
+    methods: {
+        // TODO: remove test button above and use a watcher instead to emit this
+        handleSubmit() {
+            const payload = {
+                question: this.question,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>
+
+<style>
+.wait-message {
+    margin: 5rem auto;
+    text-align: center;
+    width: 90%;
+    max-width: 35rem;
+    font-size: 150%;
+    font-weight: bold;
+}
+</style>

frontend/src/components/onboarding/Splash.vue

@@ -27,7 +27,6 @@ w-flex.column
 </template>
 
 <script>
-
 export default {
     name: 'Splash',
     props: {
@@ -42,11 +41,6 @@ export default {
         handleSubmit() {
             this.$emit('update-answers', null)
         },
-        handleLogin() {
-            console.log('hello world :=>')
-            // this.$emit('update-answers', null)
-        },
-
     },
 }
 </script>

frontend/src/components/onboarding/index.js

@@ -1,4 +1,5 @@
 import Splash from './Splash.vue'
+import Auth from './Auth.vue'
 import AccountType from './AccountType.vue'
 import CompanyID from './CompanyID.vue'
 import Role from './Role.vue'
@@ -13,6 +14,7 @@ import QuestionResponse from './QuestionResponse.vue'
 
 export default {
     Splash,
+    Auth,
     AccountType,
     CompanyID,
     Role,

frontend/src/entities/survey/survey.answer.validator.js

@@ -7,6 +7,8 @@ const answerValidator = {
         minDomainSegments: 2,
         tlds: { allow: domains },
     }),
+    // TODO: change to valdate against JWT??
+    auth: Joi.any(),
 
     password: Joi.string().min(10).max(30).pattern(new RegExp('[a-zA-Z0-9]+')),
     // TODO: Change if going international (only works in usa)

frontend/src/utils/lang.js

@@ -15,6 +15,20 @@ const splash = {
     invalidInputPrompt: null,
 }
 
+// Auth page is also unique in survey steps and is spliced in as well
+const auth = {
+    response_key_id: 21,
+    response_key_category: 'auth',
+    response_key_prompt: 'auth page',
+    response_key_description: 'required to authenticate user signup',
+    aspect: null,
+    category: 'auth',
+    component: 'Auth',
+    survey_stage: 'auth',
+    placeholder: null,
+    invalidInputPrompt: null,
+}
+
 // Easily reorder steps of survey here:
 const allSteps = {
     usa: {
@@ -122,4 +136,12 @@ possible.usa = {
     blurb: [],
 }
 
-export { allSteps, splash, surveyStages, aspectResponses, aspectsArr, possible }
+export {
+    allSteps,
+    splash,
+    auth,
+    surveyStages,
+    aspectResponses,
+    aspectsArr,
+    possible,
+}

frontend/src/utils/survey.js

@@ -1,6 +1,6 @@
 import { Survey } from '../entities/index.js'
 import { fetchQuestions, insertNewSurveyResponse } from '../services/index.js'
-import { splash, possible, surveyStages, allSteps } from './lang.js'
+import { splash, auth, possible, surveyStages, allSteps } from './lang.js'
 
 class SurveyFactory {
     constructor() {
@@ -12,7 +12,8 @@ class SurveyFactory {
         // Removes empty form drop down options from possible['usa']
         Object.keys(responsesByCategory).forEach(categoryKey => {
             if (responsesByCategory[categoryKey].length) {
-                existingResponses[categoryKey] = responsesByCategory[categoryKey]
+                existingResponses[categoryKey] =
+                    responsesByCategory[categoryKey]
             }
         })
         // Adds form drop down options to each responseKey
@@ -56,7 +57,7 @@ class SurveyFactory {
         const reordered = []
         Object.values(allSteps).forEach(step => {
             Object.values(mutatedResponseKeys).forEach(response => {
-                if (surveyStages[response.response_key_id] === step)  {
+                if (surveyStages[response.response_key_id] === step) {
                     response.survey_stage = step
                     reordered.push(response)
                 }
@@ -67,12 +68,23 @@ class SurveyFactory {
     _setSteps() {
         const responseKeys = this.questionsFromDb
         const responsesByCategory = possible['usa']
-        let mutatedResponseKeys = this._addSurveySteps(responseKeys, surveyStages)
-        mutatedResponseKeys = this._addResponses(mutatedResponseKeys, responsesByCategory)
+        let mutatedResponseKeys = this._addSurveySteps(
+            responseKeys,
+            surveyStages,
+        )
+        mutatedResponseKeys = this._addResponses(
+            mutatedResponseKeys,
+            responsesByCategory,
+        )
         mutatedResponseKeys = this._addComponents(responseKeys)
-        mutatedResponseKeys = this._sortSurveySteps(mutatedResponseKeys, allSteps['usa'])
+        mutatedResponseKeys = this._sortSurveySteps(
+            mutatedResponseKeys,
+            allSteps['usa'],
+        )
         // Splash page is placed at beginning of survey
         mutatedResponseKeys.unshift(splash)
+        // Auth page is placed after email/password
+        mutatedResponseKeys.splice(3, 0, auth)
         return mutatedResponseKeys
     }
     async getQuestions() {
@@ -85,10 +97,12 @@ class SurveyFactory {
     }
     async addNewSurveyAnswer(responses, profileId) {
         try {
-            this.responsesFromDb = await insertNewSurveyResponse(responses, profileId)
+            this.responsesFromDb = await insertNewSurveyResponse(
+                responses,
+                profileId,
+            )
             return this.responsesFromDb
-        }
-        catch (err) {
+        } catch (err) {
             console.error(err)
         }
     }

frontend/src/views/OnboardingView.vue

@@ -6,8 +6,6 @@ main.view--onboarding
     )
         .answers(v-for='(value, key) in answered')
             span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
-            span(v-if='key == "email" && value && currentStep == 3') Thanks for the contact info, {{ answered.name }}!
-
         //- h3(v-if='currentStep == 1') Welcome to Siimee Onboarding! Let's get started!
         br
         .step(v-for='(step, i) in survey.steps')
@@ -19,7 +17,7 @@ main.view--onboarding
                 @handle-submit='onSubmit'
                 @update-answers='updateAnswers'
                 v-if='step && currentStep == i'
-            )
+            ) 
         .invalidResponseMessage(
             style='text-align: center'
             v-if='invalidResponse'
@@ -34,10 +32,7 @@ main.view--onboarding
 </template>
 
 <script>
-// import { currentProfile } from '@/services'
-// import { createProfileForUserId } from '../services/profile.service'
 import { surveyFactory } from '@/utils'
-import { signupUser, createProfileForUserId } from '@/services/'
 import stepViews from '@/components/onboarding'
 import SurveyCompleteView from './SurveyCompleteView.vue'
 
@@ -59,21 +54,8 @@ export default {
         invalidResponse: false,
     }),
     async created() {
-        // uses createSurvey/getQuestions from from utils/survey.service.js 
-        // which calls in fetchQuestions from services/survey.service.js
         this.survey = await surveyFactory.createSurvey()
-        // checks if the user has simply refreshed the page after creating a basic profile
-        // and redirects the user to their last unanswered survey question
-        if (localStorage['currentStep'] &&
-            localStorage['currentProfileId'] &&
-            localStorage['responses'] &&
-            localStorage['answered']) {
-            this.currentStep = Number(localStorage['currentStep'])
-            this.currentProfileId = Number(localStorage['currentProfileId'])
-            this.responses = JSON.parse(localStorage['responses'])
-            this.answered = JSON.parse(localStorage['answered'])
-            this.goToStep(this.currentStep)
-        }
+        console.log('this.survey :=>', this.survey)
     },
     methods: {
         onSubmit() {
@@ -85,6 +67,8 @@ export default {
         async updateAnswers(payload) {
             // null payload is passed on splash page
             if (payload) {
+                // authentication achieved if payload.resume = true
+                if (payload.resume) this.currentStep = 3
                 this.invalidResponse = false
                 const k = payload.question.survey_stage
                 this.answered[k] = payload.input
@@ -93,36 +77,22 @@ export default {
                     this.invalidResponse = true
                     return
                 }
-
+                //
                 // once validated, don't log password in answered object
                 this.answered[k] = k === 'password' ? undefined : payload.input
-                console.log('this.answered :=>', this.answered)
 
                 // formats initial responses for response table
                 const response = {}
                 response.response_key_id = payload.question.response_key_id
                 response.val = payload.input
                 this.responses.push(response)
-                // save user's progress through survey
-                localStorage.setItem('responses', JSON.stringify(this.responses))
-                localStorage.setItem('answered', JSON.stringify(this.answered))
 
                 // sends latest survey response to db
                 if (this.currentProfileId) {
                     surveyFactory.addNewSurveyAnswer(
-                        this.responses[this.responses.length - 1], 
-                        this.currentProfileId)
-                }
-
-                // creates a user in db as long as name, email, and seeking are defined
-                if (!this.currentProfileId && 
-                    this.survey.hasMinResponsesToCreateProfile(this.answered)) {
-                    const newUser = await signupUser(this.answered)
-                    const newUserId = newUser.user_id
-                    const newProfile = await createProfileForUserId(newUserId, this.responses)
-                    this.currentProfileId = newProfile.profile_id
-                    // save user's progress through survey
-                    localStorage.setItem('currentProfileId', Number(newProfile.profile_id))
+                        this.responses[this.responses.length - 1],
+                        this.currentProfileId,
+                    )
                 }
 
                 if (k === 'aspects') return
@@ -131,8 +101,6 @@ export default {
                 this.onSubmit(this.answered)
             } else {
                 this.goToStep(this.currentStep + 1)
-                // save user's progress through survey
-                localStorage.setItem('currentStep', Number(this.currentStep))
             }
         },
     },