diff --git a/src/App.vue b/src/App.vue
index 12ad03a6b286a47ed6a392e7338562c82b213f64..dc693f471ad9c9828c6519d81cea07c8bd5ce5ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+// import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
</script>
<template>
diff --git a/src/components/Configuration/ChallangeCheckBox.vue b/src/components/Configuration/ChallangeCheckBox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f607eaf3e35b40aaf68003805b53a24a8ff2f711
--- /dev/null
+++ b/src/components/Configuration/ChallangeCheckBox.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+const props = defineProps({
+ id: {
+ type: String,
+ required: true
+ },
+ text: {
+ type: String,
+ default: ''
+ }
+})
+
+</script>
+
+<template>
+ <span>
+ <input type="checkbox" class="btn-check" :id="props.id" autocomplete="off">
+ <label class="btn btn-outline-primary align-items-center justify-content-center" :for="props.id">{{ props.text }}</label>
+ </span>
+</template>
+
+<style scoped>
+label {
+ margin: 5px
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/Configuration.vue b/src/components/Configuration/Configuration.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b5cd1a77d9568df7fbd46dab645aa0fd6c755ce
--- /dev/null
+++ b/src/components/Configuration/Configuration.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import ProgressBar from '@/components/Configuration/ProgressBar.vue'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+
+
+const router = useRouter()
+
+// The configuration steps with path and order value.
+const configurationSteps = {'/bank-id': 1, '/commitment': 2, '/experience': 3, '/suitable-challenges': 4, '/first-saving-goal': 5}
+const length = Object.keys(configurationSteps).length
+let percentage = ref(1/length);
+
+// Pushes to '/bank-id' RouterView and sets current path to this path.
+router.push(Object.keys(configurationSteps)[0])
+let currentRoute = useRoute()
+let currentPath = currentRoute.fullPath
+
+const onNewRouteEvent = (path) => {
+ currentPath = path
+ percentage.value = (1/length) * configurationSteps[path]
+}
+
+</script>
+
+<template>
+ <div class="container">
+ <div class="progress-bar-container">
+ <ProgressBar id="progressbar" :percentage="percentage"/>
+ </div>
+ <div class="configuration-container">
+ <RouterView @changeRouterEvent="onNewRouteEvent"/>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.container {
+ display: grid;
+ grid-template-rows: 0.5fr 2.3fr 0.2fr;
+}
+
+#progressbar {
+ padding-top: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/BankId.vue b/src/components/Configuration/ConfigurationSteps/BankId.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5fe760dffe3568ec89453e0197c1eb974ea9c20e
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/BankId.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Button1 from '@/components/Buttons/Button1.vue'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const formRef = ref()
+const router = useRouter();
+const emit = defineEmits(['changeRouterEvent']);
+emit('changeRouterEvent', '/bank-id');
+
+const onClick = () => {
+ const radios = formRef.value.querySelectorAll('input[type="radio"]');
+ const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+ if (checkedRadios.length === 0) {
+ alert('Please select an option.');
+ return;
+ }
+
+ router.push('/commitment')
+}
+
+</script>
+
+<template>
+ <div class="container">
+ <div>
+ <h3 class="d-flex align-items-center justify-content-center">
+ In order to provide best advice we need to connect to your bank account
+ </h3>
+ </div>
+
+ <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+ <input type="radio" class="btn-check" name="bank-id" id="btn-check-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">BankID på mobil</label>
+
+ <input type="radio" class="btn-check" name="bank-id" id="btn-check2-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">MinID</label>
+
+ <input type="radio" class="btn-check" name="bank-id" id="btn-check3-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Vipps</label>
+
+ </form>
+
+ <div class="confirm-button-container">
+ <button1 id="confirmButton"
+ @click="onClick"
+ button-text="Continue">
+ </button1>
+ </div>
+
+ </div>
+</template>
+
+<style scoped>
+#confirmButton {
+ margin-bottom: 2rem;
+ width: 300px;
+}
+
+.confirm-button-container {
+ display: flex;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/Commitment.vue b/src/components/Configuration/ConfigurationSteps/Commitment.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fb352e4572209dd041e7d862f00a6cbf5077a2c
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/Commitment.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+
+import Button1 from '@/components/Buttons/Button1.vue'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const router = useRouter();
+const formRef = ref()
+const onClick = () => {
+ const radios = formRef.value.querySelectorAll('input[type="radio"]');
+ const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+ if (checkedRadios.length === 0) {
+ alert('Please select an option.');
+ return;
+ }
+ router.push('/experience')
+}
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/commitment')
+
+</script>
+
+<template>
+ <div class="container">
+ <div>
+ <h3 class="d-flex align-items-center justify-content-center">
+ In which degree are you willing to make changes?
+ </h3>
+ </div>
+
+ <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+ <input type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Low</label>
+
+ <input type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Medium</label>
+
+ <input type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">High</label>
+
+ </form>
+
+ <div class="confirm-button-container">
+ <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+#confirmButton {
+ margin-bottom: 2rem;
+ width: 300px;
+}
+
+.confirm-button-container {
+ display: flex;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/Experience.vue b/src/components/Configuration/ConfigurationSteps/Experience.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe699a992c0201cda6d4e5c7cde06e4c0da1db20
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/Experience.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+
+import Button1 from '@/components/Buttons/Button1.vue'
+
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const router = useRouter();
+const formRef = ref()
+const onClick = () => {
+ const radios = formRef.value.querySelectorAll('input[type="radio"]');
+ const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+ if (checkedRadios.length === 0) {
+ alert('Please select an option.');
+ return;
+ }
+
+ router.push('/suitable-challenges')
+}
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/experience')
+
+</script>
+
+<template>
+ <div class="container">
+ <div>
+ <h3 class="d-flex align-items-center justify-content-center">
+ How much experice do you have with saving money?
+ </h3>
+ </div>
+
+ <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+ <input type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Beginner</label>
+
+ <input type="radio" class="btn-check" name="experience" id="btn-check2-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Some experience</label>
+
+ <input type="radio" class="btn-check" name="experience" id="btn-check3-outlined" autocomplete="off">
+ <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Expert</label>
+ </form>
+
+ <div class="confirm-button-container">
+ <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+ </div>
+</div>
+</template>
+
+<style scoped>
+#confirmButton {
+ margin-bottom: 2rem;
+ width: 300px;
+}
+
+.confirm-button-container {
+ display: flex;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue b/src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50e010cb29ea36b8d581d89ab7af59b21c0bb22b
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import { ref } from 'vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/first-saving-goal')
+
+const formRef = ref()
+const titleRef = ref()
+const sumRef = ref()
+const dateRef = ref()
+
+const onClick = () => {
+ formRef.value.classList.add("was-validated")
+}
+
+const getTodayDate = () => {
+ const today = new Date();
+ const year = today.getFullYear();
+ let month = today.getMonth() + 1;
+ let day = today.getDate();
+
+ // Ensure month and day are in double digits
+ month = month < 10 ? `0${month}` : month;
+ day = day < 10 ? `0${day}` : day;
+
+ console.log(`${year}-${month}-${day}`)
+
+ return `${year}-${month}-${day}`;
+};
+
+</script>
+
+<template>
+ <div class="container">
+ <div>
+ <h3 class="d-flex align-items-center justify-content-center">
+ Create your first saving goal
+ </h3>
+ </div>
+
+ <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit">
+ <BaseInput :model-value="titleRef"
+ @input-change-event="handleEmailInputEvent"
+ id="titleInput"
+ input-id="title"
+ label="Title"
+ placeholder="Enter the title of the saving goal"/>
+ <BaseInput :model-value="sumRef"
+ @input-change-event="handlePasswordInputEvent"
+ id="sumToSaveInput"
+ input-id="sumToSpareInput"
+ type="number"
+ label="Sum to save"
+ min="0"
+ placeholder="Enter the sum you would like to spare"/>
+ <BaseInput :model-value="dateRef"
+ @input-change-event="handlePasswordInputEvent"
+ id="dueDateInput"
+ input-id="dueDate"
+ type="date"
+ :min="getTodayDate()"
+ label="Due date"/>
+ </form>
+
+ <div class="confirm-button-container">
+ <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+#confirmButton {
+ margin-bottom: 2rem;
+ width: 300px;
+}
+
+.confirm-button-container {
+ display: flex;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09e7fcd0dc0a2263c7740ad3a2e0e816181f185a
--- /dev/null
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+const onClick = () => {
+ router.push('/first-saving-goal')
+}
+
+import ChallangeCheckBox from '@/components/Configuration/ChallangeCheckBox.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/suitable-challenges')
+
+const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
+ 'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget', 'Others'
+]
+
+</script>
+
+<template>
+ <div class="container">
+ <div>
+ <h3 class="d-flex align-items-center justify-content-center">
+ Which challenges are suitable for you?
+ </h3>
+ </div>
+
+ <div class="challenge-container">
+ <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"/>
+ </div>
+
+ <div class="confirm-button-container">
+ <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.challenge-container {
+ justify-self: center;
+ max-width: 500px;
+}
+
+#confirmButton {
+ margin-bottom: 2rem;
+ width: 300px;
+}
+
+.confirm-button-container {
+ display: flex;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Configuration/ProgressBar.vue b/src/components/Configuration/ProgressBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b014e3a40da0bf01680831f2a9382738739c5a2
--- /dev/null
+++ b/src/components/Configuration/ProgressBar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps({
+ percentage: {
+ type: Number,
+ default: 0
+ }
+})
+</script>
+
+<template>
+ <div class="container">
+ <div class="progress">
+ <div id="configuration-progress"
+ class="progress-bar progress-bar-striped bg-info progress-bar-animated"
+ role="progressbar"
+ :aria-valuenow="props.percentage"
+ :style="{ width: Math.round(props.percentage*100) + '%' }"
+ aria-valuemin="0"
+ aria-valuemax="100"/>
+ </div>
+ <label class="row text-info font-bold display-5">{{ Math.round(props.percentage*100) + '%' }} Completed</label>
+ </div>
+</template>
+
+<style scoped>
+.progress {
+ height: 35px;
+ border-radius: 12px;
+}
+
+.row {
+ justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue
index 516faeb54655832d42eab147d6e3b38a16f89f1f..28f6f3e8b7be448314cbf1cf5e26a3846f261d71 100644
--- a/src/components/InputFields/BaseInput.vue
+++ b/src/components/InputFields/BaseInput.vue
@@ -25,6 +25,10 @@ const props = defineProps({
isValid: {
type: Boolean,
default: false
+ },
+ min: {
+ type: String,
+ required: false
}
});
@@ -41,7 +45,9 @@ const onInputEvent = (event: any) => {
:type="props.type"
class="form-control"
:placeholder="props.placeholder"
- :id="inputId" required />
+ :id="inputId" required
+ :min="min"
+ />
<div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
<div v-else class="valid-feedback">Valid {{ label }}</div>
</div>
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 150711c35baec1405f70edda8b6584bf759682e2..b5198d4d2bee4fc6169eb58a845fe469e5ffdd3d 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -9,7 +9,6 @@ const formRef = ref()
const handleEmailInputEvent = (newValue: any) => {
emailRef.value = newValue
- console.log(emailRef.value)
}
const handlePasswordInputEvent = (newValue: any) => {
diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue
index 04a8547844c7261753afb61f1d9323c9d773d889..9ef325bd77ddadb23c4691050d9c49c7ece548fe 100644
--- a/src/components/SignUp/SignUpForm.vue
+++ b/src/components/SignUp/SignUpForm.vue
@@ -2,7 +2,9 @@
import BaseInput from '@/components/InputFields/BaseInput.vue'
import Button1 from '@/components/Buttons/Button1.vue'
import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter();
const firstNameRef = ref('')
const surnameRef = ref('')
const emailRef = ref('')
@@ -34,6 +36,7 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
const handleSubmit = () => {
formRef.value.classList.add("was-validated")
alert("Expected to be transferred to initial configuration") // Todo remove this line
+ router.push("/configuration")
}
</script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9cefc38dae5ff578c87d750d62a137fa88122e5f..d8c0f7c3507eac8e04a04905a94eaf0a559c836e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -81,6 +81,38 @@ const routes = [
name: 'sign up',
component: () => import('@/views/Authentication/SignUpView.vue'),
},
+ {
+ path: '/configuration',
+ name: 'configuration',
+ component: () => import('@/views/ConfigurationView.vue'),
+ children: [
+ {
+ path: '/bank-id',
+ name: 'bankId',
+ component: () => import('@/components/Configuration/ConfigurationSteps/BankId.vue'),
+ },
+ {
+ path: '/commitment',
+ name: 'commitment',
+ component: () => import('@/components/Configuration/ConfigurationSteps/Commitment.vue'),
+ },
+ {
+ path: '/experience',
+ name: 'experience',
+ component: () => import('@/components/Configuration/ConfigurationSteps/Experience.vue'),
+ },
+ {
+ path: '/suitable-challenges',
+ name: 'suitable challenges',
+ component: () => import('@/components/Configuration/ConfigurationSteps/SuitableChallenges.vue'),
+ },
+ {
+ path: '/first-saving-goal',
+ name: 'first saving goal',
+ component: () => import('@/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue'),
+ }
+ ]
+ },
{
path: '/:pathMatch(.*)*',
redirect: { name: 'not-found' },
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index e22b16390d5f2bb452a68c6ac77987762b751e00..e46d41355401bd1467b00b2f20a44a6c14859987 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
import Footer from '@/components/BaseComponents/Footer.vue'
import Menu from '@/components/BaseComponents/Menu.vue'
</script>
diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6732fee8b3dc4710002df7d991334fdaa15e3ea5
--- /dev/null
+++ b/src/views/ConfigurationView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Configuration from '@/components/Configuration/Configuration.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import Footer from '@/components/BaseComponents/Footer.vue'
+</script>
+
+<template>
+ <Menu/>
+ <Configuration/>
+ <Footer/>
+</template>
\ No newline at end of file