Refactor

src/web/components/IpAlert.vue

@@ -25,22 +25,13 @@
 import { ref, onMounted } from 'vue'
 import { trpc } from '../trpc'
 
-const netInfo = ref<{
+const props = defineProps<{
+  loadingIpAddress: boolean
+  netInfo: {
     ip: string
     name?: 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>

src/web/views/Login.vue

@@ -3,10 +3,16 @@
     <v-row justify="center">
       <v-col xl="5" lg="6" md="7" sm="10">
         <logo class="mx-auto mb-4" :style="{ maxWidth: '256px' }" />
+        <div v-if="!loadingIpAddress && netInfo.isSupported">
           <login-form v-if="!loginResult" @login="onLogin" />
           <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-row>
   </v-container>
@@ -17,12 +23,33 @@ import LoginForm from '../components/LoginForm.vue'
 import IpAlert from '../components/IpAlert.vue'
 import Logo from '../components/Logo.vue'
 import LoggedCard from '../components/LoggedCard.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { LoginResult } from '@/server/schemas/LoginResult'
+import { trpc } from '../trpc'
 
 const loginResult = ref<LoginResult | null>(null)
 
 function onLogin(event: LoginResult) {
   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>