From df61e173c197894e03af02d1b36375d282ed1d63 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sun, 16 Jan 2022 11:02:27 +0900 Subject: [PATCH] wip: refactor(client): migrate components to composition api --- packages/client/src/components/global/ad.vue | 6 +- packages/client/src/pages/reset-password.vue | 69 ++++++++----------- packages/client/src/pages/signup-complete.vue | 58 ++++++---------- 3 files changed, 54 insertions(+), 79 deletions(-) diff --git a/packages/client/src/components/global/ad.vue b/packages/client/src/components/global/ad.vue index 49046b00a7..180dabb2a2 100644 --- a/packages/client/src/components/global/ad.vue +++ b/packages/client/src/components/global/ad.vue @@ -20,7 +20,7 @@ <script lang="ts"> import { defineComponent, ref } from 'vue'; -import { Instance, instance } from '@/instance'; +import { instance } from '@/instance'; import { host } from '@/config'; import MkButton from '@/components/ui/button.vue'; import { defaultStore } from '@/store'; @@ -48,9 +48,9 @@ export default defineComponent({ showMenu.value = !showMenu.value; }; - const choseAd = (): Instance['ads'][number] | null => { + const choseAd = (): (typeof instance)['ads'][number] | null => { if (props.specify) { - return props.specify as Instance['ads'][number]; + return props.specify as (typeof instance)['ads'][number]; } const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? { diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue index e0608654c7..8ef73858f6 100644 --- a/packages/client/src/pages/reset-password.vue +++ b/packages/client/src/pages/reset-password.vue @@ -3,62 +3,51 @@ <div class="_formRoot"> <FormInput v-model="password" type="password" class="_formBlock"> <template #prefix><i class="fas fa-lock"></i></template> - <template #label>{{ $ts.newPassword }}</template> + <template #label>{{ i18n.locale.newPassword }}</template> </FormInput> - <FormButton primary class="_formBlock" @click="save">{{ $ts.save }}</FormButton> + <FormButton primary class="_formBlock" @click="save">{{ i18n.locale.save }}</FormButton> </div> </MkSpacer> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { onMounted } from 'vue'; import FormInput from '@/components/form/input.vue'; import FormButton from '@/components/ui/button.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; +import { i18n } from '@/i18n'; +import { router } from '@/router'; -export default defineComponent({ - components: { - FormInput, - FormButton, - }, +const props = defineProps<{ + token?: string; +}>(); - props: { - token: { - type: String, - required: false - } - }, +let password = $ref(''); - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.resetPassword, - icon: 'fas fa-lock', - bg: 'var(--bg)', - }, - password: '', - } - }, +async function save() { + await os.apiWithDialog('reset-password', { + token: props.token, + password: password, + }); + router.push('/'); +} - mounted() { - if (this.token == null) { - os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed'); - this.$router.push('/'); - } - }, - - methods: { - async save() { - await os.apiWithDialog('reset-password', { - token: this.token, - password: this.password, - }); - this.$router.push('/'); - } +onMounted(() => { + if (props.token == null) { + os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed'); + router.push('/'); } }); + +defineExpose({ + [symbols.PAGE_INFO]: { + title: i18n.locale.resetPassword, + icon: 'fas fa-lock', + bg: 'var(--bg)', + }, +}); </script> <style lang="scss" scoped> diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue index 89375e05d2..a10af1a4cc 100644 --- a/packages/client/src/pages/signup-complete.vue +++ b/packages/client/src/pages/signup-complete.vue @@ -1,50 +1,36 @@ <template> <div> - {{ $ts.processing }} + {{ i18n.locale.processing }} </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { onMounted } from 'vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; import { login } from '@/account'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { +const props = defineProps<{ + code: string; +}>(); +onMounted(async () => { + await os.alert({ + type: 'info', + text: i18n.t('clickToFinishEmailVerification', { ok: i18n.locale.gotIt }), + }); + const res = await os.apiWithDialog('signup-pending', { + code: props.code, + }); + login(res.i, '/'); +}); + +defineExpose({ + [symbols.PAGE_INFO]: { + title: i18n.locale.signup, + icon: 'fas fa-user', }, - - props: { - code: { - type: String, - required: true - } - }, - - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.signup, - icon: 'fas fa-user' - }, - } - }, - - async mounted() { - await os.alert({ - type: 'info', - text: this.$t('clickToFinishEmailVerification', { ok: this.$ts.gotIt }), - }); - const res = await os.apiWithDialog('signup-pending', { - code: this.code, - }); - login(res.i, '/'); - }, - - methods: { - - } }); </script>