payne8/authmatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get styles closer

Browse Source
This commit is contained in:
Mason Payne
2024-04-08 13:55:30 -06:00
parent 5ab5cf62db
commit bc8454e597
4 changed files with 128 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.vue
View File

@ -4,25 +4,25 @@ import HelloWorld from './components/HelloWorld.vue'
</script> </script>
<template> <template>
<header> <!-- <header>-->
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <!-- <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />-->
<div class="wrapper"> <!-- <div class="wrapper">-->
<HelloWorld msg="You are awesome!" /> <!-- <HelloWorld msg="You are awesome!" />-->
<nav> <!-- <nav>-->
<RouterLink to="/">Home</RouterLink> <!-- <RouterLink to="/">Home</RouterLink>-->
<RouterLink to="/about">About</RouterLink> <!-- <RouterLink to="/about">About</RouterLink>-->
<RouterLink to="/wizard">Wizard</RouterLink> <!-- <RouterLink to="/wizard">Wizard</RouterLink>-->
</nav> <!-- </nav>-->
</div> <!-- </div>-->
</header> <!-- </header>-->
<RouterView /> <RouterView />
</template> </template>
<style scoped> <style scoped>
header { /* header {
line-height: 1.5; line-height: 1.5;
max-height: 100vh; max-height: 100vh;
} }
@ -82,5 +82,5 @@ nav a:first-of-type {
padding: 1rem 0; padding: 1rem 0;
margin-top: 1rem; margin-top: 1rem;
} }
} }*/
</style> </style>

63
src/assets/main.css
View File

@ -1,35 +1,40 @@
@import './base.css'; @import './base.css';
#app { #app {
max-width: 1280px; /*max-width: 1280px;*/
margin: 0 auto; /*margin: 0 auto;*/
padding: 2rem; /*padding: 2rem;*/
font-weight: normal; /*font-weight: normal;*/
} height: 100vh;
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex; display: flex;
place-items: center; flex-direction: column;
justify-content: center;
padding: 1rem;
} }
#app { /*a,*/
display: grid; /*.green {*/
grid-template-columns: 1fr 1fr; /* text-decoration: none;*/
padding: 0 2rem; /* color: hsla(160, 100%, 37%, 1);*/
} /* transition: 0.4s;*/
} /* padding: 3px;*/
/*}*/
/*@media (hover: hover) {*/
/* a:hover {*/
/* background-color: hsla(160, 100%, 37%, 0.2);*/
/* }*/
/*}*/
/*@media (min-width: 1024px) {*/
/* body {*/
/* display: flex;*/
/* place-items: center;*/
/* }*/
/* #app {*/
/* display: grid;*/
/* grid-template-columns: 1fr 1fr;*/
/* padding: 0 2rem;*/
/* }*/
/*}*/

78
src/components/wizard-questions.vue
View File

@ -17,7 +17,7 @@ interface Question {
options: string[]; options: string[];
} }
const currentQuestionIndex = ref(1); const currentQuestionIndex = ref(0);
const questions = ref<Question[]>([ const questions = ref<Question[]>([
{ {
id: 1, id: 1,
@ -142,12 +142,16 @@ const questions = ref<Question[]>([
]); ]);
function previousQuestion() { function previousQuestion() {
// TODO: notify the backend that the user navigated backwards
if (currentQuestionIndex.value > 0) { if (currentQuestionIndex.value > 0) {
currentQuestionIndex.value--; currentQuestionIndex.value--;
} }
} }
function nextQuestion() { function nextQuestion() {
// TODO: notify the backend the users progress
if (currentQuestionIndex.value < questions.value.length - 1) { if (currentQuestionIndex.value < questions.value.length - 1) {
currentQuestionIndex.value++; currentQuestionIndex.value++;
} }
@ -171,10 +175,11 @@ const isNextButtonDisabled = computed(() => {
</script> </script>
<template> <template>
<h1>Authentication Tool Wizard</h1> <!-- <h1 class="">Authentication Tool Wizard</h1>-->
<div> <div class="flex flex-col">
<h2>{{ questions[currentQuestionIndex].question }}</h2> <h2 class="text-2xl">{{ questions[currentQuestionIndex].question }}</h2>
<p v-if="questions[currentQuestionIndex].clarification">{{ questions[currentQuestionIndex].clarification }}</p> <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-if="questions[currentQuestionIndex].answerType === 'radio'">
<div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index"> <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">
<input type="radio" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" /> <input type="radio" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" />
@ -227,26 +232,69 @@ const isNextButtonDisabled = computed(() => {
</ListboxOption> </ListboxOption>
</ListboxOptions> </ListboxOptions>
</Listbox> </Listbox>
<!-- <div v-for="(option, index) in questions[currentQuestionIndex].options" :key="index">-->
<!-- <input type="checkbox" :id="option" :value="option" v-model="questions[currentQuestionIndex].answer" />-->
<!-- <label :for="option">{{ option }}</label>-->
<!-- </div>-->
</div> </div>
<div v-else-if="questions[currentQuestionIndex].answerType === 'select'"> <div v-else-if="questions[currentQuestionIndex].answerType === 'select'">
<select v-model="questions[currentQuestionIndex].answer"> <Listbox v-model="questions[currentQuestionIndex].answer">
<option v-for="(option, index) in questions[currentQuestionIndex].options" :key="index" :value="option">{{ option }}</option> <ListboxButton
</select> 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"
>
<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="[
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
'relative cursor-default select-none py-2 pl-10 pr-4',
]">
<span
:class="[
selected ? 'font-medium' : 'font-normal',
'block truncate',
]"
>{{ option }}</span>
<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="button-container flex justify-center"> </div>
<div class="mt-20 button-container flex justify-center">
<button <button
type="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" 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" @click="previousQuestion"
:disabled="currentQuestionIndex === 0">Previous</button> :disabled="currentQuestionIndex === 0">
<span>Previous</span>
</button>
<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" 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" @click="nextQuestion"
:disabled="isNextButtonDisabled">Next</button> :disabled="isNextButtonDisabled">
<span>Next</span>
</button>
</div> </div>
</div> </div>
</template> </template>

5
src/views/WizardView.vue
View File

@ -5,13 +5,12 @@ import WizardQuestions from "@/components/wizard-questions.vue";
</script> </script>
<template> <template>
<div> <div class="h-full w-full flex flex-col justify-center items-center">
<h1>Wizard</h1>
<enter-details-modal /> <enter-details-modal />
<!-- <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>--> <!-- <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 /> <wizard-questions class="" />
</div> </div>
</template> </template>