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:
		
							parent
							
								
									fc02f8fc93
								
							
						
					
					
						commit
						80355fb08e
					
				
					 1 changed files with 33 additions and 45 deletions
				
			
		|  | @ -1,64 +1,52 @@ | |||
| <template> | ||||
| <div class="_formRoot"> | ||||
| 	<FormInfo warn class="_formBlock">{{ $ts._accountDelete.mayTakeTime }}</FormInfo> | ||||
| 	<FormInfo class="_formBlock">{{ $ts._accountDelete.sendEmail }}</FormInfo> | ||||
| 	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton> | ||||
| 	<FormButton v-else disabled>{{ $ts._accountDelete.inProgress }}</FormButton> | ||||
| 	<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo> | ||||
| 	<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo> | ||||
| 	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton> | ||||
| 	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton> | ||||
| </div> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineAsyncComponent, defineComponent } from 'vue'; | ||||
| <script lang="ts" setup> | ||||
| import { defineExpose } from 'vue'; | ||||
| import FormInfo from '@/components/ui/info.vue'; | ||||
| import FormButton from '@/components/ui/button.vue'; | ||||
| import * as os from '@/os'; | ||||
| import { signout } from '@/account'; | ||||
| import * as symbols from '@/symbols'; | ||||
| import { i18n } from '@/i18n'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		FormButton, | ||||
| 		FormInfo, | ||||
| 	}, | ||||
| async function deleteAccount() { | ||||
| 	{ | ||||
| 		const { canceled } = await os.confirm({ | ||||
| 			type: 'warning', | ||||
| 			text: i18n.ts.deleteAccountConfirm, | ||||
| 		}); | ||||
| 		if (canceled) return; | ||||
| 	} | ||||
| 
 | ||||
| 	emits: ['info'], | ||||
| 	const { canceled, result: password } = await os.inputText({ | ||||
| 		title: i18n.ts.password, | ||||
| 		type: 'password' | ||||
| 	}); | ||||
| 	if (canceled) return; | ||||
| 
 | ||||
| 	data() { | ||||
| 		return { | ||||
| 			[symbols.PAGE_INFO]: { | ||||
| 				title: this.$ts._accountDelete.accountDelete, | ||||
| 				icon: 'fas fa-exclamation-triangle', | ||||
| 				bg: 'var(--bg)', | ||||
| 			}, | ||||
| 		} | ||||
| 	}, | ||||
| 	await os.apiWithDialog('i/delete-account', { | ||||
| 		password: password | ||||
| 	}); | ||||
| 
 | ||||
| 	methods: { | ||||
| 		async deleteAccount() { | ||||
| 			{ | ||||
| 				const { canceled } = await os.confirm({ | ||||
| 					type: 'warning', | ||||
| 					text: this.$ts.deleteAccountConfirm, | ||||
| 				}); | ||||
| 				if (canceled) return; | ||||
| 			} | ||||
| 	await os.alert({ | ||||
| 		title: i18n.ts._accountDelete.started, | ||||
| 	}); | ||||
| 
 | ||||
| 			const { canceled, result: password } = await os.inputText({ | ||||
| 				title: this.$ts.password, | ||||
| 				type: 'password' | ||||
| 			}); | ||||
| 			if (canceled) return; | ||||
| 	await signout(); | ||||
| } | ||||
| 
 | ||||
| 			await os.apiWithDialog('i/delete-account', { | ||||
| 				password: password | ||||
| 			}); | ||||
| 
 | ||||
| 			await os.alert({ | ||||
| 				title: this.$ts._accountDelete.started, | ||||
| 			}); | ||||
| 
 | ||||
| 			signout(); | ||||
| 		} | ||||
| defineExpose({ | ||||
| 	[symbols.PAGE_INFO]: { | ||||
| 		title: i18n.ts._accountDelete.accountDelete, | ||||
| 		icon: 'fas fa-exclamation-triangle', | ||||
| 		bg: 'var(--bg)', | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue