Added initial template of the bootstrap menu

src/i18n/en-US/index.ts

@@ -35,5 +35,35 @@ export default {
         badButton: "I dont like Ukraine",
       },
     }
+  },
+  bootstrap: {
+    title: "Looks like you are first time here. Let us help you",
+
+    header: {
+      language: "Select language",
+      data: "Data",
+      itarmy: "ITArmy ID"
+
+    },
+
+    language: {
+      continueButton: "Continue"
+    },
+
+    data: {
+      body: "Application will automatically download required modules and store them on yours PC. Modules and all the data will be stored in the folder",
+      windows: "Before continue, make sure you added data folder to the windows defender and antivirus exceptions. Otherwise, all the downloaded data will be deleted.",
+      openDataFolderButton: "Open data folder",
+      changeDataFolderButton: "Change data folder",
+      continueButton: "Continue",
+      backButton: "Back"
+    },
+
+    itarmy: {
+      body: "If you have ITArmy ID, you can enter it here. Otherwise, you can skip this step.",
+      uuidInputTitle: "ITArmy ID",
+      continueButton: "Continue",
+      backButton: "Back"
+    }
   }
 }

src/pages/bootstrap/BootstrapPage.vue

@@ -1,66 +1,117 @@
 <template>
-    <div class="col fit">
-        <div class="row full-width text-center text-h5">Looks like you are first time here :) Let us help you</div>
+    <div class="q-pa-lg">
+        <div class="full-width text-center text-h5 q-mb-lg">{{ $t('bootstrap.title') }}</div>
         <q-stepper
             v-model="step"
-            class="row full-width"
+            class="full-height"
             header-nav
             ref="stepper"
             color="primary"
             animated
+            flat
+            bordered
+
         >
         <q-step
             :name="1"
-            title="Select language"
+            :title="$t('bootstrap.header.language')"
             icon="settings"
             :done="step > 1"
             :header-nav="step > 1"
+            class=""
         >
-            For each ad campaign that you create, you can control how much you're willing to
-            spend on clicks and conversions, which networks and geographical locations you want
-            your ads to show on, and more.
+            <LanguageSelectorComponent />
 
             <q-stepper-navigation>
-            <q-btn @click="() => { step = 2 }" color="primary" label="Continue" />
+            <q-btn @click="finishLanguageStep" color="primary" :label="$t('bootstrap.language.continueButton')" class="fit" outline/>
             </q-stepper-navigation>
         </q-step>
 
         <q-step
             :name="2"
-            title="Create an ad group"
-            caption="Optional"
+            :title="$t('bootstrap.header.data')"
             icon="create_new_folder"
             :done="step > 2"
             :header-nav="step > 2"
         >
-            Configure data folder
+            {{ $t('bootstrap.data.body') }} <span class="text-bold text-h5">{{ dataFolder }} </span>
+            <q-btn :label="$t('bootstrap.data.openDataFolderButton')" outline class="q-ma-sm" @click="openDataFodler"/>
+            <q-btn :label="$t('bootstrap.data.changeDataFolderButton')" outline class="q-ma-sm" @click="changeDataFolder"/>
 
-            <q-stepper-navigation>
-            <q-btn @click="() => { step = 3 }" color="primary" label="Continue" />
-            <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm" />
+            <div class="text-h4 text-bold text-negative text-center q-pa-lg" v-if="$q.platform.is.win">{{ $t('bootstrap.data.windows') }}</div>
+
+            <q-stepper-navigation class="row">
+            <q-btn @click="step = 1" color="primary" :label="$t('bootstrap.data.backButton')" class="q-mr-sm col-2" outline />
+            <q-btn @click="finishDataStep" color="primary" :label="$t('bootstrap.data.continueButton')" class="col fit" outline />
+
             </q-stepper-navigation>
         </q-step>
 
         <q-step
             :name="3"
-            title="Select your setup"
+            :title="$t('bootstrap.header.itarmy')"
             icon="add_comment"
             :header-nav="step > 3"
         >
-            Select your setup
+            <div class="q-mb-md">{{ $t('bootstrap.itarmy.body') }}</div>
+            <q-input :label="$t('bootstrap.itarmy.uuidInputTitle')" outlined v-model="itArmyUUID" @update:model-value="setItArmyUUID" :debounce="500" />
 
-            <q-stepper-navigation>
-            <q-btn color="primary" label="Finish" />
-            <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm" />
+            <q-stepper-navigation class="row">
+                <q-btn @click="step = 2" color="primary" :label="$t('bootstrap.data.backButton')" class="q-mr-sm col-2" outline />
+            <q-btn @click="finishItArmyStep" color="primary" :label="$t('bootstrap.data.continueButton')" class="col fit" outline />
             </q-stepper-navigation>
         </q-step>
         </q-stepper>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import LanguageSelectorComponent from '../settings/LanguageSelectorComponent.vue';
 
 const step = ref(1);
+const router = useRouter();
+
+const dataFolder = ref("")
+
+async function finishLanguageStep() {
+    await window.settingsAPI.bootstrap.setStep("DATA_FOLDER")
+    step.value = 2;
+}
+
+async function openDataFodler() {
+    await window.settingsAPI.modules.openDataFolder()
+}
+
+async function changeDataFolder() {
+    await window.settingsAPI.modules.promptForDataPath()
+    await loadSettings()
+}
+
+async function finishDataStep() {
+    await window.settingsAPI.bootstrap.setStep("ITARMY_UUID")
+    step.value = 3;
+}
+
+const itArmyUUID = ref("")
+async function setItArmyUUID(newValue: string | number | null) {
+    await window.settingsAPI.itarmy.setUUID(String(newValue))
+}
+
+async function finishItArmyStep() {
+    await window.settingsAPI.bootstrap.setStep("DONE")
+    await router.push({ name: "dashboard" })
+}
+
+async function loadSettings() {
+    const settings = await window.settingsAPI.get()
+    dataFolder.value = settings.modules.dataPath
+    itArmyUUID.value = settings.itarmy.uuid
+}
 
+onMounted(async () => {
+    await loadSettings()
+})
 </script>

src/router/guards.ts

@@ -0,0 +1,11 @@
+import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+
+export async function bootstrapGuard(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
+    const settings = await window.settingsAPI.get()
+    console.log(settings)
+    if (settings.bootstrap.step !== "DONE") {
+        return next({ name: 'bootstrap' })
+    }
+
+    return next()
+}

src/router/routes.ts

@@ -1,4 +1,5 @@
 import { RouteRecordRaw } from 'vue-router'
+import { bootstrapGuard } from './guards'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -13,7 +14,14 @@ const routes: RouteRecordRaw[] = [
       { path: '/settings', name: 'settings', component: () => import('pages/SettingsPage.vue') },
       { path: '/top', name: 'top', component: () => import('pages/top/TopPage.vue') },
       { path: '/developers', name: 'developers', component: () => import('pages/developers/DevelopersPage.vue') }
-    ]
+    ],
+    beforeEnter: [ bootstrapGuard ]
+  },
+
+  {
+    path: '/bootstrap',
+    name: 'bootstrap',
+    component: () => import('pages/bootstrap/BootstrapPage.vue')
   },
 
   // Always leave this as last one,