Refactor delete-account to use Composition API (#8572)
* refactor(client): refactor delete-account to use Composition API * Apply review suggestion from @Johann150 Co-authored-by: Johann150 <johann@qwertqwefsday.eu> Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
		| @@ -1,50 +1,32 @@ | |||||||
| <template> | <template> | ||||||
| <div class="_formRoot"> | <div class="_formRoot"> | ||||||
| 	<FormInfo warn class="_formBlock">{{ $ts._accountDelete.mayTakeTime }}</FormInfo> | 	<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo> | ||||||
| 	<FormInfo class="_formBlock">{{ $ts._accountDelete.sendEmail }}</FormInfo> | 	<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo> | ||||||
| 	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton> | 	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton> | ||||||
| 	<FormButton v-else disabled>{{ $ts._accountDelete.inProgress }}</FormButton> | 	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton> | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script lang="ts"> | <script lang="ts" setup> | ||||||
| import { defineAsyncComponent, defineComponent } from 'vue'; | import { defineExpose } from 'vue'; | ||||||
| import FormInfo from '@/components/ui/info.vue'; | import FormInfo from '@/components/ui/info.vue'; | ||||||
| import FormButton from '@/components/ui/button.vue'; | import FormButton from '@/components/ui/button.vue'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
| import { signout } from '@/account'; | import { signout } from '@/account'; | ||||||
| import * as symbols from '@/symbols'; | import * as symbols from '@/symbols'; | ||||||
|  | import { i18n } from '@/i18n'; | ||||||
|  |  | ||||||
| export default defineComponent({ | async function deleteAccount() { | ||||||
| 	components: { |  | ||||||
| 		FormButton, |  | ||||||
| 		FormInfo, |  | ||||||
| 	}, |  | ||||||
|  |  | ||||||
| 	emits: ['info'], |  | ||||||
| 	 |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			[symbols.PAGE_INFO]: { |  | ||||||
| 				title: this.$ts._accountDelete.accountDelete, |  | ||||||
| 				icon: 'fas fa-exclamation-triangle', |  | ||||||
| 				bg: 'var(--bg)', |  | ||||||
| 			}, |  | ||||||
| 		} |  | ||||||
| 	}, |  | ||||||
|  |  | ||||||
| 	methods: { |  | ||||||
| 		async deleteAccount() { |  | ||||||
| 	{ | 	{ | ||||||
| 		const { canceled } = await os.confirm({ | 		const { canceled } = await os.confirm({ | ||||||
| 			type: 'warning', | 			type: 'warning', | ||||||
| 					text: this.$ts.deleteAccountConfirm, | 			text: i18n.ts.deleteAccountConfirm, | ||||||
| 		}); | 		}); | ||||||
| 		if (canceled) return; | 		if (canceled) return; | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	const { canceled, result: password } = await os.inputText({ | 	const { canceled, result: password } = await os.inputText({ | ||||||
| 				title: this.$ts.password, | 		title: i18n.ts.password, | ||||||
| 		type: 'password' | 		type: 'password' | ||||||
| 	}); | 	}); | ||||||
| 	if (canceled) return; | 	if (canceled) return; | ||||||
| @@ -54,11 +36,17 @@ export default defineComponent({ | |||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
| 	await os.alert({ | 	await os.alert({ | ||||||
| 				title: this.$ts._accountDelete.started, | 		title: i18n.ts._accountDelete.started, | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
| 			signout(); | 	await signout(); | ||||||
| } | } | ||||||
|  |  | ||||||
|  | defineExpose({ | ||||||
|  | 	[symbols.PAGE_INFO]: { | ||||||
|  | 		title: i18n.ts._accountDelete.accountDelete, | ||||||
|  | 		icon: 'fas fa-exclamation-triangle', | ||||||
|  | 		bg: 'var(--bg)', | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
| </script> | </script> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 Andreas Nedbal
					Andreas Nedbal