dockerregistries: remove usage of secret placeholder

dashboard/src/components/DockerRegistryDialog.vue

@@ -4,9 +4,8 @@ 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 { ref, useTemplateRef } from 'vue';
+import { Dialog, TextInput, FormGroup, SingleSelect, MaskedInput } from '@cloudron/pankow';
 import DockerRegistriesModel from '../models/DockerRegistriesModel.js';
 
 const dockerRegistriesModel = DockerRegistriesModel.create();
@@ -36,17 +35,15 @@ 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;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value.checkValidity();
+}
 
 async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
   busy.value = true;
   formError.value = {};
 
@@ -77,6 +74,8 @@ defineExpose({
     password.value = r ? r.password : '';
 
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -87,20 +86,20 @@ defineExpose({
     :title="$t('dockerRegistries.dialog.title')"
     :confirm-label="$t('main.dialog.save')"
     :confirm-busy="busy"
-    :confirm-active="!busy && isValid"
+    :confirm-active="!busy && isFormValid"
     :reject-label="$t('main.dialog.cancel')"
      reject-style="secondary"
     @confirm="onSubmit()"
   >
-    <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
+    <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input style="display: none" type="submit" :disabled="!isValid"/>
+        <input style="display: none" type="submit" :disabled="busy"/>
 
         <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" />
+          <SingleSelect id="providerInput" v-model="provider" :options="providers" option-key="value" option-label="name" required />
         </FormGroup>
 
         <FormGroup>
@@ -120,7 +119,7 @@ defineExpose({
 
         <FormGroup>
           <label for="passwordInput">{{ $t('dockerRegistries.passwordToken') }}</label>
-          <TextInput id="passwordInput" v-model="password" required />
+          <MaskedInput id="passwordInput" v-model="password" required />
         </FormGroup>
       </fieldset>
     </form>

dashboard/src/components/DomainDialog.vue

@@ -23,12 +23,12 @@ const customNameservers = ref(false);
 
 const dnsConfig = ref(DomainsModel.createEmptyConfig());
 
+const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function checkValidity() {
   isFormValid.value = form.value.checkValidity();
 }
 
-const form = useTemplateRef('form');
 async function onSubmit() {
   if (!form.value.reportValidity()) return;
 
@@ -84,8 +84,7 @@ defineExpose({
 
     dialog.value.open();
 
-    // ensure we trigger this once
-    setTimeout(checkValidity, 100);
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });