move up all the dialog components

2025-11-13 16:10:27 +01:00
parent 181ee43107
commit f9eb588d4c
5 changed files with 8 additions and 8 deletions
@@ -0,0 +1,104 @@
+<script setup>
+
+import { ref, useTemplateRef, computed } from 'vue';
+import { PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
+import ProfileModel from '../models/ProfileModel.js';
+
+const emit = defineEmits([ 'success' ]);
+
+const profileModel = ProfileModel.create();
+
+const dialog = useTemplateRef('dialog');
+const formError = ref({});
+const busy = ref (false);
+const newPassword = ref('');
+const newPasswordRepeat = ref('');
+const password = ref('');
+
+const isFormValid = computed(() => {
+  if (!newPassword.value) return false;
+  if (newPasswordRepeat.value !== newPassword.value) return false;
+  if (!password.value) return false;
+
+  return true;
+});
+
+async function onSubmit() {
+  if (!isFormValid.value) return;
+
+  busy.value = true;
+  formError.value = {};
+
+  const [error] = await profileModel.setPassword(password.value, newPassword.value);
+  if (error) {
+    if (error.status === 400) formError.value.newPassword = error.body.message;
+    else if (error.status === 412) formError.value.password = error.body.message;
+    else {
+      formError.value.generic = error.status ? error.body.message : 'Internal error';
+      console.error('Failed to set password', error);
+    }
+
+    busy.value = false;
+
+    return;
+  }
+
+  emit('success');
+  dialog.value.close();
+
+  busy.value = false;
+  formError.value = {};
+}
+
+defineExpose({
+  async open() {
+    newPassword.value = '';
+    newPasswordRepeat.value = '';
+    password.value = '';
+    busy.value = false;
+    formError.value = {};
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="$t('profile.changePassword.title')"
+    :confirm-label="$t('main.dialog.save')"
+    :confirm-active="!busy && isFormValid"
+    :confirm-busy="busy"
+     confirm-style="primary"
+    :reject-label="$t('main.dialog.cancel')"
+    :reject-active="!busy"
+     reject-style="secondary"
+     @confirm="onSubmit"
+  >
+    <form @submit.prevent="onSubmit">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+
+        <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
+
+        <FormGroup :has-error="formError.newPassword">
+          <label>{{ $t('profile.changePassword.newPassword') }}</label>
+          <PasswordInput v-model="newPassword" />
+          <div class="error-label" v-if="formError.newPassword">{{ formError.newPassword }}</div>
+        </FormGroup>
+
+        <FormGroup :has-error="newPasswordRepeat.length !== 0 && newPassword !== newPasswordRepeat">
+          <label>{{ $t('profile.changePassword.newPasswordRepeat') }}</label>
+          <PasswordInput v-model="newPasswordRepeat" />
+          <div class="error-label" v-if="newPasswordRepeat.length && newPassword !== newPasswordRepeat">{{ $t('profile.changePassword.errorPasswordsDontMatch') }}</div>
+        </FormGroup>
+
+        <FormGroup :has-error="formError.password">
+          <label>{{ $t('profile.changePassword.currentPassword') }}</label>
+          <PasswordInput v-model="password" />
+          <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
+        </FormGroup>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>