Add docker registry config UI for multiple registries

dashboard/src/components/DockerRegistryDialog.vue

@@ -0,0 +1,122 @@
+<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, PasswordInput } from 'pankow';
+import { isValidDomainOrURL } from '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 (!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) 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('settings.privateDockerRegistryDialog.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()"
+  >
+    <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
+
+    <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
+      <fieldset :disabled="busy">
+        <input style="display: none" type="submit" :disabled="!isValid"/>
+
+        <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('settings.privateDockerRegistry.server') }}</label>
+          <TextInput id="serverAddressInput" v-model="serverAddress" placeholder="docker.io" required />
+        </FormGroup>
+
+        <FormGroup>
+          <label for="usernameInput">{{ $t('settings.privateDockerRegistry.username') }}</label>
+          <TextInput id="usernameInput" v-model="username" required />
+        </FormGroup>
+
+        <FormGroup>
+          <label for="emailInput">{{ $t('settings.privateDockerRegistryDialog.email') }}</label>
+          <TextInput id="emailInput" v-model="email" />
+        </FormGroup>
+
+        <FormGroup>
+          <label for="passwordInput">{{ $t('settings.privateDockerRegistryDialog.passwordToken') }}</label>
+          <PasswordInput id="passwordInput" v-model="password" required />
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>