サイドバーメニューからアカウントを作成できるように (#5910)

* メニューからアカウントを作成できるようにした

* i18n

* Update signup.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

locales/ja-JP.yml

@@ -397,6 +397,7 @@ doing: "やっています"
 category: "カテゴリ"
 tags: "タグ"
 docSource: "このドキュメントのソース"
+createAccount: "アカウントを作成"
 
 _ago:
   unknown: "謎"

src/client/app.vue

@@ -364,10 +364,15 @@ export default Vue.extend({
 					icon: faCog,
 				}, null, {
 					type: 'item',
-					text: this.$t('addAcount'),
 					icon: faPlus,
+					text: this.$t('addAcount'),
 					action: () => { this.addAcount() },
-				}], ...accountItems],
+				}, {
+					type: 'item',
+					icon: faPlus,
+					text: this.$t('createAccount'),
+					action: () => { this.createAccount() },
+				}, null, ...accountItems, ]],
 				align: 'left',
 				fixed: true,
 				width: 240,
@@ -507,9 +512,20 @@ export default Vue.extend({
 			});
 		},
 
-		async switchAccount(account) {
-			const token = this.$store.state.device.accounts.find(x => x.id === account.id).token;
-			this.$root.api('i', {}, token).then(i => {
+		async createAccount() {
+			this.$root.new(await import('./components/signup-dialog.vue').then(m => m.default)).$once('signup', res => {
+				this.$store.dispatch('addAcount', res);
+				this.switchAccountWithToken(res.i);
+			});
+		},
+
+		async switchAccount(account: any) {
+			const token = this.$store.state.device.accounts.find((x: any) => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			this.$root.api('i', {}, token).then((i: any) => {
 				this.$store.dispatch('switchAccount', {
 					...i,
 					token: token

src/client/components/signup-dialog.vue

@@ -1,7 +1,7 @@
 <template>
-<x-window @closed="() => { $emit('closed'); destroyDom(); }">
+<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }">
 	<template #header>{{ $t('signup') }}</template>
-	<x-signup/>
+	<x-signup :auto-set="autoSet" @signup="onSignup"/>
 </x-window>
 </template>
 
@@ -18,5 +18,20 @@ export default Vue.extend({
 		XSignup,
 		XWindow,
 	},
+
+	props: {
+		autoSet: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	methods: {
+		onSignup(res) {
+			this.$emit('signup', res);
+			this.$refs.window.close();
+		}
+	}
 });
 </script>

src/client/components/signup.vue

@@ -84,6 +84,14 @@ export default Vue.extend({
 		}
 	},
 
+	props: {
+		autoSet: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
 	computed: {
 		meta() {
 			return this.$store.state.instance.meta;
@@ -97,6 +105,15 @@ export default Vue.extend({
 		}
 	},
 
+	created() {
+		if (this.autoSet) {
+			this.$once('signup', res => {
+				localStorage.setItem('i', res.i);
+				location.reload();
+			});
+		}
+	},
+
 	mounted() {
 		const head = document.getElementsByTagName('head')[0];
 		const script = document.createElement('script');
@@ -166,8 +183,7 @@ export default Vue.extend({
 					username: this.username,
 					password: this.password
 				}).then(res => {
-					localStorage.setItem('i', res.i);
-					location.href = '/';
+					this.$emit('signup', res);
 				});
 			}).catch(() => {
 				this.submitting = false;

src/client/pages/index.welcome.entrance.vue

@@ -62,7 +62,9 @@ export default Vue.extend({
 		},
 
 		signup() {
-			this.$root.new(XSignupDialog);
+			this.$root.new(XSignupDialog, {
+				autoSet: true
+			});
 		}
 	}
 });