wip: refactor(client): migrate components to composition api

This commit is contained in:
syuilo 2022-01-16 11:02:27 +09:00
parent 2c36844d34
commit df61e173c1
3 changed files with 54 additions and 79 deletions

View File

@ -20,7 +20,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { Instance, instance } from '@/instance'; import { instance } from '@/instance';
import { host } from '@/config'; import { host } from '@/config';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -48,9 +48,9 @@ export default defineComponent({
showMenu.value = !showMenu.value; showMenu.value = !showMenu.value;
}; };
const choseAd = (): Instance['ads'][number] | null => { const choseAd = (): (typeof instance)['ads'][number] | null => {
if (props.specify) { 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) ? { const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {

View File

@ -3,61 +3,50 @@
<div class="_formRoot"> <div class="_formRoot">
<FormInput v-model="password" type="password" class="_formBlock"> <FormInput v-model="password" type="password" class="_formBlock">
<template #prefix><i class="fas fa-lock"></i></template> <template #prefix><i class="fas fa-lock"></i></template>
<template #label>{{ $ts.newPassword }}</template> <template #label>{{ i18n.locale.newPassword }}</template>
</FormInput> </FormInput>
<FormButton primary class="_formBlock" @click="save">{{ $ts.save }}</FormButton> <FormButton primary class="_formBlock" @click="save">{{ i18n.locale.save }}</FormButton>
</div> </div>
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted } from 'vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.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 * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
import { router } from '@/router';
export default defineComponent({ const props = defineProps<{
components: { token?: string;
FormInput, }>();
FormButton,
},
props: { let password = $ref('');
token: {
type: String, async function save() {
required: false await os.apiWithDialog('reset-password', {
token: props.token,
password: password,
});
router.push('/');
}
onMounted(() => {
if (props.token == null) {
os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed');
router.push('/');
} }
}, });
data() { defineExpose({
return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.resetPassword, title: i18n.locale.resetPassword,
icon: 'fas fa-lock', icon: 'fas fa-lock',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
password: '',
}
},
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('/');
}
}
}); });
</script> </script>

View File

@ -1,50 +1,36 @@
<template> <template>
<div> <div>
{{ $ts.processing }} {{ i18n.locale.processing }}
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { login } from '@/account'; import { login } from '@/account';
import { i18n } from '@/i18n';
export default defineComponent({ const props = defineProps<{
components: { code: string;
}>();
}, onMounted(async () => {
props: {
code: {
type: String,
required: true
}
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.signup,
icon: 'fas fa-user'
},
}
},
async mounted() {
await os.alert({ await os.alert({
type: 'info', type: 'info',
text: this.$t('clickToFinishEmailVerification', { ok: this.$ts.gotIt }), text: i18n.t('clickToFinishEmailVerification', { ok: i18n.locale.gotIt }),
}); });
const res = await os.apiWithDialog('signup-pending', { const res = await os.apiWithDialog('signup-pending', {
code: this.code, code: props.code,
}); });
login(res.i, '/'); login(res.i, '/');
});
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.locale.signup,
icon: 'fas fa-user',
}, },
methods: {
}
}); });
</script> </script>