volumes: remove usage of secret placeholder

dashboard/src/views/VolumesView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { computed, ref, useTemplateRef, onMounted } from 'vue';
-import { Button, Menu, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from '@cloudron/pankow';
+import { Button, Menu, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, TableView, TextInput, MaskedInput } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import VolumesModel from '../models/VolumesModel.js';
@@ -173,9 +173,19 @@ async function openVolumeDialog(volume) {
   volumeDialogData.value.xfsBlockDevices = xfsBlockDevices;
 
   volumeDialog.value.open();
+
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
-async function submitVolumeDialog() {
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value.checkValidity();
+}
+
+async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
   volumeDialogData.value.busy = true;
 
   const mountOptions = {
@@ -185,11 +195,11 @@ async function submitVolumeDialog() {
     remoteDir: volumeDialogData.value.remoteDir,
     user: volumeDialogData.value.user,
     username: volumeDialogData.value.username,
-    password: volumeDialogData.value.password,
     diskPath: volumeDialogData.value.diskPath,
     hostPath: volumeDialogData.value.hostPath,
-    privateKey: volumeDialogData.value.privateKey,
   };
+  if (volumeDialogData.value.password) mountOptions.password = volumeDialogData.value.password; // cifs
+  if (volumeDialogData.value.privateKey) mountOptions.privateKey = volumeDialogData.value.privateKey; // sshfs
 
   let error;
   if (volumeDialogData.value.mode === 'new') {
@@ -269,11 +279,11 @@ onMounted(async () =>{
       :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
       :confirm-label="$t('main.dialog.save')"
-      :confirm-active="volumeDialogValid"
+      :confirm-active="!volumeDialogData.busy && isFormValid"
       :confirm-busy="volumeDialogData.busy"
-      @confirm="submitVolumeDialog()"
+      @confirm="onSubmit()"
     >
-      <form @submit.prevent="submitVolumeDialog()" autocomplete="off">
+      <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
         <fieldset :disabled="volumeDialogData.busy">
           <input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
 
@@ -286,7 +296,7 @@ onMounted(async () =>{
 
           <FormGroup>
             <label for="volumeMountType">{{ $t('volumes.mountType') }}</label>
-            <SingleSelect id="volumeMountType" v-model="volumeDialogData.mountType" :options="VolumesModel.mountTypes" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
+            <SingleSelect id="volumeMountType" v-model="volumeDialogData.mountType" :options="VolumesModel.mountTypes" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'" />
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
@@ -324,7 +334,7 @@ onMounted(async () =>{
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
             <label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
-            <PasswordInput v-model="volumeDialogData.password" id="volumePassword" />
+            <MaskedInput v-model="volumeDialogData.password" id="volumePassword" />
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
@@ -335,7 +345,7 @@ onMounted(async () =>{
           <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
             <label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
             <!-- private key has 7 lines of 70 chars -->
-            <textarea rows="7" cols="72" v-model="volumeDialogData.privateKey" id="volumePrivateKey"></textarea>
+            <MaskedInput multiline rows="7" cols="72" v-model="volumeDialogData.privateKey" id="volumePrivateKey" />
           </FormGroup>
 
         </fieldset>