jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Use same pattern for form validation

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-12-05 18:06:03 +01:00
parent 35d0227862
commit dfafbdd882
15 changed files with 189 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
dashboard/src/components/ApiTokens.vue
View File

@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import moment from 'moment-timezone';
import { ref, onMounted, computed, useTemplateRef } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Menu, ClipboardButton, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import { TOKEN_TYPES } from '../constants.js';
@@ -60,11 +60,15 @@ function onActionMenu(apiToken, event) {
actionMenuElement.value.open(event, event.currentTarget);
}
const isValid = computed(() => {
if (!tokenName.value) return false;
if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
return true;
});
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
if (isFormValid.value) {
if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) isFormValid.value = false;
}
}
async function refreshApiTokens() {
const [error, tokens] = await tokensModel.list();
@@ -74,7 +78,7 @@ async function refreshApiTokens() {
}
async function onSubmitAddApiToken(){
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
const scope = { '*': tokenScope.value };
const allowedIpRanges = tokenAllowedIpRanges.value;
@@ -96,6 +100,7 @@ function onReset() {
tokenScope.value = 'rw';
tokenAllowedIpRanges.value = '';
tokenAllowedIpRangesError.value = '';
setTimeout(checkValidity, 100); // update state of the confirm button
}, 500);
}
@@ -131,7 +136,7 @@ onMounted(async () => {
<Dialog ref="newDialog"
:title="$t('profile.createApiToken.title')"
:confirm-label="addedToken ? '' : $t('main.action.add')"
:confirm-active="isValid"
:confirm-active="isFormValid"
confirm-style="primary"
:reject-label="addedToken ? $t('main.dialog.close') : $t('main.dialog.cancel')"
reject-style="secondary"
@@ -141,8 +146,8 @@ onMounted(async () => {
<div>
<Transition name="slide-left" mode="out-in">
<div v-if="!addedToken">
<form @submit.prevent="onSubmitAddApiToken()" autocomplete="off">
<input style="display: none" type="submit" :disabled="!isValid"/>
<form @submit.prevent="onSubmitAddApiToken()" autocomplete="off" ref="form" @input="checkValidity()">
<input style="display: none" type="submit"/>
<FormGroup>
<label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
<TextInput id="apiTokenName" v-model="tokenName" required/>

4
dashboard/src/components/AppImportDialog.vue
View File

@@ -10,7 +10,6 @@ import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LIN
const appsModel = AppsModel.create();
const dialog = useTemplateRef('dialog');
const form = useTemplateRef('form');
const backupConfigInput = useTemplateRef('backupConfigInput');
const appId = ref('');
const busy = ref(false);
@@ -24,6 +23,7 @@ const encryptionPasswordHint = ref('');
const encryptionPassword = ref('');
const encryptedFilenames = ref(false);
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
@@ -279,6 +279,8 @@ defineExpose({
encryptionPasswordHint.value = '';
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
});

25
dashboard/src/components/AppPasswords.vue
View File

@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import moment from 'moment-timezone';
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Menu, ClipboardButton, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import Section from './Section.vue';
@@ -77,22 +77,23 @@ async function refresh() {
passwords.value = result;
}
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
}
function onReset() {
setTimeout(() => {
passwordName.value = '';
identifier.value = '';
addedPassword.value = '';
setTimeout(checkValidity, 100); // update state of the confirm button
}, 500);
}
const isValid = computed(() => {
if (!passwordName.value) return false;
if (!identifier.value) return false;
return true;
});
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
addedPassword.value = '';
@@ -163,7 +164,7 @@ onMounted(async () => {
<Dialog ref="newDialog"
:title="$t('profile.createAppPassword.title')"
:confirm-active="addedPassword || isValid"
:confirm-active="addedPassword || isFormValid"
:confirm-label="addedPassword ? '' : $t('main.action.add')"
confirm-style="primary"
:reject-label="addedPassword ? $t('main.dialog.close') : $t('main.dialog.cancel')"
@@ -174,8 +175,8 @@ onMounted(async () => {
<div>
<Transition name="slide-left" mode="out-in">
<div v-if="!addedPassword">
<form @submit.prevent="onSubmit()" autocomplete="off">
<input style="display: none" type="submit" :disabled="!isValid"/>
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<input style="display: none" type="submit"/>
<FormGroup>
<label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
<TextInput id="passwordName" v-model="passwordName" required/>
@@ -183,7 +184,7 @@ onMounted(async () => {
<FormGroup>
<label>{{ $t('profile.createAppPassword.app') }}</label>
<SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" />
<SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" required/>
</FormGroup>
</form>
</div>

39
dashboard/src/components/ApplinkDialog.vue
View File

@@ -38,26 +38,29 @@ const accessRestriction = ref({
groups: [],
});
const isValid = computed(() => {
if (busy.value) return false;
if (!upstreamUri.value) return false;
try {
new URL(upstreamUri.value);
// eslint-disable-next-line no-unused-vars
} catch (e) {
return false;
}
return true;
});
let iconFile = 'src';
function onIconChanged(file) {
iconFile = file;
}
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
if (isFormValid.value) {
try {
new URL(upstreamUri.value);
// eslint-disable-next-line no-unused-vars
} catch (e) {
isFormValid.value = false;
}
}
}
async function onSubmit() {
if (!form.value.reportValidity()) return;
busy.value = true;
const data = {
@@ -134,6 +137,8 @@ defineExpose({
groups.value = result;
applinkDialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
});
@@ -147,16 +152,16 @@ defineExpose({
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
:confirm-label="mode === 'edit' ? $t('main.dialog.save') : $t('main.action.add')"
:confirm-active="isValid"
:confirm-active="!busy && isFormValid"
:confirm-busy="busy"
@confirm="onSubmit()"
@alternate="onRemove()"
>
<InputDialog ref="inputDialog" />
<form @submit.prevent="onSubmit()" autocomplete="off">
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input style="display: none;" type="submit" :disabled="!isValid" />
<input style="display: none;" type="submit" />
<p class="has-error" v-show="error.generic">{{ error.generic }}</p>

22
dashboard/src/components/DisableTwoFADialog.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, useTemplateRef, computed } from 'vue';
import { ref, useTemplateRef } from 'vue';
import { PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
import ProfileModel from '../models/ProfileModel.js';
@@ -13,14 +13,14 @@ const formError = ref({});
const busy = ref (false);
const password = ref('');
const isFormValid = computed(() => {
if (!password.value) return false;
return true;
});
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
}
async function onSubmit() {
if (!isFormValid.value) return;
if (!form.value.reportValidity()) return;
busy.value = true;
formError.value = {};
@@ -51,6 +51,8 @@ defineExpose({
busy.value = false;
formError.value = {};
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
});
@@ -68,15 +70,15 @@ defineExpose({
reject-style="secondary"
@confirm="onSubmit"
>
<form @submit.prevent="onSubmit">
<form @submit.prevent="onSubmit" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input type="submit" style="display: none;" :disabled="!isFormValid"/>
<input type="submit" style="display: none;">
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
<FormGroup :has-error="formError.password">
<label>{{ $t('profile.disable2FA.password') }}</label>
<PasswordInput v-model="password" />
<PasswordInput v-model="password" required />
<div class="error-label" v-if="formError.password">{{ formError.password }}</div>
</FormGroup>
</fieldset>

27
dashboard/src/components/FallbackEmailDialog.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, useTemplateRef, computed } from 'vue';
import { ref, useTemplateRef } from 'vue';
import { EmailInput, PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
import { isValidEmail } from '@cloudron/pankow/utils';
import ProfileModel from '../models/ProfileModel.js';
@@ -15,15 +15,18 @@ const busy = ref (false);
const email = ref('');
const password = ref('');
const isFormValid = computed(() => {
if (email.value && !isValidEmail(email.value)) return false;
if (!password.value) return false;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
return true;
});
if (isFormValid.value) {
if (!isValidEmail(email.value)) isFormValid.value = false;
}
}
async function onSubmit() {
if (!isFormValid.value) return;
if (!form.value.reportValidity()) return;
busy.value = true;
formError.value = {};
@@ -56,6 +59,8 @@ defineExpose({
busy.value = false;
formError.value = {};
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
});
@@ -73,21 +78,21 @@ defineExpose({
reject-style="secondary"
@confirm="onSubmit"
>
<form @submit.prevent="onSubmit" autocomplete="off">
<form @submit.prevent="onSubmit" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input type="submit" style="display: none;" :disabled="!isFormValid"/>
<input type="submit" style="display: none;"/>
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
<FormGroup :has-error="formError.email">
<label>{{ $t('profile.changeEmail.email') }}</label>
<EmailInput v-model="email" />
<EmailInput v-model="email" required/>
<div class="error-label" v-if="formError.email">{{ formError.email }}</div>
</FormGroup>
<FormGroup :has-error="formError.password">
<label>{{ $t('profile.changeEmail.password') }}</label>
<PasswordInput v-model="password" />
<PasswordInput v-model="password" required/>
<div class="error-label" v-if="formError.password">{{ formError.password }}</div>
</FormGroup>
</fieldset>

27
dashboard/src/components/Ipv4Config.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import NetworkModel from '../models/NetworkModel.js';
@@ -36,12 +36,16 @@ const editProvider = ref('');
const editAddress = ref('');
const editInterfaceName = ref('');
const isValid = computed(() => {
if (editProvider.value === 'fixed' && !editAddress.value) return false;
if (editProvider.value === 'network-interface' && !editInterfaceName.value) return false;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
return true;
});
if (isFormValid.value) {
if (editProvider.value === 'fixed' && !editAddress.value) isFormValid.value = false;
if (editProvider.value === 'network-interface' && !editInterfaceName.value) isFormValid.value = false;
}
}
async function refresh() {
let [error, result] = await networkModel.getIpv4Config();
@@ -65,10 +69,11 @@ function onConfigure() {
editInterfaceName.value = interfaceName.value || '';
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
editBusy.value = true;
editError.value = {};
@@ -100,19 +105,19 @@ onMounted(async () => {
:title="$t('network.configureIp.title')"
:confirm-label="$t('main.dialog.save')"
:confirm-busy="editBusy"
:confirm-active="isValid"
:confirm-active="!editBusy && isFormValid"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmit()"
>
<div>
<form novalidate @submit.prevent="onSubmit()" autocomplete="off">
<form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="editBusy">
<input style="display: none" type="submit" :disabled="editBusy || !isValid"/>
<input style="display: none" type="submit"/>
<FormGroup>
<label for="providerInput">{{ $t('network.ip.provider') }} <sup><a href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name"/>
<SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name" required/>
<div class="has-error" v-show="editError.generic">{{ editError.generic }}</div>
</FormGroup>

27
dashboard/src/components/Ipv6Config.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import NetworkModel from '../models/NetworkModel.js';
@@ -36,12 +36,16 @@ const editProvider = ref('');
const editAddress = ref('');
const editInterfaceName = ref('');
const isValid = computed(() => {
if (editProvider.value === 'fixed' && !editAddress.value) return false;
if (editProvider.value === 'network-interface' && !editInterfaceName.value) return false;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
return true;
});
if (isFormValid.value) {
if (editProvider.value === 'fixed' && !editAddress.value) isFormValid.value = false;
if (editProvider.value === 'network-interface' && !editInterfaceName.value) isFormValid.value = false;
}
}
async function refresh() {
let [error, result] = await networkModel.getIpv6Config();
@@ -65,10 +69,11 @@ function onConfigure() {
editInterfaceName.value = interfaceName.value || '';
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
editBusy.value = true;
editError.value = {};
@@ -100,19 +105,19 @@ onMounted(async () => {
:title="$t('network.configureIpv6.title')"
:confirm-label="$t('main.dialog.save')"
:confirm-busy="editBusy"
:confirm-active="isValid"
:confirm-active="!editBusy && isFormValid"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmit()"
>
<div>
<form novalidate @submit.prevent="onSubmit()" autocomplete="off">
<form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="editBusy">
<input style="display: none" type="submit" :disabled="editBusy || !isValid"/>
<input style="display: none" type="submit" />
<FormGroup>
<label for="providerInput">{{ $t('network.ip.provider') }} <sup><a href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name"/>
<SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name" required/>
<div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
</FormGroup>

25
dashboard/src/components/LdapServer.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, FormGroup, ClipboardButton, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
import Section from './Section.vue';
import DomainsModel from '../models/DomainsModel.js';
@@ -19,17 +19,14 @@ const ldapUrl = ref('');
const secret = ref('');
const allowlist = ref('');
const isValid = computed(() => {
if (enabled.value) {
if (!secret.value) return false;
if (!allowlist.value) return false;
}
return true;
});
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
}
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
busy.value = true;
editError.value = {};
@@ -65,6 +62,8 @@ onMounted(async () => {
enabled.value = result.enabled;
secret.value = result.secret;
allowlist.value = result.allowlist;
setTimeout(checkValidity, 100); // update state of the confirm button
});
</script>
@@ -73,9 +72,9 @@ onMounted(async () => {
<Section :title="$t('users.exposedLdap.title')">
<div>{{ $t('users.exposedLdap.description') }}</div>
<form @submit.prevent="onSubmit()" autocomplete="off">
<form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input style="display: none" type="submit" :disabled="busy || !isValid" />
<input style="display: none" type="submit" />
<Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" help-url="https://docs.cloudron.io/user-directory/#ldap-directory-server"/>
@@ -108,6 +107,6 @@ onMounted(async () => {
<div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
<br/>
<Button :loading="busy" :disabled="!isValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
<Button :loading="busy" :disabled="!isFormValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
</Section>
</template>

28
dashboard/src/components/PasswordChangeDialog.vue
View File

@@ -15,16 +15,18 @@ 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;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
return true;
});
if (isFormValid.value) {
if (newPasswordRepeat.value !== newPassword.value) isFormValid.value = false;
}
}
async function onSubmit() {
if (!isFormValid.value) return;
if (!form.value.reportValidity()) return;
busy.value = true;
formError.value = {};
@@ -58,6 +60,8 @@ defineExpose({
busy.value = false;
formError.value = {};
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
});
@@ -75,27 +79,27 @@ defineExpose({
reject-style="secondary"
@confirm="onSubmit"
>
<form @submit.prevent="onSubmit">
<form @submit.prevent="onSubmit" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input type="submit" style="display: none;" :disabled="!isFormValid"/>
<input type="submit" style="display: none;">
<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" />
<PasswordInput v-model="newPassword" required/>
<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" />
<PasswordInput v-model="newPasswordRepeat" required />
<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" />
<PasswordInput v-model="password" required />
<div class="error-label" v-if="formError.password">{{ formError.password }}</div>
</FormGroup>
</fieldset>

28
dashboard/src/components/PrimaryEmailDialog.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, useTemplateRef, computed } from 'vue';
import { ref, useTemplateRef } from 'vue';
import { EmailInput, PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
import { isValidEmail } from '@cloudron/pankow/utils';
import ProfileModel from '../models/ProfileModel.js';
@@ -15,15 +15,19 @@ const busy = ref (false);
const email = ref('');
const password = ref('');
const isFormValid = computed(() => {
if (!isValidEmail(email.value)) return false;
if (!password.value) return false;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
if (isFormValid.value) {
if (!isValidEmail(email.value)) isFormValid.value = false;
}
}
return true;
});
async function onSubmit() {
if (!isFormValid.value) return;
if (!form.value.reportValidity()) return;
busy.value = true;
formError.value = {};
@@ -56,6 +60,8 @@ defineExpose({
busy.value = false;
formError.value = {};
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
});
@@ -73,21 +79,21 @@ defineExpose({
reject-style="secondary"
@confirm="onSubmit"
>
<form @submit.prevent="onSubmit" autocomplete="off">
<form @submit.prevent="onSubmit" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input type="submit" style="display: none;" :disabled="!isFormValid"/>
<input type="submit" style="display: none;"/>
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
<FormGroup :has-error="formError.email">
<label>{{ $t('profile.changeEmail.email') }}</label>
<EmailInput v-model="email" />
<EmailInput v-model="email" required/>
<div class="error-label" v-if="formError.email">{{ formError.email }}</div>
</FormGroup>
<FormGroup :has-error="formError.password">
<label>{{ $t('profile.changeEmail.password') }}</label>
<PasswordInput v-model="password" />
<PasswordInput v-model="password" required />
<div class="error-label" v-if="formError.password">{{ formError.password }}</div>
</FormGroup>
</fieldset>

24
dashboard/src/views/ActivationView.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, computed, onMounted } from 'vue';
import { ref, useTemplateRef, onMounted } from 'vue';
import { Button, Checkbox, FormGroup, TextInput, PasswordInput, EmailInput } from '@cloudron/pankow';
import ProvisionModel from '../models/ProvisionModel.js';
import { redirectIfNeeded } from '../utils.js';
@@ -16,18 +16,14 @@ const password = ref('');
const setupToken = ref('');
const acceptLicense = ref(false);
const isValid = computed(() => {
if (!displayName.value) return false;
if (!email.value) return false;
if (!username.value) return false;
if (!password.value) return false;
if (!acceptLicense.value) return false;
return true;
});
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
}
async function onOwnerSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
busy.value = true;
formError.value = {};
@@ -85,9 +81,9 @@ onMounted(async () => {
<div class="has-error" v-if="formError.generic">{{ formError.generic }}</div>
<form @submit.prevent="onOwnerSubmit()" autocomplete="off">
<form @submit.prevent="onOwnerSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="busy">
<input type="submit" style="display: none;" :disabled="busy || !isValid"/>
<input type="submit" style="display: none;"/>
<FormGroup :has-error="formError.displayName">
<label for="displayNameInput">Full name</label>
@@ -118,7 +114,7 @@ onMounted(async () => {
</fieldset>
<div class="actions">
<Button :disabled="busy || !isValid" :loading="busy" @click="onOwnerSubmit()">Create admin</Button>
<Button :disabled="busy || !isFormValid" :loading="busy" @click="onOwnerSubmit()">Create admin</Button>
</div>
</form>
</div>

26
dashboard/src/views/OpenIdView.vue
View File

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, ClipboardButton, SingleSelect, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import DashboardModel from '../models/DashboardModel.js';
@@ -59,13 +59,11 @@ const signatureAlgorithms = [
{ name: 'EdDSA', value: 'EdDSA' },
];
const isValid = computed(() => {
if (!clientName.value) return false;
if (!clientLoginRedirectUri.value) return false;
if (!clientTokenSignatureAlgorithm.value) return false;
return true;
});
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
}
async function onAdd() {
submitBusy.value = false;
@@ -76,6 +74,7 @@ async function onAdd() {
clientTokenSignatureAlgorithm.value = 'RS256';
editDialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onEdit(client) {
@@ -87,10 +86,11 @@ async function onEdit(client) {
clientTokenSignatureAlgorithm.value = client.tokenSignatureAlgorithm;
editDialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
submitBusy.value = true;
let error, client;
@@ -185,15 +185,15 @@ onMounted(async () => {
<Dialog ref="editDialog"
:title="clientId ? $t('oidc.editClientDialog.title') : $t('oidc.newClientDialog.title')"
:confirm-active="isValid"
:confirm-active="!submitBusy && isFormValid"
:confirm-busy="submitBusy"
:confirm-label="clientId ? $t('main.dialog.save') : $t('oidc.newClientDialog.createAction')"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmit()"
>
<form novalidate @submit.prevent="onSubmit()" autocomplete="off">
<input style="display: none" type="submit" :disabled="!isValid"/>
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<input style="display: none" type="submit" />
<div class="error-label" v-if="submitError">{{ submitError }}</div>
@@ -226,7 +226,7 @@ onMounted(async () => {
<FormGroup>
<label class="control-label">{{ $t('oidc.client.signingAlgorithm') }}</label>
<SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" />
<SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" required />
</FormGroup>
</form>
</Dialog>