Refactor
This commit is contained in:
parent
8de8ef39f7
commit
d40507a106
|
@ -25,22 +25,13 @@
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { trpc } from '../trpc'
|
import { trpc } from '../trpc'
|
||||||
|
|
||||||
const netInfo = ref<{
|
const props = defineProps<{
|
||||||
|
loadingIpAddress: boolean
|
||||||
|
netInfo: {
|
||||||
ip: string
|
ip: string
|
||||||
name?: string | undefined
|
name?: string | undefined
|
||||||
shortName?: string | undefined
|
shortName?: string | undefined
|
||||||
isSupported?: boolean
|
isSupported?: boolean | undefined
|
||||||
}>({ ip: '', name: '', shortName: '' })
|
|
||||||
const loadingIpAddress = ref(false)
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
try {
|
|
||||||
loadingIpAddress.value = true
|
|
||||||
netInfo.value = await trpc.myIp.query()
|
|
||||||
} catch (error: any) {
|
|
||||||
netInfo.value = error.message
|
|
||||||
} finally {
|
|
||||||
loadingIpAddress.value = false
|
|
||||||
}
|
}
|
||||||
})
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,10 +3,16 @@
|
||||||
<v-row justify="center">
|
<v-row justify="center">
|
||||||
<v-col xl="5" lg="6" md="7" sm="10">
|
<v-col xl="5" lg="6" md="7" sm="10">
|
||||||
<logo class="mx-auto mb-4" :style="{ maxWidth: '256px' }" />
|
<logo class="mx-auto mb-4" :style="{ maxWidth: '256px' }" />
|
||||||
|
<div v-if="!loadingIpAddress && netInfo.isSupported">
|
||||||
<login-form v-if="!loginResult" @login="onLogin" />
|
<login-form v-if="!loginResult" @login="onLogin" />
|
||||||
<logged-card v-else :login-result="loginResult" />
|
<logged-card v-else :login-result="loginResult" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<ip-alert class="mt-5" />
|
<ip-alert
|
||||||
|
:net-info="netInfo"
|
||||||
|
:loading-ip-address="loadingIpAddress"
|
||||||
|
class="mt-5"
|
||||||
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
@ -17,12 +23,33 @@ import LoginForm from '../components/LoginForm.vue'
|
||||||
import IpAlert from '../components/IpAlert.vue'
|
import IpAlert from '../components/IpAlert.vue'
|
||||||
import Logo from '../components/Logo.vue'
|
import Logo from '../components/Logo.vue'
|
||||||
import LoggedCard from '../components/LoggedCard.vue'
|
import LoggedCard from '../components/LoggedCard.vue'
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { LoginResult } from '@/server/schemas/LoginResult'
|
import { LoginResult } from '@/server/schemas/LoginResult'
|
||||||
|
import { trpc } from '../trpc'
|
||||||
|
|
||||||
const loginResult = ref<LoginResult | null>(null)
|
const loginResult = ref<LoginResult | null>(null)
|
||||||
|
|
||||||
function onLogin(event: LoginResult) {
|
function onLogin(event: LoginResult) {
|
||||||
loginResult.value = event
|
loginResult.value = event
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const netInfo = ref<{
|
||||||
|
ip: string
|
||||||
|
name?: string | undefined
|
||||||
|
shortName?: string | undefined
|
||||||
|
isSupported?: boolean
|
||||||
|
}>({ ip: '', name: '', shortName: '' })
|
||||||
|
|
||||||
|
const loadingIpAddress = ref(false)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
loadingIpAddress.value = true
|
||||||
|
netInfo.value = await trpc.myIp.query()
|
||||||
|
} catch (error: any) {
|
||||||
|
netInfo.value = error.message
|
||||||
|
} finally {
|
||||||
|
loadingIpAddress.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user