Merge pull request #71 from RadKod/refactor/device-info

refactor: device info

components/Form/CreatorModeComposeForm/CreatorModeComposeForm.component.vue

@@ -163,6 +163,7 @@ Form.creator-mode-compose-form(@keypress.enter.prevent @failed="handleFailed")
 
 <script>
 import { defineComponent, useRouter, useContext, useStore, reactive, set, watch, computed } from '@nuxtjs/composition-api'
+import { useDeviceInfo } from '@/hooks'
 import { roomTransformer } from '@/transformers'
 import { Form, Field, Cell, Switch, Button, Empty, Notify, Dialog } from 'vant'
 // Absolute path due to bypass for hoisting
@@ -188,6 +189,8 @@ export default defineComponent({
     const { localePath, i18n } = useContext()
     const store = useStore()
 
+    const { getDeviceInfo } = useDeviceInfo()
+
     const user = computed(() => store.getters['auth/user'])
 
     const form = reactive({
@@ -333,7 +336,9 @@ export default defineComponent({
       }
 
       if (form.isClear) {
-        const result = await store.dispatch('creator/postQaForm', { form, user: user.value })
+        const deviceInfo = await getDeviceInfo()
+
+        const result = await store.dispatch('creator/postQaForm', { form, user: user.value, deviceInfo })
 
         if (result.success) {
           createdRoom.title = result.data.title

hooks/index.js

@@ -3,3 +3,4 @@ export { default as useGameMode } from './useGameMode'
 export { default as useGameScene } from './useGameScene'
 export { default as useFormatter } from './useFormatter'
 export { default as useDialog } from './useDialog'
+export { default as useDeviceInfo } from './useDeviceInfo'

hooks/useDeviceInfo.js

@@ -0,0 +1,15 @@
+import { useStore } from '@nuxtjs/composition-api'
+
+export default () => {
+  const store = useStore()
+
+  const getDeviceInfo = async () => {
+    const { data } = await store.dispatch('auth/getDeviceInfo')
+
+    return data
+  }
+
+  return {
+    getDeviceInfo
+  }
+}

package.json

@@ -59,6 +59,7 @@
     "simple-keyboard": "^3.4.65",
     "swiper": "^8.0.6",
     "textfit": "^2.4.0",
+    "ua-parser-js": "^1.0.39",
     "v-dropdown-menu": "1.3.2",
     "vant": "^2.12.54",
     "vue-infinite-loading": "^2.4.5",
@@ -107,4 +108,4 @@
       "path": "cz-conventional-changelog"
     }
   }
-}
+}

store/auth/actions.js

@@ -1,3 +1,4 @@
+import { RADKOD_API_URL } from '@/system/constant'
 import getBrowserFingerprint from 'get-browser-fingerprint'
 
 const fingerprint = getBrowserFingerprint()
@@ -41,5 +42,50 @@ export default {
     const result = response.json()
 
     return result
+  },
+
+  async getDeviceInfo() {
+    const UAParser = require('ua-parser-js')
+    const parser = new UAParser(navigator.userAgent)
+    const ua = parser.getResult()
+
+    let deviceInfo = {
+      ...ua
+    }
+
+    if (typeof window !== 'undefined') {
+      deviceInfo = {
+        ...deviceInfo,
+        window: {
+          outerWidth: window.outerWidth,
+          outerHeight: window.outerHeight
+        }
+      }
+    }
+
+    if (navigator) {
+      deviceInfo = {
+        ...deviceInfo,
+        language: navigator.language
+      }
+    }
+
+    try {
+      const response = await fetch(`${RADKOD_API_URL}/global/ipinfo.php`)
+      const ipData = await response.json()
+
+      if (ipData) {
+        deviceInfo = {
+          ...deviceInfo,
+          ipData
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching IPData info:', error)
+    }
+
+    return {
+      data: deviceInfo
+    }
   }
 }

store/creator/actions.js

@@ -1,7 +1,7 @@
 import { roomTransformer, scoreboardTransformer } from '@/transformers'
 
 export default {
-  async postQaForm({ commit, state }, { form, user }) {
+  async postQaForm({ commit, state }, { form, user, deviceInfo }) {
     const transform = form => {
       return {
         room_title: form.roomTitle,
@@ -14,7 +14,8 @@ export default {
           }
         }),
         is_anon: form.isAnon,
-        fingerprint: user.fingerprint
+        fingerprint: user.fingerprint,
+        device_info: JSON.stringify(deviceInfo)
       }
     }
 

system/constant.js

@@ -4,6 +4,7 @@ export const APP_URL = 'https://parolla.app'
 export const PUBLISHER_NAME = 'RadKod'
 export const PUBLISHER_DOMAIN = 'radkod.com'
 export const PUBLISHER_URL = 'https://radkod.com'
+export const RADKOD_API_URL = 'https://radkod.com/api'
 export const WEB_CDN = 'https://radkod.com/cdn/parolla/web'
 export const ALPHABET_LENGTH = 26
 export const ANSWER_CHAR_LENGTH = 64

yarn.lock

@@ -11710,6 +11710,11 @@ ua-parser-js@^1.0.34:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
   integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==
 
+ua-parser-js@^1.0.39:
+  version "1.0.39"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.39.tgz#bfc07f361549bf249bd8f4589a4cccec18fd2018"
+  integrity sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==
+
 ufo@^0.8.5:
   version "0.8.6"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.8.6.tgz#c0ec89bc0e0c9fa59a683680feb0f28b55ec323b"