Reshuffle toplevel view names and routes

dashboard/src/views/AppearanceView.vue

@@ -0,0 +1,146 @@
+<script setup>
+
+import { ref, onMounted, inject } from 'vue';
+import { Button, FormGroup, TextInput } from 'pankow';
+import { API_ORIGIN } from '../constants.js';
+import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
+import ImagePicker from '../components/ImagePicker.vue';
+import BrandingModel from '../models/BrandingModel.js';
+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');
+
+// Cloudron name
+const editingName = ref(false);
+const editName = ref('');
+const editNameBusy = ref(false);
+
+function onChangeName(currentName) {
+  editNameBusy.value = false;
+  editingName.value = true;
+  editName.value = currentName;
+}
+
+async function onChangeNameSubmit() {
+  editNameBusy.value = true;
+
+  const [error] = await brandingModel.setName(editName.value);
+  if (error) return console.error(error);
+
+  name.value = editName.value;
+  editingName.value = false;
+  editNameBusy.value = false;
+  editName.value = '';
+}
+
+async function onAvatarSubmit(file) {
+  const [error] = await brandingModel.setAvatar(file);
+  if (error) return console.error(error);
+}
+
+async function onBackgroundSubmit(file) {
+  const [error] = await brandingModel.setBackground(file);
+  if (error) return console.error(error);
+}
+
+async function onBackgroundUnset() {
+  const [error] = await brandingModel.setBackground(null);
+  if (error) return console.error(error);
+  backgroundUrl.value = '';
+}
+
+// Footer
+const editingFooter = ref(false);
+const editFooter = ref('');
+const editFooterBusy = ref(false);
+
+function onChangeFooter(currentFooter) {
+  editFooterBusy.value = false;
+  editingFooter.value = true;
+  editFooter.value = currentFooter;
+}
+
+async function onChangeFooterSubmit() {
+  editFooterBusy.value = true;
+
+  const [error] = await brandingModel.setFooter(editFooter.value);
+  if (error) return console.error(error);
+
+  footer.value = editFooter.value;
+  editingFooter.value = false;
+  editFooterBusy.value = false;
+  editFooter.value = '';
+}
+
+onMounted(async () => {
+  let [error, result] = await dashboardModel.config();
+  if (error) return console.error(error);
+  name.value = result.cloudronName;
+
+  [error, result] = await brandingModel.getFooter();
+  if (error) return console.error(error);
+  footer.value = result;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <Section :title="$t('branding.title')" :title-badge="!features.branding ? 'Upgrade' : ''">
+      <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
+        <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
+          <label>{{ $t('branding.logo') }}</label>
+          <ImagePicker :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding"/>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
+          <label>{{ $t('branding.backgroundImage') }}</label>
+          <ImagePicker :src="backgroundUrl" :save-handler="onBackgroundSubmit" :unset-handler="onBackgroundUnset" :disabled="!features.branding" fallback-src="/img/background-image-placeholder.svg" display-height="128px" :max-size="1280"/>
+        </div>
+      </div>
+
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('branding.cloudronName') }}</label>
+          <div>{{ name }}</div>
+        </FormGroup>
+        <Transition name="slide-up" mode="out-in">
+          <div v-if="editingName" style="display: flex; position: relative; align-items: center; gap: 6px">
+            <TextInput v-model="editName" @keydown.enter="onChangeNameSubmit()" :disabled="editNameBusy"/>
+            <Button tool @click="onChangeNameSubmit()" :disabled="editNameBusy" :loading="editNameBusy">{{ $t('main.dialog.save') }}</Button>
+            <Button tool plain secondary @click="editingName = false" :disabled="editNameBusy">{{ $t('main.dialog.cancel') }}</Button>
+          </div>
+          <div v-else style="display: flex; position: relative; align-items: center">
+            <Button tool plain @click="onChangeName(name)" :disabled="!features.branding">{{ $t('main.dialog.edit') }}</Button>
+          </div>
+        </Transition>
+      </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>
+      </SettingsItem>
+    </Section>
+  </div>
+</template>