From 37b26504e319453fd771b893b6bb86bbb38a73c4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 21 Sep 2020 11:24:55 +0900
Subject: [PATCH] wip

---
 src/client/components/drive.file.vue     | 10 ++++------
 src/client/components/form-window.vue    |  9 +++++----
 src/client/os.ts                         | 21 +++++++++++++++++++++
 src/client/pages/my-settings/index.vue   |  7 ++++++-
 src/client/pages/preferences/plugins.vue |  2 +-
 src/client/widgets/define.ts             |  2 +-
 6 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index 1a55bb6e7f..47526704e0 100644
--- a/src/client/components/drive.file.vue
+++ b/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() {
diff --git a/src/client/components/form-window.vue b/src/client/components/form-window.vue
index 0770e6ad9a..d17eeb0985 100644
--- a/src/client/components/form-window.vue
+++ b/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);
 		},
 	}
 });
diff --git a/src/client/os.ts b/src/client/os.ts
index 1e00abacf1..05f159ad73 100644
--- a/src/client/os.ts
+++ b/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) => {
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 7688950e8f..650b89a75d 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/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 = '/';
 		}
 	}
 });
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index 8d3f978aca..48f038e0f5 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/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', {
diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index b2b63dd6b6..0af61e9790 100644
--- a/src/client/widgets/define.ts
+++ b/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)) {