From 60d3eba71214f745ecb778bba05225f21a66c760 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Thu, 11 Sep 2025 14:54:39 +0200
Subject: [PATCH] Convert footer editing to EditableField

---
 dashboard/src/components/EditableField.vue | 11 ++++--
 dashboard/src/views/AppearanceView.vue     | 43 +++++-----------------
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/dashboard/src/components/EditableField.vue b/dashboard/src/components/EditableField.vue
index e497468ed..676d62021 100644
--- a/dashboard/src/components/EditableField.vue
+++ b/dashboard/src/components/EditableField.vue
@@ -5,9 +5,11 @@ import { Button, FormGroup, TextInput } from '@cloudron/pankow';
 
 const props = defineProps({
   label: { type: String, required: true },
+  helpUrl: { type: String, required: false },
   value: { type: String, required: true },
   disabled: { type: Boolean, default: false },
-  saving: { type: Boolean, default: false }
+  saving: { type: Boolean, default: false },
+  multiline: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['save']);
@@ -47,9 +49,10 @@ function cancel() {
 
 <template>
   <FormGroup>
-    <label>{{ label }}</label>
-    <div v-if="editing" style="display: flex; gap: 6px">
-      <TextInput ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving"/>
+    <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="2" cols="80" v-model="draftValue" @keydown.enter="save()" :disabled="saving"></textarea>
       <Button tool @click="save" :disabled="saving">{{ $t('main.dialog.save') }}</Button>
       <Button tool plain secondary @click="cancel" :disabled="saving">{{ $t('main.dialog.cancel') }}</Button>
     </div>
diff --git a/dashboard/src/views/AppearanceView.vue b/dashboard/src/views/AppearanceView.vue
index 0a21ccfb2..a0e698af2 100644
--- a/dashboard/src/views/AppearanceView.vue
+++ b/dashboard/src/views/AppearanceView.vue
@@ -14,23 +14,22 @@ import DashboardModel from '../models/DashboardModel.js';
 const brandingModel = BrandingModel.create();
 const dashboardModel = DashboardModel.create();
 
-const name = ref('');
-const footer = ref('');
 const avatarUrl = ref(`${API_ORIGIN}/api/v1/cloudron/avatar?${String(Math.random()).slice(2)}`);
 const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Math.random()).slice(2)}`);
 
 const features = inject('features');
 
+const name = ref('');
 const savingName = ref(false);
 
 async function onNameSave(newName) {
   savingName.value = true;
 
   const [error] = await brandingModel.setName(newName);
+  savingName.value = false;
   if (error) return console.error(error);
 
   name.value = newName;
-  savingName.value = false;
 }
 
 async function onAvatarSubmit(file) {
@@ -50,26 +49,17 @@ async function onBackgroundUnset() {
 }
 
 // Footer
-const editingFooter = ref(false);
-const editFooter = ref('');
-const editFooterBusy = ref(false);
+const footer = ref('');
+const savingFooter = ref(false);
 
-function onChangeFooter(currentFooter) {
-  editFooterBusy.value = false;
-  editingFooter.value = true;
-  editFooter.value = currentFooter;
-}
+async function onFooterSave(newFooter) {
+  savingFooter.value = true;
 
-async function onChangeFooterSubmit() {
-  editFooterBusy.value = true;
-
-  const [error] = await brandingModel.setFooter(editFooter.value);
+  const [error] = await brandingModel.setFooter(newFooter);
+  savingFooter.value = false;
   if (error) return console.error(error);
 
-  footer.value = editFooter.value;
-  editingFooter.value = false;
-  editFooterBusy.value = false;
-  editFooter.value = '';
+  footer.value = newFooter;
 }
 
 const applinkDialog = useTemplateRef('applinkDialog');
@@ -116,20 +106,7 @@ onMounted(async () => {
       </SettingsItem>
 
       <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('branding.footer.title') }}</label>
-          <div>{{ $t('branding.footer.description') }} <sup><a href="https://docs.cloudron.io/branding/#footer" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
-        </FormGroup>
-        <Transition name="slide-up" mode="out-in">
-          <div v-if="editingFooter" style="display: flex; position: relative; align-items: center; gap: 6px; flex-grow: 1; justify-content: right;">
-            <textarea v-model="editFooter" @keydown.enter="onChangeFooterSubmit()" :disabled="editFooterBusy" style="flex-grow: 1; height: 120px;"></textarea>
-            <Button tool @click="onChangeFooterSubmit()" :disabled="editFooterBusy" :loading="editFooterBusy">{{ $t('main.dialog.save') }}</Button>
-            <Button tool plain secondary @click="editingFooter = false" :disabled="editFooterBusy">{{ $t('main.dialog.cancel') }}</Button>
-          </div>
-          <div v-else style="display: flex; position: relative; align-items: center">
-            <Button tool plain @click="onChangeFooter(footer)" :disabled="!features.branding">{{ $t('main.dialog.edit') }}</Button>
-          </div>
-        </Transition>
+        <EditableField :label="$t('branding.footer.title')" helpUrl="https://docs.cloudron.io/branding/#footer" multiline :saving="savingFooter" :value="footer" :disabled="!features.branding" @save="onFooterSave"/>
       </SettingsItem>
 
       <SettingsItem>