From 0cb7d34bcffcaf749f597b4e97bc25c7b7c94cf8 Mon Sep 17 00:00:00 2001
From: Mason Payne <mason@masonitestudios.com>
Date: Wed, 10 Apr 2024 23:20:48 -0600
Subject: [PATCH] finish the wizard UI

---
 src/assets/main.css                    |   7 +-
 src/components/enter-details-modal.vue |  19 +-
 src/components/wizard-questions.vue    | 293 ++++++++++++++++---------
 src/views/WizardView.vue               |   5 +-
 4 files changed, 204 insertions(+), 120 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 6119f28..3a74009 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -6,9 +6,10 @@
   /*padding: 2rem;*/
   /*font-weight: normal;*/
     height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    width: 100vw;
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*justify-content: center;*/
     padding: 1rem;
 }
 
diff --git a/src/components/enter-details-modal.vue b/src/components/enter-details-modal.vue
index 749c16f..4d3aa7c 100644
--- a/src/components/enter-details-modal.vue
+++ b/src/components/enter-details-modal.vue
@@ -16,6 +16,7 @@ const lastName = ref('');
 const email = ref('');
 const newsletterConsent = ref(true);
 const isOpen = ref(true);
+const formSubmitted = ref(false);
 function submitForm() {
   console.log('Form submitted');
   console.log('First name:', firstName.value);
@@ -32,6 +33,7 @@ function submitForm() {
   }).catch((e) => {
     console.error('Error submitting email:', e);
   }).finally(() => {
+    formSubmitted.value = true;
     closeModal();
   });
 }
