From 66445d5c6c998e3e9d9c75b49d30b8ed6ac29922 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 15 Feb 2023 10:14:28 +0100
Subject: [PATCH 1/5] Fix update button disable & select style

---
 frontend/src/assets/scss/form/select.scss     |  5 +-
 .../list/eagle-eye-email-digest-drawer.vue    | 76 ++++++++++++-------
 .../list/eagle-eye-settings-drawer.vue        | 15 +++-
 3 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/frontend/src/assets/scss/form/select.scss b/frontend/src/assets/scss/form/select.scss
index ae28831194..92f6a185dd 100644
--- a/frontend/src/assets/scss/form/select.scss
+++ b/frontend/src/assets/scss/form/select.scss
@@ -69,8 +69,7 @@
 }
 
 // Selected icon for single selection
-.el-select-dropdown
-  .el-select-dropdown__item.selected::after {
+.el-select-dropdown .el-select-dropdown__item:not(.no-checkmark).selected::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -117,7 +116,7 @@
       }
 
       // Select dropdown item selected
-      &.selected {
+      &.selected, &.selected.hover {
         @apply font-medium bg-brand-50 text-gray-900;
       }
 
diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
index 7836f32a1b..b12fecef21 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
@@ -29,10 +29,11 @@
             label-position="top"
             class="form pt-6 pb-10"
             :rules="rules"
-            :model="model"
+            :model="form"
             @submit.prevent="doSubmit"
           >
             <el-form-item
+              ref="emailRef"
               prop="email"
               class="col-span-2 mb-6"
             >
@@ -43,7 +44,7 @@
               >
               <el-input
                 ref="focus"
-                v-model="model.email"
+                v-model="form.email"
                 :disabled="!active"
               />
             </el-form-item>
@@ -54,7 +55,7 @@
                   >Frequency</label
                 >
                 <el-radio-group
-                  v-model="model.frequency"
+                  v-model="form.frequency"
                   :disabled="!active"
                 >
                   <el-radio
@@ -101,7 +102,7 @@
                   >Time (UTC)</label
                 >
                 <el-time-select
-                  v-model="model.time"
+                  v-model="form.time"
                   start="00:00"
                   step="00:30"
                   end="23:59"
@@ -114,7 +115,7 @@
             </el-form-item>
 
             <el-checkbox
-              v-model="model.updateResults"
+              v-model="form.updateResults"
               class="filter-checkbox"
               :disabled="!active"
             >
@@ -222,6 +223,7 @@
           type="primary"
           class="btn btn--md btn--primary"
           :loading="loadingUpdateSettings"
+          :disabled="!isFormValid || !hasFormChanged"
           @click="doSubmit(formRef)"
           >Update
         </el-button>
@@ -248,6 +250,7 @@ import {
 } from '@/shared/vuex/vuex.helpers'
 import Message from '@/shared/message/message'
 import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
+import Schema from 'async-validator'
 
 const props = defineProps({
   modelValue: {
@@ -268,25 +271,16 @@ const rules = {
       required: true,
       message: 'This field is required',
       trigger: 'blur'
-    }
-  ],
-  frequency: [
+    },
     {
-      required: true,
-      message: 'This field is required',
-      trigger: 'blur'
-    }
-  ],
-  time: [
-    {
-      required: true,
-      message: 'This field is required',
+      type: 'email',
+      message: 'Enter valid email',
       trigger: 'blur'
     }
   ]
 }
 
-const model = reactive({
+const form = reactive({
   frequency: 'daily',
   time: '09:00',
   updateResults: true
@@ -294,6 +288,10 @@ const model = reactive({
 
 const active = ref(false)
 const formRef = ref()
+const emailRef = ref()
+
+const tempForm = ref('')
+const tempActive = ref(false)
 
 const drawerModel = computed({
   get() {
@@ -304,10 +302,25 @@ const drawerModel = computed({
   }
 })
 
+const isFormValid = computed(() => {
+  const emailRegex =
+    /^(([^<>()\\[\].,;:\s@"]+(\.[^<>()\\[\].,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/
+  return (
+    form.email.length > 0 && form.email.match(emailRegex)
+  )
+})
+
+const hasFormChanged = computed(() => {
+  return (
+    tempForm.value !== JSON.stringify(form) ||
+    active.value !== tempActive.value
+  )
+})
+
 const feed = ref(null)
 
 const results = computed(() => {
-  if (!model.updateResults) {
+  if (!form.updateResults) {
     if (currentUser.value && feed.value) {
       return feed.value
     }
@@ -316,7 +329,7 @@ const results = computed(() => {
 })
 
 const displayFeedWarning = computed(() => {
-  if (model.updateResults) {
+  if (form.updateResults) {
     return false
   }
   if (
@@ -349,26 +362,30 @@ const updateFeed = () => {
 const fillForm = (user) => {
   const { eagleEyeSettings } = user
   active.value = eagleEyeSettings.emailDigestActive || false
-  model.email =
+  form.email =
     eagleEyeSettings.emailDigest?.email || user.email
-  model.frequency =
+  form.frequency =
     eagleEyeSettings.emailDigest?.frequency || 'daily'
-  model.time = eagleEyeSettings.emailDigest?.time || '09:00'
-  model.updateResults = !eagleEyeSettings.emailDigest
+  form.time = eagleEyeSettings.emailDigest?.time || '09:00'
+  form.updateResults = !eagleEyeSettings.emailDigest
     ? true
     : eagleEyeSettings.emailDigest?.matchFeedSettings
   feed.value = user.eagleEyeSettings.emailDigest.feed
+
+  tempForm.value = JSON.stringify(form)
+  tempActive.value =
+    eagleEyeSettings.emailDigestActive || false
 }
 const doSubmit = async (formEl) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
       const data = {
-        email: model.email,
-        frequency: model.frequency,
-        time: model.time,
-        matchFeedSettings: model.updateResults,
-        feed: !model.updateResults ? feed.value : undefined
+        email: form.email,
+        frequency: form.frequency,
+        time: form.time,
+        matchFeedSettings: form.updateResults,
+        feed: !form.updateResults ? feed.value : undefined
       }
       doUpdateSettings({
         ...currentUser.value.eagleEyeSettings,
@@ -389,6 +406,7 @@ const handleCancel = () => {
 }
 
 onMounted(() => {
+  console.log(Schema)
   fillForm(currentUser.value)
 })
 </script>
diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
index 83db052560..e7fd1db789 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
@@ -46,7 +46,7 @@
                     <el-option
                       value="semantic"
                       label="Semantic match"
-                      class="flex-col !items-start !px-3 !py-2.5 !h-16"
+                      class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
                     >
                       <h6
                         class="text-xs leading-5 font-medium"
@@ -62,7 +62,7 @@
                     <el-option
                       value="exact"
                       label="Exact match"
-                      class="flex-col !items-start !px-3 !py-2.5 !h-16"
+                      class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
                     >
                       <h6
                         class="text-xs leading-5 font-medium"
@@ -172,12 +172,11 @@
           @click="emit('update:modelValue', false)"
           >Cancel
         </el-button>
-
         <el-button
           type="primary"
           class="btn btn--md btn--primary"
           :loading="loadingUpdateSettings"
-          :disabled="!isFormValid"
+          :disabled="!isFormValid || !hasFormChanged"
           @click="onSubmit(formRef)"
           >Update
         </el-button>
@@ -268,6 +267,8 @@ const rules = reactive({
   ]
 })
 
+const tempForm = ref('')
+
 const form = reactive({
   include: [],
   exclude: [],
@@ -286,6 +287,10 @@ const isFormValid = computed(() => {
   return includeValid && platformsValid
 })
 
+const hasFormChanged = computed(() => {
+  return tempForm.value !== JSON.stringify(form)
+})
+
 const drawerModel = computed({
   get() {
     return props.modelValue
@@ -331,6 +336,7 @@ const fillForm = (user) => {
   }
   const { eagleEyeSettings } = user
   const { feed } = eagleEyeSettings
+
   form.include = [
     ...feed.keywords.map((keyword) => ({
       keyword,
@@ -350,6 +356,7 @@ const fillForm = (user) => {
   })
 
   form.datePublished = feed.publishedDate
+  tempForm.value = JSON.stringify(form)
 }
 
 const onSubmit = async (formEl) => {

From c3858cd05a77297d9c4171978047d8bf9bb22d46 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 15 Feb 2023 10:18:12 +0100
Subject: [PATCH 2/5] Remove async validator import

---
 .../eagle-eye/components/list/eagle-eye-email-digest-drawer.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
index b12fecef21..67d6391dba 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
@@ -250,7 +250,6 @@ import {
 } from '@/shared/vuex/vuex.helpers'
 import Message from '@/shared/message/message'
 import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
-import Schema from 'async-validator'
 
 const props = defineProps({
   modelValue: {
@@ -406,7 +405,6 @@ const handleCancel = () => {
 }
 
 onMounted(() => {
-  console.log(Schema)
   fillForm(currentUser.value)
 })
 </script>

From 9f3595e6fe3bd3b749096f6f3dbad886bdbfc4d1 Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 15 Feb 2023 14:38:31 +0100
Subject: [PATCH 3/5] Migrate to new validation model

---
 frontend/package-lock.json                    | 118 ++++++++++
 frontend/package.json                         |   2 +
 .../eagle-eye-platforms-drawers.vue           |  80 +++++++
 .../form/eagle-eye-settings-include.vue       |  94 ++++++++
 .../list/eagle-eye-email-digest-drawer.vue    | 218 ++++++++----------
 .../list/eagle-eye-settings-drawer.vue        | 174 +++-----------
 .../components/list/eagle-eye-settings.vue    |   6 +
 frontend/src/shared/form/form-change.js       |  19 ++
 frontend/src/shared/form/form-item.vue        |  84 +++++++
 9 files changed, 528 insertions(+), 267 deletions(-)
 create mode 100644 frontend/src/premium/eagle-eye/components/eagle-eye-platforms-drawers.vue
 create mode 100644 frontend/src/premium/eagle-eye/components/form/eagle-eye-settings-include.vue
 create mode 100644 frontend/src/shared/form/form-change.js
 create mode 100644 frontend/src/shared/form/form-item.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2c2861b579..5bda31163a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,8 @@
         "@tiptap/extension-placeholder": "^2.0.0-beta.199",
         "@tiptap/starter-kit": "^2.0.0-beta.199",
         "@tiptap/vue-3": "^2.0.0-beta.199",
+        "@vuelidate/core": "^2.0.0",
+        "@vuelidate/validators": "^2.0.0",
         "@vueuse/core": "^9.7.0",
         "apollo-boost": "^0.4.9",
         "axios": "^0.22.0",
@@ -4055,6 +4057,90 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "node_modules/@vuelidate/core": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0.tgz",
+      "integrity": "sha512-xIFgdQlScO0aaSZ0wTGPJh8YcTMNAj5veI8yPgiAyxOT+GV7vNQFiU1vpYWCL4cklkkhYvRRSC2OEX7YOZNmPQ==",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/core/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0.tgz",
+      "integrity": "sha512-fQQcmDWfz7pyH5/JPi0Ng2GEgNK1pUHn/Z/j5rG/Q+HwhgIXvJblTPcZwKOj1ABL7V4UVuGKECvZCDHNGOwdrg==",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "9.7.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.7.0.tgz",
@@ -18790,6 +18876,38 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "@vuelidate/core": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0.tgz",
+      "integrity": "sha512-xIFgdQlScO0aaSZ0wTGPJh8YcTMNAj5veI8yPgiAyxOT+GV7vNQFiU1vpYWCL4cklkkhYvRRSC2OEX7YOZNmPQ==",
+      "requires": {
+        "vue-demi": "^0.13.11"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "@vuelidate/validators": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0.tgz",
+      "integrity": "sha512-fQQcmDWfz7pyH5/JPi0Ng2GEgNK1pUHn/Z/j5rG/Q+HwhgIXvJblTPcZwKOj1ABL7V4UVuGKECvZCDHNGOwdrg==",
+      "requires": {
+        "vue-demi": "^0.13.11"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "@vueuse/core": {
       "version": "9.7.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.7.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index afcb4f6ee6..a795fbbfd1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,8 @@
     "@tiptap/extension-placeholder": "^2.0.0-beta.199",
     "@tiptap/starter-kit": "^2.0.0-beta.199",
     "@tiptap/vue-3": "^2.0.0-beta.199",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^9.7.0",
     "apollo-boost": "^0.4.9",
     "axios": "^0.22.0",
diff --git a/frontend/src/premium/eagle-eye/components/eagle-eye-platforms-drawers.vue b/frontend/src/premium/eagle-eye/components/eagle-eye-platforms-drawers.vue
new file mode 100644
index 0000000000..379a25d679
--- /dev/null
+++ b/frontend/src/premium/eagle-eye/components/eagle-eye-platforms-drawers.vue
@@ -0,0 +1,80 @@
+<template>
+  <app-form-item
+    class="mb-0 is-error-above"
+    :validation="$v.platforms"
+    :show-error="false"
+  >
+    <div class="w-full">
+      <article
+        v-for="(platform, name) in platformOptions"
+        :key="name"
+        class="h-12 flex items-center border-b last:border-none border-gray-200 hover:bg-gray-50 hover:cursor-pointer"
+      >
+        <div>
+          <img :src="platform.img" class="w-6 h-6" />
+        </div>
+        <el-switch
+          :model-value="platforms.includes(name)"
+          :inactive-text="platform.label"
+          class="h-full"
+          @update:model-value="
+            handlePlatformChange($event, name)
+          "
+          @change="$v.platforms.$touch"
+        />
+      </article>
+    </div>
+  </app-form-item>
+</template>
+
+<script setup>
+import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
+import {
+  defineProps,
+  defineEmits,
+  computed,
+  onMounted
+} from 'vue'
+import useVuelidate from '@vuelidate/core'
+import AppFormItem from '@/shared/form/form-item.vue'
+import { required } from '@vuelidate/validators'
+
+const emit = defineEmits(['update:platforms'])
+const props = defineProps({
+  platforms: {
+    type: Array,
+    required: true
+  }
+})
+
+const platforms = computed({
+  get() {
+    return props.platforms
+  },
+  set(v) {
+    emit('update:platforms', v)
+  }
+})
+
+const rules = {
+  platforms: {
+    required
+  }
+}
+
+const $v = useVuelidate(rules, { platforms })
+
+const handlePlatformChange = (enabled, platform) => {
+  if (enabled) {
+    platforms.value.push(platform)
+  } else {
+    platforms.value = platforms.value.filter(
+      (p) => p !== platform
+    )
+  }
+}
+
+onMounted(() => {
+  $v.value.platforms.$touch()
+})
+</script>
diff --git a/frontend/src/premium/eagle-eye/components/form/eagle-eye-settings-include.vue b/frontend/src/premium/eagle-eye/components/form/eagle-eye-settings-include.vue
new file mode 100644
index 0000000000..b89ac5b8a4
--- /dev/null
+++ b/frontend/src/premium/eagle-eye/components/form/eagle-eye-settings-include.vue
@@ -0,0 +1,94 @@
+<template>
+  <article class="pb-3 flex items-center">
+    <div class="flex flex-grow items-start">
+      <app-form-item
+        :validation="$v.keyword"
+        :error-messages="{
+          required: 'This field is required'
+        }"
+        class="mr-3 mb-0 no-margin basis-7/12 is-error-relative"
+      >
+        <el-input
+          v-model="include.keyword"
+          placeholder="Keyword"
+          @blur="$v.keyword.$touch"
+          @change="$v.keyword.$touch"
+        ></el-input>
+      </app-form-item>
+      <app-form-item
+        class="mr-3 mb-0 no-margin basis-5/12 is-error-relative"
+      >
+        <el-select
+          v-model="include.match"
+          class="w-full"
+          placeholder="Match type"
+        >
+          <el-option
+            value="semantic"
+            label="Semantic match"
+            class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
+          >
+            <h6 class="text-xs leading-5 font-medium">
+              Semantic match
+            </h6>
+            <p class="text-2xs leading-5 text-gray-500">
+              Results semantically related
+            </p>
+          </el-option>
+          <el-option
+            value="exact"
+            label="Exact match"
+            class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
+          >
+            <h6 class="text-xs leading-5 font-medium">
+              Exact match
+            </h6>
+            <p class="text-2xs leading-5 text-gray-500">
+              Results containing the keyword
+            </p>
+          </el-option>
+        </el-select>
+      </app-form-item>
+    </div>
+    <slot name="after" />
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'AppEagleEyeSettingsInclude'
+}
+</script>
+
+<script setup>
+import { computed, defineEmits, defineProps } from 'vue'
+import { required } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import AppFormItem from '@/shared/form/form-item.vue'
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const rules = {
+  keyword: {
+    required
+  }
+}
+
+const include = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const $v = useVuelidate(rules, include)
+</script>
diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
index 67d6391dba..ed539ebf87 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-email-digest-drawer.vue
@@ -20,87 +20,77 @@
             </p>
           </div>
           <div>
-            <el-switch v-model="active" />
+            <el-switch v-model="form.active" />
           </div>
         </div>
-        <div :class="{ 'opacity-50': !active }">
+        <div :class="{ 'opacity-50': !form.active }">
           <el-form
             ref="formRef"
             label-position="top"
             class="form pt-6 pb-10"
-            :rules="rules"
-            :model="form"
             @submit.prevent="doSubmit"
           >
-            <el-form-item
-              ref="emailRef"
-              prop="email"
+            <app-form-item
               class="col-span-2 mb-6"
+              :validation="$v.email"
+              label="Email"
+              :required="true"
+              :error-messages="{
+                required: 'This field is required',
+                email: 'Enter valid email'
+              }"
             >
-              <label
-                class="text-sm mb-1 font-medium leading-5"
-                >Email
-                <span class="text-brand-500">*</span></label
-              >
               <el-input
                 ref="focus"
                 v-model="form.email"
-                :disabled="!active"
+                :disabled="!form.active"
+                @blur="$v.email.$touch"
+                @change="$v.email.$touch"
               />
-            </el-form-item>
-            <el-form-item prop="frequency" class="mb-6">
-              <div>
-                <label
-                  class="text-sm mb-4 font-medium leading-5"
-                  >Frequency</label
+            </app-form-item>
+            <app-form-item class="mb-6" label="Frequency">
+              <el-radio-group
+                v-model="form.frequency"
+                :disabled="!form.active"
+              >
+                <el-radio
+                  label="daily"
+                  size="large"
+                  class="frequency-radio !flex items-start mb-3"
                 >
-                <el-radio-group
-                  v-model="form.frequency"
-                  :disabled="!active"
+                  <h6
+                    class="text-sm leading-5 font-medium mb-1"
+                  >
+                    Daily
+                  </h6>
+                  <p
+                    class="text-2xs leading-4.5 text-gray-500"
+                  >
+                    From Monday to Friday (results from
+                    previous day)
+                  </p>
+                </el-radio>
+                <el-radio
+                  label="weekly"
+                  size="large"
+                  class="frequency-radio !flex items-start"
                 >
-                  <el-radio
-                    label="daily"
-                    size="large"
-                    class="frequency-radio !flex items-start mb-3"
+                  <h6
+                    class="text-sm leading-5 font-medium mb-1"
                   >
-                    <h6
-                      class="text-sm leading-5 font-medium mb-1"
-                    >
-                      Daily
-                    </h6>
-                    <p
-                      class="text-2xs leading-4.5 text-gray-500"
-                    >
-                      From Monday to Friday (results from
-                      previous day)
-                    </p>
-                  </el-radio>
-                  <el-radio
-                    label="weekly"
-                    size="large"
-                    class="frequency-radio !flex items-start"
+                    Weekly
+                  </h6>
+                  <p
+                    class="text-2xs leading-4.5 text-gray-500"
                   >
-                    <h6
-                      class="text-sm leading-5 font-medium mb-1"
-                    >
-                      Weekly
-                    </h6>
-                    <p
-                      class="text-2xs leading-4.5 text-gray-500"
-                    >
-                      Every Monday (results from previous
-                      week)
-                    </p>
-                  </el-radio>
-                </el-radio-group>
-              </div>
-            </el-form-item>
-            <el-form-item prop="time" class="mb-6">
+                    Every Monday (results from previous
+                    week)
+                  </p>
+                </el-radio>
+              </el-radio-group>
+            </app-form-item>
+            <app-form-item class="mb-6" label="Time (UTC)">
               <div class="w-36">
-                <label
-                  class="text-sm mb-1 font-medium leading-5"
-                  >Time (UTC)</label
-                >
                 <el-time-select
                   v-model="form.time"
                   start="00:00"
@@ -108,16 +98,16 @@
                   end="23:59"
                   placeholder="Select time"
                   format="HH:mm"
-                  :disabled="!active"
+                  :disabled="!form.active"
                   :clearable="false"
                 />
               </div>
-            </el-form-item>
+            </app-form-item>
 
             <el-checkbox
               v-model="form.updateResults"
               class="filter-checkbox"
-              :disabled="!active"
+              :disabled="!form.active"
             >
               <span class="text-sm text-gray-900"
                 >Update email results based on your current
@@ -223,8 +213,8 @@
           type="primary"
           class="btn btn--md btn--primary"
           :loading="loadingUpdateSettings"
-          :disabled="!isFormValid || !hasFormChanged"
-          @click="doSubmit(formRef)"
+          :disabled="$v.$invalid || !hasFormChanged"
+          @click="doSubmit()"
           >Update
         </el-button>
       </div>
@@ -250,6 +240,10 @@ import {
 } from '@/shared/vuex/vuex.helpers'
 import Message from '@/shared/message/message'
 import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
+import { email, required } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import AppFormItem from '@/shared/form/form-item.vue'
+import formChangeDetector from '@/shared/form/form-change'
 
 const props = defineProps({
   modelValue: {
@@ -265,32 +259,25 @@ const { loadingUpdateSettings } = mapState('eagleEye')
 const emit = defineEmits(['update:modelValue'])
 
 const rules = {
-  email: [
-    {
-      required: true,
-      message: 'This field is required',
-      trigger: 'blur'
-    },
-    {
-      type: 'email',
-      message: 'Enter valid email',
-      trigger: 'blur'
-    }
-  ]
+  email: {
+    required,
+    email
+  }
 }
 
 const form = reactive({
+  active: false,
+  email: '',
   frequency: 'daily',
   time: '09:00',
   updateResults: true
 })
+const { hasFormChanged, formSnapshot } =
+  formChangeDetector(form)
 
-const active = ref(false)
-const formRef = ref()
-const emailRef = ref()
+const $v = useVuelidate(rules, form)
 
-const tempForm = ref('')
-const tempActive = ref(false)
+const formRef = ref()
 
 const drawerModel = computed({
   get() {
@@ -301,21 +288,6 @@ const drawerModel = computed({
   }
 })
 
-const isFormValid = computed(() => {
-  const emailRegex =
-    /^(([^<>()\\[\].,;:\s@"]+(\.[^<>()\\[\].,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/
-  return (
-    form.email.length > 0 && form.email.match(emailRegex)
-  )
-})
-
-const hasFormChanged = computed(() => {
-  return (
-    tempForm.value !== JSON.stringify(form) ||
-    active.value !== tempActive.value
-  )
-})
-
 const feed = ref(null)
 
 const results = computed(() => {
@@ -360,7 +332,7 @@ const updateFeed = () => {
 
 const fillForm = (user) => {
   const { eagleEyeSettings } = user
-  active.value = eagleEyeSettings.emailDigestActive || false
+  form.active = eagleEyeSettings.emailDigestActive || false
   form.email =
     eagleEyeSettings.emailDigest?.email || user.email
   form.frequency =
@@ -371,33 +343,29 @@ const fillForm = (user) => {
     : eagleEyeSettings.emailDigest?.matchFeedSettings
   feed.value = user.eagleEyeSettings.emailDigest.feed
 
-  tempForm.value = JSON.stringify(form)
-  tempActive.value =
-    eagleEyeSettings.emailDigestActive || false
+  formSnapshot()
 }
-const doSubmit = async (formEl) => {
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      const data = {
-        email: form.email,
-        frequency: form.frequency,
-        time: form.time,
-        matchFeedSettings: form.updateResults,
-        feed: !form.updateResults ? feed.value : undefined
-      }
-      doUpdateSettings({
-        ...currentUser.value.eagleEyeSettings,
-        emailDigestActive: active.value,
-        emailDigest: data
-      }).then(() => {
-        Message.success(
-          'Email Digest settings successfully updated'
-        )
-        emit('update:modelValue', false)
-      })
+const doSubmit = async () => {
+  $v.value.$touch()
+  if (!$v.value.$invalid) {
+    const data = {
+      email: form.email,
+      frequency: form.frequency,
+      time: form.time,
+      matchFeedSettings: form.updateResults,
+      feed: !form.updateResults ? feed.value : undefined
     }
-  })
+    doUpdateSettings({
+      ...currentUser.value.eagleEyeSettings,
+      emailDigestActive: form.active,
+      emailDigest: data
+    }).then(() => {
+      Message.success(
+        'Email Digest settings successfully updated'
+      )
+      emit('update:modelValue', false)
+    })
+  }
 }
 
 const handleCancel = () => {
diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
index e7fd1db789..68fffda173 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
@@ -6,7 +6,7 @@
           Keywords
         </h5>
 
-        <el-form ref="formRef" :model="form" :rules="rules">
+        <el-form ref="formRef" @submit.prevent>
           <!-- include -->
           <section class="pb-8">
             <p
@@ -17,75 +17,21 @@
                 >*</span
               >
             </p>
-            <article
+            <app-eagle-eye-settings-include
               v-for="(include, ii) of form.include"
               :key="ii"
-              class="pb-3 flex items-center"
+              v-model="form.include[ii]"
             >
-              <div class="flex flex-grow items-start">
-                <el-form-item
-                  class="mr-3 mb-0 no-margin basis-7/12 is-error-relative"
-                  :prop="`include.${ii}.keyword`"
-                  :rules="rules.include.$each.keyword"
-                >
-                  <el-input
-                    v-model="include.keyword"
-                    placeholder="Keyword"
-                  ></el-input>
-                </el-form-item>
-                <el-form-item
-                  class="mr-3 mb-0 no-margin basis-5/12 is-error-relative"
-                  :prop="`include.${ii}.match`"
-                  :rules="rules.include.$each.match"
+              <template #after>
+                <el-button
+                  class="btn btn--md btn--transparent w-10 h-10"
+                  :disabled="form.include.length === 1"
+                  @click="removeInclude(ii)"
                 >
-                  <el-select
-                    v-model="include.match"
-                    class="w-full"
-                    placeholder="Match type"
-                  >
-                    <el-option
-                      value="semantic"
-                      label="Semantic match"
-                      class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
-                    >
-                      <h6
-                        class="text-xs leading-5 font-medium"
-                      >
-                        Semantic match
-                      </h6>
-                      <p
-                        class="text-2xs leading-5 text-gray-500"
-                      >
-                        Results semantically related
-                      </p>
-                    </el-option>
-                    <el-option
-                      value="exact"
-                      label="Exact match"
-                      class="flex-col !items-start !px-3 !py-2.5 !h-16 no-checkmark"
-                    >
-                      <h6
-                        class="text-xs leading-5 font-medium"
-                      >
-                        Exact match
-                      </h6>
-                      <p
-                        class="text-2xs leading-5 text-gray-500"
-                      >
-                        Results containing the keyword
-                      </p>
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-              </div>
-              <el-button
-                class="btn btn--md btn--transparent w-10 h-10"
-                :disabled="form.include.length === 1"
-                @click="removeInclude(ii)"
-              >
-                <i class="ri-delete-bin-line text-lg"></i>
-              </el-button>
-            </article>
+                  <i class="ri-delete-bin-line text-lg"></i>
+                </el-button>
+              </template>
+            </app-eagle-eye-settings-include>
             <div class="flex">
               <p
                 class="text-sm leading-5 text-brand-500 cursor-pointer"
@@ -108,15 +54,14 @@
               :key="ei"
               class="pb-3 flex items-center"
             >
-              <el-form-item
+              <app-form-item
                 class="mr-3 mb-0 no-margin flex-grow"
-                :prop="`exclude.${ei}.keyword`"
               >
                 <el-input
                   v-model="exclude.keyword"
                   placeholder="Keyword"
                 ></el-input>
-              </el-form-item>
+              </app-form-item>
               <el-button
                 class="btn btn--md btn--transparent w-10 h-10"
                 @click="removeExclude(ei)"
@@ -158,7 +103,6 @@
           <section>
             <app-eagle-eye-platforms
               v-model:platforms="form.platforms"
-              :rules="rules.platforms"
             />
           </section>
         </el-form>
@@ -176,7 +120,7 @@
           type="primary"
           class="btn btn--md btn--primary"
           :loading="loadingUpdateSettings"
-          :disabled="!isFormValid || !hasFormChanged"
+          :disabled="$v.$invalid || !hasFormChanged"
           @click="onSubmit(formRef)"
           >Update
         </el-button>
@@ -186,7 +130,6 @@
 </template>
 
 <script setup>
-import platforms from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
 import AppDrawer from '@/shared/drawer/drawer.vue'
 import Message from '@/shared/message/message'
 import {
@@ -196,15 +139,20 @@ import {
   onMounted,
   reactive,
   ref,
-  watch
+  watch,
+  defineExpose
 } from 'vue'
 import {
   mapActions,
   mapGetters,
   mapState
 } from '@/shared/vuex/vuex.helpers'
-import AppEagleEyePlatforms from '@/premium/eagle-eye/components/eagle-eye-platforms.vue'
+import AppEagleEyePlatforms from '@/premium/eagle-eye/components/eagle-eye-platforms-drawers.vue'
 import AppEagleEyePublishedDate from '@/premium/eagle-eye/components/eagle-eye-published-date.vue'
+import useVuelidate from '@vuelidate/core'
+import AppEagleEyeSettingsInclude from '@/premium/eagle-eye/components/form/eagle-eye-settings-include.vue'
+import AppFormItem from '@/shared/form/form-item.vue'
+import formChangeDetector from '@/shared/form/form-change'
 
 const props = defineProps({
   modelValue: {
@@ -221,75 +169,16 @@ const { loadingUpdateSettings } = mapState('eagleEye')
 
 const formRef = ref()
 
-const rules = reactive({
-  include: {
-    $each: {
-      keyword: [
-        {
-          required: true,
-          message: 'This field is required',
-          trigger: 'blur'
-        }
-      ],
-      match: [
-        {
-          required: true,
-          message: 'This field is required',
-          trigger: 'blur'
-        }
-      ]
-    }
-  },
-  datePublished: [
-    {
-      required: true,
-      message: 'This field is required',
-      trigger: 'blur'
-    }
-  ],
-  platforms: [
-    {
-      type: 'object',
-      trigger: 'change',
-      validator: (_rule, _value, callback) => {
-        const trueValues = Object.values({
-          ...form.platforms
-        }).filter((v) => v)
-        if (trueValues.length === 0) {
-          callback(
-            new Error('Please select at least one platform')
-          )
-        } else {
-          callback()
-        }
-      }
-    }
-  ]
-})
-
-const tempForm = ref('')
-
 const form = reactive({
   include: [],
   exclude: [],
   datePublished: '',
-  platforms: {}
+  platforms: []
 })
+const { hasFormChanged, formSnapshot } =
+  formChangeDetector(form)
 
-const isFormValid = computed(() => {
-  const includeValid = form.include.every(
-    (i) => i.keyword.length > 0 && i.match.length > 0
-  )
-  const platformsValid =
-    Object.values({
-      ...form.platforms
-    }).filter((v) => v).length > 0
-  return includeValid && platformsValid
-})
-
-const hasFormChanged = computed(() => {
-  return tempForm.value !== JSON.stringify(form)
-})
+const $v = useVuelidate({}, form)
 
 const drawerModel = computed({
   get() {
@@ -350,13 +239,10 @@ const fillForm = (user) => {
   form.exclude = feed.excludedKeywords.map((keyword) => ({
     keyword
   }))
-  Object.keys(platforms).forEach((platform) => {
-    form.platforms[platform] =
-      feed.platforms.includes(platform)
-  })
+  form.platforms = feed.platforms
 
   form.datePublished = feed.publishedDate
-  tempForm.value = JSON.stringify(form)
+  formSnapshot()
 }
 
 const onSubmit = async (formEl) => {
@@ -392,4 +278,8 @@ const onSubmit = async (formEl) => {
 onMounted(() => {
   fillForm(currentUser.value)
 })
+
+defineExpose({
+  $v
+})
 </script>
diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue
index 749a514908..a8728f8276 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue
@@ -72,6 +72,12 @@
   </div>
 </template>
 
+<script>
+export default {
+  name: 'CrEagleEyeSetting'
+}
+</script>
+
 <script setup>
 import { ref, computed } from 'vue'
 import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
diff --git a/frontend/src/shared/form/form-change.js b/frontend/src/shared/form/form-change.js
new file mode 100644
index 0000000000..b159178e9e
--- /dev/null
+++ b/frontend/src/shared/form/form-change.js
@@ -0,0 +1,19 @@
+import { ref, computed } from 'vue'
+
+export default function formChangeDetector(form) {
+  const temporaryForm = ref('')
+
+  function formSnapshot() {
+    temporaryForm.value = JSON.stringify(form)
+  }
+
+  const hasFormChanged = computed(() => {
+    return temporaryForm.value !== JSON.stringify(form)
+  })
+
+  return {
+    temporaryForm,
+    formSnapshot,
+    hasFormChanged
+  }
+}
diff --git a/frontend/src/shared/form/form-item.vue b/frontend/src/shared/form/form-item.vue
new file mode 100644
index 0000000000..ce6a022b26
--- /dev/null
+++ b/frontend/src/shared/form/form-item.vue
@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="el-form-item"
+    :class="{
+      'is-error': props.validation?.$errors?.length
+    }"
+  >
+    <div class="el-form-item__content flex-col items-start">
+      <label
+        v-if="label"
+        class="text-sm mb-1 font-medium leading-5 block"
+        >{{ label }}
+        <span v-if="required" class="text-brand-500"
+          >*</span
+        ></label
+      >
+
+      <div class="w-full">
+        <slot />
+      </div>
+      <div v-if="showError">
+        <transition-group name="el-zoom-in-top">
+          <div
+            v-for="error of props.validation?.$errors || []"
+            :key="error.$uid"
+            class="el-form-item__error"
+          >
+            <div class="error-msg">
+              {{ errorMessage(error) }}
+            </div>
+          </div>
+        </transition-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppFormItem'
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  validation: {
+    required: false,
+    type: Object,
+    default: () => ({})
+  },
+  label: {
+    required: false,
+    type: String,
+    default: ''
+  },
+  required: {
+    required: false,
+    type: Boolean,
+    default: false
+  },
+  errorMessages: {
+    required: false,
+    type: Object,
+    default: () => ({})
+  },
+  showError: {
+    required: false,
+    type: Boolean,
+    default: true
+  }
+})
+
+const errorMessage = (error) => {
+  if (
+    props.errorMessages &&
+    props.errorMessages[error.$validator]
+  ) {
+    return props.errorMessages[error.$validator]
+  }
+  return error.$message
+}
+</script>

From 6c134cf86bdb340b9bb48f6153c6acb813b1188e Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 15 Feb 2023 16:33:39 +0100
Subject: [PATCH 4/5] Add default values and platform message

---
 .../components/list/eagle-eye-settings-drawer.vue        | 6 +++++-
 .../components/onboard/eagle-eye-platforms-step.vue      | 6 +++++-
 frontend/src/premium/eagle-eye/eagle-eye-routes.js       | 6 ++++++
 .../premium/eagle-eye/pages/eagle-eye-onboard-page.vue   | 9 +++++++--
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
index 68fffda173..a44b7dd21d 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
@@ -92,7 +92,7 @@
             >
               Date published
             </h6>
-            <div class="pb-8">
+            <div class="pb-7">
               <app-eagle-eye-published-date
                 v-model:date-published="form.datePublished"
               />
@@ -101,6 +101,10 @@
 
           <!-- platforms -->
           <section>
+            <p class="mb-3 text-xs text-gray-500">
+              For better results, we recommend choosing at
+              least 3 platforms.
+            </p>
             <app-eagle-eye-platforms
               v-model:platforms="form.platforms"
             />
diff --git a/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue b/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue
index b06138f996..e7e08b4fbb 100644
--- a/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue
+++ b/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue
@@ -20,12 +20,16 @@
     </div>
 
     <div class="mt-8">
-      <div class="text-gray-900 text-xs font-semibold mb-2">
+      <div class="text-gray-900 text-xs font-semibold mb-1">
         Platforms
         <span class="text-brand-500 ml-0.5 font-normal"
           >*</span
         >
       </div>
+      <p class="mb-5 text-xs text-gray-500">
+        For better results, we recommend choosing at least 3
+        platforms.
+      </p>
 
       <app-eagle-eye-platforms
         v-model:platforms="platforms"
diff --git a/frontend/src/premium/eagle-eye/eagle-eye-routes.js b/frontend/src/premium/eagle-eye/eagle-eye-routes.js
index a1c9137c36..62860dd047 100644
--- a/frontend/src/premium/eagle-eye/eagle-eye-routes.js
+++ b/frontend/src/premium/eagle-eye/eagle-eye-routes.js
@@ -54,12 +54,17 @@ export default [
           module: 'eagleEye'
         },
         beforeEnter: async (to, _from, next) => {
+          console.log('/eagle-eye')
           // Redirect to onboard page if user is not onboarded
           if (await isEagleEyeFeatureEnabled()) {
             const currentUser =
               store.getters['auth/currentUser']
+            console.log(
+              !currentUser.eagleEyeSettings?.onboarded
+            )
             if (!currentUser.eagleEyeSettings?.onboarded) {
               next('/eagle-eye/onboard')
+              return
             }
           }
 
@@ -92,6 +97,7 @@ export default [
           // Redirect to onboard page if user is not onboarded
           if (currentUser.eagleEyeSettings?.onboarded) {
             next('/eagle-eye')
+            return
           }
 
           next()
diff --git a/frontend/src/premium/eagle-eye/pages/eagle-eye-onboard-page.vue b/frontend/src/premium/eagle-eye/pages/eagle-eye-onboard-page.vue
index c2a478230c..29bc5b3093 100644
--- a/frontend/src/premium/eagle-eye/pages/eagle-eye-onboard-page.vue
+++ b/frontend/src/premium/eagle-eye/pages/eagle-eye-onboard-page.vue
@@ -51,6 +51,7 @@ import EagleEyeKeywords from '@/premium/eagle-eye/components/onboard/eagle-eye-k
 import EagleEyePlatforms from '@/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue'
 import EagleEyeSummary from '@/premium/eagle-eye/components/onboard/eagle-eye-summary-step.vue'
 import publishedDateOptions from '@/premium/eagle-eye/constants/eagle-eye-date-published.json'
+import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
 import ConfirmDialog from '@/shared/dialog/confirm-dialog.js'
 import { mapActions } from '@/shared/vuex/vuex.helpers'
 import { useStore } from 'vuex'
@@ -61,14 +62,18 @@ const router = useRouter()
 const { doUpdateSettings } = mapActions('eagleEye')
 
 const step = ref(1)
+
 const form = reactive({
   keywords: [
     {
       value: null
     }
   ],
-  datePublished: publishedDateOptions[0].label,
-  platforms: {}
+  datePublished: publishedDateOptions[1].label,
+  platforms: Object.keys(platformOptions).reduce((a, b) => {
+    a[b] = true
+    return a
+  }, {})
 })
 
 const headerContent = computed(() => {

From 14298bdaa902602cfa569aa97db620267e3b1e5b Mon Sep 17 00:00:00 2001
From: Gasper Grom <gasper.grom@gmail.com>
Date: Wed, 15 Feb 2023 16:45:32 +0100
Subject: [PATCH 5/5] Remove console logs & naming

---
 .../eagle-eye/components/list/eagle-eye-settings.vue        | 6 ------
 frontend/src/premium/eagle-eye/eagle-eye-routes.js          | 4 ----
 2 files changed, 10 deletions(-)

diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue
index a8728f8276..749a514908 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings.vue
@@ -72,12 +72,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'CrEagleEyeSetting'
-}
-</script>
-
 <script setup>
 import { ref, computed } from 'vue'
 import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
diff --git a/frontend/src/premium/eagle-eye/eagle-eye-routes.js b/frontend/src/premium/eagle-eye/eagle-eye-routes.js
index 62860dd047..b3dfe3c853 100644
--- a/frontend/src/premium/eagle-eye/eagle-eye-routes.js
+++ b/frontend/src/premium/eagle-eye/eagle-eye-routes.js
@@ -54,14 +54,10 @@ export default [
           module: 'eagleEye'
         },
         beforeEnter: async (to, _from, next) => {
-          console.log('/eagle-eye')
           // Redirect to onboard page if user is not onboarded
           if (await isEagleEyeFeatureEnabled()) {
             const currentUser =
               store.getters['auth/currentUser']
-            console.log(
-              !currentUser.eagleEyeSettings?.onboarded
-            )
             if (!currentUser.eagleEyeSettings?.onboarded) {
               next('/eagle-eye/onboard')
               return