Request password on import app

packages/builder/src/components/start/CreateAppModal.svelte

@@ -1,6 +1,12 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Dropzone } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Dropzone,
+    Modal,
+  } from "@budibase/bbui"
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { apps, admin, auth } from "stores/portal"
@@ -19,6 +25,7 @@
 
   const values = writable({ name: "", url: null })
   const validation = createValidationStore()
+  const encryptionValidation = createValidationStore()
 
   $: {
     const { url } = $values
@@ -27,8 +34,11 @@
       ...$values,
       url: url?.[0] === "/" ? url.substring(1, url.length) : url,
     })
+    encryptionValidation.check({ ...$values })
   }
 
+  $: encryptedFile = $values.file?.name?.endsWith(".enc.tar.gz")
+
   onMount(async () => {
     const lastChar = $auth.user?.firstName
       ? $auth.user?.firstName[$auth.user?.firstName.length - 1]
@@ -87,6 +97,9 @@
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
     appValidation.file(validation, { template })
+
+    encryptionValidation.addValidatorType("encryptionPassword", "text", true)
+
     // init validation
     const { url } = $values
     validation.check({
@@ -110,6 +123,9 @@
         data.append("templateName", template.name)
         data.append("templateKey", template.key)
         data.append("templateFile", $values.file)
+        if ($values.encryptionPassword.trim()) {
+          data.append("encryptionPassword", $values.encryptionPassword.trim())
+        }
       }
 
       // Create App
@@ -143,67 +159,115 @@
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false
-      console.error(error)
+      throw error
-      notifications.error("Error creating app")
     }
   }
+
+  const Step = { CONFIG: "config", SET_PASSWORD: "set_password" }
+  let currentStep = Step.CONFIG
+  $: stepConfig = {
+    [Step.CONFIG]: {
+      title: "Create your app",
+      confirmText: template?.fromFile ? "Import app" : "Create app",
+      onConfirm: async () => {
+        if (encryptedFile) {
+          currentStep = Step.SET_PASSWORD
+          return false
+        } else {
+          try {
+            await createNewApp()
+          } catch (error) {
+            notifications.error("Error creating app")
+          }
+        }
+      },
+      isValid: $validation.valid,
+    },
+    [Step.SET_PASSWORD]: {
+      title: "Confirm password",
+      confirmText: "Import app",
+      onConfirm: async () => {
+        try {
+          await createNewApp()
+        } catch (e) {
+          console.log(e)
+          notifications.error("Error creating app")
+          return false
+        }
+      },
+      isValid: $encryptionValidation.valid,
+    },
+  }
 </script>
 
 <ModalContent
-  title={"Create your app"}
+  title={stepConfig[currentStep].title}
-  confirmText={template?.fromFile ? "Import app" : "Create app"}
+  confirmText={stepConfig[currentStep].confirmText}
-  onConfirm={createNewApp}
+  onConfirm={stepConfig[currentStep].onConfirm}
-  disabled={!$validation.valid}
+  disabled={!stepConfig[currentStep].isValid}
 >
-  {#if template && !template?.fromFile}
+  {#if currentStep === Step.CONFIG}
-    <TemplateCard
+    {#if template && !template?.fromFile}
-      name={template.name}
+      <TemplateCard
-      imageSrc={template.image}
+        name={template.name}
-      backgroundColour={template.background}
+        imageSrc={template.image}
-      overlayEnabled={false}
+        backgroundColour={template.background}
-      icon={template.icon}
+        overlayEnabled={false}
-    />
+        icon={template.icon}
-  {/if}
+      />
-  {#if template?.fromFile}
-    <Dropzone
-      error={$validation.touched.file && $validation.errors.file}
-      gallery={false}
-      label="File to import"
-      value={[$values.file]}
-      on:change={e => {
-        $values.file = e.detail?.[0]
-        $validation.touched.file = true
-      }}
-    />
-  {/if}
-  <Input
-    autofocus={true}
-    bind:value={$values.name}
-    disabled={creating}
-    error={$validation.touched.name && $validation.errors.name}
-    on:blur={() => ($validation.touched.name = true)}
-    on:change={nameToUrl($values.name)}
-    label="Name"
-    placeholder={defaultAppName}
-  />
-  <span>
-    <Input
-      bind:value={$values.url}
-      disabled={creating}
-      error={$validation.touched.url && $validation.errors.url}
-      on:blur={() => ($validation.touched.url = true)}
-      on:change={tidyUrl($values.url)}
-      label="URL"
-      placeholder={$values.url
-        ? $values.url
-        : `/${resolveAppUrl(template, $values.name)}`}
-    />
-    {#if $values.url && $values.url !== "" && !$validation.errors.url}
-      <div class="app-server" title={appUrl}>
-        {appUrl}
-      </div>
     {/if}
-  </span>
+    {#if template?.fromFile}
+      <Dropzone
+        error={$validation.touched.file && $validation.errors.file}
+        gallery={false}
+        label="File to import"
+        value={[$values.file]}
+        on:change={e => {
+          $values.file = e.detail?.[0]
+          $validation.touched.file = true
+        }}
+      />
+    {/if}
+    <Input
+      autofocus={true}
+      bind:value={$values.name}
+      disabled={creating}
+      error={$validation.touched.name && $validation.errors.name}
+      on:blur={() => ($validation.touched.name = true)}
+      on:change={nameToUrl($values.name)}
+      label="Name"
+      placeholder={defaultAppName}
+    />
+    <span>
+      <Input
+        bind:value={$values.url}
+        disabled={creating}
+        error={$validation.touched.url && $validation.errors.url}
+        on:blur={() => ($validation.touched.url = true)}
+        on:change={tidyUrl($values.url)}
+        label="URL"
+        placeholder={$values.url
+          ? $values.url
+          : `/${resolveAppUrl(template, $values.name)}`}
+      />
+      {#if $values.url && $values.url !== "" && !$validation.errors.url}
+        <div class="app-server" title={appUrl}>
+          {appUrl}
+        </div>
+      {/if}
+    </span>
+  {/if}
+  {#if currentStep === Step.SET_PASSWORD}
+    <Input
+      autofocus={true}
+      label="Exported password"
+      bind:value={$values.encryptionPassword}
+      disabled={creating}
+      on:blur={() => ($encryptionValidation.touched.encryptionPassword = true)}
+      error={$encryptionValidation.touched.encryptionPassword &&
+        $encryptionValidation.errors.encryptionPassword}
+    />
+  {/if}
 </ModalContent>
 
 <style>