wip

src/client/components/drive.file.vue

@@ -32,11 +32,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-//import updateAvatar from '../api/update-avatar';
-//import updateBanner from '../api/update-banner';
-import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import XFileThumbnail from './drive-file-thumbnail.vue';
 import bytes from '../filters/bytes';
 import * as os from '@/os';
 
@@ -162,11 +160,11 @@ export default defineComponent({
 		},
 
 		setAsAvatar() {
-			updateAvatar(this.$root)(this.file);
+			os.updateAvatar(this.file);
 		},
 
 		setAsBanner() {
-			updateBanner(this.$root)(this.file);
+			os.updateBanner(this.file);
 		},
 
 		addApp() {

src/client/components/form-window.vue

@@ -1,5 +1,5 @@
 <template>
-<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()" :can-close="false">
+<x-window ref="window" :width="400" :height="450" :no-padding="true" @close="$emit('done')" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()" :can-close="false">
 	<template #header>
 		{{ title }}
 	</template>
@@ -53,6 +53,8 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['done'],
+
 	data() {
 		return {
 			values: {}
@@ -61,14 +63,13 @@ export default defineComponent({
 
 	created() {
 		for (const item in this.form) {
-			Vue.set(this.values, item, this.form[item].hasOwnProperty('default') ? this.form[item].default : null);
+			this.values[item] = this.form[item].hasOwnProperty('default') ? this.form[item].default : null;
 		}
 	},
 
 	methods: {
 		ok() {
-			this.$emit('ok', this.values);
-			this.$refs.window.close();
+			this.$emit('done', this.values);
 		},
 	}
 });

src/client/os.ts

@@ -144,6 +144,27 @@ export function dialog(props: Record<string, any>, opts?: { cancelableByBgClick:
 	});
 }
 
+export function form(title, form, opts?) {
+	return new PCancelable((resolve, reject, onCancel) => {
+		const dialog = modal(defineAsyncComponent(() => import('@/components/form-window.vue')), { title, form }, {}, { cancelableByBgClick: opts?.cancelableByBgClick });
+
+		dialog.then(result => {
+			if (result) {
+				resolve(result);
+			} else {
+				resolve({ canceled: true });
+			}
+		});
+
+		dialog.catch(reject);
+
+		onCancel.shouldReject = false;
+		onCancel(() => {
+			dialog.cancel();
+		});
+	});
+}
+
 export async function selectUser() {
 	const component = await import('@/components/user-select.vue');
 	return new Promise((res, rej) => {

src/client/pages/my-settings/index.vue

@@ -37,7 +37,7 @@
 
 	<router-link class="_panel _buttonPrimary" to="/my/apps" style="margin: var(--margin) auto;">{{ $t('installedApps') }}</router-link>
 
-	<button class="_panel _buttonPrimary" @click="$root.signout()" style="margin: var(--margin) auto;">{{ $t('logout') }}</button>
+	<button class="_panel _buttonPrimary" @click="signout()" style="margin: var(--margin) auto;">{{ $t('logout') }}</button>
 </div>
 </template>
 
@@ -133,6 +133,11 @@ export default defineComponent({
 					});
 				});
 			});
+		},
+
+		signout() {
+			this.$store.dispatch('logout');
+			location.href = '/';
 		}
 	}
 });

src/client/pages/preferences/plugins.vue

@@ -173,7 +173,7 @@ export default defineComponent({
 				config[key].default = this.selectedPlugin.configData[key];
 			}
 
-			const { canceled, result } = await this.$root.form(this.selectedPlugin.name, config);
+			const { canceled, result } = await os.form(this.selectedPlugin.name, config);
 			if (canceled) return;
 
 			this.$store.commit('deviceUser/configPlugin', {

src/client/widgets/define.ts

@@ -51,7 +51,7 @@ export default function <T extends Form>(data: {
 				for (const item of Object.keys(form)) {
 					form[item].default = this.props[item];
 				}
-				const { canceled, result } = await this.$root.form(data.name, form);
+				const { canceled, result } = await os.form(data.name, form);
 				if (canceled) return;
 
 				for (const key of Object.keys(result)) {