cloudron-box/dashboard/src/components/AppImportDialog.vue

<script setup>

import { ref, useTemplateRef } from 'vue';
import { Dialog, FormGroup, TextInput, PasswordInput, Checkbox } from '@cloudron/pankow';
import { s3like } from  '../utils.js';
import BackupProviderForm from './BackupProviderForm.vue';
import AppsModel from '../models/AppsModel.js';
import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
import { SECRET_PLACEHOLDER } from '../constants.js';

const appsModel = AppsModel.create();

const dialog = useTemplateRef('dialog');
const form = useTemplateRef('form');
const backupConfigInput = useTemplateRef('backupConfigInput');
const appId = ref('');
const busy = ref(false);
const formError = ref({});
const providerConfig = ref({});
const provider = ref('');
const remotePath = ref('');
const format = ref('');
const encrypted = ref(false);
const encryptionPasswordHint = ref('');
const encryptionPassword = ref('');
const encryptedFilenames = ref(false);

async function onSubmit() {
  if (!form.value.reportValidity()) return;

  formError.value = {};
  busy.value = true;

  let backupPath = remotePath.value;
  const backupConfig = {};

  // only set provider specific fields, this will clear them in the db
  if (s3like(provider.value)) {
    backupConfig.bucket = providerConfig.value.bucket;
    backupConfig.prefix = providerConfig.value.prefix;
    backupConfig.accessKeyId = providerConfig.value.accessKeyId;
    backupConfig.secretAccessKey = providerConfig.value.secretAccessKey;

    if (providerConfig.value.endpoint) backupConfig.endpoint = providerConfig.value.endpoint;

    if (provider.value === 's3') {
      if (providerConfig.value.region) backupConfig.region = providerConfig.value.region;
      delete backupConfig.endpoint;
    } else if (provider.value === 'minio' || provider.value === 's3-v4-compat') {
      backupConfig.region = providerConfig.value.region || 'us-east-1';
      backupConfig.acceptSelfSignedCerts = !!providerConfig.value.acceptSelfSignedCerts;
      backupConfig.s3ForcePathStyle = true; // might want to expose this in the UI
    } else if (provider.value === 'exoscale-sos') {
      backupConfig.region = 'us-east-1';
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'wasabi') {
      backupConfig.region = REGIONS_WASABI.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'scaleway-objectstorage') {
      backupConfig.region = REGIONS_SCALEWAY.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'linode-objectstorage') {
      backupConfig.region = REGIONS_LINODE.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'ovh-objectstorage') {
      backupConfig.region = REGIONS_OVH.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'ionos-objectstorage') {
      backupConfig.region = REGIONS_IONOS.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'vultr-objectstorage') {
      backupConfig.region = REGIONS_VULTR.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'contabo-objectstorage') {
      backupConfig.region = REGIONS_CONTABO.find(function (x) { return x.value === backupConfig.endpoint; }).region;
      backupConfig.signatureVersion = 'v4';
      backupConfig.s3ForcePathStyle = true; // https://docs.contabo.com/docs/products/Object-Storage/technical-description (no virtual buckets)
    } else if (provider.value === 'upcloud-objectstorage') {
      const m = /^.*\.(.*)\.upcloudobjects.com$/.exec(providerConfig.value.endpoint);
      backupConfig.region = m ? m[1] : 'us-east-1'; // let it fail in validation phase if m is not valid
      backupConfig.signatureVersion = 'v4';
    } else if (provider.value === 'digitalocean-spaces') {
      backupConfig.region = 'us-east-1';
    } else if (provider.value === 'hetzner-objectstorage') {
      backupConfig.region = 'us-east-1';
      backupConfig.signatureVersion = 'v4';
    }
  } else if (provider.value === 'gcs') {
    backupConfig.bucket = providerConfig.value.bucket;
    backupConfig.prefix = providerConfig.value.prefix;
    backupConfig.projectId = providerConfig.value.projectId;
    backupConfig.credentials = providerConfig.value.credentials;
  } else if (provider.value === 'sshfs' || provider.value === 'cifs' || provider.value === 'nfs' || provider.value === 'ext4' || provider.value === 'xfs') {
    backupConfig.mountOptions = providerConfig.value.mountOptions;
    backupConfig.prefix = providerConfig.value.prefix;
  } else if (provider.value === 'mountpoint') {
    backupConfig.prefix = providerConfig.value.prefix;
    backupConfig.mountPoint = providerConfig.value.mountPoint;
  } else if (provider.value === 'filesystem') {
    const parts = remotePath.value.split('/');
    backupPath = parts.pop() || parts.pop(); // removes any trailing slash. this is basename()
    backupConfig.backupDir = parts.join('/'); // this is dirname()
  }

  const data = {
    format: format.value,
    provider: provider.value,
    config: backupConfig,
    remotePath: backupPath
  };

  if (encrypted.value) {
    data.encryptionPassword = encryptionPassword.value;
    data.encryptedFilenames = encryptedFilenames.value;
  }

  const [error] = await appsModel.import(appId.value, data);
  if (error) {
    busy.value = false;
    formError.value = {};

    if (error.status === 424) {
      formError.value.generic = error.body.message;

      if (error.body.message.indexOf('AWS Access Key Id') !== -1) {
        formError.value.accessKeyId = true;
      } else if (error.body.message.indexOf('not match the signature') !== -1 || error.body.message.indexOf('Signature') !== -1) {
        formError.value.secretAccessKey = true;
      } else if (error.body.message.toLowerCase() === 'access denied') {
        formError.value.accessKeyId = true;
      } else if (error.body.message.indexOf('ECONNREFUSED') !== -1) {
        formError.value.generic = 'Unknown region';
        formError.value.region = true;
      } else if (error.body.message.toLowerCase() === 'wrong region') {
        formError.value.generic = 'Wrong S3 Region';
        formError.value.region = true;
      } else {
        formError.value.bucket = true;
      }
    } else if (error.status === 400) {
      formError.value.generic = error.body.message;

      if (provider.value === 'filesystem') {
        formError.value.backupDir = true;
      }
    } else {
      formError.value.generic = 'Internal error';
      console.error(error);
    }

    return;
  }

  dialog.value.close();
  busy.value = false;
  formError.value = {};

  // clear potential post-install flag
  delete localStorage['confirmPostInstall_' + appId.value];
}

