Require display name to not be empty when changed from the profile view
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user