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

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, useTemplateRef, computed } from 'vue';
import { Dialog, TextInput, FormGroup, SingleSelect } from '@cloudron/pankow';
import { isValidDomainOrURL } from '@cloudron/pankow/utils';
import DockerRegistriesModel from '../models/DockerRegistriesModel.js';

const dockerRegistriesModel = DockerRegistriesModel.create();

const providers = [
  { name: 'AWS', value: 'aws' },
  { name: 'Cloudron', value: 'cloudron' },
  { name: 'Digital Ocean', value: 'digitalocean' },
  { name: 'DockerHub', value: 'dockerhub' },
  { name: 'Google Cloud', value: 'google-cloud' },
  { name: 'Linode', value: 'linode' },
  { name: 'Quay', value: 'quay' },
  { name: 'Treescale', value: 'treescale' },
  { name: t('settings.registryConfig.providerOther') || 'Other', value: 'other' },
];

const emit = defineEmits([ 'success' ]);

const dialog = useTemplateRef('dialog');

const busy = ref(false);
const formError = ref({});
const registry = ref(null);
const provider = ref('');
const serverAddress = ref('');
const username = ref('');
const email = ref('');
const password = ref('');

const isValid = computed(() => {
  if (!provider.value) return false;
  if (!serverAddress.value) return false;
  if (!username.value) return false;
  if (!password.value) return false;
  if (!isValidDomainOrURL(serverAddress.value)) return false;

  return true;
});

async function onSubmit() {
  busy.value = true;
  formError.value = {};

  let error;
  if (registry.value) [error] = await dockerRegistriesModel.update(registry.value.id, provider.value, serverAddress.value, username.value, email.value, password.value);
  else [error] = await dockerRegistriesModel.add(provider.value, serverAddress.value, username.value, email.value, password.value);
  if (error) {
    busy.value = false;
    formError.value.generic = error.body ? error.body.message : 'Internal error';
    return console.error(error);
  }

  emit('success');
  dialog.value.close();
  busy.value = false;
}

defineExpose({
  async open(r = null) {
    busy.value = false;
    formError.value = {};
    registry.value = r;
    provider.value = r ? r.provider : '';
    serverAddress.value = r ? r.serverAddress : '';
    username.value = r ? r.username : '';
    email.value = (r && typeof r.email === 'string') ? r.email : '';
    password.value = r ? r.password : '';

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

</script>

<template>
  <Dialog ref="dialog"
    :title="$t('dockerRegistries.dialog.title')"
    :confirm-label="$t('main.dialog.save')"
    :confirm-busy="busy"
    :confirm-active="!busy && isValid"
    :reject-label="$t('main.dialog.cancel')"
     reject-style="secondary"
    @confirm="onSubmit()"
  >
    <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
      <fieldset :disabled="busy">
        <input style="display: none" type="submit" :disabled="!isValid"/>

        <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>

        <FormGroup>
          <label for="providerInput">{{ $t('settings.registryConfig.provider') }} <sup><a href="https://docs.cloudron.io/settings/#private-docker-registry" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
          <SingleSelect id="providerInput" v-model="provider" :options="providers" option-key="value" option-label="name" />
        </FormGroup>

        <FormGroup>
          <label for="serverAddressInput">{{ $t('dockerRegistries.server') }}</label>
          <TextInput id="serverAddressInput" v-model="serverAddress" placeholder="docker.io" required />
        </FormGroup>

        <FormGroup>
          <label for="usernameInput">{{ $t('dockerRegistries.username') }}</label>
          <TextInput id="usernameInput" v-model="username" required />
        </FormGroup>

        <FormGroup>
          <label for="emailInput">{{ $t('dockerRegistries.email') }} (Optional)</label>
          <TextInput id="emailInput" v-model="email" />
        </FormGroup>

        <FormGroup>
          <label for="passwordInput">{{ $t('dockerRegistries.passwordToken') }}</label>
          <TextInput id="passwordInput" v-model="password" required />
        </FormGroup>
      </fieldset>
    </form>
  </Dialog>
</template>