Johannes Zellner
98 lines
3.4 KiB
Vue
98 lines
3.4 KiB
Vue
<script setup>
|
|
|
|
import { ref, onMounted, inject } from 'vue';
|
|
import { API_ORIGIN } from '../constants.js';
|
|
import Section from './Section.vue';
|
|
import SettingsItem from './SettingsItem.vue';
|
|
import EditableField from './EditableField.vue';
|
|
import ImagePicker from './ImagePicker.vue';
|
|
import BrandingModel from '../models/BrandingModel.js';
|
|
import DashboardModel from '../models/DashboardModel.js';
|
|
|
|
const brandingModel = BrandingModel.create();
|
|
const dashboardModel = DashboardModel.create();
|
|
|
|
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 window.cloudron.onError(error);
|
|
|
|
name.value = newName;
|
|
}
|
|
|
|
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.unsetBackground();
|
|
if (error) return console.error(error);
|
|
backgroundUrl.value = '';
|
|
}
|
|
|
|
// Footer
|
|
const footer = ref('');
|
|
const savingFooter = ref(false);
|
|
|
|
async function onFooterSave(newFooter) {
|
|
savingFooter.value = true;
|
|
|
|
const [error] = await brandingModel.setFooter(newFooter);
|
|
savingFooter.value = false;
|
|
if (error) return console.error(error);
|
|
|
|
footer.value = newFooter;
|
|
}
|
|
|
|
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>
|
|
<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 mode="editable" :src="avatarUrl" :save-handler="onAvatarSubmit" :size="512" display-height="128px" :disabled="!features.branding" fallback-src="/api/v1/cloudron/avatar"/>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
|
|
<label>{{ $t('branding.backgroundImage') }}</label>
|
|
<ImagePicker mode="editable" :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>
|
|
<EditableField :label="$t('branding.cloudronName')" :saving="savingName" :value="name" :disabled="!features.branding" @save="onNameSave" :maxlength="64"/>
|
|
</SettingsItem>
|
|
|
|
<SettingsItem>
|
|
<EditableField :label="$t('branding.footer.title')" helpUrl="https://docs.cloudron.io/branding/#footer" multiline markdown :saving="savingFooter" :value="footer" :disabled="!features.branding" @save="onFooterSave"/>
|
|
</SettingsItem>
|
|
</Section>
|
|
</template>
|