@@ -57,6 +59,9 @@ async function submitEmail() {
   });
 }
 function closeModal() {
+  if (!formSubmitted.value) {
+    return;
+  }
   isOpen.value = false
 }
 function openModal() {
@@ -66,13 +71,13 @@ function openModal() {
 
 <template>
   <div class="inset-0 flex items-center justify-center">
-    <button
-        type="button"
-        @click="openModal"
-        class="rounded-md bg-black/20 px-4 py-2 text-sm font-medium text-white hover:bg-black/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
-    >
-      Open dialog
-    </button>
+<!--    <button-->
+<!--        type="button"-->
+<!--        @click="openModal"-->
+<!--        class="rounded-md bg-black/20 px-4 py-2 text-sm font-medium text-white hover:bg-black/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"-->
+<!--    >-->
+<!--      Open dialog-->
+<!--    </button>-->
   </div>
   <TransitionRoot appear :show="isOpen" as="template">
     <Dialog as="div" @close="closeModal" class="relative z-10">
diff --git a/src/components/wizard-questions.vue b/src/components/wizard-questions.vue
index 77d8587..79bafaa 100644
--- a/src/components/wizard-questions.vue
+++ b/src/components/wizard-questions.vue
@@ -5,6 +5,10 @@ import {
   ListboxButton,
   ListboxOptions,
   ListboxOption,
+  RadioGroup,
+  RadioGroupLabel,
+  RadioGroupOption,
+  TransitionRoot
 } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid';
 
@@ -25,11 +29,11 @@ const questions = ref<Question[]>([
     clarification: 'Some authentication tools are better suited for specific types of applications.',
     answerType: 'checkbox',
     answer: [],
-    options: ['Web', 'Mobile', 'Desktop', 'SaaS', 'Other']
+    options: ['Web', 'Mobile', 'Desktop', 'SaaS', 'Embedded', 'Other']
   },
   {
     id: 2,
-    question: 'How many users do you expect to have in the short term and long term?',
+    question: 'How many users do you plan to support?',
     clarification: 'This will help determine the scalability requirements of the authentication tool.',
     answerType: 'select',
     answer: '',
@@ -71,9 +75,9 @@ const questions = ref<Question[]>([
     id: 7,
     question: 'Do you need to support third-party logins via OIDC or SAML?',
     clarification: 'Supporting third-party logins can simplify the sign-in process for users who already have accounts with these providers.',
-    answerType: 'select',
+    answerType: 'radio',
     answer: '',
-    options: ['OIDC', 'SAML', 'Neither']
+    options: ['OIDC', 'SAML', 'Both', 'Neither']
   },
   {
     id: 8,
@@ -87,9 +91,9 @@ const questions = ref<Question[]>([
     id: 9,
     question: 'What level of customization do you require for the MFA features?',
     clarification: 'Some authentication tools offer more customization options for MFA, such as custom branding, custom workflows, or custom policies.',
-    answerType: 'select',
+    answerType: 'radio',
     answer: '',
-    options: ['Basic', 'Intermediate', 'Advanced']
+    options: ['Basic', 'Intermediate', 'Advanced', 'No Customization']
   },
   {
     id: 10,
@@ -125,14 +129,6 @@ const questions = ref<Question[]>([
   },
   {
     id: 14,
-    question: 'How often do you anticipate needing to upgrade or update the authentication tool?',
-    clarification: 'Regular updates can help keep your authentication tool secure and up-to-date with the latest features and standards.',
-    answerType: 'select',
-    answer: '',
-    options: ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Annually', 'Never']
-  },
-  {
-    id: 15,
     question: 'Do you have any preferences for user interface and experience?',
     clarification: 'The user interface and experience of an authentication tool can impact user adoption and satisfaction.',
     answerType: 'radio',
@@ -156,63 +152,134 @@ function nextQuestion() {
     currentQuestionIndex.value++;
   }
 }
+const onLastQuestion = computed(() => {
+  return currentQuestionIndex.value >= questions.value.length - 1;
+});
 
 // should return true if we are on the last button and the answer is not filled out
 const isNextButtonDisabled = computed(() => {
-  const onLastQuestion = currentQuestionIndex.value >= questions.value.length - 1;
   if (questions.value[currentQuestionIndex.value].answerType === 'checkbox') {
-    return !(questions.value[currentQuestionIndex.value].answer as string[]).length || onLastQuestion;
+    return !(questions.value[currentQuestionIndex.value].answer as string[]).length;
   }
   if (questions.value[currentQuestionIndex.value].answerType === 'select') {
-    return (questions.value[currentQuestionIndex.value].answer as string).trim().length <= 0 || onLastQuestion;
+    return (questions.value[currentQuestionIndex.value].answer as string).trim().length <= 0;
   }
   if (questions.value[currentQuestionIndex.value].answerType === 'radio') {
-    return (questions.value[currentQuestionIndex.value].answer as string).trim().length <= 0 || onLastQuestion;
+    return (questions.value[currentQuestionIndex.value].answer as string).trim().length <= 0;
   }
-  return onLastQuestion;
+  return onLastQuestion.value;
 });
 
+function done() {
+  alert('done');
+}
+
 </script>
 
 <template>
-<!--  <h1 class="">Authentication Tool Wizard</h1>-->
-  <div class="flex flex-col">
-    <h2 class="text-2xl">{{ questions[currentQuestionIndex].question }}</h2>
-    <p class="text-gray-500" v-if="questions[currentQuestionIndex].clarification">{{ questions[currentQuestionIndex].clarification }}</p>
-    <div class="mt-10 flex justify-center z-10">
-      <div v-if="questions[currentQuestionIndex].answerType === 'radio'">
-        <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">
-          <input type="radio" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" />
-          <label :for="option">{{ option }}</label>
-        </div>
-      </div>
-      <div v-else-if="questions[currentQuestionIndex].answerType === 'checkbox'">
-        <Listbox v-model="questions[currentQuestionIndex].answer" multiple>
-          <ListboxButton
-              class="relative cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-          >
-            <span>{{ !!(questions[currentQuestionIndex].answer as string[]).length ? (questions[currentQuestionIndex].answer as string[]).join(', ') : 'Select options'}}</span>
-            <span
-                class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-            >
+  <div class="relative w-full flex flex-col justify-center items-center" v-for="(question, index) in questions" :key="index">
+    <TransitionRoot
+        appear
+        :show="currentQuestionIndex === index"
+        as="template"
+        enter="transition-opacity ease-linear duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-300"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+        class="absolute"
+    >
+      <div class="flex flex-col">
+        <h2 class="text-2xl">{{ question.question }}</h2>
+        <p class="text-gray-500" v-if="question.clarification">{{ question.clarification }}</p>
+        <div class="mt-10 flex justify-center z-10">
+          <div class="mx-auto w-full max-w-md" v-if="question.answerType === 'radio'">
+
+            <RadioGroup v-model="question.answer">
+              <RadioGroupLabel class="sr-only">Options</RadioGroupLabel>
+              <div class="space-y-2">
+                <RadioGroupOption
+                    v-for="(option, index) in question.options"
+                    as="template"
+                    v-slot="{ active, checked }"
+                    :key="index"
+                    :value="option"
+                >
+                  <div
+                      :class="[
+                active
+                  ? 'ring-2 ring-white/60 ring-offset-2 ring-offset-amber-300'
+                  : '',
+                checked ? 'bg-amber-900/75 text-white ' : 'bg-white ',
+              ]"
+                      class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none"
+                  >
+                    <div class="flex w-full items-center justify-between">
+                      <div class="flex items-center">
+                        <div class="text-sm">
+                          <RadioGroupLabel
+                              as="p"
+                              :class="checked ? 'text-white' : 'text-gray-900'"
+                              class="font-medium"
+                          >
+                            {{ option }}
+                          </RadioGroupLabel>
+                        </div>
+                      </div>
+                      <div v-show="checked" class="shrink-0 text-white">
+                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
+                          <circle
+                              cx="12"
+                              cy="12"
+                              r="12"
+                              fill="#fff"
+                              fill-opacity="0.2"
+                          />
+                          <path
+                              d="M7 13l3 3 7-7"
+                              stroke="#fff"
+                              stroke-width="1.5"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </RadioGroupOption>
+              </div>
+
+            </RadioGroup>
+          </div>
+          <div class="mx-auto" v-else-if="question.answerType === 'checkbox'">
+            <Listbox v-model="question.answer" multiple>
+              <ListboxButton
+                  class="flex justify-between items-center cursor-default rounded-lg bg-white py-2 pl-3 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+                  style="width: 250px"
+              >
+                <span>{{ !!(question.answer as string[]).length ? (question.answer as string[]).join(', ') : 'Select options'}}</span>
+                <span
+                    class="pointer-events-none flex items-center pr-2"
+                >
               <ChevronUpDownIcon
                   class="h-5 w-5 text-gray-400"
                   aria-hidden="true"
               />
             </span>
-          </ListboxButton>
-          <ListboxOptions
-              class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
-          >
-            <ListboxOption
-                v-slot="{ active, selected }"
-                v-for="(option, index) in questions[currentQuestionIndex].options"
-                :key="index"
-                :value="option"
-                as="template"
-            >
-              <li
-                  :class="[
+              </ListboxButton>
+              <ListboxOptions
+                  class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+              >
+                <ListboxOption
+                    v-slot="{ active, selected }"
+                    v-for="(option, index) in question.options"
+                    :key="index"
+                    :value="option"
+                    as="template"
+                >
+                  <li
+                      :class="[
                         active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
                     'relative cursor-default select-none py-2 pl-10 pr-4',
                     ]">
@@ -222,44 +289,44 @@ const isNextButtonDisabled = computed(() => {
                       'block truncate',
                     ]"
                 >{{ option }}</span>
-                <span
-                    v-if="selected"
-                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
-                >
+                    <span
+                        v-if="selected"
+                        class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
+                    >
                     <CheckIcon class="h-5 w-5" aria-hidden="true" />
                   </span>
-              </li>
-            </ListboxOption>
-          </ListboxOptions>
-        </Listbox>
-      </div>
-      <div v-else-if="questions[currentQuestionIndex].answerType === 'select'">
-      <Listbox v-model="questions[currentQuestionIndex].answer">
-        <ListboxButton
-          class="relative cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-          >
-          <span>{{!!questions[currentQuestionIndex].answer ? questions[currentQuestionIndex].answer : 'Select an option'}}</span>
-          <span
-              class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-          >
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </Listbox>
+          </div>
+          <div v-else-if="question.answerType === 'select'">
+            <Listbox v-model="question.answer">
+              <ListboxButton
+                  class="relative cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+              >
+                <span>{{!!question.answer ? question.answer : 'Select an option'}}</span>
+                <span
+                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                >
              <ChevronUpDownIcon
                  class="h-5 w-5 text-gray-400"
                  aria-hidden="true"
              />
           </span>
-        </ListboxButton>
-        <ListboxOptions
-            class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
-        >
-          <ListboxOption
-              v-slot="{ active, selected }"
-              v-for="(option, index) in questions[currentQuestionIndex].options"
-              :key="index"
-              :value="option"
-              as="template"
-          >
-            <li
-                :class="[
+              </ListboxButton>
+              <ListboxOptions
+                  class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+              >
+                <ListboxOption
+                    v-slot="{ active, selected }"
+                    v-for="(option, index) in question.options"
+                    :key="index"
+                    :value="option"
+                    as="template"
+                >
+                  <li
+                      :class="[
                       active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
                   'relative cursor-default select-none py-2 pl-10 pr-4',
                   ]">
@@ -269,33 +336,43 @@ const isNextButtonDisabled = computed(() => {
                     'block truncate',
                   ]"
               >{{ option }}</span>
-              <span
-                  v-if="selected"
-                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
-              >
+                    <span
+                        v-if="selected"
+                        class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
+                    >
                   <CheckIcon class="h-5 w-5" aria-hidden="true" />
                 </span>
-            </li>
-          </ListboxOption>
-        </ListboxOptions>
-      </Listbox>
-    </div>
-    </div>
-    <div class="mt-20 button-container flex justify-center">
-      <button
-          type="button"
-          class="nav-button rounded-md border border-transparent bg-amber-200 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-          @click="previousQuestion"
-          :disabled="currentQuestionIndex === 0">
-        <span>Previous</span>
-      </button>
-      <button
-          class="nav-button ml-2 rounded-md border border-transparent bg-amber-500 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-          @click="nextQuestion"
-          :disabled="isNextButtonDisabled">
-        <span>Next</span>
-      </button>
-    </div>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </Listbox>
+          </div>
+        </div>
+        <div class="mt-20 button-container flex justify-center">
+          <button
+              type="button"
+              class="nav-button rounded-md border border-transparent bg-amber-200 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+              @click="previousQuestion"
+              :disabled="currentQuestionIndex === 0">
+            <span>Previous</span>
+          </button>
+          <button
+              class="nav-button ml-2 rounded-md border border-transparent bg-amber-500 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+              v-show="currentQuestionIndex < questions.length - 1"
+              @click="nextQuestion"
+              :disabled="isNextButtonDisabled || onLastQuestion">
+            <span>Next</span>
+          </button>
+          <button
+              class="nav-button ml-2 rounded-md border border-transparent bg-amber-500 px-4 py-2 text-sm font-medium text-orange-950 hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+              v-show="currentQuestionIndex >= questions.length - 1"
+              @click="done"
+              :disabled="isNextButtonDisabled && onLastQuestion">
+            <span>See Results</span>
+          </button>
+        </div>
+      </div>
+    </TransitionRoot>
   </div>
 </template>
 
diff --git a/src/views/WizardView.vue b/src/views/WizardView.vue
index 528304a..d3e1812 100644
--- a/src/views/WizardView.vue
+++ b/src/views/WizardView.vue
@@ -6,11 +6,12 @@ import WizardQuestions from "@/components/wizard-questions.vue";
 
 <template>
   <div class="h-full w-full flex flex-col justify-center items-center">
-    <enter-details-modal />
+<!--  <div class="h-full w-full flex flex-col justify-center items-center">-->
+    <enter-details-modal class="absolute" />
 
 <!--    <iframe src="https://mw.sa.vin/index.php/lists/zq107l51gw5fc/subscribe?output=embed&width=400&height=400" width="400" height="400" frameborder="0" scrolling="yes"></iframe>-->
 
-    <wizard-questions class="" />
+    <wizard-questions />
 
   </div>
 </template>