Require display name to not be empty when changed from the profile view

This commit is contained in:
Johannes Zellner
2025-11-13 17:42:33 +01:00
parent 3f8dfdd938
commit 5717f77e00
2 changed files with 7 additions and 10 deletions
+5 -3
View File
@@ -9,6 +9,7 @@ const props = defineProps({
helpUrl: { type: String, required: false },
value: { type: String, required: true },
disabled: { type: Boolean, default: false },
required: { type: Boolean, default: false },
saving: { type: Boolean, default: false },
multiline: { type: Boolean, default: false },
markdown: { type: Boolean, default: false },
@@ -41,6 +42,7 @@ function startEdit() {
}
function save() {
if (props.required && !draftValue.value) return;
emit('save', draftValue.value);
}
@@ -54,9 +56,9 @@ function cancel() {
<FormGroup>
<label>{{ label }} <sup v-if="helpUrl"><a :href="helpUrl" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div v-if="editing" style="display: flex; align-items: center; gap: 6px">
<TextInput v-if="!multiline" ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving"/>
<textarea v-else ref="textInput" :rows="rows" cols="80" v-model="draftValue" :disabled="saving"></textarea>
<Button tool @click="save" :disabled="saving">{{ $t('main.dialog.save') }}</Button>
<TextInput v-if="!multiline" ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving" :required="required ? true : null"/>
<textarea v-else ref="textInput" :rows="rows" cols="80" v-model="draftValue" :disabled="saving" :required="required ? true : null"></textarea>
<Button tool @click="save" :disabled="saving || (required && !draftValue)">{{ $t('main.dialog.save') }}</Button>
<Button tool plain secondary @click="cancel" :disabled="saving">{{ $t('main.dialog.cancel') }}</Button>
</div>
<div v-else>
+2 -7
View File
@@ -1,10 +1,7 @@
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import { ref, onMounted, useTemplateRef, inject } from 'vue';
import { Button, SingleSelect, Dialog, InputDialog, TextInput, InputGroup, FormGroup } from '@cloudron/pankow';
import { Button, SingleSelect, Dialog, TextInput, InputGroup, FormGroup } from '@cloudron/pankow';
import { setLanguage } from '../i18n.js';
import { TOKEN_TYPES } from '../constants.js';
import NotificationSettings from '../components/NotificationSettings.vue';
@@ -35,7 +32,6 @@ const refreshProfile = inject('refreshProfile');
const savingDisplayName = ref(false);
const config = ref({});
const inputDialog = useTemplateRef('inputDialog');
const primaryEmailDialog = useTemplateRef('primaryEmailDialog');
const fallbackEmailDialog = useTemplateRef('fallbackEmailDialog');
const passwordChangeDialog = useTemplateRef('passwordChangeDialog');
@@ -182,7 +178,6 @@ onMounted(async () => {
<template>
<div class="content" style="max-width: 700px;">
<InputDialog ref="inputDialog" />
<PrimaryEmailDialog ref="primaryEmailDialog" @success="refreshProfile"/>
<FallbackEmailDialog ref="fallbackEmailDialog" @success="refreshProfile"/>
<PasswordChangeDialog ref="passwordChangeDialog" @success="refreshProfile"/>
@@ -230,7 +225,7 @@ onMounted(async () => {
</SettingsItem>
<SettingsItem>
<EditableField :label="$t('main.displayName')" :saving="savingDisplayName" :value="profile.displayName" :disabled="config.profileLocked || profile.source || !profile.username" @save="onDisplayNameSave"/>
<EditableField :label="$t('main.displayName')" :saving="savingDisplayName" :value="profile.displayName" :disabled="config.profileLocked || profile.source || !profile.username" @save="onDisplayNameSave" :required="true"/>
</SettingsItem>
<SettingsItem>