Skip to content

Commit 4a641be

Browse files
dannycoulombedannycoulombe
authored
Merge pull request #103 from JSON-ms/dev
Deployment of v1.3.7
2 parents 0424546 + 17b2fd2 commit 4a641be

8 files changed

Lines changed: 276 additions & 330 deletions

File tree

‎components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ declare module 'vue' {
1313
DataEditor: typeof import('./src/components/DataEditor.vue')['default']
1414
Docs: typeof import('./src/components/Docs.vue')['default']
1515
EditorDrawer: typeof import('./src/components/EditorDrawer.vue')['default']
16+
Endpoint: typeof import('./src/components/Endpoint.vue')['default']
1617
EndpointManager: typeof import('./src/components/EndpointManager.vue')['default']
1718
EndpointManagerModal: typeof import('./src/components/EndpointManagerModal.vue')['default']
1819
Error: typeof import('./src/components/Error.vue')['default']

‎docs/integration-server.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
## Server-Side Integration
2-
Currently, our server-side integration supports PHP, with plans to add Python in the near future.
2+
Currently, our server-side integration supports PHP. Check out the repository for installation instructions.
33

44
### Repository
55
> #### PHP

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@json.ms/www",
33
"private": true,
44
"type": "module",
5-
"version": "1.3.6",
5+
"version": "1.3.7",
66
"scripts": {
77
"dev": "vite --host",
88
"build": "run-p type-check \"build-only {@}\" --",

‎src/components/Endpoint.vue‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<script setup lang="ts">
2+
import SyntaxHighlighter from "@/components/SyntaxHighlighter.vue";
3+
import integrationClientMd from "../../docs/integration-client.md";
4+
import integrationServerMd from "../../docs/integration-server.md";
5+
import Docs from "@/components/Docs.vue";
6+
import {computed, ref} from "vue";
7+
import {useModelStore} from "@/stores/model";
8+
import {useGlobalStore} from "@/stores/global";
9+
import {useStructure} from "@/composables/structure";
10+
import type {IStructure} from "@/interfaces";
11+
import EndpointManagerModal from "@/components/EndpointManagerModal.vue";
12+
import {useUserData} from "@/composables/user-data";
13+
14+
const structure = defineModel<IStructure>({ required: true });
15+
16+
// Props
17+
const {
18+
demo = false,
19+
disabled = false,
20+
} = defineProps<{
21+
demo?: boolean,
22+
disabled?: boolean,
23+
}>();
24+
25+
const globalStore = useGlobalStore();
26+
const modelStore = useModelStore();
27+
const { computedServerSecretKey, computedCypherKey, structureStates, getSecretKey, getCypherKey } = useStructure();
28+
const { fetchUserData, setUserData } = useUserData();
29+
const copied = ref(false);
30+
31+
const onGetCyperAndSecret = () => {
32+
getSecretKey();
33+
getCypherKey();
34+
}
35+
36+
const serverSideEnvVar = computed((): string => {
37+
const endpoint = globalStore.session.endpoints.find(endpoint => modelStore.structure.endpoint === endpoint.uuid);
38+
return `PRIVATE_FILE_PATH=./private
39+
PUBLIC_URL=${endpoint?.url}
40+
ACCESS_CONTROL_ALLOW_ORIGIN=${window.location.origin}
41+
SECRET_KEY=${structureStates.value.secretKeyLoaded ? computedServerSecretKey.value : ''}
42+
CYPHER_KEY=${structureStates.value.cypherKeyLoaded ? computedCypherKey.value : ''}`;
43+
});
44+
45+
const usingVite = ref(true);
46+
const clientSideEnvVar = computed((): string => {
47+
const prefix = usingVite.value ? 'VITE_' : '';
48+
const endpoint = globalStore.session.endpoints.find(endpoint => modelStore.structure.endpoint === endpoint.uuid);
49+
return `${prefix}JMS_ENDPOINT_URL=${endpoint?.url}
50+
${prefix}JMS_HASH=${modelStore.structure.hash}
51+
${prefix}JMS_ENCRYPTED_SECRET_KEY=${modelStore.structure.server_secret}`;
52+
});
53+
54+
const server = computed({
55+
get(): string | null {
56+
return structure.value.endpoint ?? null;
57+
},
58+
set(value: string) {
59+
structure.value.endpoint = value;
60+
const endpoint = globalStore.session.endpoints.find(endpoint => endpoint.uuid === value);
61+
if (endpoint) {
62+
structure.value.server_url = endpoint.url;
63+
structure.value.server_secret = endpoint.secret;
64+
65+
globalStore.setPrompt({
66+
...globalStore.prompt,
67+
visible: true,
68+
title: 'Fetch data',
69+
body: 'User data might be different on this server. Do you wish to fetch the user data? This action will override any unsaved change in your forms.',
70+
btnText: 'Fetch',
71+
btnIcon: 'mdi-cloud-arrow-down-outline',
72+
btnColor: 'warning',
73+
cancelText: 'Skip',
74+
cancelIcon: 'mdi-skip-next-circle-outline',
75+
callback: () => new Promise((resolve, reject) => {
76+
fetchUserData().then((response: any) => {
77+
serverSettings.value = response.settings;
78+
setUserData(response.data, true);
79+
resolve();
80+
}).catch(reject)
81+
})
82+
})
83+
}
84+
}
85+
})
86+
87+
const showEndpointManager = ref(false);
88+
89+
const manageEndpoints = () => {
90+
showEndpointManager.value = true;
91+
}
92+
93+
</script>
94+
95+
<template>
96+
<v-card tile flat class="overflow-auto">
97+
<v-card-text class="d-flex flex-column" style="gap: 1rem">
98+
99+
<Docs v-model="integrationServerMd" />
100+
101+
<EndpointManagerModal
102+
v-model="showEndpointManager"
103+
/>
104+
105+
<!-- SERVER URL -->
106+
<v-select
107+
v-model="server"
108+
:items="globalStore.session.endpoints"
109+
:disabled="demo || disabled"
110+
item-title="url"
111+
item-value="uuid"
112+
prepend-inner-icon="mdi-webhook"
113+
hide-details="auto"
114+
hint="This feature allows you to specify a URL that will be triggered whenever data is read from or saved to the admin panel. By integrating an endpoint, you can synchronize data with a remote server and perform various transformations. Check the Server-Side Integration section of the Integration panel for further information."
115+
persistent-hint
116+
required
117+
clearable
118+
autocomplete="endpoint"
119+
>
120+
<template #label>
121+
<span class="mr-2 text-error">*</span>Endpoint
122+
</template>
123+
124+
<template #append-inner>
125+
<div class="d-flex align-center" style="gap: 0.5rem">
126+
<v-btn
127+
variant="outlined"
128+
size="small"
129+
@mousedown.stop
130+
@click="manageEndpoints"
131+
>
132+
Manage
133+
</v-btn>
134+
</div>
135+
</template>
136+
</v-select>
137+
138+
<!-- SERVER SECRET -->
139+
<v-text-field
140+
v-model="computedServerSecretKey"
141+
:type="structureStates.secretKeyLoaded ? 'text' : 'password'"
142+
:disabled="!server || demo || disabled || !structure.uuid"
143+
prepend-inner-icon="mdi-key-chain"
144+
hide-details="auto"
145+
label="API Server Secret"
146+
hint="The secret field, used for authentication, will be passed as X-Jms-Api-Key in your API call headers. This ensures secure access to the API's functionalities. Keep it confidential to protect your data."
147+
readonly
148+
persistent-hint
149+
name="server_secret"
150+
autocomplete="new-password"
151+
>
152+
<template v-if="!structureStates.secretKeyLoaded" #append-inner>
153+
<v-btn
154+
:disabled="!structure.uuid"
155+
:loading="structureStates.loadingSecretKey"
156+
variant="outlined"
157+
size="small"
158+
@click="getSecretKey"
159+
>
160+
Get
161+
</v-btn>
162+
</template>
163+
</v-text-field>
164+
165+
<!-- CYPHER KEY -->
166+
<v-text-field
167+
v-model="computedCypherKey"
168+
:type="structureStates.cypherKeyLoaded ? 'text' : 'password'"
169+
:disabled="!server || demo || disabled || !structure.uuid"
170+
prepend-inner-icon="mdi-script-text-key-outline"
171+
hide-details="auto"
172+
label="API Cypher Key"
173+
hint="A securely generated key used to decrypt the API secret key. This key must be kept confidential and protected to ensure the integrity and security of sensitive data."
174+
readonly
175+
persistent-hint
176+
name="cypher_key"
177+
autocomplete="new-password"
178+
>
179+
<template v-if="!structureStates.cypherKeyLoaded" #append-inner>
180+
<v-btn
181+
:disabled="!structure.uuid"
182+
:loading="structureStates.loadingCypherKey"
183+
variant="outlined"
184+
size="small"
185+
@click="getCypherKey"
186+
>
187+
Get
188+
</v-btn>
189+
</template>
190+
</v-text-field>
191+
</v-card-text>
192+
193+
<v-card-text>
194+
<Docs v-model="integrationClientMd" />
195+
196+
<h3 class="mt-4">
197+
Environment Variables
198+
</h3>
199+
<v-alert
200+
v-if="!server"
201+
type="warning"
202+
variant="tonal"
203+
class="ma-0"
204+
>
205+
Please select a endpoint for your project first.
206+
</v-alert>
207+
<template v-else>
208+
<p class="mb-3">
209+
These are the environment variables to utilize in your <strong>client-side</strong> project. When working with our sandboxes, a file called<code>.env.example</code> is already provided and can be easily copied and renamed to <code>.env.local</code> or <code>.env.production</code>.
210+
</p>
211+
<v-card theme="dark" class="pa-2 mb-n1" flat>
212+
<v-checkbox
213+
v-model="usingVite"
214+
label="Using Vite"
215+
hide-details
216+
/>
217+
</v-card>
218+
<SyntaxHighlighter :model-value="clientSideEnvVar" language="properties" />
219+
220+
</template>
221+
222+
<Docs v-model="integrationServerMd" class="mt-6" />
223+
224+
<h3 class="mt-4">
225+
Environment Variables
226+
</h3>
227+
<p class="mb-3">
228+
These are the environment variables to utilize in your <strong>server-side</strong> project. When working with our sandboxes, a file called<code>.env.example</code> is already provided and can be easily copied and renamed to <code>.env.local</code> or <code>.env.production</code>.
229+
</p>
230+
<v-alert
231+
v-if="!server"
232+
type="warning"
233+
variant="tonal"
234+
class="ma-0"
235+
>
236+
Please select a endpoint for your project first.
237+
</v-alert>
238+
<template v-else>
239+
<v-btn
240+
variant="outlined"
241+
color="primary"
242+
:loading="structureStates.loadingSecretKey || structureStates.loadingCypherKey"
243+
:disabled="structureStates.secretKeyLoaded && structureStates.cypherKeyLoaded"
244+
@click="onGetCyperAndSecret"
245+
>
246+
Get Cypher and Secret key
247+
</v-btn>
248+
<SyntaxHighlighter :model-value="serverSideEnvVar" language="properties" class="mt-4" />
249+
</template>
250+
</v-card-text>
251+
</v-card>
252+
</template>

‎src/components/Integration.vue‎

Lines changed: 0 additions & 110 deletions
This file was deleted.

‎src/components/ModalDialog.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const { title, prependIcon } = defineProps<{
2222
<template #append>
2323
<div class="d-flex align-center" style="gap: 1rem">
2424
<slot name="append"></slot>
25-
<v-btn size="x-small" icon variant="flat">
26-
<v-icon icon="mdi-close" size="large" @click="visible = false" />
25+
<v-btn size="x-small" icon variant="flat" @click="visible = false">
26+
<v-icon icon="mdi-close" size="large" />
2727
</v-btn>
2828
</div>
2929
</template>

0 commit comments

Comments
 (0)