Implement registry deletion

dashboard/src/components/DockerRegistryDialog.vue

@@ -37,6 +37,7 @@ 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;
@@ -52,7 +53,11 @@ async function onSubmit() {
   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);
+  if (error) {
+    busy.value = false;
+    formError.value.generic = error.body ? error.body.message : 'Internal error';
+    return console.error(error);
+  }
 
   emit('success');
   dialog.value.close();
@@ -92,6 +97,8 @@ defineExpose({
       <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" />

dashboard/src/components/PrivateRegistry.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject } from 'vue';
-import { Button, TableView } from 'pankow';
+import { Button, TableView, InputDialog } from 'pankow';
 import Section from '../components/Section.vue';
 import DockerRegistryDialog from '../components/DockerRegistryDialog.vue';
 import DockerRegistriesModel from '../models/DockerRegistriesModel.js';
@@ -30,12 +30,28 @@ const features = inject('features');
 const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
 
 const dialog = useTemplateRef('dialog');
+const inputDialog = useTemplateRef('inputDialog');
 
 function onEditOrAdd(registry = null) {
   if (registry || features.value.privateDockerRegistry) dialog.value.open(registry);
   else subscriptionRequiredDialog.value.open();
 }
 
+async function onRemove(registry) {
+  const yes = await inputDialog.value.confirm({
+    message: 'Really delete this registry?',
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.delete'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  const [error] = await dockerRegistriesModel.remove(registry.id);
+  if (error) console.error(error);
+
+  await refresh();
+}
 async function refresh() {
   const [error, result] = await dockerRegistriesModel.list();
   if (error) return console.error(error);
@@ -51,6 +67,7 @@ onMounted(async () => {
 
 <template>
   <Section :title="$t('settings.privateDockerRegistry.title')">
+    <InputDialog ref="inputDialog" />
     <DockerRegistryDialog ref="dialog" @success="refresh()"/>
 
     <template #header-buttons>