Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 1x 1x 1x 1x 1x 2x | <template>
<h1>Home</h1>
<auth-tabs-card
v-model:tab="tab"
:loading="submitting"
@login="onLogin"
@register="onRegister"
@oauth="onOauth"
/>
<button
data-test="ping"
@click="testApi"
>test</button>
<HelloWorld msg="Vite + Vue" />
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<div style="background-color: #7f7f7f; height: 40vh;">ダミー枠</div>
</template>
<script setup lang="ts">
// region Dependency Injection
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {useSchemaLogger} from '@/libs/logger/logger'
import {useApi} from '@/composables/useApi'
import {useAuth} from '@/composables/useAuth'
// endregion Dependency Injection
// region Component Import
import HelloWorld from '@/components/organisms/HelloWorld.vue'
import AuthTabsCard from '@/components/organisms/AuthTabsCard.vue'
// endregion Component Import
// region interface
type OAuthProvider = 'google' | 'github'
// endregion interface
// region constants
const api = useApi()
const logger = useSchemaLogger({ module: 'Home' })
const router = useRouter()
// endregion constants
// region props
// endregion props
// region variable
// endregion variable
// region properties
const tab = ref<'login'|'register'>('login')
const submitting = ref(false)
// endregion properties
// region emits
// endregion emits
// region validator
// endregion validator
// region methods
const testApi = async () => {
try {
const apiResponse = await api.get('/ping')
logger.info('response', apiResponse.data)
return apiResponse.data
} catch (e) {
logger.error('error', e)
}
}
async function onLogin(payload: { email: string; password: string; remember: boolean }) {
submitting.value = true
try {
console.log(`remember: ${payload.remember}`)
await useAuth().login(payload.email, payload.password)
await router.push({ path: '/dashboard' })
} finally {
submitting.value = false
}
}
async function onRegister(payload: { name: string; email: string; password: string }) {
submitting.value = true
try {
await useAuth().register(payload.email, payload.password)
// 登録後はログインタブへ戻す等
tab.value = 'login'
await router.push({ path: '/dashboard' })
} finally {
submitting.value = false
}
}
async function onOauth(provider: OAuthProvider) {
submitting.value = true
try {
const res = await useAuth().signInWithProvider(provider)
console.log(`res: ${JSON.stringify(res)}`)
await router.push({ path: '/dashboard' })
} catch (e) {
} finally {
submitting.value = false
}
}
// function toReset(payload: { name: string; email: string; password: string }) {
// useAuth().resetPassword(payload.email)
// }
// endregion methods
// region export
// endregion export
</script>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
|