added connector form dialog
Davide Di Modica committed
Aug 8, 2023 at 15:28 UTC
afac270f09284306bb6a1285bc408548db1f3954
132 files changed
+1097
-742
.eslintrc.cjs
+3
@@ -13,5 +13,8 @@ module.exports = {
13
parserOptions: {
14
ecmaVersion: "latest",
15
sourceType: "module"
16
+ },
17
+ rules: {
18
+ "vue/multi-word-component-names": "off"
19
}
20
}
package-lock.json
+22
@@ -64,6 +64,7 @@
64
"@vue/tsconfig": "^0.4.0",
65
"cypress": "^12.17.3",
66
"eslint": "^8.46.0",
67
+ "eslint-plugin-cypress": "^2.13.4",
68
"eslint-plugin-vue": "^9.16.1",
69
"jsdom": "^22.1.0",
70
"npm-run-all": "^4.1.5",
@@ -3373,6 +3374,18 @@
3374
"eslint": ">=7.0.0"
3375
}
3376
},
3377
+ "node_modules/eslint-plugin-cypress": {
3378
+ "version": "2.13.4",
3379
+ "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.13.4.tgz",
3380
+ "integrity": "sha512-A6CMdzFkGMkIWwVmS7DOBJfO1L2V5qcU2svlueycMJHn4MpoIhASxnDt+rI8zeA7qy9ExEGrMj1WhHcde1VrPQ==",
3381
+ "dev": true,
3382
+ "dependencies": {
3383
+ "globals": "^13.20.0"
3384
+ },
3385
+ "peerDependencies": {
3386
+ "eslint": ">= 3.2.1"
3387
+ }
3388
+ },
3389
"node_modules/eslint-plugin-prettier": {
3390
"version": "5.0.0",
3391
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
@@ -10311,6 +10324,15 @@
10324
"dev": true,
10325
"requires": {}
10326
},
10327
+ "eslint-plugin-cypress": {
10328
+ "version": "2.13.4",
10329
+ "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.13.4.tgz",
10330
+ "integrity": "sha512-A6CMdzFkGMkIWwVmS7DOBJfO1L2V5qcU2svlueycMJHn4MpoIhASxnDt+rI8zeA7qy9ExEGrMj1WhHcde1VrPQ==",
10331
+ "dev": true,
10332
+ "requires": {
10333
+ "globals": "^13.20.0"
10334
+ }
10335
+ },
10336
"eslint-plugin-prettier": {
10337
"version": "5.0.0",
10338
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
package.json
+2
-1
@@ -71,6 +71,7 @@
71
"@vue/tsconfig": "^0.4.0",
72
"cypress": "^12.17.3",
73
"eslint": "^8.46.0",
74
+ "eslint-plugin-cypress": "^2.13.4",
75
"eslint-plugin-vue": "^9.16.1",
76
"jsdom": "^22.1.0",
77
"npm-run-all": "^4.1.5",
@@ -83,4 +84,4 @@
84
"vitest": "^0.34.1",
85
"vue-tsc": "^1.8.8"
86
}
86
-}
\ No newline at end of file
87
+}
src/App.vue
+5
-5
@@ -50,7 +50,7 @@
50
51
<horizontal-nav :position="navPos" @push-page="closeSidebar" v-if="navPos === 'bottom'" style="margin-bottom: 0" />
52
53
- <Footer v-if="footer === 'below'" :position="footer" />
53
+ <FooterComp v-if="footer === 'below'" :position="footer" />
54
</div>
55
56
<vertical-nav
@@ -62,14 +62,14 @@
62
v-if="navPos === 'right'"
63
/>
64
65
- <Footer v-if="footer === 'above'" :position="footer" />
65
+ <FooterComp v-if="footer === 'above'" :position="footer" />
66
67
<layout-picker :position="navPos" v-if="isLogged" />
68
</div>
69
</template>
70
71
<script lang="ts">
72
-import { defineComponent } from "@vue/runtime-core"
72
+import { defineComponent } from "vue"
73
import { detect } from "detect-browser"
74
const browser = detect()
75
import HorizontalNav from "./core/horizontal-nav.vue"
@@ -78,7 +78,7 @@ import Toolbar from "./core/toolbar.vue"
78
import Footer from "./core/footer.vue"
79
import LayoutPicker from "./components/layout-picker.vue"
80
import { useMainStore } from "./stores/main"
81
-import { EFooter, ENavPos } from "./types"
81
+import { EFooter, ENavPos } from "@/types/layout.d"
82
83
export default defineComponent({
84
name: "App",
@@ -139,7 +139,7 @@ export default defineComponent({
139
HorizontalNav,
140
VerticalNav,
141
Toolbar,
142
- Footer,
142
+ FooterComp: Footer,
143
LayoutPicker
144
},
145
created() {
src/assets/open-props/open-props.css
+6
-6
@@ -1,14 +1,14 @@
1
@import "open-props/style";
2
3
/* optional imports that use the props */
4
-@import "open-props/normalize";
5
-@import "open-props/buttons";
4
+/* @import "open-props/normalize"; */
5
+/* @import "open-props/buttons"; */
6
7
/* just light or dark themes */
8
-@import "open-props/normalize/dark";
9
-@import "open-props/buttons/dark";
10
-@import "open-props/normalize/light";
11
-@import "open-props/buttons/light";
8
+/* @import "open-props/normalize/dark";
9
+/* @import "open-props/buttons/dark"; */
10
+/* @import "open-props/normalize/light"; */
11
+/* @import "open-props/buttons/light"; */
12
13
/* individual imports */
14
@import "open-props/indigo";
src/components/Affix.vue
+1
-1
@@ -6,7 +6,7 @@
6
</div>
7
</template>
8
<script>
9
-import { defineComponent } from "@vue/runtime-core"
9
+import { defineComponent } from "vue"
10
11
export default defineComponent({
12
props: {
src/components/NotificationBox.vue
+1
-1
@@ -14,7 +14,7 @@
14
</template>
15
16
<script>
17
-import { defineComponent } from "@vue/runtime-core"
17
+import { defineComponent } from "vue"
18
19
export default defineComponent({
20
name: "NotificationBox",
src/components/Profile/ProfileEdit.vue
+1
-1
@@ -134,7 +134,7 @@
134
</template>
135
136
<script>
137
-import { defineComponent } from "@vue/runtime-core"
137
+import { defineComponent } from "vue"
138
139
export default defineComponent({
140
name: "ProfileEdit",
src/components/Profile/ProfileGallery.vue
+1
-1
@@ -9,7 +9,7 @@
9
</template>
10
11
<script>
12
-import { defineComponent } from "@vue/runtime-core"
12
+import { defineComponent } from "vue"
13
14
export default defineComponent({
15
name: "ProfileGallery",
src/components/Profile/ProfileTimeline.vue
+1
-1
@@ -28,7 +28,7 @@
28
</template>
29
30
<script>
31
-import { defineComponent } from "@vue/runtime-core"
31
+import { defineComponent } from "vue"
32
33
export default defineComponent({
34
name: "ProfileTimeline",
src/components/Search.vue
+1
-1
@@ -26,7 +26,7 @@
26
</template>
27
28
<script>
29
-import { defineComponent } from "@vue/runtime-core"
29
+import { defineComponent } from "vue"
30
31
export default defineComponent({
32
name: "Search",
src/components/VuePellEditor.vue
+2
-2
@@ -12,7 +12,7 @@
12
13
<script>
14
import pell from "pell"
15
-import { defineComponent } from "@vue/runtime-core"
15
+import { defineComponent } from "vue"
16
17
export default defineComponent({
18
name: "VuePellEditor",
@@ -95,7 +95,7 @@ export default defineComponent({
95
* Before Destroy
96
* Reset pell instance
97
*/
98
- beforeDestroy() {
98
+ beforeUnmount() {
99
this.pell = undefined
100
},
101
src/components/connectors/ConfigForm/ConfigForm.vue
new
+171
@@ -0,0 +1,171 @@
1
+<template>generic form</template>
2
+
3
+<script setup lang="ts">
4
+import { toRefs } from "vue"
5
+import { Connector } from "@/types/connectors.d"
6
+
7
+const props = defineProps<{
8
+ connector: Connector
9
+}>()
10
+const { connector } = toRefs(props)
11
+
12
+/*
13
+function configureConnector(event) {
14
+ event.preventDefault()
15
+ const { connector_url, username, password, connector_api_key } = this.connectorForm
16
+ const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
17
+ this.loading = true
18
+ this.closeDialogUserandPass()
19
+
20
+ if (connector_api_key) {
21
+ console.log("POST request to: ", path)
22
+ console.log("Data: ", {
23
+ connector_url: connector_url,
24
+ connector_api_key: connector_api_key
25
+ })
26
+ axios
27
+ .post(path, {
28
+ connector_url: connector_url,
29
+ connector_api_key: connector_api_key
30
+ })
31
+ .then(() => {
32
+ this.successMessage = "Connector has been successfully configured." // Set success message
33
+ setTimeout(() => {
34
+ this.successMessage = "" // Clear success message after 5 seconds
35
+ }, 5000)
36
+ this.getConnectors() // Refresh the connectors
37
+ })
38
+ .catch(err => {
39
+ if (err.response.status === 400) {
40
+ this.errorMessage =
41
+ "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
42
+ } else if (err.response.status === 401) {
43
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
44
+ } else {
45
+ this.errorMessage = "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
46
+ }
47
+ setTimeout(() => {
48
+ this.errorMessage = "" // Clear error message after 5 seconds
49
+ }, 5000)
50
+ this.getConnectors() // Refresh the connectors
51
+ console.error(err) // Also log the error for debugging
52
+ })
53
+ .finally(() => {
54
+ this.loading = false // Set loading to false
55
+ })
56
+ } else {
57
+ axios
58
+ .post(path, {
59
+ connector_url: connector_url,
60
+ connector_username: username,
61
+ connector_password: password
62
+ })
63
+ .then(() => {
64
+ this.successMessage = "Connector has been successfully configured." // Set success message
65
+ setTimeout(() => {
66
+ this.successMessage = "" // Clear success message after 5 seconds
67
+ }, 5000)
68
+ this.getConnectors() // Refresh the connectors
69
+ })
70
+ .catch(err => {
71
+ if (err.response.status === 400) {
72
+ this.errorMessage =
73
+ "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
74
+ } else if (err.response.status === 401) {
75
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
76
+ } else {
77
+ this.errorMessage = "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
78
+ }
79
+ setTimeout(() => {
80
+ this.errorMessage = "" // Clear error message after 5 seconds
81
+ }, 5000)
82
+ this.getConnectors() // Refresh the connectors
83
+ console.error(err) // Also log the error for debugging
84
+ })
85
+ .finally(() => {
86
+ this.loading = false // Set loading to false
87
+ })
88
+ }
89
+}
90
+function updateConnector(event) {
91
+ event.preventDefault()
92
+ const { connector_url, username, password, connector_api_key } = this.connectorForm
93
+ const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
94
+ this.loading = true
95
+ this.closeUpdateModal()
96
+
97
+ if (connector_api_key) {
98
+ console.log("POST request to: ", path)
99
+ console.log("Data: ", {
100
+ connector_url: connector_url,
101
+ connector_api_key: connector_api_key
102
+ })
103
+
104
+ axios
105
+ .put(path, {
106
+ connector_url: connector_url,
107
+ connector_username: username,
108
+ connector_password: password,
109
+ connector_api_key: connector_api_key
110
+ })
111
+ .then(() => {
112
+ this.successMessage = "Connector has been successfully updated." // Set success message
113
+ setTimeout(() => {
114
+ this.successMessage = "" // Clear success message after 5 seconds
115
+ }, 5000)
116
+ this.getConnectors() // Refresh the connectors
117
+ })
118
+ .catch(err => {
119
+ if (err.response.status === 400) {
120
+ this.errorMessage =
121
+ "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
122
+ } else if (err.response.status === 401) {
123
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
124
+ } else {
125
+ this.errorMessage = "Error updating the connector. Please try again." // Set the error message
126
+ }
127
+ setTimeout(() => {
128
+ this.errorMessage = "" // Clear error message after 5 seconds
129
+ }, 5000)
130
+ this.getConnectors() // Refresh the connectors
131
+ console.error(err) // Also log the error for debugging
132
+ })
133
+ .finally(() => {
134
+ this.loading = false // Set loading to false
135
+ })
136
+ } else {
137
+ axios
138
+ .put(path, {
139
+ connector_url: connector_url,
140
+ connector_username: username,
141
+ connector_password: password
142
+ })
143
+ .then(() => {
144
+ this.successMessage = "Connector has been successfully updated." // Set success message
145
+ setTimeout(() => {
146
+ this.successMessage = "" // Clear success message after 5 seconds
147
+ }, 5000)
148
+ this.getConnectors() // Refresh the connectors
149
+ })
150
+ .catch(err => {
151
+ if (err.response.status === 400) {
152
+ this.errorMessage =
153
+ "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
154
+ } else if (err.response.status === 401) {
155
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
156
+ } else {
157
+ this.errorMessage = "Error updating the connector. Please try again." // Set the error message
158
+ }
159
+ setTimeout(() => {
160
+ this.errorMessage = "" // Clear error message after 5 seconds
161
+ }, 5000)
162
+ this.getConnectors() // Refresh the connectors
163
+ console.error(err) // Also log the error for debugging
164
+ })
165
+ .finally(() => {
166
+ this.loading = false // Set loading to false
167
+ })
168
+ }
169
+}
170
+*/
171
+</script>
src/components/connectors/ConfigForm/index.ts
new
+2
@@ -0,0 +1,2 @@
1
+import ConfigForm from "./ConfigForm.vue"
2
+export default ConfigForm
src/components/layout-picker.vue
+1
-1
@@ -97,7 +97,7 @@
97
<script>
98
import { useMainStore } from "../stores/main"
99
100
-import { defineComponent } from "@vue/runtime-core"
100
+import { defineComponent } from "vue"
101
102
export default defineComponent({
103
name: "LayoutPicker",
src/components/theme-picker.vue
+1
-1
@@ -20,7 +20,7 @@
20
const version = "2.2.2"
21
22
const ORIGINAL_THEME = "#409EFF"
23
-import { defineComponent } from "@vue/runtime-core"
23
+import { defineComponent } from "vue"
24
25
export default defineComponent({
26
data() {
src/components/vue-peity/Peity.vue
+1
-1
@@ -7,7 +7,7 @@ import Peity from "./lib/peity"
7
8
const types = ["line", "bar", "pie", "donut"]
9
10
-import { defineComponent } from "@vue/runtime-core"
10
+import { defineComponent } from "vue"
11
12
export default defineComponent({
13
props: {
src/components/vue-ps/index.vue
+1
-1
@@ -21,7 +21,7 @@
21
<script>
22
import PerfectScrollbar from "perfect-scrollbar"
23
24
-import { defineComponent } from "@vue/runtime-core"
24
+import { defineComponent } from "vue"
25
26
export default defineComponent({
27
name: "vue-ps",
src/components/vue-quill-editor.vue
+1
-1
@@ -94,7 +94,7 @@ export default {
94
mounted() {
95
this.initialize()
96
},
97
- beforeDestroy() {
97
+ beforeUnmount() {
98
this.quill = null
99
delete this.quill
100
},
src/components/vue-resize/ResizeObserver.vue
+1
-1
@@ -14,7 +14,7 @@ function initCompat() {
14
}
15
}
16
17
-import { defineComponent } from "@vue/runtime-core"
17
+import { defineComponent } from "vue"
18
19
export default defineComponent({
20
name: "ResizeObserver",
src/core/footer.vue
+1
-1
@@ -19,7 +19,7 @@
19
</template>
20
21
<script lang="ts">
22
-import { defineComponent } from "@vue/runtime-core"
22
+import { defineComponent } from "vue"
23
export default defineComponent({
24
name: "Footer",
25
props: ["position"]
src/core/horizontal-nav.vue
+1
-1
@@ -10,7 +10,7 @@
10
</template>
11
12
<script lang="ts">
13
-import { defineComponent } from "@vue/runtime-core"
13
+import { defineComponent } from "vue"
14
import Nav from "@/core/nav.vue"
15
import Logo from "@/core/logo.vue"
16
src/core/logo.vue
+1
-1
@@ -12,7 +12,7 @@
12
</template>
13
14
<script lang="ts">
15
-import { defineComponent } from "@vue/runtime-core"
15
+import { defineComponent } from "vue"
16
export default defineComponent({
17
name: "Logo",
18
props: ["collapseNav", "mode"],
src/core/nav.vue
+1
-1
@@ -318,7 +318,7 @@
318
</template>
319
320
<script lang="ts">
321
-import { defineComponent } from "@vue/runtime-core"
321
+import { defineComponent } from "vue"
322
import { detect } from "detect-browser"
323
import { useRoute } from "vue-router"
324
const browser = detect()
src/core/toolbar.vue
+1
-1
@@ -85,7 +85,7 @@
85
</template>
86
87
<script lang="ts">
88
-import { defineComponent } from "@vue/runtime-core"
88
+import { defineComponent } from "vue"
89
import NotificationBox from "../components/NotificationBox.vue"
90
import Search from "../components/Search.vue"
91
import { api as fullscreen } from "vue-fullscreen"
src/core/vertical-nav.vue
+1
-1
@@ -18,7 +18,7 @@
18
</template>
19
20
<script lang="ts">
21
-import { defineComponent } from "@vue/runtime-core"
21
+import { defineComponent } from "vue"
22
import Nav from "./nav.vue"
23
import Logo from "./logo.vue"
24
src/layout.ts
+1
-1
@@ -1,4 +1,4 @@
1
-import { EFooter, ENavPos, EToolbar } from "@/types"
1
+import { EFooter, ENavPos, EToolbar } from "@/types/layout.d"
2
3
export default {
4
contenOnly: {
src/router/index.ts
+1
-1
@@ -40,7 +40,7 @@ import charts from "./charts"
40
41
import layouts from "../layout"
42
import { useMainStore } from "@/stores/main"
43
-import type { StateLayout } from "@/types"
43
+import type { StateLayout } from "@/types/layout"
44
45
const router = createRouter({
46
history: createWebHistory(import.meta.env.BASE_URL),
src/stores/main.ts
+1
-1
@@ -1,4 +1,4 @@
1
-import { ENavPos, EToolbar, EViewAnimation, type State, type StateLayout } from "@/types"
1
+import { ENavPos, EToolbar, EViewAnimation, State, StateLayout } from "@/types/layout.d"
2
import { defineStore, acceptHMRUpdate } from "pinia"
3
4
export const useMainStore = defineStore("main", {
src/types/layout.d.ts
renamed
src/views/apps/Calendar.vue
+1
-1
@@ -78,7 +78,7 @@ import dayGridPlugin from "@fullcalendar/daygrid"
78
import timeGridPlugin from "@fullcalendar/timegrid"
79
import listPlugin from "@fullcalendar/list"
80
import interactionPlugin from "@fullcalendar/interaction"
81
-import { defineComponent } from "@vue/runtime-core"
81
+import { defineComponent } from "vue"
82
83
export default defineComponent({
84
name: "Calendar",
src/views/apps/Cards.vue
+1
-1
@@ -37,7 +37,7 @@ import dayjs from "dayjs"
37
import Chance from "chance"
38
const chance = new Chance()
39
40
-import { defineComponent } from "@vue/runtime-core"
40
+import { defineComponent } from "vue"
41
42
export default defineComponent({
43
name: "Cards",
src/views/apps/Connectors.vue
+22
-591
@@ -28,88 +28,22 @@
28
<td>{{ connector.connector_description }}</td>
29
<td>{{ connector.connector_supports }}</td>
30
<td>
31
- <el-button type="primary" v-if="connector.connector_configured == true">True</el-button>
31
+ <el-button type="primary" v-if="connector.connector_configured">True</el-button>
32
<el-button type="info" v-else>False</el-button>
33
</td>
34
<!-- Show the connector verified which is in the `connector` table -->
35
<td>
36
- <el-button type="success" v-if="connector.connector_verified == true">True</el-button>
36
+ <el-button type="success" v-if="connector.connector_verified">True</el-button>
37
<el-button type="danger" v-else>False</el-button>
38
</td>
39
<td>
40
<div class="btn-group" role="group">
41
<!--If the connector is not already configured then display the configure button -->
42
- <el-button
43
- type="primary"
44
- round
45
- v-if="
46
- (connector.connector_configured == false || connector.connector_configured == null) &&
47
- connector.connector_name.toLowerCase() !== 'velociraptor'
48
- "
49
- @click="openConfigureModal(connector)"
50
- >
42
+ <el-button type="primary" round v-if="!connector.connector_configured" @click="openConfigDialog(connector)">
43
Configure
44
</el-button>
45
54
- <!--If the connector is not already configured and the connector_name IS `velociraptor`, then display the configure button -->
55
- <el-button
56
- type="primary"
57
- round
58
- v-if="
59
- (connector.connector_configured == false || connector.connector_configured == null) &&
60
- connector.connector_name.toLowerCase() === 'velociraptor'
61
- "
62
- @click="openConfigureModalFile(connector)"
63
- >
64
- Configure
65
- </el-button>
66
- <!-- If the connector is already configured and the connector_name is not `shuffle` or `dfir-iris` to lower, then display the update button -->
67
- <el-button
68
- type="warning"
69
- round
70
- v-if="
71
- connector.connector_configured == true &&
72
- // connector.connector_name.toLowerCase() !==
73
- // 'shuffle' &&
74
- // connector.connector_name.toLowerCase() !==
75
- // 'dfir-iris' &&
76
- connector.connector_name.toLowerCase() !== 'velociraptor'
77
- "
78
- @click="openUpdateModal(connector)"
79
- >
80
- Update
81
- </el-button>
82
- <!-- Update Velociraptor -->
83
- <el-button
84
- type="warning"
85
- round
86
- v-if="
87
- connector.connector_configured == true &&
88
- // connector.connector_name.toLowerCase() !==
89
- // 'shuffle' &&
90
- // connector.connector_name.toLowerCase() !==
91
- // 'dfir-iris' &&
92
- connector.connector_name.toLowerCase() === 'velociraptor'
93
- "
94
- @click="openConfigureModalFile(connector)"
95
- >
96
- Update
97
- </el-button>
98
- <!-- If the connector is already configured and the connector_name IS `shuffle` or `dfir-iris` to lower, then display the update button -->
99
- <!-- <el-button type="warning" round
100
- v-if="
101
- connector.connector_configured == true &&
102
- (connector.connector_name.toLowerCase() ===
103
- 'shuffle' ||
104
- connector.connector_name.toLowerCase() ===
105
- 'dfir-iris')
106
- "
107
- @click="openUpdateModal(connector)"
108
- >
109
- Update
110
- </el-button> -->
111
-
112
- <!--<button type="button" class="btn btn-info btn-sm" @click="updateConnector(connector)">Update</button>-->
46
+ <el-button type="warning" round v-else @click="openConfigDialog(connector)"> Update </el-button>
47
<!--<button type="button" class="btn btn-info btn-sm" @click="deleteConnector(connector)">Delete</button>-->
48
</div>
49
</td>
@@ -118,190 +52,22 @@
52
</table>
53
</div>
54
121
- <!-- Configure Modal Username and Password API Key -->
122
- <div v-bind:class="{ 'modal-window': true, 'is-active': isConfigureModalActive }">
123
- <div class="modal-background" @click="openConfigureModal = false"></div>
124
- <div>
125
- <el-form :model="connectorForm" status-icon :rules="rules2" ref="connectorForm" label-width="120px" class="demo-ruleForm">
126
- <div class="modal-card">
127
- <header class="modal-card-head">
128
- <h2 class="modal-card-title">Configure {{ currentConnector ? currentConnector.connector_name : "" }}</h2>
129
- <img
130
- :src="`/src/assets/images/${
131
- currentConnector ? currentConnector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'
132
- }`"
133
- alt="Logo"
134
- class="modal-logo"
135
- />
136
- </header>
137
- <section class="modal-card-body">
138
- <div class="field">
139
- <label class="label">Connector URL</label>
140
- <div class="control">
141
- <input class="input" type="text" v-model="connectorForm.connector_url" required />
142
- </div>
143
- </div>
144
-
145
- <!-- API Key input for dfir-iris and shuffle -->
146
- <div
147
- class="field"
148
- v-if="
149
- ['dfir-iris', 'shuffle'].includes(currentConnector ? currentConnector.connector_name.toLowerCase() : '')
150
- "
151
- >
152
- <label class="label">API Key</label>
153
- <div class="control">
154
- <input class="input" type="text" v-model="connectorForm.connector_api_key" required />
155
- </div>
156
- </div>
157
-
158
- <!-- Username and Password inputs for other connectors -->
159
- <template v-else>
160
- <div class="field">
161
- <label class="label">Username</label>
162
- <div class="control">
163
- <input class="input" type="text" v-model="connectorForm.username" required />
164
- </div>
165
- </div>
166
- <div class="field">
167
- <label class="label">Password</label>
168
- <div class="control">
169
- <input class="input" type="password" v-model="connectorForm.password" required />
170
- </div>
171
- </div>
172
- </template>
173
-
174
- <div class="field">
175
- <div class="control">
176
- <button class="button is-primary" type="submit" @click.prevent="configureConnector">Save</button>
177
- <button class="button" type="button" @click="closeDialogUserandPass">Cancel</button>
178
- </div>
179
- </div>
180
- </section>
181
- </div>
182
- </el-form>
183
- </div>
184
- </div>
185
-
186
- <!-- Configure Modal File -->
187
- <div v-bind:class="{ 'modal-window': true, 'is-active': isConfigureModalFileActive }">
188
- <div class="modal-background" @click="openConfigureModalFile = false"></div>
189
- <div>
190
- <el-form :model="connectorForm" status-icon :rules="rules2" ref="connectorForm" label-width="120px" class="demo-ruleForm">
191
- <div class="modal-card">
192
- <header class="modal-card-head">
193
- <h2 class="modal-card-title">Configure File {{ currentConnector ? currentConnector.connector_name : "" }}</h2>
194
- <img
195
- :src="`/src/assets/images/${
196
- currentConnector ? currentConnector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'
197
- }`"
198
- alt="Logo"
199
- class="modal-logo"
200
- />
201
- </header>
202
- <section class="modal-card-body">
203
- <!-- Add the el-upload component here -->
204
- <el-upload
205
- class="upload-demo"
206
- action="http://localhost:5000/connectors/upload"
207
- :on-preview="handlePreview"
208
- :on-remove="handleRemove"
209
- :before-remove="beforeRemove"
210
- :on-success="handleSuccess"
211
- multiple
212
- drag
213
- :limit="3"
214
- :on-exceed="handleExceed"
215
- :file-list="fileList"
216
- >
217
- <i class="el-icon-upload"></i>
218
- <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
219
- <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
220
- </el-upload>
221
- <!-- Add the cancel and submit buttons -->
222
- <div class="field">
223
- <div class="control">
224
- <button class="button" type="button" @click="closeConfigureModuleFile">Cancel</button>
225
- </div>
226
- </div>
227
- <!-- Rest of your existing code... -->
228
- </section>
229
- </div>
230
- </el-form>
231
- </div>
232
- </div>
233
-
234
- <!-- Update Modal Username and Password-->
235
- <div v-bind:class="{ 'modal-window': true, 'is-active': isUpdateModalActive }">
236
- <div class="modal-background" @click="openUpdateModal = false"></div>
237
- <div>
238
- <el-form :model="connectorForm" status-icon :rules="rules2" ref="connectorForm" label-width="120px" class="demo-ruleForm">
239
- <div class="modal-card">
240
- <header class="modal-card-head">
241
- <h2 class="modal-card-title">Update {{ currentConnector ? currentConnector.connector_name : "" }}</h2>
242
- <img
243
- :src="`/src/assets/images/${
244
- currentConnector ? currentConnector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'
245
- }`"
246
- alt="Logo"
247
- class="modal-logo"
248
- />
249
- </header>
250
- <section class="modal-card-body">
251
- <div class="field">
252
- <label class="label">Connector URL</label>
253
- <div class="control">
254
- <input class="input" type="text" v-model="connectorForm.connector_url" required />
255
- </div>
256
- </div>
257
-
258
- <!-- API Key input for dfir-iris and shuffle -->
259
- <div
260
- class="field"
261
- v-if="
262
- ['dfir-iris', 'shuffle'].includes(currentConnector ? currentConnector.connector_name.toLowerCase() : '')
263
- "
264
- >
265
- <label class="label">API Key</label>
266
- <div class="control">
267
- <input class="input" type="text" v-model="connectorForm.connector_api_key" required />
268
- </div>
269
- </div>
270
-
271
- <!-- Username and Password inputs for other connectors -->
272
- <template v-else>
273
- <div class="field">
274
- <label class="label">Username</label>
275
- <div class="control">
276
- <input class="input" type="text" v-model="connectorForm.username" required />
277
- </div>
278
- </div>
279
- <div class="field">
280
- <label class="label">Password</label>
281
- <div class="control">
282
- <input class="input" type="password" v-model="connectorForm.password" required />
283
- </div>
284
- </div>
285
- </template>
286
-
287
- <div class="field">
288
- <div class="control">
289
- <button class="button is-primary" type="submit" @click.prevent="updateConnector">Save</button>
290
- <button class="button" type="button" @click="closeUpdateModal">Cancel</button>
291
- </div>
292
- </div>
293
- </section>
294
- </div>
295
- </el-form>
296
- </div>
297
- </div>
55
+ <el-dialog
56
+ title="Connector configuration"
57
+ v-model="showConfigDialog"
58
+ :close-on-click-modal="true"
59
+ :close-on-press-escape="true"
60
+ width="600px"
61
+ >
62
+ <ConfigForm :connector="currentConnector" />
63
+ </el-dialog>
64
</div>
65
</template>
66
67
<script lang="ts">
302
-import axios from "axios"
68
import Api from "@/api"
69
import { defineComponent } from "vue"
70
+import ConfigForm from "@/components/connectors/ConfigForm"
71
import { Connector } from "@/types/connectors"
72
73
export default defineComponent({
@@ -318,7 +84,8 @@ export default defineComponent({
84
isUpdateModalActive: false,
85
86
loading: false,
321
- showForm: false,
87
+ showConfigDialog: false,
88
+
89
successMessage: "",
90
errorMessage: "",
91
connectorForm: {
@@ -330,223 +97,14 @@ export default defineComponent({
97
}
98
},
99
methods: {
333
- showDialogUserandPass(connector) {
100
+ openConfigDialog(connector) {
101
this.currentConnector = connector
335
- this.showForm = true
336
- // this.$refs.userAndPassDialog.showModal();
337
- },
338
-
339
- openConfigureModal(connector) {
340
- // Open the configure modal and set the initial form values
341
- this.isConfigureModalActive = true
342
- this.currentConnector = connector // Store the current connector
343
- this.connectorForm.connector_url = connector.connector_url
344
- this.connectorForm.username = connector.connector_username
345
- this.connectorForm.password = connector.connector_password
346
- this.connectorForm.connector_api_key = connector.connector_api_key
347
- },
348
-
349
- openConfigureModalFile(connector) {
350
- // Open the configure modal and set the initial form values
351
- this.isConfigureModalFileActive = true
352
- this.currentConnector = connector // Store the current connector
353
- this.connectorForm.connector_url = connector.connector_url
354
- this.connectorForm.username = connector.connector_username
355
- this.connectorForm.password = connector.connector_password
356
- this.connectorForm.connector_api_key = connector.connector_api_key
357
- },
358
-
359
- closeDialogUserandPass() {
360
- // this.$refs.userAndPassDialog.close();
361
- this.showForm = false
362
- this.isConfigureModalActive = false
363
- },
364
-
365
- closeConfigureModuleFile() {
366
- // this.$refs.userAndPassDialog.close();
367
- this.showForm = false
368
- this.isConfigureModalFileActive = false
369
- },
370
-
371
- openUpdateModal(connector) {
372
- // Open the update modal and set the initial form values
373
- this.isUpdateModalActive = true
374
- this.currentConnector = connector // Store the current connector
375
- this.connectorForm.connector_url = connector.connector_url
376
- this.connectorForm.username = connector.connector_username
377
- this.connectorForm.password = connector.connector_password
378
- this.connectorForm.connector_api_key = connector.connector_api_key
379
- },
380
-
381
- closeUpdateModal() {
382
- // this.$refs.userAndPassDialog.close();
383
- this.showForm = false
384
- this.isUpdateModalActive = false
385
- },
386
-
387
- configureConnector(event) {
388
- event.preventDefault()
389
- const { connector_url, username, password, connector_api_key } = this.connectorForm
390
- const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
391
- this.loading = true
392
- this.closeDialogUserandPass()
393
-
394
- if (connector_api_key) {
395
- console.log("POST request to: ", path)
396
- console.log("Data: ", {
397
- connector_url: connector_url,
398
- connector_api_key: connector_api_key
399
- })
400
- axios
401
- .post(path, {
402
- connector_url: connector_url,
403
- connector_api_key: connector_api_key
404
- })
405
- .then(() => {
406
- this.successMessage = "Connector has been successfully configured." // Set success message
407
- setTimeout(() => {
408
- this.successMessage = "" // Clear success message after 5 seconds
409
- }, 5000)
410
- this.getConnectors() // Refresh the connectors
411
- })
412
- .catch(err => {
413
- if (err.response.status === 400) {
414
- this.errorMessage =
415
- "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
416
- } else if (err.response.status === 401) {
417
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
418
- } else {
419
- this.errorMessage =
420
- "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
421
- }
422
- setTimeout(() => {
423
- this.errorMessage = "" // Clear error message after 5 seconds
424
- }, 5000)
425
- this.getConnectors() // Refresh the connectors
426
- console.error(err) // Also log the error for debugging
427
- })
428
- .finally(() => {
429
- this.loading = false // Set loading to false
430
- })
431
- } else {
432
- axios
433
- .post(path, {
434
- connector_url: connector_url,
435
- connector_username: username,
436
- connector_password: password
437
- })
438
- .then(() => {
439
- this.successMessage = "Connector has been successfully configured." // Set success message
440
- setTimeout(() => {
441
- this.successMessage = "" // Clear success message after 5 seconds
442
- }, 5000)
443
- this.getConnectors() // Refresh the connectors
444
- })
445
- .catch(err => {
446
- if (err.response.status === 400) {
447
- this.errorMessage =
448
- "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
449
- } else if (err.response.status === 401) {
450
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
451
- } else {
452
- this.errorMessage =
453
- "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
454
- }
455
- setTimeout(() => {
456
- this.errorMessage = "" // Clear error message after 5 seconds
457
- }, 5000)
458
- this.getConnectors() // Refresh the connectors
459
- console.error(err) // Also log the error for debugging
460
- })
461
- .finally(() => {
462
- this.loading = false // Set loading to false
463
- })
464
- }
465
- },
466
-
467
- updateConnector(event) {
468
- event.preventDefault()
469
- const { connector_url, username, password, connector_api_key } = this.connectorForm
470
- const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
471
- this.loading = true
472
- this.closeUpdateModal()
473
-
474
- if (connector_api_key) {
475
- console.log("POST request to: ", path)
476
- console.log("Data: ", {
477
- connector_url: connector_url,
478
- connector_api_key: connector_api_key
479
- })
480
-
481
- axios
482
- .put(path, {
483
- connector_url: connector_url,
484
- connector_username: username,
485
- connector_password: password,
486
- connector_api_key: connector_api_key
487
- })
488
- .then(() => {
489
- this.successMessage = "Connector has been successfully updated." // Set success message
490
- setTimeout(() => {
491
- this.successMessage = "" // Clear success message after 5 seconds
492
- }, 5000)
493
- this.getConnectors() // Refresh the connectors
494
- })
495
- .catch(err => {
496
- if (err.response.status === 400) {
497
- this.errorMessage =
498
- "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
499
- } else if (err.response.status === 401) {
500
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
501
- } else {
502
- this.errorMessage = "Error updating the connector. Please try again." // Set the error message
503
- }
504
- setTimeout(() => {
505
- this.errorMessage = "" // Clear error message after 5 seconds
506
- }, 5000)
507
- this.getConnectors() // Refresh the connectors
508
- console.error(err) // Also log the error for debugging
509
- })
510
- .finally(() => {
511
- this.loading = false // Set loading to false
512
- })
513
- } else {
514
- axios
515
- .put(path, {
516
- connector_url: connector_url,
517
- connector_username: username,
518
- connector_password: password
519
- })
520
- .then(() => {
521
- this.successMessage = "Connector has been successfully updated." // Set success message
522
- setTimeout(() => {
523
- this.successMessage = "" // Clear success message after 5 seconds
524
- }, 5000)
525
- this.getConnectors() // Refresh the connectors
526
- })
527
- .catch(err => {
528
- if (err.response.status === 400) {
529
- this.errorMessage =
530
- "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
531
- } else if (err.response.status === 401) {
532
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
533
- } else {
534
- this.errorMessage = "Error updating the connector. Please try again." // Set the error message
535
- }
536
- setTimeout(() => {
537
- this.errorMessage = "" // Clear error message after 5 seconds
538
- }, 5000)
539
- this.getConnectors() // Refresh the connectors
540
- console.error(err) // Also log the error for debugging
541
- })
542
- .finally(() => {
543
- this.loading = false // Set loading to false
544
- })
545
- }
102
+ this.showConfigDialog = true
103
},
104
105
getConnectors() {
106
this.loading = true
107
+
108
Api.connectors
109
.getAll()
110
.then(res => {
@@ -558,14 +116,13 @@ export default defineComponent({
116
.finally(() => {
117
this.loading = false
118
})
561
- },
562
-
563
- resetForm(formName) {
564
- this.$refs[formName].resetFields()
119
}
120
},
121
created() {
122
this.getConnectors()
123
+ },
124
+ components: {
125
+ ConfigForm
126
}
127
})
128
</script>
@@ -581,130 +138,4 @@ export default defineComponent({
138
.table-box {
139
overflow: auto;
140
}
584
-
585
-.modal-window {
586
- position: fixed;
587
- background-color: rgba(255, 255, 255, 0.25);
588
- top: 0;
589
- right: 0;
590
- bottom: 0;
591
- left: 0;
592
- z-index: 999;
593
- visibility: hidden;
594
- opacity: 0;
595
- pointer-events: none;
596
- transition: all 0.3s;
597
- &.is-active {
598
- visibility: visible;
599
- opacity: 1;
600
- pointer-events: auto;
601
- }
602
- &:target {
603
- visibility: visible;
604
- opacity: 1;
605
- pointer-events: auto;
606
- }
607
- & > div {
608
- width: 400px;
609
- position: absolute;
610
- top: 50%;
611
- left: 50%;
612
- transform: translate(-50%, -50%);
613
- padding: 2em;
614
- background: white;
615
- }
616
- header {
617
- font-weight: bold;
618
- }
619
- h1 {
620
- font-size: 150%;
621
- margin: 0 0 15px;
622
- }
623
-}
624
-
625
-.modal-close {
626
- color: #aaa;
627
- line-height: 50px;
628
- font-size: 80%;
629
- position: absolute;
630
- right: 0;
631
- text-align: center;
632
- top: 0;
633
- width: 70px;
634
- text-decoration: none;
635
- &:hover {
636
- color: black;
637
- }
638
-}
639
-
640
-/* Demo Styles */
641
-
642
-html,
643
-body {
644
- height: 100%;
645
-}
646
-
647
-html {
648
- font-size: 18px;
649
- line-height: 1.4;
650
-}
651
-
652
-body {
653
- font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
654
- font-weight: 600;
655
- background-image: linear-gradient(to right, #7f53ac 0, #657ced 100%);
656
- color: black;
657
-}
658
-
659
-a {
660
- color: inherit;
661
- text-decoration: none;
662
-}
663
-
664
-.container {
665
- display: grid;
666
- justify-content: center;
667
- align-items: center;
668
- height: 100vh;
669
-}
670
-
671
-.modal-window {
672
- & > div {
673
- border-radius: 1rem;
674
- }
675
-}
676
-
677
-.modal-window div:not(:last-of-type) {
678
- margin-bottom: 15px;
679
-}
680
-
681
-.logo {
682
- max-width: 150px;
683
- display: block;
684
-}
685
-
686
-small {
687
- color: lightgray;
688
-}
689
-
690
-.btn {
691
- background-color: white;
692
- padding: 1em 1.5em;
693
- border-radius: 0.5rem;
694
- text-decoration: none;
695
- i {
696
- padding-right: 0.3em;
697
- }
698
-}
699
-
700
-.modal-card-head {
701
- display: flex;
702
- justify-content: space-between;
703
- align-items: center;
704
-}
705
-
706
-.modal-logo {
707
- height: auto; /* adjust as needed */
708
- width: auto; /* adjust as needed */
709
-}
141
</style>
src/views/apps/Contacts.vue
+1
-1
@@ -59,7 +59,7 @@
59
<script>
60
import UserDialog from "@/components/UserDialog.vue"
61
import Contacts from "@/assets/data/CONTACTS_MOCK_DATA.json"
62
-import { defineComponent } from "@vue/runtime-core"
62
+import { defineComponent } from "vue"
63
import _ from "lodash"
64
import ResizeObserver from "@/components/vue-resize/ResizeObserver.vue"
65
src/views/apps/CryptoDashboard.vue
+1
-1
@@ -297,7 +297,7 @@ import "cryptocoins-icons/webfont/cryptocoins.css"
297
import "cryptocoins-icons/webfont/cryptocoins-colors.css"
298
import ResizeObserver from "../../components/vue-resize/ResizeObserver.vue"
299
import _throttle from "lodash/throttle"
300
-import { defineComponent } from "@vue/runtime-core"
300
+import { defineComponent } from "vue"
301
import Peity from "../../components/vue-peity/Peity.vue"
302
303
export default defineComponent({
src/views/apps/Dashboard.vue
+1
-1
@@ -278,7 +278,7 @@ import _ from "lodash"
278
import * as echarts from "echarts"
279
import Peity from "../../components/vue-peity/Peity.vue"
280
import ResizeObserver from "../../components/vue-resize/ResizeObserver.vue"
281
-import { defineComponent } from "@vue/runtime-core"
281
+import { defineComponent } from "vue"
282
283
export default defineComponent({
284
name: "Dashboard",
src/views/apps/Gallery.vue
+1
-1
@@ -19,7 +19,7 @@
19
<script>
20
import ProfileGallery from "@/components/Profile/ProfileGallery.vue"
21
22
-import { defineComponent } from "@vue/runtime-core"
22
+import { defineComponent } from "vue"
23
24
export default defineComponent({
25
name: "Gallery",
src/views/apps/Mail.vue
+1
-1
@@ -152,7 +152,7 @@ import Chance from "chance"
152
const chance = new Chance()
153
import VuePellEditor from "@/components/VuePellEditor.vue"
154
155
-import { defineComponent } from "@vue/runtime-core"
155
+import { defineComponent } from "vue"
156
157
export default defineComponent({
158
name: "Mail",
src/views/apps/_bkp_Connectors.vue
new
+725
@@ -0,0 +1,725 @@
1
+<template>
2
+ <div class="page-table scrollable only-y">
3
+ <div class="page-header">
4
+ <h1>Connectors</h1>
5
+ <h4>Configure connections to your toolset.</h4>
6
+ <el-breadcrumb separator="/">
7
+ <el-breadcrumb-item :to="{ path: '/' }"><i class="mdi mdi-home-outline"></i></el-breadcrumb-item>
8
+ <el-breadcrumb-item>Connectors</el-breadcrumb-item>
9
+ </el-breadcrumb>
10
+ </div>
11
+
12
+ <div class="table-box card-base card-shadow--medium scrollable only-x" v-loading="loading">
13
+ <table class="styled striped">
14
+ <thead>
15
+ <tr>
16
+ <th scope="col">Connector Name</th>
17
+ <th scope="col">Connector Description</th>
18
+ <th scope="col">Connector Supports</th>
19
+ <th scope="col">Connector Configured</th>
20
+ <th scope="col">Connector Verified</th>
21
+ <th scope="col">Connector Options</th>
22
+ </tr>
23
+ </thead>
24
+ <tbody>
25
+ <tr v-for="connector in connectors" :key="connector.id">
26
+ <!-- Display the connector details in the table -->
27
+ <td>{{ connector.connector_name }}</td>
28
+ <td>{{ connector.connector_description }}</td>
29
+ <td>{{ connector.connector_supports }}</td>
30
+ <td>
31
+ <el-button type="primary" v-if="connector.connector_configured == true">True</el-button>
32
+ <el-button type="info" v-else>False</el-button>
33
+ </td>
34
+ <!-- Show the connector verified which is in the `connector` table -->
35
+ <td>
36
+ <el-button type="success" v-if="connector.connector_verified == true">True</el-button>
37
+ <el-button type="danger" v-else>False</el-button>
38
+ </td>
39
+ <td>
40
+ <div class="btn-group" role="group">
41
+ <!--If the connector is not already configured then display the configure button -->
42
+ <el-button
43
+ type="primary"
44
+ round
45
+ v-if="
46
+ (connector.connector_configured == false || connector.connector_configured == null) &&
47
+ connector.connector_name.toLowerCase() !== 'velociraptor'
48
+ "
49
+ @click="openConfigureModal(connector)"
50
+ >
51
+ Configure
52
+ </el-button>
53
+
54
+ <!--If the connector is not already configured and the connector_name IS `velociraptor`, then display the configure button -->
55
+ <el-button
56
+ type="primary"
57
+ round
58
+ v-if="
59
+ (connector.connector_configured == false || connector.connector_configured == null) &&
60
+ connector.connector_name.toLowerCase() === 'velociraptor'
61
+ "
62
+ @click="openConfigureModalFile(connector)"
63
+ >
64
+ Configure
65
+ </el-button>
66
+ <!-- If the connector is already configured and the connector_name is not `shuffle` or `dfir-iris` to lower, then display the update button -->
67
+ <el-button
68
+ type="warning"
69
+ round
70
+ v-if="
71
+ connector.connector_configured == true &&
72
+ // connector.connector_name.toLowerCase() !==
73
+ // 'shuffle' &&
74
+ // connector.connector_name.toLowerCase() !==
75
+ // 'dfir-iris' &&
76
+ connector.connector_name.toLowerCase() !== 'velociraptor'
77
+ "
78
+ @click="openUpdateModal(connector)"
79
+ >
80
+ Update
81
+ </el-button>
82
+ <!-- Update Velociraptor -->
83
+ <el-button
84
+ type="warning"
85
+ round
86
+ v-if="
87
+ connector.connector_configured == true &&
88
+ // connector.connector_name.toLowerCase() !==
89
+ // 'shuffle' &&
90
+ // connector.connector_name.toLowerCase() !==
91
+ // 'dfir-iris' &&
92
+ connector.connector_name.toLowerCase() === 'velociraptor'
93
+ "
94
+ @click="openConfigureModalFile(connector)"
95
+ >
96
+ Update
97
+ </el-button>
98
+ <!-- If the connector is already configured and the connector_name IS `shuffle` or `dfir-iris` to lower, then display the update button -->
99
+ <!-- <el-button type="warning" round
100
+ v-if="
101
+ connector.connector_configured == true &&
102
+ (connector.connector_name.toLowerCase() ===
103
+ 'shuffle' ||
104
+ connector.connector_name.toLowerCase() ===
105
+ 'dfir-iris')
106
+ "
107
+ @click="openUpdateModal(connector)"
108
+ >
109
+ Update
110
+ </el-button> -->
111
+
112
+ <!--<button type="button" class="btn btn-info btn-sm" @click="updateConnector(connector)">Update</button>-->
113
+ <!--<button type="button" class="btn btn-info btn-sm" @click="deleteConnector(connector)">Delete</button>-->
114
+ </div>
115
+ </td>
116
+ </tr>
117
+ </tbody>
118
+ </table>
119
+ </div>
120
+
121
+ <el-dialog
122
+ title="Connector configuration"
123
+ v-model:visible="showConfigDialog"
124
+ :close-on-click-modal="false"
125
+ :close-on-press-escape="false"
126
+ width="600px"
127
+ >
128
+ <ConfigForm />
129
+ </el-dialog>
130
+
131
+ <!-- Configure Modal Username and Password API Key -->
132
+ <div v-bind:class="{ 'modal-window': true, 'is-active': isConfigureModalActive }">
133
+ <div class="modal-background" @click="openConfigureModal = false"></div>
134
+ <div>
135
+ <el-form :model="connectorForm" status-icon :rules="rules2" ref="connectorForm" label-width="120px" class="demo-ruleForm">
136
+ <div class="modal-card">
137
+ <header class="modal-card-head">
138
+ <h2 class="modal-card-title">Configure {{ currentConnector ? currentConnector.connector_name : "" }}</h2>
139
+ <img
140
+ :src="`/src/assets/images/${
141
+ currentConnector ? currentConnector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'
142
+ }`"
143
+ alt="Logo"
144
+ class="modal-logo"
145
+ />
146
+ </header>
147
+ <section class="modal-card-body">
148
+ <div class="field">
149
+ <label class="label">Connector URL</label>
150
+ <div class="control">
151
+ <input class="input" type="text" v-model="connectorForm.connector_url" required />
152
+ </div>
153
+ </div>
154
+
155
+ <!-- API Key input for dfir-iris and shuffle -->
156
+ <div
157
+ class="field"
158
+ v-if="
159
+ ['dfir-iris', 'shuffle'].includes(currentConnector ? currentConnector.connector_name.toLowerCase() : '')
160
+ "
161
+ >
162
+ <label class="label">API Key</label>
163
+ <div class="control">
164
+ <input class="input" type="text" v-model="connectorForm.connector_api_key" required />
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Username and Password inputs for other connectors -->
169
+ <template v-else>
170
+ <div class="field">
171
+ <label class="label">Username</label>
172
+ <div class="control">
173
+ <input class="input" type="text" v-model="connectorForm.username" required />
174
+ </div>
175
+ </div>
176
+ <div class="field">
177
+ <label class="label">Password</label>
178
+ <div class="control">
179
+ <input class="input" type="password" v-model="connectorForm.password" required />
180
+ </div>
181
+ </div>
182
+ </template>
183
+
184
+ <div class="field">
185
+ <div class="control">
186
+ <button class="button is-primary" type="submit" @click.prevent="configureConnector">Save</button>
187
+ <button class="button" type="button" @click="closeDialogUserandPass">Cancel</button>
188
+ </div>
189
+ </div>
190
+ </section>
191
+ </div>
192
+ </el-form>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Configure Modal File -->
197
+ <div v-bind:class="{ 'modal-window': true, 'is-active': isConfigureModalFileActive }">
198
+ <div class="modal-background" @click="openConfigureModalFile = false"></div>
199
+ <div>
200
+ <el-form :model="connectorForm" status-icon :rules="rules2" ref="connectorForm" label-width="120px" class="demo-ruleForm">
201
+ <div class="modal-card">
202
+ <header class="modal-card-head">
203
+ <h2 class="modal-card-title">Configure File {{ currentConnector ? currentConnector.connector_name : "" }}</h2>
204
+ <img
205
+ :src="`/src/assets/images/${
206
+ currentConnector ? currentConnector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'
207
+ }`"
208
+ alt="Logo"
209
+ class="modal-logo"
210
+ />
211
+ </header>
212
+ <section class="modal-card-body">
213
+ <!-- Add the el-upload component here -->
214
+ <el-upload
215
+ class="upload-demo"
216
+ action="http://localhost:5000/connectors/upload"
217
+ :on-preview="handlePreview"
218
+ :on-remove="handleRemove"
219
+ :before-remove="beforeRemove"
220
+ :on-success="handleSuccess"
221
+ multiple
222
+ drag
223
+ :limit="3"
224
+ :on-exceed="handleExceed"
225
+ :file-list="fileList"
226
+ >
227
+ <i class="el-icon-upload"></i>
228
+ <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
229
+ <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
230
+ </el-upload>
231
+ <!-- Add the cancel and submit buttons -->
232
+ <div class="field">
233
+ <div class="control">
234
+ <button class="button" type="button" @click="closeConfigureModuleFile">Cancel</button>
235
+ </div>
236
+ </div>
237
+ <!-- Rest of your existing code... -->
238
+ </section>
239
+ </div>
240
+ </el-form>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Update Modal Username and Password-->
245
+ <div v-bind:class="{ 'modal-window': true, 'is-active': isUpdateModalActive }">
246
+ <div class="modal-background" @click="openUpdateModal = false"></div>
247
+ <div>
248
+ <el-form :model="connectorForm" status-icon :rules="rules2" ref="connectorForm" label-width="120px" class="demo-ruleForm">
249
+ <div class="modal-card">
250
+ <header class="modal-card-head">
251
+ <h2 class="modal-card-title">Update {{ currentConnector ? currentConnector.connector_name : "" }}</h2>
252
+ <img
253
+ :src="`/src/assets/images/${
254
+ currentConnector ? currentConnector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'
255
+ }`"
256
+ alt="Logo"
257
+ class="modal-logo"
258
+ />
259
+ </header>
260
+ <section class="modal-card-body">
261
+ <div class="field">
262
+ <label class="label">Connector URL</label>
263
+ <div class="control">
264
+ <input class="input" type="text" v-model="connectorForm.connector_url" required />
265
+ </div>
266
+ </div>
267
+
268
+ <!-- API Key input for dfir-iris and shuffle -->
269
+ <div
270
+ class="field"
271
+ v-if="
272
+ ['dfir-iris', 'shuffle'].includes(currentConnector ? currentConnector.connector_name.toLowerCase() : '')
273
+ "
274
+ >
275
+ <label class="label">API Key</label>
276
+ <div class="control">
277
+ <input class="input" type="text" v-model="connectorForm.connector_api_key" required />
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Username and Password inputs for other connectors -->
282
+ <template v-else>
283
+ <div class="field">
284
+ <label class="label">Username</label>
285
+ <div class="control">
286
+ <input class="input" type="text" v-model="connectorForm.username" required />
287
+ </div>
288
+ </div>
289
+ <div class="field">
290
+ <label class="label">Password</label>
291
+ <div class="control">
292
+ <input class="input" type="password" v-model="connectorForm.password" required />
293
+ </div>
294
+ </div>
295
+ </template>
296
+
297
+ <div class="field">
298
+ <div class="control">
299
+ <button class="button is-primary" type="submit" @click.prevent="updateConnector">Save</button>
300
+ <button class="button" type="button" @click="closeUpdateModal">Cancel</button>
301
+ </div>
302
+ </div>
303
+ </section>
304
+ </div>
305
+ </el-form>
306
+ </div>
307
+ </div>
308
+ </div>
309
+</template>
310
+
311
+<script lang="ts">
312
+import axios from "axios"
313
+import Api from "@/api"
314
+import { defineComponent } from "vue"
315
+import ConfigForm from "@/components/connectors/ConfigForm.vue"
316
+import { Connector } from "@/types/connectors"
317
+
318
+export default defineComponent({
319
+ data() {
320
+ return {
321
+ connectors: [] as Connector[],
322
+ currentConnector: null,
323
+
324
+ // Configure Modal
325
+ isConfigureModalActive: false,
326
+ isConfigureModalFileActive: false,
327
+
328
+ // Update Modal
329
+ isUpdateModalActive: false,
330
+
331
+ loading: false,
332
+ showConfigDialog: false,
333
+
334
+ successMessage: "",
335
+ errorMessage: "",
336
+ connectorForm: {
337
+ connector_url: "",
338
+ username: "",
339
+ password: "",
340
+ connector_api_key: ""
341
+ }
342
+ }
343
+ },
344
+ methods: {
345
+ showDialogUserandPass(connector) {
346
+ this.currentConnector = connector
347
+ this.showConfigDialog = true
348
+ // this.$refs.userAndPassDialog.showModal();
349
+ },
350
+
351
+ openConfigureModal(connector) {
352
+ // Open the configure modal and set the initial form values
353
+ this.isConfigureModalActive = true
354
+ this.currentConnector = connector // Store the current connector
355
+ this.connectorForm.connector_url = connector.connector_url
356
+ this.connectorForm.username = connector.connector_username
357
+ this.connectorForm.password = connector.connector_password
358
+ this.connectorForm.connector_api_key = connector.connector_api_key
359
+ },
360
+
361
+ openConfigureModalFile(connector) {
362
+ // Open the configure modal and set the initial form values
363
+ this.isConfigureModalFileActive = true
364
+ this.currentConnector = connector // Store the current connector
365
+ this.connectorForm.connector_url = connector.connector_url
366
+ this.connectorForm.username = connector.connector_username
367
+ this.connectorForm.password = connector.connector_password
368
+ this.connectorForm.connector_api_key = connector.connector_api_key
369
+ },
370
+
371
+ closeDialogUserandPass() {
372
+ // this.$refs.userAndPassDialog.close();
373
+ this.showConfigDialog = false
374
+ this.isConfigureModalActive = false
375
+ },
376
+
377
+ closeConfigureModuleFile() {
378
+ // this.$refs.userAndPassDialog.close();
379
+ this.showConfigDialog = false
380
+ this.isConfigureModalFileActive = false
381
+ },
382
+
383
+ openUpdateModal(connector) {
384
+ // Open the update modal and set the initial form values
385
+ this.isUpdateModalActive = true
386
+ this.currentConnector = connector // Store the current connector
387
+ this.connectorForm.connector_url = connector.connector_url
388
+ this.connectorForm.username = connector.connector_username
389
+ this.connectorForm.password = connector.connector_password
390
+ this.connectorForm.connector_api_key = connector.connector_api_key
391
+ },
392
+
393
+ closeUpdateModal() {
394
+ // this.$refs.userAndPassDialog.close();
395
+ this.showConfigDialog = false
396
+ this.isUpdateModalActive = false
397
+ },
398
+
399
+ configureConnector(event) {
400
+ event.preventDefault()
401
+ const { connector_url, username, password, connector_api_key } = this.connectorForm
402
+ const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
403
+ this.loading = true
404
+ this.closeDialogUserandPass()
405
+
406
+ if (connector_api_key) {
407
+ console.log("POST request to: ", path)
408
+ console.log("Data: ", {
409
+ connector_url: connector_url,
410
+ connector_api_key: connector_api_key
411
+ })
412
+ axios
413
+ .post(path, {
414
+ connector_url: connector_url,
415
+ connector_api_key: connector_api_key
416
+ })
417
+ .then(() => {
418
+ this.successMessage = "Connector has been successfully configured." // Set success message
419
+ setTimeout(() => {
420
+ this.successMessage = "" // Clear success message after 5 seconds
421
+ }, 5000)
422
+ this.getConnectors() // Refresh the connectors
423
+ })
424
+ .catch(err => {
425
+ if (err.response.status === 400) {
426
+ this.errorMessage =
427
+ "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
428
+ } else if (err.response.status === 401) {
429
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
430
+ } else {
431
+ this.errorMessage =
432
+ "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
433
+ }
434
+ setTimeout(() => {
435
+ this.errorMessage = "" // Clear error message after 5 seconds
436
+ }, 5000)
437
+ this.getConnectors() // Refresh the connectors
438
+ console.error(err) // Also log the error for debugging
439
+ })
440
+ .finally(() => {
441
+ this.loading = false // Set loading to false
442
+ })
443
+ } else {
444
+ axios
445
+ .post(path, {
446
+ connector_url: connector_url,
447
+ connector_username: username,
448
+ connector_password: password
449
+ })
450
+ .then(() => {
451
+ this.successMessage = "Connector has been successfully configured." // Set success message
452
+ setTimeout(() => {
453
+ this.successMessage = "" // Clear success message after 5 seconds
454
+ }, 5000)
455
+ this.getConnectors() // Refresh the connectors
456
+ })
457
+ .catch(err => {
458
+ if (err.response.status === 400) {
459
+ this.errorMessage =
460
+ "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
461
+ } else if (err.response.status === 401) {
462
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
463
+ } else {
464
+ this.errorMessage =
465
+ "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
466
+ }
467
+ setTimeout(() => {
468
+ this.errorMessage = "" // Clear error message after 5 seconds
469
+ }, 5000)
470
+ this.getConnectors() // Refresh the connectors
471
+ console.error(err) // Also log the error for debugging
472
+ })
473
+ .finally(() => {
474
+ this.loading = false // Set loading to false
475
+ })
476
+ }
477
+ },
478
+
479
+ updateConnector(event) {
480
+ event.preventDefault()
481
+ const { connector_url, username, password, connector_api_key } = this.connectorForm
482
+ const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
483
+ this.loading = true
484
+ this.closeUpdateModal()
485
+
486
+ if (connector_api_key) {
487
+ console.log("POST request to: ", path)
488
+ console.log("Data: ", {
489
+ connector_url: connector_url,
490
+ connector_api_key: connector_api_key
491
+ })
492
+
493
+ axios
494
+ .put(path, {
495
+ connector_url: connector_url,
496
+ connector_username: username,
497
+ connector_password: password,
498
+ connector_api_key: connector_api_key
499
+ })
500
+ .then(() => {
501
+ this.successMessage = "Connector has been successfully updated." // Set success message
502
+ setTimeout(() => {
503
+ this.successMessage = "" // Clear success message after 5 seconds
504
+ }, 5000)
505
+ this.getConnectors() // Refresh the connectors
506
+ })
507
+ .catch(err => {
508
+ if (err.response.status === 400) {
509
+ this.errorMessage =
510
+ "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
511
+ } else if (err.response.status === 401) {
512
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
513
+ } else {
514
+ this.errorMessage = "Error updating the connector. Please try again." // Set the error message
515
+ }
516
+ setTimeout(() => {
517
+ this.errorMessage = "" // Clear error message after 5 seconds
518
+ }, 5000)
519
+ this.getConnectors() // Refresh the connectors
520
+ console.error(err) // Also log the error for debugging
521
+ })
522
+ .finally(() => {
523
+ this.loading = false // Set loading to false
524
+ })
525
+ } else {
526
+ axios
527
+ .put(path, {
528
+ connector_url: connector_url,
529
+ connector_username: username,
530
+ connector_password: password
531
+ })
532
+ .then(() => {
533
+ this.successMessage = "Connector has been successfully updated." // Set success message
534
+ setTimeout(() => {
535
+ this.successMessage = "" // Clear success message after 5 seconds
536
+ }, 5000)
537
+ this.getConnectors() // Refresh the connectors
538
+ })
539
+ .catch(err => {
540
+ if (err.response.status === 400) {
541
+ this.errorMessage =
542
+ "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
543
+ } else if (err.response.status === 401) {
544
+ this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
545
+ } else {
546
+ this.errorMessage = "Error updating the connector. Please try again." // Set the error message
547
+ }
548
+ setTimeout(() => {
549
+ this.errorMessage = "" // Clear error message after 5 seconds
550
+ }, 5000)
551
+ this.getConnectors() // Refresh the connectors
552
+ console.error(err) // Also log the error for debugging
553
+ })
554
+ .finally(() => {
555
+ this.loading = false // Set loading to false
556
+ })
557
+ }
558
+ },
559
+
560
+ getConnectors() {
561
+ this.loading = true
562
+ Api.connectors
563
+ .getAll()
564
+ .then(res => {
565
+ this.connectors = res.data.connectors
566
+ })
567
+ .catch(err => {
568
+ console.error(err)
569
+ })
570
+ .finally(() => {
571
+ this.loading = false
572
+ })
573
+ },
574
+
575
+ resetForm(formName) {
576
+ this.$refs[formName].resetFields()
577
+ }
578
+ },
579
+ created() {
580
+ this.getConnectors()
581
+ },
582
+ components: {
583
+ ConfigForm
584
+ }
585
+})
586
+</script>
587
+
588
+<style lang="scss" scoped>
589
+@import "../../assets/scss/_variables";
590
+
591
+.page-table {
592
+ padding-left: 20px;
593
+ padding-right: 15px;
594
+ padding-bottom: 20px;
595
+}
596
+.table-box {
597
+ overflow: auto;
598
+}
599
+
600
+.modal-window {
601
+ position: fixed;
602
+ background-color: rgba(255, 255, 255, 0.25);
603
+ top: 0;
604
+ right: 0;
605
+ bottom: 0;
606
+ left: 0;
607
+ z-index: 999;
608
+ visibility: hidden;
609
+ opacity: 0;
610
+ pointer-events: none;
611
+ transition: all 0.3s;
612
+ &.is-active {
613
+ visibility: visible;
614
+ opacity: 1;
615
+ pointer-events: auto;
616
+ }
617
+ &:target {
618
+ visibility: visible;
619
+ opacity: 1;
620
+ pointer-events: auto;
621
+ }
622
+ & > div {
623
+ width: 400px;
624
+ position: absolute;
625
+ top: 50%;
626
+ left: 50%;
627
+ transform: translate(-50%, -50%);
628
+ padding: 2em;
629
+ background: white;
630
+ }
631
+ header {
632
+ font-weight: bold;
633
+ }
634
+ h1 {
635
+ font-size: 150%;
636
+ margin: 0 0 15px;
637
+ }
638
+}
639
+
640
+.modal-close {
641
+ color: #aaa;
642
+ line-height: 50px;
643
+ font-size: 80%;
644
+ position: absolute;
645
+ right: 0;
646
+ text-align: center;
647
+ top: 0;
648
+ width: 70px;
649
+ text-decoration: none;
650
+ &:hover {
651
+ color: black;
652
+ }
653
+}
654
+
655
+/* Demo Styles */
656
+
657
+html,
658
+body {
659
+ height: 100%;
660
+}
661
+
662
+html {
663
+ font-size: 18px;
664
+ line-height: 1.4;
665
+}
666
+
667
+body {
668
+ font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
669
+ font-weight: 600;
670
+ background-image: linear-gradient(to right, #7f53ac 0, #657ced 100%);
671
+ color: black;
672
+}
673
+
674
+a {
675
+ color: inherit;
676
+ text-decoration: none;
677
+}
678
+
679
+.container {
680
+ display: grid;
681
+ justify-content: center;
682
+ align-items: center;
683
+ height: 100vh;
684
+}
685
+
686
+.modal-window {
687
+ & > div {
688
+ border-radius: 1rem;
689
+ }
690
+}
691
+
692
+.modal-window div:not(:last-of-type) {
693
+ margin-bottom: 15px;
694
+}
695
+
696
+.logo {
697
+ max-width: 150px;
698
+ display: block;
699
+}
700
+
701
+small {
702
+ color: lightgray;
703
+}
704
+
705
+.btn {
706
+ background-color: white;
707
+ padding: 1em 1.5em;
708
+ border-radius: 0.5rem;
709
+ text-decoration: none;
710
+ i {
711
+ padding-right: 0.3em;
712
+ }
713
+}
714
+
715
+.modal-card-head {
716
+ display: flex;
717
+ justify-content: space-between;
718
+ align-items: center;
719
+}
720
+
721
+.modal-logo {
722
+ height: auto; /* adjust as needed */
723
+ width: auto; /* adjust as needed */
724
+}
725
+</style>
src/views/apps/ecommerce/Account.vue
+1
-1
@@ -300,7 +300,7 @@ import _ from "lodash"
300
import Chance from "chance"
301
const chance = new Chance()
302
303
-import { defineComponent } from "@vue/runtime-core"
303
+import { defineComponent } from "vue"
304
305
export default defineComponent({
306
name: "EcommerceAccount",
src/views/apps/ecommerce/Cart.vue
+1
-1
@@ -89,7 +89,7 @@
89
import Chance from "chance"
90
const chance = new Chance()
91
import _ from "lodash"
92
-import { defineComponent } from "@vue/runtime-core"
92
+import { defineComponent } from "vue"
93
94
export default defineComponent({
95
name: "EcommerceCart",
src/views/apps/ecommerce/Checkout.vue
+1
-1
@@ -135,7 +135,7 @@
135
import Chance from "chance"
136
const chance = new Chance()
137
import _ from "lodash"
138
-import { defineComponent } from "@vue/runtime-core"
138
+import { defineComponent } from "vue"
139
140
export default defineComponent({
141
name: "EcommerceCheckout",
src/views/apps/ecommerce/Dashboard.vue
+1
-1
@@ -150,7 +150,7 @@ const chance = new Chance()
150
import _ from "lodash"
151
import ResizeObserver from "@/components/vue-resize/ResizeObserver.vue"
152
153
-import { defineComponent } from "@vue/runtime-core"
153
+import { defineComponent } from "vue"
154
155
export default defineComponent({
156
name: "EcommerceDashboard",
src/views/apps/ecommerce/Ecommerce.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Ecommerce"
src/views/apps/ecommerce/NewProduct.vue
+1
-1
@@ -223,7 +223,7 @@
223
import _ from "lodash"
224
import { useMainStore } from "@/stores/main"
225
import TextareaAutosize from "@/components/TextareaAutosize.vue"
226
-import { defineComponent } from "@vue/runtime-core"
226
+import { defineComponent } from "vue"
227
228
export default defineComponent({
229
name: "EcommerceNewProduct",
src/views/apps/ecommerce/ProductDetail.vue
+1
-1
@@ -124,7 +124,7 @@
124
<script>
125
import Drift from "drift-zoom"
126
127
-import { defineComponent } from "@vue/runtime-core"
127
+import { defineComponent } from "vue"
128
129
export default defineComponent({
130
name: "EcommerceProductDetail",
src/views/apps/ecommerce/Products.vue
+1
-1
@@ -103,7 +103,7 @@
103
104
<script>
105
import _ from "lodash"
106
-import { defineComponent } from "@vue/runtime-core"
106
+import { defineComponent } from "vue"
107
108
export default defineComponent({
109
name: "EcommerceProducts",
src/views/apps/ecommerce/Shop.vue
+1
-1
@@ -46,7 +46,7 @@
46
</template>
47
48
<script>
49
-import { defineComponent } from "@vue/runtime-core"
49
+import { defineComponent } from "vue"
50
51
export default defineComponent({
52
name: "EcommerceShop",
src/views/pages/Invoice.vue
+1
-1
@@ -125,7 +125,7 @@
125
</template>
126
127
<script>
128
-import { defineComponent } from "@vue/runtime-core"
128
+import { defineComponent } from "vue"
129
130
export default defineComponent({
131
name: "Invoice",
src/views/pages/NotFound.vue
+1
-1
@@ -8,7 +8,7 @@
8
</template>
9
10
<script>
11
-import { defineComponent } from "@vue/runtime-core"
11
+import { defineComponent } from "vue"
12
13
export default defineComponent({
14
name: "NotFound"
src/views/pages/Profile.vue
+1
-1
@@ -34,7 +34,7 @@
34
import ProfileEdit from "../../components/Profile/ProfileEdit.vue"
35
import ProfileGallery from "../../components/Profile/ProfileGallery.vue"
36
import ProfileTimeline from "../../components/Profile/ProfileTimeline.vue"
37
-import { defineComponent } from "@vue/runtime-core"
37
+import { defineComponent } from "vue"
38
39
export default defineComponent({
40
name: "Profile",
src/views/pages/authentication/ForgotPassword.vue
+1
-1
@@ -20,7 +20,7 @@
20
21
<script>
22
import { useMainStore } from "../../../stores/main"
23
-import { defineComponent } from "@vue/runtime-core"
23
+import { defineComponent } from "vue"
24
25
export default defineComponent({
26
name: "ForgotPassword",
src/views/pages/authentication/Login.vue
+1
-1
@@ -38,7 +38,7 @@
38
</template>
39
40
<script>
41
-import { defineComponent } from "@vue/runtime-core"
41
+import { defineComponent } from "vue"
42
import { useMainStore } from "../../../stores/main"
43
44
export default defineComponent({
src/views/pages/authentication/Login2.vue
+1
-1
@@ -38,7 +38,7 @@
38
</template>
39
40
<script>
41
-import { defineComponent } from "@vue/runtime-core"
41
+import { defineComponent } from "vue"
42
43
export default defineComponent({
44
name: "Login2",
src/views/pages/authentication/Register.vue
+1
-1
@@ -35,7 +35,7 @@
35
36
<script>
37
import { useMainStore } from "@/stores/main"
38
-import { defineComponent } from "@vue/runtime-core"
38
+import { defineComponent } from "vue"
39
40
export default defineComponent({
41
name: "Register",
src/views/ui/Charts/Charts.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Charts"
src/views/ui/Charts/Echarts.vue
+1
-1
@@ -23,7 +23,7 @@
23
<script>
24
import * as echarts from "echarts"
25
26
-import { defineComponent } from "@vue/runtime-core"
26
+import { defineComponent } from "vue"
27
28
export default defineComponent({
29
name: "EchartsPage",
src/views/ui/Charts/Peity.vue
+1
-1
@@ -85,7 +85,7 @@ import { detect } from "detect-browser"
85
const browser = detect()
86
import Peity from "@/components/vue-peity/Peity.vue"
87
88
-import { defineComponent } from "@vue/runtime-core"
88
+import { defineComponent } from "vue"
89
90
export default defineComponent({
91
name: "PeityPage",
src/views/ui/Charts/Plotly.vue
+1
-1
@@ -82,7 +82,7 @@ Plotly.register(PlotlySankey)
82
Plotly.register(PlotlySurface)
83
Plotly.register(PlotlyMesh3d)*/
84
85
-import { defineComponent } from "@vue/runtime-core"
85
+import { defineComponent } from "vue"
86
87
export default defineComponent({
88
name: "PlotlyPage",
src/views/ui/Charts/VueChartist.vue
+1
-1
@@ -37,7 +37,7 @@
37
</template>
38
39
<script>
40
-import { defineComponent } from "@vue/runtime-core"
40
+import { defineComponent } from "vue"
41
42
export default defineComponent({
43
name: "VueChartistPage",
src/views/ui/Charts/VueChartkick.vue
+1
-1
@@ -69,7 +69,7 @@
69
</template>
70
71
<script>
72
-import { defineComponent } from "@vue/runtime-core"
72
+import { defineComponent } from "vue"
73
74
export default defineComponent({
75
name: "VueChartkickPage",
src/views/ui/Charts/VueD3Network.vue
+1
-1
@@ -60,7 +60,7 @@
60
</template>
61
62
<script>
63
-import { defineComponent } from "@vue/runtime-core"
63
+import { defineComponent } from "vue"
64
65
export default defineComponent({
66
name: "VueD3NetworkPage",
src/views/ui/Charts/VueTrend.vue
+1
-1
@@ -20,7 +20,7 @@
20
</template>
21
22
<script>
23
-import { defineComponent } from "@vue/runtime-core"
23
+import { defineComponent } from "vue"
24
25
export default defineComponent({
26
name: "VueTrendPage",
src/views/ui/Editors/Editors.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Editors"
src/views/ui/Editors/Markdown.vue
+1
-1
@@ -20,7 +20,7 @@
20
</template>
21
22
<script>
23
-import { defineComponent } from "@vue/runtime-core"
23
+import { defineComponent } from "vue"
24
import "mavon-editor/dist/css/index.css"
25
26
export default defineComponent({
src/views/ui/Editors/Pell.vue
+1
-1
@@ -27,7 +27,7 @@
27
</template>
28
29
<script>
30
-import { defineComponent } from "@vue/runtime-core"
30
+import { defineComponent } from "vue"
31
import VuePellEditor from "@/components/VuePellEditor.vue"
32
33
export default defineComponent({
src/views/ui/Editors/Quill.vue
+1
-1
@@ -39,7 +39,7 @@
39
</template>
40
41
<script>
42
-import { defineComponent } from "@vue/runtime-core"
42
+import { defineComponent } from "vue"
43
import VueQuillEditor from "@/components/vue-quill-editor.vue"
44
45
export default defineComponent({
src/views/ui/Element/Element.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Element"
src/views/ui/Element/ElementAlert.vue
+1
-1
@@ -33,7 +33,7 @@
33
<script>
34
import ThemePicker from "@/components/theme-picker.vue"
35
36
-import { defineComponent } from "@vue/runtime-core"
36
+import { defineComponent } from "vue"
37
38
export default defineComponent({
39
name: "ElementAlert",
src/views/ui/Element/ElementBadge.vue
+1
-1
@@ -49,7 +49,7 @@
49
<script>
50
import ThemePicker from "@/components/theme-picker.vue"
51
52
-import { defineComponent } from "@vue/runtime-core"
52
+import { defineComponent } from "vue"
53
54
export default defineComponent({
55
name: "ElementBadge",
src/views/ui/Element/ElementBreadcrumb.vue
+1
-1
@@ -39,7 +39,7 @@
39
<script>
40
import ThemePicker from "@/components/theme-picker.vue"
41
42
-import { defineComponent } from "@vue/runtime-core"
42
+import { defineComponent } from "vue"
43
44
export default defineComponent({
45
name: "ElementBreadcrumb",
src/views/ui/Element/ElementButton.vue
+1
-1
@@ -123,7 +123,7 @@
123
124
<script>
125
import ThemePicker from "@/components/theme-picker.vue"
126
-import { defineComponent } from "@vue/runtime-core"
126
+import { defineComponent } from "vue"
127
128
export default defineComponent({
129
name: "ElementButton",
src/views/ui/Element/ElementCard.vue
+1
-1
@@ -63,7 +63,7 @@
63
import ThemePicker from "@/components/theme-picker.vue"
64
import dayjs from "dayjs"
65
66
-import { defineComponent } from "@vue/runtime-core"
66
+import { defineComponent } from "vue"
67
68
export default defineComponent({
69
name: "ElementCard",
src/views/ui/Element/ElementCarousel.vue
+1
-1
@@ -74,7 +74,7 @@
74
<script>
75
import ThemePicker from "@/components/theme-picker.vue"
76
77
-import { defineComponent } from "@vue/runtime-core"
77
+import { defineComponent } from "vue"
78
79
export default defineComponent({
80
name: "ElementCarousel",
src/views/ui/Element/ElementCascader.vue
+1
-1
@@ -27,7 +27,7 @@
27
<script>
28
import ThemePicker from "@/components/theme-picker.vue"
29
30
-import { defineComponent } from "@vue/runtime-core"
30
+import { defineComponent } from "vue"
31
32
export default defineComponent({
33
name: "ElementCascader",
src/views/ui/Element/ElementCheckbox.vue
+1
-1
@@ -41,7 +41,7 @@
41
<script>
42
import ThemePicker from "@/components/theme-picker.vue"
43
const cityOptions = ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"]
44
-import { defineComponent } from "@vue/runtime-core"
44
+import { defineComponent } from "vue"
45
46
export default defineComponent({
47
name: "ElementCheckbox",
src/views/ui/Element/ElementCollapse.vue
+1
-1
@@ -67,7 +67,7 @@
67
<script>
68
import ThemePicker from "@/components/theme-picker.vue"
69
70
-import { defineComponent } from "@vue/runtime-core"
70
+import { defineComponent } from "vue"
71
72
export default defineComponent({
73
name: "ElementCollapse",
src/views/ui/Element/ElementColorPicker.vue
+1
-1
@@ -27,7 +27,7 @@
27
<script>
28
import ThemePicker from "@/components/theme-picker.vue"
29
30
-import { defineComponent } from "@vue/runtime-core"
30
+import { defineComponent } from "vue"
31
32
export default defineComponent({
33
name: "ElementColorPicker",
src/views/ui/Element/ElementDatePicker.vue
+1
-1
@@ -51,7 +51,7 @@
51
<script>
52
import ThemePicker from "@/components/theme-picker.vue"
53
54
-import { defineComponent } from "@vue/runtime-core"
54
+import { defineComponent } from "vue"
55
56
export default defineComponent({
57
name: "ElementDatePicker",
src/views/ui/Element/ElementDateTimePicker.vue
+1
-1
@@ -50,7 +50,7 @@
50
<script>
51
import ThemePicker from "@/components/theme-picker.vue"
52
53
-import { defineComponent } from "@vue/runtime-core"
53
+import { defineComponent } from "vue"
54
55
export default defineComponent({
56
name: "ElementDateTimePicker",
src/views/ui/Element/ElementDialog.vue
+1
-1
@@ -77,7 +77,7 @@
77
<script>
78
import ThemePicker from "@/components/theme-picker.vue"
79
80
-import { defineComponent } from "@vue/runtime-core"
80
+import { defineComponent } from "vue"
81
82
export default defineComponent({
83
name: "ElementDialog",
src/views/ui/Element/ElementDropdown.vue
+1
-1
@@ -43,7 +43,7 @@
43
<script>
44
import ThemePicker from "@/components/theme-picker.vue"
45
import { ArrowDown } from "@element-plus/icons-vue"
46
-import { defineComponent } from "@vue/runtime-core"
46
+import { defineComponent } from "vue"
47
48
export default defineComponent({
49
name: "ElementDropdown",
src/views/ui/Element/ElementForm.vue
+1
-1
@@ -153,7 +153,7 @@
153
<script>
154
import ThemePicker from "@/components/theme-picker.vue"
155
156
-import { defineComponent } from "@vue/runtime-core"
156
+import { defineComponent } from "vue"
157
158
export default defineComponent({
159
name: "ElementForm",
src/views/ui/Element/ElementInput.vue
+3
-3
@@ -49,12 +49,12 @@
49
<el-collapse-item title="Mixed input" name="1">
50
<div>
51
<el-input placeholder="Please input" v-model="input3">
52
- <template slot="prepend">Http://</template>
52
+ <template v-slot:prepend>Http://</template>
53
</el-input>
54
</div>
55
<div style="margin-top: 15px">
56
<el-input placeholder="Please input" v-model="input4">
57
- <template slot="append">.com</template>
57
+ <template v-slot:append>.com</template>
58
</el-input>
59
</div>
60
<div style="margin-top: 15px">
@@ -79,7 +79,7 @@
79
<script>
80
import ThemePicker from "@/components/theme-picker.vue"
81
82
-import { defineComponent } from "@vue/runtime-core"
82
+import { defineComponent } from "vue"
83
84
export default defineComponent({
85
name: "ElementInput",
src/views/ui/Element/ElementInputNumber.vue
+1
-1
@@ -37,7 +37,7 @@
37
<script>
38
import ThemePicker from "@/components/theme-picker.vue"
39
40
-import { defineComponent } from "@vue/runtime-core"
40
+import { defineComponent } from "vue"
41
42
export default defineComponent({
43
name: "ElementInputNumber",
src/views/ui/Element/ElementLoading.vue
+1
-1
@@ -65,7 +65,7 @@
65
<script>
66
import ThemePicker from "@/components/theme-picker.vue"
67
68
-import { defineComponent } from "@vue/runtime-core"
68
+import { defineComponent } from "vue"
69
70
export default defineComponent({
71
name: "ElementLoading",
src/views/ui/Element/ElementMessage.vue
+1
-1
@@ -30,7 +30,7 @@
30
<script>
31
import ThemePicker from "@/components/theme-picker.vue"
32
33
-import { defineComponent } from "@vue/runtime-core"
33
+import { defineComponent } from "vue"
34
35
export default defineComponent({
36
name: "ElementMessage",
src/views/ui/Element/ElementMessageBox.vue
+1
-1
@@ -47,7 +47,7 @@
47
<script>
48
import ThemePicker from "@/components/theme-picker.vue"
49
50
-import { defineComponent } from "@vue/runtime-core"
50
+import { defineComponent } from "vue"
51
52
export default defineComponent({
53
name: "ElementMessageBox",
src/views/ui/Element/ElementNavMenu.vue
+10
-10
@@ -17,12 +17,12 @@
17
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
18
<el-menu-item index="1">Processing Center</el-menu-item>
19
<el-sub-menu index="2">
20
- <template slot="title">Workspace</template>
20
+ <template v-slot:title>Workspace</template>
21
<el-menu-item index="2-1">item one</el-menu-item>
22
<el-menu-item index="2-2">item two</el-menu-item>
23
<el-menu-item index="2-3">item three</el-menu-item>
24
<el-sub-menu index="2-4">
25
- <template slot="title">item four</template>
25
+ <template v-slot:title>item four</template>
26
<el-menu-item index="2-4-1">item one</el-menu-item>
27
<el-menu-item index="2-4-2">item two</el-menu-item>
28
<el-menu-item index="2-4-3">item three</el-menu-item>
@@ -43,12 +43,12 @@
43
>
44
<el-menu-item index="1">Processing Center</el-menu-item>
45
<el-sub-menu index="2">
46
- <template slot="title">Workspace</template>
46
+ <template v-slot:title>Workspace</template>
47
<el-menu-item index="2-1">item one</el-menu-item>
48
<el-menu-item index="2-2">item two</el-menu-item>
49
<el-menu-item index="2-3">item three</el-menu-item>
50
<el-sub-menu index="2-4">
51
- <template slot="title">item four</template>
51
+ <template v-slot:title>item four</template>
52
<el-menu-item index="2-4-1">item one</el-menu-item>
53
<el-menu-item index="2-4-2">item two</el-menu-item>
54
<el-menu-item index="2-4-3">item three</el-menu-item>
@@ -71,7 +71,7 @@
71
<h5>Default colors</h5>
72
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
73
<el-sub-menu index="1">
74
- <template slot="title">
74
+ <template v-slot:title>
75
<i class="el-icon-location"></i>
76
<span>Navigator One</span>
77
</template>
@@ -83,7 +83,7 @@
83
<el-menu-item index="1-3">item three</el-menu-item>
84
</el-menu-item-group>
85
<el-sub-menu index="1-4">
86
- <template slot="title">item four</template>
86
+ <template v-slot:title>item four</template>
87
<el-menu-item index="1-4-1">item one</el-menu-item>
88
</el-sub-menu>
89
</el-sub-menu>
@@ -113,7 +113,7 @@
113
active-text-color="#ffd04b"
114
>
115
<el-sub-menu index="1">
116
- <template slot="title">
116
+ <template v-slot:title>
117
<i class="el-icon-location"></i>
118
<span>Navigator One</span>
119
</template>
@@ -125,7 +125,7 @@
125
<el-menu-item index="1-3">item three</el-menu-item>
126
</el-menu-item-group>
127
<el-sub-menu index="1-4">
128
- <template slot="title">item four</template>
128
+ <template v-slot:title>item four</template>
129
<el-menu-item index="1-4-1">item one</el-menu-item>
130
</el-sub-menu>
131
</el-sub-menu>
@@ -166,7 +166,7 @@
166
:collapse="isCollapse"
167
>
168
<el-sub-menu index="1">
169
- <template slot="title">
169
+ <template v-slot:title>
170
<i class="el-icon-location"></i>
171
<span slot="title">Navigator One</span>
172
</template>
@@ -209,7 +209,7 @@
209
<script>
210
import ThemePicker from "@/components/theme-picker.vue"
211
212
-import { defineComponent } from "@vue/runtime-core"
212
+import { defineComponent } from "vue"
213
214
export default defineComponent({
215
name: "ElementNavMenu",
src/views/ui/Element/ElementNotification.vue
+1
-1
@@ -30,7 +30,7 @@
30
<script>
31
import ThemePicker from "@/components/theme-picker.vue"
32
33
-import { defineComponent } from "@vue/runtime-core"
33
+import { defineComponent } from "vue"
34
35
export default defineComponent({
36
name: "ElementNotification",
src/views/ui/Element/ElementPagination.vue
+1
-1
@@ -27,7 +27,7 @@
27
<script>
28
import ThemePicker from "@/components/theme-picker.vue"
29
30
-import { defineComponent } from "@vue/runtime-core"
30
+import { defineComponent } from "vue"
31
32
export default defineComponent({
33
name: "ElementPagination",
src/views/ui/Element/ElementPopover.vue
+1
-1
@@ -86,7 +86,7 @@
86
<script>
87
import ThemePicker from "@/components/theme-picker.vue"
88
89
-import { defineComponent } from "@vue/runtime-core"
89
+import { defineComponent } from "vue"
90
91
export default defineComponent({
92
name: "ElementPopover",
src/views/ui/Element/ElementProgress.vue
+1
-1
@@ -65,7 +65,7 @@
65
<script>
66
import ThemePicker from "@/components/theme-picker.vue"
67
68
-import { defineComponent } from "@vue/runtime-core"
68
+import { defineComponent } from "vue"
69
70
export default defineComponent({
71
name: "ElementProgress",
src/views/ui/Element/ElementRadio.vue
+1
-1
@@ -69,7 +69,7 @@
69
70
<script>
71
import ThemePicker from "@/components/theme-picker.vue"
72
-import { defineComponent } from "@vue/runtime-core"
72
+import { defineComponent } from "vue"
73
74
export default defineComponent({
75
name: "ElementRadio",
src/views/ui/Element/ElementRate.vue
+1
-1
@@ -53,7 +53,7 @@
53
<script>
54
import ThemePicker from "@/components/theme-picker.vue"
55
56
-import { defineComponent } from "@vue/runtime-core"
56
+import { defineComponent } from "vue"
57
58
export default defineComponent({
59
name: "ElementRate",
src/views/ui/Element/ElementSelect.vue
+1
-1
@@ -48,7 +48,7 @@
48
<script>
49
import ThemePicker from "@/components/theme-picker.vue"
50
51
-import { defineComponent } from "@vue/runtime-core"
51
+import { defineComponent } from "vue"
52
53
export default defineComponent({
54
name: "ElementSelect",
src/views/ui/Element/ElementSlider.vue
+1
-1
@@ -99,7 +99,7 @@
99
<script>
100
import ThemePicker from "@/components/theme-picker.vue"
101
102
-import { defineComponent } from "@vue/runtime-core"
102
+import { defineComponent } from "vue"
103
104
export default defineComponent({
105
name: "ElementSlider",
src/views/ui/Element/ElementSteps.vue
+1
-1
@@ -98,7 +98,7 @@
98
<script>
99
import ThemePicker from "@/components/theme-picker.vue"
100
101
-import { defineComponent } from "@vue/runtime-core"
101
+import { defineComponent } from "vue"
102
103
export default defineComponent({
104
name: "ElementSteps",
src/views/ui/Element/ElementSwitch.vue
+1
-1
@@ -29,7 +29,7 @@
29
<script>
30
import ThemePicker from "@/components/theme-picker.vue"
31
32
-import { defineComponent } from "@vue/runtime-core"
32
+import { defineComponent } from "vue"
33
34
export default defineComponent({
35
name: "ElementSwitch",
src/views/ui/Element/ElementTabs.vue
+1
-1
@@ -74,7 +74,7 @@
74
<script>
75
import ThemePicker from "@/components/theme-picker.vue"
76
77
-import { defineComponent } from "@vue/runtime-core"
77
+import { defineComponent } from "vue"
78
79
export default defineComponent({
80
name: "ElementTabs",
src/views/ui/Element/ElementTag.vue
+1
-1
@@ -40,7 +40,7 @@
40
<script>
41
import ThemePicker from "@/components/theme-picker.vue"
42
43
-import { defineComponent } from "@vue/runtime-core"
43
+import { defineComponent } from "vue"
44
45
export default defineComponent({
46
name: "ElementTag",
src/views/ui/Element/ElementTimePicker.vue
+1
-1
@@ -102,7 +102,7 @@
102
<script>
103
import ThemePicker from "@/components/theme-picker.vue"
104
105
-import { defineComponent } from "@vue/runtime-core"
105
+import { defineComponent } from "vue"
106
107
export default defineComponent({
108
name: "ElementTimePicker",
src/views/ui/Element/ElementTimeline.vue
+1
-1
@@ -90,7 +90,7 @@
90
<script>
91
import ThemePicker from "@/components/theme-picker.vue"
92
93
-import { defineComponent } from "@vue/runtime-core"
93
+import { defineComponent } from "vue"
94
95
export default defineComponent({
96
name: "ElementTimeline",
src/views/ui/Element/ElementTooltip.vue
+1
-1
@@ -101,7 +101,7 @@
101
<script>
102
import ThemePicker from "@/components/theme-picker.vue"
103
104
-import { defineComponent } from "@vue/runtime-core"
104
+import { defineComponent } from "vue"
105
106
export default defineComponent({
107
name: "ElementTooltip",
src/views/ui/Element/ElementTransfer.vue
+1
-1
@@ -34,7 +34,7 @@
34
<script>
35
import ThemePicker from "@/components/theme-picker.vue"
36
37
-import { defineComponent } from "@vue/runtime-core"
37
+import { defineComponent } from "vue"
38
39
export default defineComponent({
40
name: "ElementTransfer",
src/views/ui/Element/ElementTree.vue
+1
-1
@@ -38,7 +38,7 @@
38
<script>
39
import ThemePicker from "@/components/theme-picker.vue"
40
41
-import { defineComponent } from "@vue/runtime-core"
41
+import { defineComponent } from "vue"
42
43
export default defineComponent({
44
name: "ElementTree",
src/views/ui/Element/ElementUpload.vue
+1
-1
@@ -44,7 +44,7 @@
44
<script>
45
import ThemePicker from "@/components/theme-picker.vue"
46
47
-import { defineComponent } from "@vue/runtime-core"
47
+import { defineComponent } from "vue"
48
49
export default defineComponent({
50
name: "ElementUpload",
src/views/ui/HelperClasses.vue
+1
-1
@@ -189,7 +189,7 @@
189
</template>
190
191
<script>
192
-import { defineComponent } from "@vue/runtime-core"
192
+import { defineComponent } from "vue"
193
194
export default defineComponent({
195
name: "HelperClasses",
src/views/ui/Icons/FlagIcons.vue
+1
-1
@@ -26,7 +26,7 @@
26
27
<script>
28
import "flag-icon-css/css/flag-icons.min.css"
29
-import { defineComponent } from "@vue/runtime-core"
29
+import { defineComponent } from "vue"
30
31
export default defineComponent({
32
name: "FlagIcons",
src/views/ui/Icons/Icons.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Icons"
src/views/ui/Icons/MdIcons.vue
+1
-1
@@ -43,7 +43,7 @@
43
44
<script>
45
import _ from "lodash"
46
-import { defineComponent } from "@vue/runtime-core"
46
+import { defineComponent } from "vue"
47
import ResizeObserver from "@/components/vue-resize/ResizeObserver.vue"
48
import VirtualCollection from "/node_modules/vue-virtual-collection/src/VirtualCollection.vue"
49
src/views/ui/Layout/Layout.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Layout"
src/views/ui/Layout/LayoutBlank.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "LayoutBlank"
src/views/ui/Layout/LayoutFlexbox.vue
+1
-1
@@ -154,7 +154,7 @@
154
</template>
155
156
<script>
157
-import { defineComponent } from "@vue/runtime-core"
157
+import { defineComponent } from "vue"
158
159
export default defineComponent({
160
name: "LayoutFlexbox",
src/views/ui/Layout/LayoutSidebarLeft.vue
+1
-1
@@ -66,7 +66,7 @@
66
</template>
67
68
<script>
69
-import { defineComponent } from "@vue/runtime-core"
69
+import { defineComponent } from "vue"
70
71
export default defineComponent({
72
name: "LayoutSidebarLeft",
src/views/ui/Layout/LayoutSidebarRight.vue
+1
-1
@@ -65,7 +65,7 @@
65
</template>
66
67
<script>
68
-import { defineComponent } from "@vue/runtime-core"
68
+import { defineComponent } from "vue"
69
70
export default defineComponent({
71
name: "LayoutSidebarRight",
src/views/ui/Layout/LayoutTabbed.vue
+1
-1
@@ -132,7 +132,7 @@
132
</template>
133
134
<script>
135
-import { defineComponent } from "@vue/runtime-core"
135
+import { defineComponent } from "vue"
136
137
export default defineComponent({
138
name: "LayoutTabbed"
src/views/ui/Layout/PageHeaders.vue
+1
-1
@@ -64,7 +64,7 @@
64
</template>
65
66
<script>
67
-import { defineComponent } from "@vue/runtime-core"
67
+import { defineComponent } from "vue"
68
69
export default defineComponent({
70
name: "PageHeaders"
src/views/ui/Maps/Datamaps.vue
+1
-1
@@ -22,7 +22,7 @@
22
<script>
23
import Datamap from "datamaps"
24
25
-import { defineComponent } from "@vue/runtime-core"
25
+import { defineComponent } from "vue"
26
27
export default defineComponent({
28
name: "DatamapsPage",
src/views/ui/Maps/Leaflet.vue
+1
-1
@@ -24,7 +24,7 @@
24
</template>
25
26
<script>
27
-import { defineComponent } from "@vue/runtime-core"
27
+import { defineComponent } from "vue"
28
import "leaflet/dist/leaflet.css"
29
import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet"
30
src/views/ui/Maps/Mapbox.vue
+1
-1
@@ -22,7 +22,7 @@
22
<script>
23
import mapboxgl from "mapbox-gl"
24
import "mapbox-gl/dist/mapbox-gl.css"
25
-import { defineComponent } from "@vue/runtime-core"
25
+import { defineComponent } from "vue"
26
27
export default defineComponent({
28
name: "MapboxPage",
src/views/ui/Maps/Maps.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Maps"
src/views/ui/MultiLanguage.vue
+1
-1
@@ -67,7 +67,7 @@
67
68
<script>
69
import "flag-icon-css/css/flag-icons.min.css"
70
-import { defineComponent } from "@vue/runtime-core"
70
+import { defineComponent } from "vue"
71
72
export default defineComponent({
73
name: "MultiLanguage",
src/views/ui/Tables/Styled.vue
+1
-1
@@ -63,7 +63,7 @@ import _ from "lodash"
63
import dayjs from "dayjs"
64
import ResizeObserver from "@/components/vue-resize/ResizeObserver.vue"
65
66
-import { defineComponent } from "@vue/runtime-core"
66
+import { defineComponent } from "vue"
67
68
export default defineComponent({
69
name: "StyledTablePage",
src/views/ui/Tables/Table.vue
+1
-1
@@ -41,7 +41,7 @@
41
<script>
42
import Affix from "@/components/Affix.vue"
43
44
-import { defineComponent } from "@vue/runtime-core"
44
+import { defineComponent } from "vue"
45
46
export default defineComponent({
47
name: "Table",
src/views/ui/Tables/TableElement.vue
+2
-2
@@ -38,7 +38,7 @@
38
:filter-method="filterTag"
39
filter-placement="bottom-end"
40
>
41
- <template slot-scope="scope">
41
+ <template v-slot="scope">
42
<el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{ scope.row.tag }}</el-tag>
43
</template>
44
</el-table-column>
@@ -52,7 +52,7 @@
52
</template>
53
54
<script>
55
-import { defineComponent } from "@vue/runtime-core"
55
+import { defineComponent } from "vue"
56
57
export default defineComponent({
58
name: "TableElement",
src/views/ui/Tables/Tables.vue
+1
-1
@@ -3,7 +3,7 @@
3
</template>
4
5
<script>
6
-import { defineComponent } from "@vue/runtime-core"
6
+import { defineComponent } from "vue"
7
8
export default defineComponent({
9
name: "Tables"
src/views/ui/Tables/V2TablePage.vue
+5
-5
@@ -63,7 +63,7 @@
63
>
64
<v2-table-column type="selection" width="45"></v2-table-column>
65
<v2-table-column label="Name" prop="full_name" sortable width="200" align="left" :fixed="isMobile ? '' : 'left'">
66
- <template slot-scope="row">
66
+ <template v-slot="row">
67
<span class="sel-string" v-html="$options.filters.selected(row.full_name, search)"></span>
68
</template>
69
</v2-table-column>
@@ -75,7 +75,7 @@
75
:fixed="isMobile ? '' : 'right'"
76
></v2-table-column>
77
<v2-table-column label="Email" prop="email" sortable width="250">
78
- <template slot-scope="row">
78
+ <template v-slot="row">
79
<span class="sel-string" v-html="$options.filters.selected(row.email, search)"></span>
80
</template>
81
</v2-table-column>
@@ -85,7 +85,7 @@
85
<v2-table-column label="City" prop="city" sortable width="200"></v2-table-column>
86
<v2-table-column label="Country" prop="country" sortable></v2-table-column>
87
<v2-table-column label="Address" prop="street_address" sortable>
88
- <template slot-scope="row">
88
+ <template v-slot="row">
89
<div class="custom-action-row">
90
<el-tooltip class="item" effect="dark" :content="row.street_address" placement="left">
91
<span>{{ row.street_address }}</span>
@@ -96,7 +96,7 @@
96
<v2-table-column label="Phone" prop="phone" sortable width="150"></v2-table-column>
97
<v2-table-column label="Username" prop="username" sortable width="200"></v2-table-column>
98
<v2-table-column label="Action" width="70" :fixed="isMobile ? '' : 'right'">
99
- <template slot-scope="row">
99
+ <template v-slot="row">
100
<div class="custom-action-row">
101
<el-button @click="print(row)"><i class="mdi mdi-eye"></i></el-button>
102
</div>
@@ -114,7 +114,7 @@ import Papa from "papaparse"
114
import * as FS from "file-saver"
115
import _ from "lodash"
116
117
-import { defineComponent } from "@vue/runtime-core"
117
+import { defineComponent } from "vue"
118
119
export default defineComponent({
120
name: "V2TablePage",
src/views/ui/Tables/VGTableV1.vue
+1
-1
@@ -31,7 +31,7 @@
31
</template>
32
33
<script>
34
-import { defineComponent } from "@vue/runtime-core"
34
+import { defineComponent } from "vue"
35
36
export default defineComponent({
37
name: "VGTable",
src/views/ui/Tables/VGTableV2.vue
+1
-1
@@ -43,7 +43,7 @@
43
</template>
44
45
<script>
46
-import { defineComponent } from "@vue/runtime-core"
46
+import { defineComponent } from "vue"
47
48
export default defineComponent({
49
name: "VGTable",
src/views/ui/Themes.vue
+1
-1
@@ -42,7 +42,7 @@
42
</template>
43
44
<script>
45
-import { defineComponent } from "@vue/runtime-core"
45
+import { defineComponent } from "vue"
46
47
export default defineComponent({
48
name: "Themes"
src/views/ui/Typography.vue
+1
-1
@@ -322,7 +322,7 @@
322
</template>
323
324
<script>
325
-import { defineComponent } from "@vue/runtime-core"
325
+import { defineComponent } from "vue"
326
327
export default defineComponent({
328
name: "Typography",