function onBackupConfigChanged(event) {
  const reader = new FileReader();
  reader.onload = function (result) {
    if (!result.target || !result.target.result) return console.error('Unable to read backup config');

    let data;
    try {
      data = JSON.parse(result.target.result); // 'provider', 'config', 'limits', 'format', 'remotePath', 'encrypted', 'encryptedFilenames'
      if (data.provider === 'filesystem') { // this allows a user to upload a backup to server and import easily with an absolute path
        data.remotePath = `${data.config.backupDir}/${data.remotePath}`;
      }
    } catch (e) {
      console.error('Unable to parse backup config', e);
      return;
    }

    provider.value = data.provider;
    remotePath.value = data.remotePath;
    providerConfig.value = data.config;
    format.value = data.format;
    encrypted.value = !!data.encrypted;
    encryptionPasswordHint.value = data.encryptionPasswordHint || '';
    encryptionPassword.value = '';
    encryptedFilenames.value = data.encryptedFilenames;
  };

  reader.readAsText(event.target.files[0]);
}

function onUploadBackupConfig() {
  backupConfigInput.value.click();
}

defineExpose({
  async open(id) {
    appId.value = id;
    busy.value = false;
    formError.value = {};
    provider.value = '';
    providerConfig.value = {};
    remotePath.value = '';
    encrypted.value = false;
    encryptionPassword.value = '';
    encryptedFilenames.value = false;
    encryptionPasswordHint.value = '';

    dialog.value.open();
  }
});

</script>

<template>
  <div>
    <input ref="backupConfigInput" type="file" style="display: none" accept="application/json, text/json" @change="onBackupConfigChanged"/>

    <Dialog ref="dialog" :title="$t('app.importBackupDialog.title')"
     :confirm-label="$t('app.importBackupDialog.importAction')"
     :confirm-active="!busy"
     :confirm-busy="busy"
     :reject-label="busy ? '' : $t('main.dialog.cancel')"
      reject-style="secondary"
     :alternate-label="$t('app.importBackupDialog.uploadAction')"
     @alternate="onUploadBackupConfig()"
     @confirm="onSubmit()"
    >
      <div>
        <div>{{ $t('app.importBackupDialog.description') }}</div>

        <form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
          <fieldset :disabled="busy">
            <input style="display: none;" type="submit"/>

            <!-- remotePath contains the prefix as well -->
            <FormGroup>
              <label for="inputRemotePath">{{ $t('app.importBackupDialog.remotePath') }} <sup><a href="https://docs.cloudron.io/backups/#import-app-backup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
              <TextInput id="inputRemotePath" v-model="remotePath" required />
            </FormGroup>

            <BackupProviderForm ref="form"
              v-model:provider="provider"
              v-model:provider-config="providerConfig"
              v-model:format="format"
              :form-error="formError"
              :import-only="true" />

            <Checkbox style="padding-top: 12px" v-model="encrypted" :label="$t('backups.configureBackupStorage.usesEncryption')"/>
            <FormGroup v-if="encrypted">
              <label for="encryptionPassswordInput">{{ $t('backups.configureBackupStorage.encryptionPassword') }}</label>
              <PasswordInput id="encryptionPassswordInput" v-model="encryptionPassword" :placeholder="$t('backups.configureBackupStorage.encryptionPasswordPlaceholder')" required/>
              <div class="warning-label" v-if="encryptionPasswordHint">{{ $t('backups.configureBackupStorage.encryptionHint') }}: {{ encryptionPasswordHint }}</div>
            </FormGroup>
            <Checkbox v-if="encrypted && format === 'rsync'" v-model="encryptedFilenames" :label="$t('backups.configureBackupStorage.encryptFilenames')"/>
          </fieldset>
        </form>
      </div>
    </Dialog>
  </div>
</template>