added connector form validation
Davide Di Modica committed
Aug 9, 2023 at 11:15 UTC
95abee844e88081bb21507496ad69ec4880ed62c
8 files changed
+90
-119
package-lock.json
+14
@@ -44,6 +44,7 @@
44
"tui-grid": "^4.21.15",
45
"v-click-outside": "^3.2.0",
46
"v-viewer": "3.0.11",
47
+ "validator": "^13.11.0",
48
"vue": "^3.3.4",
49
"vue-chartkick": "^1.1.0",
50
"vue-fullscreen": "^3.1.1",
@@ -7401,6 +7402,14 @@
7402
"spdx-expression-parse": "^3.0.0"
7403
}
7404
},
7405
+ "node_modules/validator": {
7406
+ "version": "13.11.0",
7407
+ "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
7408
+ "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==",
7409
+ "engines": {
7410
+ "node": ">= 0.10"
7411
+ }
7412
+ },
7413
"node_modules/verror": {
7414
"version": "1.10.0",
7415
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -13009,6 +13018,11 @@
13018
"spdx-expression-parse": "^3.0.0"
13019
}
13020
},
13021
+ "validator": {
13022
+ "version": "13.11.0",
13023
+ "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
13024
+ "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ=="
13025
+ },
13026
"verror": {
13027
"version": "1.10.0",
13028
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
package.json
+1
@@ -51,6 +51,7 @@
51
"tui-grid": "^4.21.15",
52
"v-click-outside": "^3.2.0",
53
"v-viewer": "3.0.11",
54
+ "validator": "^13.11.0",
55
"vue": "^3.3.4",
56
"vue-chartkick": "^1.1.0",
57
"vue-fullscreen": "^3.1.1",
src/components/connectors/ConfigForm/ConfigForm.vue
+35
-3
@@ -29,26 +29,31 @@
29
30
<div class="connector-footer">
31
<el-form-item>
32
- <el-button type="primary" @click="configureConnector">Save</el-button>
33
- <el-button @click="closeDialogUserandPass">Cancel</el-button>
32
+ <el-button type="primary" @click="saveConnector()">Save</el-button>
33
+ <el-button @click="abortForm()">Cancel</el-button>
34
</el-form-item>
35
</div>
36
</div>
37
</template>
38
39
<script setup lang="ts">
40
-import { computed, ref, toRefs } from "vue"
40
+import { computed, onMounted, ref, toRefs } from "vue"
41
import { Connector, ConnectorForm, ConnectorFormType } from "@/types/connectors.d"
42
import { Picture as IconPicture } from "@element-plus/icons-vue"
43
import CredentialsType from "./FormTypes/CredentialsType.vue"
44
import FileType from "./FormTypes/FileType.vue"
45
import TokenType from "./FormTypes/TokenType.vue"
46
+import _pick from "lodash/pick"
47
48
const props = defineProps<{
49
connector: Connector
50
}>()
51
const { connector } = toRefs(props)
52
53
+const emit = defineEmits<{
54
+ (e: "close"): void
55
+}>()
56
+
57
const connectorForm = ref<ConnectorForm>({
58
connector_url: "",
59
connector_username: "",
@@ -59,6 +64,16 @@ const connectorForm = ref<ConnectorForm>({
64
const connectorFormType = computed<ConnectorFormType>(() => getConnectorFormType(connector.value))
65
const isConnectorConfigured = computed<boolean>(() => connector.value.connector_configured)
66
67
+function setUpForm() {
68
+ connectorForm.value = _pick(connector.value, [
69
+ "connector_url",
70
+ "connector_username",
71
+ "connector_password",
72
+ "connector_api_key",
73
+ "connector_file"
74
+ ]) as ConnectorForm
75
+}
76
+
77
function getConnectorFormType(connector: Connector): ConnectorFormType {
78
if (connector.connector_accepts_api_key) {
79
return ConnectorFormType.TOKEN
@@ -72,6 +87,16 @@ function getConnectorFormType(connector: Connector): ConnectorFormType {
87
return ConnectorFormType.UNKNOWN
88
}
89
90
+function saveConnector() {
91
+ console.log("saveConnector")
92
+}
93
+
94
+function abortForm() {
95
+ emit("close")
96
+ console.log("abortForm")
97
+}
98
+
99
+/*
100
function configureConnector(event) {
101
event.preventDefault()
102
const { connector_url, username, password, connector_api_key } = this.connectorForm
@@ -229,6 +254,11 @@ function updateConnector(event) {
254
})
255
}
256
}
257
+*/
258
+
259
+onMounted(() => {
260
+ setUpForm()
261
+})
262
</script>
263
264
<style lang="scss" scoped>
@@ -237,6 +267,8 @@ function updateConnector(event) {
267
display: flex;
268
align-items: center;
269
gap: var(--size-4);
270
+ margin-bottom: var(--size-6);
271
+
272
.connector-image {
273
width: var(--size-8);
274
height: var(--size-8);
src/components/connectors/ConfigForm/FormTypes/CredentialsType.vue
+11
-39
@@ -7,7 +7,7 @@
7
<el-input v-model="form.connector_username" required type="text" />
8
</el-form-item>
9
<el-form-item label="Password" prop="connector_password">
10
- <el-input v-model="form.connector_password" required type="password" />
10
+ <el-input v-model="form.connector_password" required type="password" autocomplete="off" />
11
</el-form-item>
12
</el-form>
13
</template>
@@ -15,6 +15,7 @@
15
<script setup lang="ts">
16
import { FormInstance, FormRules } from "element-plus"
17
import { reactive, ref, toRefs } from "vue"
18
+import isURL from "validator/lib/isURL"
19
20
export interface ICredentialsForm {
21
connector_url: string
@@ -29,50 +30,21 @@ const { form } = toRefs(props)
30
31
const formRef = ref<FormInstance>()
32
32
-/*
33
-const checkAge = (rule: any, value: any, callback: any) => {
33
+const validateUrl = (rule: any, value: any, callback: any) => {
34
if (!value) {
35
- return callback(new Error("Please input the age"))
35
+ return callback(new Error("Please input a valid URL"))
36
}
37
- setTimeout(() => {
38
- if (!Number.isInteger(value)) {
39
- callback(new Error("Please input digits"))
40
- } else {
41
- if (value < 18) {
42
- callback(new Error("Age must be greater than 18"))
43
- } else {
44
- callback()
45
- }
46
- }
47
- }, 1000)
48
-}
49
-
50
-const validatePass = (rule: any, value: any, callback: any) => {
51
- if (value === "") {
52
- callback(new Error("Please input the password"))
53
- } else {
54
- if (ruleForm.checkPass !== "") {
55
- if (!formRef.value) return
56
- formRef.value.validateField("checkPass", () => null)
57
- }
58
- callback()
59
- }
60
-}
61
-const validatePass2 = (rule: any, value: any, callback: any) => {
62
- if (value === "") {
63
- callback(new Error("Please input the password again"))
64
- } else if (value !== ruleForm.pass) {
65
- callback(new Error("Two inputs don't match!"))
66
- } else {
67
- callback()
37
+ if (!isURL(value)) {
38
+ return callback(new Error("Please input a valid URL"))
39
}
40
+
41
+ return callback()
42
}
70
-*/
43
44
const rules = reactive<FormRules<typeof form>>({
73
- connector_url: [{ trigger: "blur" }],
74
- connector_username: [{ trigger: "blur" }],
75
- connector_password: [{ trigger: "blur" }]
45
+ connector_url: [{ required: true, validator: validateUrl, trigger: "blur" }],
46
+ connector_username: [{ required: true, message: "Please input a valid Username", trigger: "blur" }],
47
+ connector_password: [{ required: true, message: "Please input a valid Password", trigger: "blur" }]
48
})
49
</script>
50
src/components/connectors/ConfigForm/FormTypes/FileType.vue
+10
-37
@@ -20,6 +20,7 @@ import { FormInstance, FormRules } from "element-plus"
20
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus"
21
import { UploadFilled } from "@element-plus/icons-vue"
22
import { reactive, ref, toRefs } from "vue"
23
+import isURL from "validator/lib/isURL"
24
25
export interface IFileForm {
26
connector_url: string
@@ -44,49 +45,21 @@ const handleExceed: UploadProps["onExceed"] = files => {
45
const submitUpload = () => {
46
upload.value!.submit()
47
}
47
-/*
48
-const checkAge = (rule: any, value: any, callback: any) => {
49
- if (!value) {
50
- return callback(new Error("Please input the age"))
51
- }
52
- setTimeout(() => {
53
- if (!Number.isInteger(value)) {
54
- callback(new Error("Please input digits"))
55
- } else {
56
- if (value < 18) {
57
- callback(new Error("Age must be greater than 18"))
58
- } else {
59
- callback()
60
- }
61
- }
62
- }, 1000)
63
-}
48
65
-const validatePass = (rule: any, value: any, callback: any) => {
66
- if (value === "") {
67
- callback(new Error("Please input the password"))
68
- } else {
69
- if (ruleForm.checkPass !== "") {
70
- if (!formRef.value) return
71
- formRef.value.validateField("checkPass", () => null)
72
- }
73
- callback()
49
+const validateUrl = (rule: any, value: any, callback: any) => {
50
+ if (!value) {
51
+ return callback(new Error("Please input a valid URL"))
52
}
75
-}
76
-const validatePass2 = (rule: any, value: any, callback: any) => {
77
- if (value === "") {
78
- callback(new Error("Please input the password again"))
79
- } else if (value !== ruleForm.pass) {
80
- callback(new Error("Two inputs don't match!"))
81
- } else {
82
- callback()
53
+ if (!isURL(value)) {
54
+ return callback(new Error("Please input a valid URL"))
55
}
56
+
57
+ return callback()
58
}
85
-*/
59
60
const rules = reactive<FormRules<typeof form>>({
88
- connector_url: [{ trigger: "blur" }],
89
- connector_file: [{ trigger: "blur" }]
61
+ connector_url: [{ required: true, validator: validateUrl, trigger: "blur" }],
62
+ connector_file: [{ required: true, message: "Please input a valid File", trigger: "blur" }]
63
})
64
</script>
65
src/components/connectors/ConfigForm/FormTypes/TokenType.vue
+9
-37
@@ -12,6 +12,7 @@
12
<script setup lang="ts">
13
import { FormInstance, FormRules } from "element-plus"
14
import { reactive, ref, toRefs } from "vue"
15
+import isURL from "validator/lib/isURL"
16
17
export interface ITokenForm {
18
connector_url: string
@@ -25,49 +26,20 @@ const { form } = toRefs(props)
26
27
const formRef = ref<FormInstance>()
28
28
-/*
29
-const checkAge = (rule: any, value: any, callback: any) => {
29
+const validateUrl = (rule: any, value: any, callback: any) => {
30
if (!value) {
31
- return callback(new Error("Please input the age"))
31
+ return callback(new Error("Please input a valid URL"))
32
}
33
- setTimeout(() => {
34
- if (!Number.isInteger(value)) {
35
- callback(new Error("Please input digits"))
36
- } else {
37
- if (value < 18) {
38
- callback(new Error("Age must be greater than 18"))
39
- } else {
40
- callback()
41
- }
42
- }
43
- }, 1000)
44
-}
45
-
46
-const validatePass = (rule: any, value: any, callback: any) => {
47
- if (value === "") {
48
- callback(new Error("Please input the password"))
49
- } else {
50
- if (ruleForm.checkPass !== "") {
51
- if (!formRef.value) return
52
- formRef.value.validateField("checkPass", () => null)
53
- }
54
- callback()
55
- }
56
-}
57
-const validatePass2 = (rule: any, value: any, callback: any) => {
58
- if (value === "") {
59
- callback(new Error("Please input the password again"))
60
- } else if (value !== ruleForm.pass) {
61
- callback(new Error("Two inputs don't match!"))
62
- } else {
63
- callback()
33
+ if (!isURL(value)) {
34
+ return callback(new Error("Please input a valid URL"))
35
}
36
+
37
+ return callback()
38
}
66
-*/
39
40
const rules = reactive<FormRules<typeof form>>({
69
- connector_url: [{ trigger: "blur" }],
70
- connector_api_key: [{ trigger: "blur" }]
41
+ connector_url: [{ required: true, validator: validateUrl, trigger: "blur" }],
42
+ connector_api_key: [{ required: true, message: "Please input a valid API Key", trigger: "blur" }]
43
})
44
</script>
45
src/types/connectors.d.ts
+2
@@ -15,6 +15,8 @@ export interface Connector {
15
connector_url: string
16
connector_username: string
17
connector_verified: boolean
18
+ // TODO: to verify connector_file prop
19
+ connector_file: string
20
id: number
21
name: string
22
authToken?: null
src/views/apps/Connectors.vue
+8
-3
@@ -55,11 +55,11 @@
55
<el-dialog
56
title="Connector configuration"
57
v-model="showConfigDialog"
58
- :close-on-click-modal="true"
59
- :close-on-press-escape="true"
58
+ :close-on-click-modal="false"
59
+ :close-on-press-escape="false"
60
width="600px"
61
>
62
- <ConfigForm :connector="currentConnector" />
62
+ <ConfigForm v-if="currentConnector" :connector="currentConnector" @close="closeConfigDialog()" />
63
</el-dialog>
64
</div>
65
</template>
@@ -102,6 +102,11 @@ export default defineComponent({
102
this.showConfigDialog = true
103
},
104
105
+ closeConfigDialog() {
106
+ this.currentConnector = null
107
+ this.showConfigDialog = false
108
+ },
109
+
110
getConnectors() {
111
this.loading = true
112