appwrite · TorstenDittmann · Aug 29, 2023 · Aug 29, 2023 · Aug 29, 2023 · Aug 29, 2023
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
@@ -89,10 +89,6 @@
         overflow: auto;
     }
 
-    pre {
-        padding-inline-end: 7rem !important; // Add space for label and copy btn
-    }
-
     code,
     pre {
         &[class*='language-'] {

diff --git a/src/lib/stores/marketplace.ts b/src/lib/stores/marketplace.ts
diff --git a/src/lib/wizards/functions/components/appwriteVariable.svelte b/src/lib/wizards/functions/components/appwriteVariable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Box } from '$lib/components';
-    import { FormList, Helper, InputChoice, InputText } from '$lib/elements/forms';
+    import { FormList, Helper, InputChoice, InputPassword } from '$lib/elements/forms';
     import type { Variable } from '$lib/stores/marketplace';
     import { templateConfig } from '../store';
 
@@ -10,10 +10,11 @@
 <Box radius="small" padding={16}>
     <FormList>
         <div>
-            <InputText
+            <InputPassword
                 id={appwriteVariable.name}
                 label={appwriteVariable.name}
                 placeholder={appwriteVariable.placeholder ?? 'Enter value'}
+                showPasswordButton
                 required={appwriteVariable.required && !$templateConfig.generateKey}
                 bind:value={$templateConfig.appwriteApiKey}
                 disabled={!!$templateConfig.generateKey} />

diff --git a/src/lib/wizards/functions/createTemplate.svelte b/src/lib/wizards/functions/createTemplate.svelte
@@ -32,6 +32,7 @@
                 );
                 $templateConfig.variables['APPWRITE_API_KEY'] = key.secret;
             }
+
             const response = await sdk.forProject.functions.create(
                 $templateConfig.$id || ID.unique(),
                 $templateConfig.name,
@@ -54,6 +55,15 @@
                 runtimeDetail.providerRootDirectory,
                 $template.providerBranch
             );
+
+            if ($templateConfig.variables) {
+                const promises = Object.entries($templateConfig.variables).map(([key, value]) =>
+                    sdk.forProject.functions.createVariable(response.$id, key, value?.toString())
+                );
+
+                await Promise.all(promises);
+            }
+
             goto(
                 `${base}/console/project-${$page.params.project}/functions/function-${response.$id}`
             );

diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
-    import InputText from '$lib/elements/forms/inputText.svelte';
     import { WizardStep } from '$lib/layout';
     import { template, templateConfig } from '../store';
-    import { FormList, Helper } 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) {
@@ -23,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}>
@@ -46,14 +76,16 @@
                                 <AppwriteVariable appwriteVariable={variable} />
                             {:else}
                                 <div>
-                                    <InputText
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
                                         id={variable.name}
                                         label={variable.name}
                                         placeholder={variable.placeholder ?? 'Enter value'}
                                         required={variable.required}
                                         autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
                                         bind:value={$templateConfig.variables[variable.name]} />
-
                                     <Helper type="neutral">
                                         {@html variable.description}
                                     </Helper>
@@ -79,12 +111,14 @@
                                 <AppwriteVariable appwriteVariable={variable} />
                             {:else}
                                 <div>
-                                    <InputText
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
                                         id={variable.name}
                                         label={variable.name}
                                         placeholder={variable.placeholder ?? 'Enter value'}
                                         required={variable.required}
                                         autocomplete={false}
+                                        showPasswordButton={variable.type === 'password'}
                                         bind:value={$templateConfig.variables[variable.name]} />
 
                                     <Helper type="neutral">

diff --git a/src/lib/wizards/functions/store.ts b/src/lib/wizards/functions/store.ts
@@ -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;

diff --git a/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailTemplate.svelte
@@ -97,7 +97,7 @@
                     label="Sender name"
                     bind:value={$emailTemplate.senderName}
                     tooltip="Set up an SMTP server to edit the sender name"
-                    placeholder={'{{project}}'}
+                    placeholder="Enter sender name"
                     readonly={!isSmtpEnabled} />
                 <InputEmail
                     bind:value={$emailTemplate.senderEmail}

diff --git a/src/routes/console/project-[project]/auth/templates/resetEmail.svelte b/src/routes/console/project-[project]/auth/templates/resetEmail.svelte
@@ -2,6 +2,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
     import { loadEmailTemplate } from './+page.svelte';
@@ -24,6 +25,10 @@
                 $emailTemplate.locale
             );
             $baseEmailTemplate = { ...$emailTemplate };
+            addNotification({
+                type: 'success',
+                message: 'Email template has been reset'
+            });
             trackEvent(Submit.EmailResetTemplate, {
                 locale: $emailTemplate.locale,
                 type: $emailTemplate.type

diff --git a/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte b/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
@@ -28,26 +28,35 @@
                             language="sh"
                             withCopy
                             noMargin
+                            noBoxPadding
                             code={`git checkout ${$func.providerBranch}`} />
                     </div>
                 </NumericListItem>
                 <NumericListItem fullWidth>
-                    <span class="text"> Create a new commit </span>
+                    <span class="text"> Add your changes</span>
                     <div class="u-margin-block-start-16">
+                        <Code language="sh" withCopy noMargin noBoxPadding code={`git add .`} />
+                    </div>
+                </NumericListItem>
+                <NumericListItem fullWidth>
+                    <span class="text"> Create a new commit </span>
+                    <div class="u-margin-block-start-16 u-min-width-0 u-grid">
                         <Code
                             language="sh"
                             withCopy
                             noMargin
+                            noBoxPadding
                             code={`git commit -m "deploying with Appwrite"`} />
                     </div>
                 </NumericListItem>
                 <NumericListItem fullWidth>
-                    <span class="text"> Push your new commit </span>
+                    <span class="text"> Push your new commit</span>
                     <div class="u-margin-block-start-16">
                         <Code
                             language="sh"
                             withCopy
                             noMargin
+                            noBoxPadding
                             code={`git push ${$func.providerBranch}`} />
                     </div>
                 </NumericListItem>