feat: variables are input is set dinamically

This commit is contained in:
Arman
2023-08-29 18:01:38 +02:00
parent a65c65f075
commit a47aa5568f
4 changed files with 129 additions and 50 deletions
+85 -42
View File
@@ -53,7 +53,8 @@ export const marketplace: MarketplaceTemplate[] = [
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: false
required: false,
type: 'password'
}
]
},
@@ -104,14 +105,16 @@ export const marketplace: MarketplaceTemplate[] = [
description: `A unique key used to authenticate with the OpenAI API. This is a paid service and you will be charged for each request made to the API. <a class="u-bold" target="_blank" href="https://platform.openai.com/docs/quickstart/add-your-api-key">Learn more</a>.`,
value: '',
placeholder: 'sk-wzG...vcy',
required: true
required: true,
type: 'password'
},
{
name: 'OPENAI_MAX_TOKENS',
description: `The maximum number of tokens that the OpenAI response should contain. Be aware that OpenAI models read and write a maximum number of tokens per API call, which varies depending on the model. For GPT-3.5-turbo, the limit is 4096 tokens. <a class="u-bold" target="_blank" href="https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them">Learn more</a>.`,
value: '512',
placeholder: '512',
required: false
required: false,
type: 'number'
}
]
},
@@ -150,7 +153,8 @@ export const marketplace: MarketplaceTemplate[] = [
description: `Discord Public Key to verify request signature. <a class="u-bold" target="_blank" href="https://discord.com/developers/docs/tutorials/hosting-on-cloudflare-workers#creating-an-app-on-discord">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
required: true,
type: 'password'
}
]
},
@@ -183,7 +187,8 @@ export const marketplace: MarketplaceTemplate[] = [
description: `Google Perspective API key. It authenticates your function, allowing it to interact with the API. <a class="u-bold" target="_blank" href="https://developers.google.com/codelabs/setup-perspective-api">Learn more</a>.`,
value: '',
placeholder: 'AIzaS...fk-fuM',
required: true
required: true,
type: 'password'
}
]
},
@@ -229,7 +234,8 @@ export const marketplace: MarketplaceTemplate[] = [
description: `Access token for the Pangea Redact API. <a class="u-bold" target="_blank" href="https://pangea.cloud/docs/redact/getting-started/configuration">Learn more</a>.`,
value: '',
placeholder: 'pts_7p4...5wl4',
required: true
required: true,
type: 'password'
}
]
},
@@ -288,14 +294,16 @@ export const marketplace: MarketplaceTemplate[] = [
description: `A personal access token from GitHub with the necessary permissions to post comments on issues. <a class="u-bold" target="_blank" href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token">Learn more</a>.`,
value: '',
placeholder: 'ghp_1...',
required: true
required: true,
type: 'password'
},
{
name: 'GITHUB_WEBHOOK_SECRET',
description: `The secret used to verify that the webhook request comes from GitHub. <a class="u-bold" target="_blank" href="https://docs.github.com/en/developers/webhooks-and-events/securing-your-webhooks">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
required: true,
type: 'password'
}
]
},
@@ -328,35 +336,40 @@ export const marketplace: MarketplaceTemplate[] = [
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
required: true,
type: 'password'
},
{
name: 'APPWRITE_ENDPOINT',
description: `The URL endpoint of the Appwrite server. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: 'https://cloud.appwrite.io/v1',
placeholder: 'https://cloud.appwrite.io/v1',
required: false
required: false,
type: 'url'
},
{
name: 'APPWRITE_DATABASE_ID',
description: `The ID of the database to store the short URLs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/databases">Learn more</a>.`,
value: 'urlShortener',
placeholder: 'urlShortener',
required: false
required: false,
type: 'text'
},
{
name: 'APPWRITE_COLLECTION_ID',
description: `The ID of the collection to store the short URLs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/collections">Learn more</a>.`,
value: 'urls',
placeholder: 'urls',
required: false
required: false,
type: 'text'
},
{
name: 'SHORT_BASE_URL',
description: `The domain to use for the short URLs. You can use your functions subdomain or a custom domain.`,
value: '',
placeholder: 'https://shortdomain.io',
required: true
required: true,
type: 'url'
}
]
},
@@ -401,44 +414,51 @@ export const marketplace: MarketplaceTemplate[] = [
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
required: true,
type: 'password'
},
{
name: 'APPWRITE_DATABASE_ID',
description: `The ID of the Appwrite database that contains the collection to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/databases">Learn more</a>.`,
placeholder: '64a55...7b912',
required: true
required: true,
type: 'text'
},
{
name: 'APPWRITE_COLLECTION_ID',
description: `The ID of the collection in the Appwrite database to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/collections">Learn more</a>.`,
placeholder: '7c3e8...2a9f1',
required: true
required: true,
type: 'text'
},
{
name: 'ALGOLIA_ADMIN_API_KEY',
description: `The admin API Key for your Algolia service. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/guides/security/api-keys/">Learn more</a>.`,
placeholder: 'fd0aa...136a8',
required: true
required: true,
type: 'password'
},
{
name: 'ALGOLIA_INDEX_ID',
description: `The ID of the index in Algolia where the documents are to be synced. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/api-client/methods/indexing/">Learn more</a>.`,
placeholder: 'my_index',
required: true
required: true,
type: 'password'
},
{
name: 'ALGOLIA_SEARCH_API_KEY',
description: `The search API Key for your Algolia service. This key is used for searching the synced index. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/guides/security/api-keys/">Learn more</a>.`,
placeholder: 'bf2f5...df733',
required: true
required: true,
type: 'password'
},
{
name: 'APPWRITE_ENDPOINT',
description: `The URL endpoint of the Appwrite server. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: 'https://cloud.appwrite.io/v1',
placeholder: 'https://cloud.appwrite.io/v1',
required: false
required: false,
type: 'url'
}
]
},
@@ -471,50 +491,58 @@ export const marketplace: MarketplaceTemplate[] = [
description: `The API Key to talk to Appwrite backend APIs. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: '',
placeholder: 'd1efb...aec35',
required: true
required: true,
type: 'password'
},
{
name: 'APPWRITE_DATABASE_ID',
description: `The ID of the Appwrite database that contains the collection to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/databases">Learn more</a>.`,
placeholder: '64a55...7b912',
required: true
required: true,
type: 'text'
},
{
name: 'APPWRITE_COLLECTION_ID',
description: `The ID of the collection in the Appwrite database to sync. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/collections">Learn more</a>.`,
placeholder: '7c3e8...2a9f1',
required: true
required: true,
type: 'text'
},
{
name: 'MEILISEARCH_ENDPOINT',
description: `The host URL of the Meilisearch server. <a class="u-bold" target="_blank" href="https://www.meilisearch.com/docs/learn/getting_started/quick_start/">Learn more</a>.`,
placeholder: 'http://127.0.0.1:7700',
required: true
required: true,
type: 'url'
},
{
name: 'MEILISEARCH_ADMIN_API_KEY',
description: `The admin API key for Meilisearch. <a class="u-bold" target="_blank" href="https://docs.meilisearch.com/reference/api/keys/">Learn more</a>.`,
placeholder: 'masterKey1234',
required: true
required: true,
type: 'password'
},
{
name: 'MEILISEARCH_SEARCH_API_KEY',
description: `API Key for Meilisearch search operations. <a class="u-bold" target="_blank" href="https://www.algolia.com/doc/guides/security/api-keys/">Learn more</a>.`,
placeholder: 'searchKey1234',
required: true
required: true,
type: 'password'
},
{
name: 'MEILISEARCH_INDEX_NAME',
description: `Name of the Meilisearch index to which the documents will be synchronized. <a class="u-bold" target="_blank" href="https://www.meilisearch.com/docs/learn/core_concepts/indexes/">Learn more</a>.`,
placeholder: 'appwrite_index',
required: true
required: true,
type: 'text'
},
{
name: 'APPWRITE_ENDPOINT',
description: `The URL endpoint of the Appwrite server. <a class="u-bold" target="_blank" href="https://appwrite.io/docs/getting-started-for-server">Learn more</a>.`,
value: 'https://cloud.appwrite.io/v1',
placeholder: 'https://cloud.appwrite.io/v1',
required: false
required: false,
type: 'url'
}
]
},
@@ -547,25 +575,29 @@ export const marketplace: MarketplaceTemplate[] = [
description: `API Key to use the Vonage API. <a class="u-bold" target="_blank" href="https://api.support.vonage.com/hc/en-us/articles/204014493-How-do-I-find-my-Voice-API-key-and-API-secret-">Learn more</a>.`,
value: '',
placeholder: '62...97',
required: true
required: true,
type: 'password'
},
{
name: 'VONAGE_API_SECRET',
description: `Secret to use the Vonage API. <a class="u-bold" target="_blank" href="https://api.support.vonage.com/hc/en-us/articles/204014493-How-do-I-find-my-Voice-API-key-and-API-secret-">Learn more</a>.`,
placeholder: 'Zjc...5PH',
required: true
required: true,
type: 'password'
},
{
name: 'VONAGE_API_SIGNATURE_SECRET',
description: `Secret to verify the JWT token sent by Vonage. <a class="u-bold" target="_blank" href="https://developer.vonage.com/en/getting-started/concepts/signing-messages">Learn more</a>.`,
placeholder: 'NXOi3...IBHDa',
required: true
required: true,
type: 'password'
},
{
name: 'VONAGE_WHATSAPP_NUMBER',
description: `Vonage WhatsApp number to send messages from. <a class="u-bold" target="_blank" href="https://api.support.vonage.com/hc/en-us/articles/4431993282580-Where-do-I-find-my-WhatsApp-Number-Certificate-">Learn more</a>.`,
placeholder: '+14000000102',
required: true
required: true,
type: 'phone'
}
]
},
@@ -598,25 +630,29 @@ export const marketplace: MarketplaceTemplate[] = [
description: `A unique identifier for your FCM project. <a class="u-bold" target="_blank" href="https://firebase.google.com/docs/projects/learn-more#project-id">Learn more</a>.`,
value: '',
placeholder: 'mywebapp-f6e57',
required: true
required: true,
type: 'text'
},
{
name: 'FCM_CLIENT_EMAIL',
description: `Your FCM service account email. <a class="u-bold" target="_blank" href="https://github.com/appwrite/templates/tree/main/node/push-notification-with-fcm#:~:text=Documentation-,FCM%3A%20SDK%20Setup,-FCM_PRIVATE_KEY">Learn more</a>.`,
placeholder: 'fcm-adminsdk-2f0de@test-f7q57.iam.gserviceaccount.com',
required: true
required: true,
type: 'email'
},
{
name: 'FCM_PRIVATE_KEY',
description: `A unique private key used to authenticate with FCM. <a class="u-bold" target="_blank" href="https://github.com/appwrite/templates/tree/main/node/push-notification-with-fcm#:~:text=Documentation-,FCM%3A%20SDK%20Setup,-FCM_DATABASE_URL">Learn more</a>.`,
placeholder: '0b683...75675',
required: true
required: true,
type: 'password'
},
{
name: 'FCM_DATABASE_URL',
description: `URL of your FCM database. <a class="u-bold" target="_blank" href="https://firebase.google.com/docs/admin/setup#initialize_the_sdk_in_non-google_environments">Learn more</a>.`,
placeholder: 'https://my-app-f298e.firebaseio.com',
required: true
required: true,
type: 'url'
}
]
},
@@ -661,38 +697,44 @@ export const marketplace: MarketplaceTemplate[] = [
description: `The address of your SMTP server. Many STMP providers will provide this information in their documentation. Some popular providers include: Mailgun, SendGrid, and Gmail.`,
value: '',
placeholder: 'smtp.mailgun.org',
required: true
required: true,
type: 'url'
},
{
name: 'SMTP_PORT',
description: `The port of your STMP server. Commnly used ports include 25, 465, and 587.`,
placeholder: '25',
required: true
required: true,
type: 'number'
},
{
name: 'SMTP_USERNAME',
description: `The username for your SMTP server. This is commonly your email address.`,
placeholder: 'no-reply@mywebapp.org',
required: true
required: true,
type: 'text'
},
{
name: 'SMTP_PASSWORD',
description: `The password for your SMTP server.`,
placeholder: '5up3r5tr0ngP4ssw0rd',
required: true
required: true,
type: 'password'
},
{
name: 'SUBMIT_EMAIL',
description: `The email address to send form submissions to.`,
placeholder: 'me@mywebapp.org',
required: true
required: true,
type: 'email'
},
{
name: 'ALLOWED_ORIGINS',
description: `An optional comma-separated list of allowed origins for CORS (defaults to *). This is an important security measure to prevent malicious users from abusing your function.`,
value: '',
placeholder: 'https://mywebapp.org,https://mywebapp.com',
required: false
required: false,
type: 'text'
}
]
}
@@ -711,6 +753,7 @@ export type Variable = {
value?: string;
placeholder: string;
required: boolean;
type: 'password' | 'text' | 'number' | 'email' | 'url' | 'phone';
};
export type MarketplaceTemplate = {
@@ -58,7 +58,11 @@
if ($templateConfig.variables) {
for (const [key, value] of Object.entries($templateConfig.variables)) {
await sdk.forProject.functions.createVariable(response.$id, key, value);
await sdk.forProject.functions.createVariable(
response.$id,
key,
value?.toString()
);
}
}
@@ -1,9 +1,19 @@
<script lang="ts">
import { WizardStep } from '$lib/layout';
import { template, templateConfig } from '../store';
import { FormList, Helper, InputPassword } from '$lib/elements/forms';
import {
FormList,
Helper,
InputPassword,
InputText,
InputURL,
InputPhone,
InputEmail,
InputNumber
} from '$lib/elements/forms';
import { Card, Collapsible, CollapsibleItem } from '$lib/components';
import AppwriteVariable from '../components/appwriteVariable.svelte';
import type { SvelteComponent } from 'svelte';
async function beforeSubmit() {
for (const variable of $template.variables) {
@@ -22,6 +32,27 @@
$: requiredVariables = $template?.variables?.filter((v) => v.required);
$: optionalVariables = $template?.variables?.filter((v) => !v.required);
function selectComponent(
variableType: 'password' | 'text' | 'number' | 'email' | 'url' | 'phone'
): typeof SvelteComponent {
switch (variableType) {
case 'password':
return InputPassword;
case 'text':
return InputText;
case 'url':
return InputURL;
case 'phone':
return InputPhone;
case 'email':
return InputEmail;
case 'number':
return InputNumber;
default:
return InputPassword;
}
}
</script>
<WizardStep {beforeSubmit}>
@@ -45,15 +76,15 @@
<AppwriteVariable appwriteVariable={variable} />
{:else}
<div>
<InputPassword
<svelte:component
this={selectComponent(variable.type)}
id={variable.name}
label={variable.name}
placeholder={variable.placeholder ?? 'Enter value'}
showPasswordButton
required={variable.required}
autocomplete={false}
showPasswordButton={variable.type === 'password'}
bind:value={$templateConfig.variables[variable.name]} />
<Helper type="neutral">
{@html variable.description}
</Helper>
@@ -79,13 +110,14 @@
<AppwriteVariable appwriteVariable={variable} />
{:else}
<div>
<InputPassword
<svelte:component
this={selectComponent(variable.type)}
id={variable.name}
label={variable.name}
showPasswordButton
placeholder={variable.placeholder ?? 'Enter value'}
required={variable.required}
autocomplete={false}
showPasswordButton={variable.type === 'password'}
bind:value={$templateConfig.variables[variable.name]} />
<Helper type="neutral">
+1 -1
View File
@@ -8,7 +8,7 @@ export const templateConfig = writable<{
$id: string;
name: string;
runtime: string;
variables: { [key: string]: string };
variables: { [key: string]: unknown };
repositoryBehaviour: 'new' | 'existing';
repositoryName: string;
repositoryPrivate: boolean;