chore(lint): resolved all eslint warnings

app/src/api/public.ts

@@ -6,7 +6,7 @@ export interface ICP {
 }
 
 const publicApi = {
-  getICP<ICP>() {
+  getICP(): Promise<ICP> {
     return http.get('/icp_settings')
   },
 }

app/src/api/settings.ts

@@ -64,7 +64,7 @@ export interface NodeSettings {
   name: string
   secret: string
   icp_number: string
-  public_security_number: number
+  public_security_number: string
 }
 
 export interface OpenaiSettings {

app/src/components/StdDesign/StdDataDisplay/StdCurd.vue

@@ -82,6 +82,7 @@ function clearError() {
   })
 }
 
+// eslint-disable-next-line vue/require-typed-ref
 const stdEntryRef = ref()
 
 async function ok() {
@@ -157,10 +158,10 @@ const modalTitle = computed(() => {
 
 const localOverwriteParams = reactive(props.overwriteParams ?? {})
 
-const stdBatchEditRef = ref()
+const stdBatchEditRef = useTemplateRef('stdBatchEditRef')
 
 async function handleClickBatchEdit(batchColumns: Column[]) {
-  stdBatchEditRef.value.showModal(batchColumns, selectedRowKeys.value, selectedRows.value)
+  stdBatchEditRef.value?.showModal(batchColumns, selectedRowKeys.value, selectedRows.value)
 }
 
 function handleBatchUpdated() {

app/src/components/StdDesign/StdDataDisplay/StdTable.vue

@@ -67,6 +67,7 @@ const loading = ref(true)
 const selectedRecords: Ref<Record<any, any>> = ref({})
 
 // This can be useful if there are more than one StdTable in the same page.
+// eslint-disable-next-line sonarjs/pseudo-random
 const randomId = ref(Math.random().toString(36).substring(2, 8))
 const updateFilter = ref(0)
 const init = ref(false)

app/src/components/StdDesign/StdDataEntry/components/StdPassword.vue

@@ -20,6 +20,7 @@ function handleGenerate() {
   const passwordLength = 12
   let password = ''
   for (let i = 0; i <= passwordLength; i++) {
+    // eslint-disable-next-line sonarjs/pseudo-random
     const randomNumber = Math.floor(Math.random() * chars.length)
 
     password += chars.substring(randomNumber, randomNumber + 1)

app/src/components/StdDesign/StdDataEntry/components/StdSelector.vue

@@ -39,10 +39,6 @@ onMounted(() => {
     _init()
 })
 
-const getParams = computed(() => {
-  return props.getParams
-})
-
 const visible = ref(false)
 // eslint-disable-next-line ts/no-explicit-any
 const M_values = ref([]) as Ref<any[]>
@@ -99,6 +95,7 @@ function show() {
     visible.value = true
 }
 
+// eslint-disable-next-line vue/require-typed-ref
 const selectedKeyBuffer = ref()
 // eslint-disable-next-line ts/no-explicit-any
 const selectedBuffer: Ref<any[]> = ref([])

app/src/components/TwoFA/Authorization.vue

@@ -14,7 +14,7 @@ defineProps<{
 const emit = defineEmits(['submitOTP', 'submitSecureSessionID'])
 
 const user = useUserStore()
-const refOTP = ref()
+const refOTP = useTemplateRef('refOTP')
 const useRecoveryCode = ref(false)
 const passcode = ref('')
 const recoveryCode = ref('')

app/src/components/TwoFA/use2FAModal.ts

@@ -6,6 +6,7 @@ import { createVNode, render } from 'vue'
 
 function use2FAModal() {
   const refOTPAuthorization = ref<typeof Authorization>()
+  // eslint-disable-next-line sonarjs/pseudo-random
   const randomId = Math.random().toString(36).substring(2, 8)
   const { secureSessionId } = storeToRefs(useUserStore())
 

app/src/views/certificate/ACMEUserSelector.vue

@@ -18,16 +18,16 @@ const id = computed(() => {
   return data.value?.acme_user_id
 })
 
-const user_idx = ref()
+const userIdx = ref<number>()
 function init() {
   users.value?.forEach((v: AcmeUser, k: number) => {
     if (v.id === id.value)
-      user_idx.value = k
+      userIdx.value = k
   })
 }
 
 const current = computed(() => {
-  return users.value?.[user_idx.value]
+  return users.value?.[userIdx.value || -1]
 })
 
 const mounted = ref(false)
@@ -84,7 +84,7 @@ function filterOption(input: string, option: { label: string }) {
   <AForm layout="vertical">
     <AFormItem :label="$gettext('ACME User')">
       <ASelect
-        v-model:value="user_idx"
+        v-model:value="userIdx"
         :placeholder="$gettext('System Initial User')"
         show-search
         :options

app/src/views/certificate/DNSChallenge.vue

@@ -14,7 +14,7 @@ const code = computed(() => {
   return data.code
 })
 
-const provider_idx = ref()
+const providerIdx = ref<number>()
 function init() {
   if (!data.configuration) {
     data.configuration = {
@@ -24,7 +24,7 @@ function init() {
   }
   providers.value?.forEach((v: { code?: string }, k: number) => {
     if (v?.code === code.value)
-      provider_idx.value = k
+      providerIdx.value = k
   })
 }
 
@@ -35,7 +35,7 @@ auto_cert.get_dns_providers().then(r => {
 })
 
 const current = computed(() => {
-  return providers.value?.[provider_idx.value]
+  return providers.value?.[providerIdx.value || -1]
 })
 
 watch(code, init)
@@ -71,7 +71,7 @@ function filterOption(input: string, option: { label: string }) {
   <AForm layout="vertical">
     <AFormItem :label="$gettext('DNS Provider')">
       <ASelect
-        v-model:value="provider_idx"
+        v-model:value="providerIdx"
         show-search
         :options="options"
         :filter-option="filterOption"

app/src/views/certificate/WildcardCertificate.vue

@@ -33,7 +33,7 @@ defineExpose({
 const modalVisible = ref(false)
 const modalClosable = ref(true)
 
-const refObtainCertLive = ref()
+const refObtainCertLive = useTemplateRef('refObtainCertLive')
 
 const computedDomain = computed(() => {
   return `*.${domain.value}`
@@ -43,7 +43,7 @@ function issueCert() {
   step.value++
   modalVisible.value = true
 
-  refObtainCertLive.value.issue_cert(computedDomain.value, [computedDomain.value, domain.value], data.value.key_type)
+  refObtainCertLive.value?.issue_cert(computedDomain.value, [computedDomain.value, domain.value], data.value.key_type)
     .then(() => {
       message.success($gettext('Renew successfully'))
       emit('issued')

app/src/views/config/ConfigList.vue

@@ -8,7 +8,7 @@ import Rename from '@/views/config/components/Rename.vue'
 import configColumns from '@/views/config/configColumns'
 import InspectConfig from '@/views/config/InspectConfig.vue'
 
-const table = ref()
+const table = useTemplateRef('table')
 const route = useRoute()
 const router = useRouter()
 
@@ -32,7 +32,7 @@ watch(getParams, () => {
   update.value++
 })
 
-const refInspectConfig = ref()
+const refInspectConfig = useTemplateRef('refInspectConfig')
 const breadcrumbs = useBreadcrumbs()
 
 function updateBreadcrumbs() {
@@ -90,8 +90,8 @@ function goBack() {
   })
 }
 
-const refMkdir = ref()
+const refMkdir = useTemplateRef('refMkdir')
-const refRename = ref()
+const refRename = useTemplateRef('refRename')
 </script>
 
 <template>
@@ -118,7 +118,7 @@ const refRename = ref()
       <AButton
         type="link"
         size="small"
-        @click="() => refMkdir.open(basePath)"
+        @click="() => refMkdir?.open(basePath)"
       >
         {{ $gettext('Create Folder') }}
       </AButton>
@@ -161,7 +161,7 @@ const refRename = ref()
         <AButton
           type="link"
           size="small"
-          @click="() => refRename.open(basePath, record.name, record.is_dir)"
+          @click="() => refRename?.open(basePath, record.name, record.is_dir)"
         >
           {{ $gettext('Rename') }}
         </AButton>
@@ -169,11 +169,11 @@ const refRename = ref()
     </StdTable>
     <Mkdir
       ref="refMkdir"
-      @created="() => table.get_list()"
+      @created="() => table?.get_list()"
     />
     <Rename
       ref="refRename"
-      @renamed="() => table.get_list()"
+      @renamed="() => table?.get_list()"
     />
     <FooterToolBar v-if="basePath">
       <AButton @click="goBack">

app/src/views/config/components/Mkdir.vue

@@ -11,7 +11,9 @@ const data = ref({
   name: '',
 })
 
+// eslint-disable-next-line vue/require-typed-ref
 const refForm = ref()
+
 function open(basePath: string) {
   visible.value = true
   data.value.name = ''

app/src/views/config/components/Rename.vue

@@ -15,6 +15,7 @@ const data = ref({
   sync_node_ids: [] as number[],
 })
 
+// eslint-disable-next-line vue/require-typed-ref
 const refForm = ref()
 
 function open(basePath: string, origName: string, isDir: boolean) {

app/src/views/environment/BatchUpgrader.vue

@@ -32,16 +32,16 @@ const progressStrokeColor = {
   to: '#87d068',
 }
 
-const logContainer = ref()
+const logContainer = useTemplateRef('logContainer')
 function log(msg: string) {
   const para = document.createElement('p')
 
   para.appendChild(document.createTextNode($gettext(msg)))
 
-  logContainer.value.appendChild(para)
+  logContainer.value!.appendChild(para)
 
   nextTick(() => {
-    logContainer.value.scroll({ top: logContainer.value.scrollHeight, left: 0, behavior: 'smooth' })
+    logContainer.value!.scroll({ top: logContainer.value!.scrollHeight, left: 0, behavior: 'smooth' })
   })
 }
 
@@ -86,7 +86,7 @@ async function performUpgrade() {
   modalClosable.value = false
   modalVisible.value = true
   progressPercent.value = 0
-  logContainer.value.innerHTML = ''
+  logContainer.value!.innerHTML = ''
 
   log($gettext('Upgrading Nginx UI, please wait...'))
 

app/src/views/nginx_log/NginxLog.vue

@@ -6,7 +6,7 @@ import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import ws from '@/lib/websocket'
 import { debounce } from 'lodash'
 
-const logContainer = ref()
+const logContainer = useTemplateRef('logContainer')
 let websocket: ReconnectingWebSocket | WebSocket
 const route = useRoute()
 const buffer = ref('')
@@ -16,7 +16,7 @@ const router = useRouter()
 const loading = ref(false)
 const filter = ref('')
 
-const control: INginxLogData = reactive({
+const control = reactive<INginxLogData>({
   type: logType(),
   conf_name: route.query.conf_name as string,
   server_idx: Number.parseInt(route.query.server_idx as string),
@@ -68,7 +68,7 @@ function init() {
 }
 
 function clearLog() {
-  logContainer.value.innerHTML = ''
+  logContainer.value!.innerHTML = ''
 }
 
 onMounted(() => {
@@ -115,7 +115,8 @@ function on_scroll_log() {
   if (!loading.value && page.value > 0) {
     loading.value = true
 
-    const elem = logContainer.value
+    const elem = logContainer.value!
+
     if (elem?.scrollTop / elem?.scrollHeight < 0.333) {
       nginx_log.page(page.value, control).then(r => {
         page.value = r.page - 1

app/src/views/preference/Preference.vue

@@ -69,6 +69,8 @@ const data = ref<Settings>({
   node: {
     name: '',
     secret: '',
+    icp_number: '',
+    public_security_number: '',
   },
   openai: {
     model: '',
@@ -93,7 +95,7 @@ settings.get().then(r => {
 const settingsStore = useSettingsStore()
 const { server_name } = storeToRefs(settingsStore)
 const errors = ref({}) as Ref<Record<string, Record<string, string>>>
-const refAuthSettings = ref()
+const refAuthSettings = useTemplateRef('refAuthSettings')
 
 async function save() {
   // fix type

app/src/views/preference/components/TOTP.vue

@@ -13,8 +13,8 @@ const resetting = ref(false)
 const qrCode = ref('')
 const secret = ref('')
 const passcode = ref('')
-const interval = ref()
+const interval = shallowRef<undefined | ReturnType<typeof setTimeout>>()
-const refOtp = ref()
+const refOtp = useTemplateRef('refOtp')
 const recoveryCode = ref('')
 const inputRecoveryCode = ref('')
 
@@ -32,7 +32,6 @@ function clickEnable2FA() {
 function clearGenerateSecretInterval() {
   if (interval.value) {
     clearInterval(interval.value)
-    interval.value = undefined
   }
 }
 

app/src/views/site/cert/IssueCert.vue

@@ -7,7 +7,7 @@ defineProps<{
 }>()
 
 const issuing_cert = ref(false)
-const obtain_cert = ref()
+const obtain_cert = useTemplateRef('obtain_cert')
 const directivesMap = inject('directivesMap') as Ref<Record<string, NgxDirective[]>>
 
 const enabled = defineModel<boolean>('enabled', {
@@ -31,9 +31,8 @@ const update = ref(0)
 
 async function onchange() {
   update.value++
-  await nextTick(() => {
+  await nextTick()
-    obtain_cert.value.toggle(enabled.value)
+  obtain_cert.value!.toggle(enabled.value)
-  })
 }
 </script>
 

app/src/views/site/cert/components/DNSChallenge.vue

@@ -19,16 +19,16 @@ const code = computed(() => {
   return data.value.code
 })
 
-const provider_idx = ref()
+const providerIdx = ref<number>()
 function init() {
   providers.value?.forEach((v: DNSProvider, k: number) => {
     if (v.code === code.value)
-      provider_idx.value = k
+      providerIdx.value = k
   })
 }
 
 const current = computed(() => {
-  return providers.value?.[provider_idx.value]
+  return providers.value?.[providerIdx.value || -1]
 })
 
 const mounted = ref(false)
@@ -63,7 +63,7 @@ onMounted(async () => {
     await dns_credential.get(data.value.dns_credential_id).then(r => {
       data.value.code = r.code
       data.value.provider = r.provider
-      provider_idx.value = providers.value.findIndex(v => v.code === r.code)
+      providerIdx.value = providers.value.findIndex(v => v.code === r.code)
     })
   }
 
@@ -93,14 +93,14 @@ function filterOption(input: string, option: { label: string }) {
   <AForm layout="vertical">
     <AFormItem :label="$gettext('DNS Provider')">
       <ASelect
-        v-model:value="provider_idx"
+        v-model:value="providerIdx"
         show-search
         :options
         :filter-option="filterOption"
       />
     </AFormItem>
     <AFormItem
-      v-if="provider_idx > -1"
+      v-if="(providerIdx ?? -1) > -1"
       :label="$gettext('Credential')"
       :rules="[{ required: true }]"
     >

app/src/views/site/cert/components/ObtainCertLive.vue

@@ -21,14 +21,14 @@ const progressStrokeColor = {
 const progressPercent = ref(0)
 const progressStatus = ref('active') as Ref<'success' | 'active' | 'normal' | 'exception'>
 
-const logContainer = ref()
+const logContainer = useTemplateRef('logContainer')
 
 function log(msg: string) {
   const para = document.createElement('p')
 
   para.appendChild(document.createTextNode($gettext(msg)))
 
-  logContainer.value.appendChild(para)
+  logContainer.value!.appendChild(para)
 
   logContainer.value?.scroll({ top: 100000, left: 0, behavior: 'smooth' })
 }
@@ -39,7 +39,7 @@ async function issue_cert(config_name: string, server_name: string[], key_type:
     modalClosable.value = false
     modalVisible.value = true
     progressPercent.value = 0
-    logContainer.value.innerHTML = ''
+    logContainer.value!.innerHTML = ''
 
     log($gettext('Getting the certificate, please wait...'))
 

app/src/views/site/ngx_conf/LogEntry.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NgxConfig } from '@/api/ngx'
 import { FileExclamationOutlined, FileTextOutlined } from '@ant-design/icons-vue'
-import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps<{
@@ -10,8 +9,8 @@ const props = defineProps<{
   name?: string
 }>()
 
-const accessIdx = ref()
+const accessIdx = ref<number>()
-const errorIdx = ref()
+const errorIdx = ref<number>()
 
 const hasAccessLog = computed(() => {
   let flag = false

app/src/views/site/ngx_conf/NgxUpstream.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { UpstreamStatus } from '@/api/upstream'
+import type ReconnectingWebSocket from 'reconnecting-websocket'
 import upstream from '@/api/upstream'
 import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
@@ -61,7 +62,8 @@ function ok() {
 }
 
 const availabilityResult = ref({}) as Ref<Record<string, UpstreamStatus>>
-const websocket = ref()
+const websocket = shallowRef<ReconnectingWebSocket | WebSocket>()
+
 function availability_test() {
   const sockets: string[] = []
   for (const u of ngx_config.upstreams ?? []) {
@@ -74,7 +76,7 @@ function availability_test() {
   if (sockets.length > 0) {
     websocket.value = upstream.availability_test()
     websocket.value.onopen = () => {
-      websocket.value.send(JSON.stringify(sockets))
+      websocket.value!.send(JSON.stringify(sockets))
     }
     websocket.value.onmessage = (e: MessageEvent) => {
       availabilityResult.value = JSON.parse(e.data)

app/src/views/site/site_list/SiteList.vue

@@ -35,6 +35,7 @@ onMounted(async () => {
         return
       }
     }
+    // eslint-disable-next-line ts/no-explicit-any
     catch (e: any) {
       message.error(e?.message ?? $gettext('Server error'))
       return

app/src/views/system/Upgrade.vue

@@ -53,16 +53,16 @@ const isLatestVer = computed(() => {
   return data.value.name === `v${version.version}`
 })
 
-const logContainer = ref()
+const logContainer = useTemplateRef('logContainer')
 
 function log(msg: string) {
   const para = document.createElement('p')
 
   para.appendChild(document.createTextNode($gettext(msg)))
 
-  logContainer.value.appendChild(para)
+  logContainer.value!.appendChild(para)
 
-  logContainer.value.scroll({ top: 320, left: 0, behavior: 'smooth' })
+  logContainer.value!.scroll({ top: 320, left: 0, behavior: 'smooth' })
 }
 
 const dryRun = computed(() => {
@@ -74,7 +74,7 @@ async function performUpgrade() {
   modalClosable.value = false
   modalVisible.value = true
   progressPercent.value = 0
-  logContainer.value.innerHTML = ''
+  logContainer.value!.innerHTML = ''
 
   log($gettext('Upgrading Nginx UI, please wait...'))
 

app/src/views/terminal/Terminal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type ReconnectingWebSocket from 'reconnecting-websocket'
 import twoFA from '@/api/2fa'
 import use2FAModal from '@/components/TwoFA/use2FAModal'
 import ws from '@/lib/websocket'
@@ -8,10 +9,10 @@ import _ from 'lodash'
 import '@xterm/xterm/css/xterm.css'
 
 let term: Terminal | null
-let ping: NodeJS.Timeout
+let ping: undefined | ReturnType<typeof setTimeout>
 
 const router = useRouter()
-const websocket = shallowRef()
+const websocket = shallowRef<ReconnectingWebSocket | WebSocket>()
 const lostConnection = ref(false)
 
 onMounted(() => {
@@ -24,12 +25,12 @@ onMounted(() => {
 
     nextTick(() => {
       initTerm()
-      websocket.value.onmessage = wsOnMessage
+      websocket.value!.onmessage = wsOnMessage
-      websocket.value.onopen = wsOnOpen
+      websocket.value!.onopen = wsOnOpen
-      websocket.value.onerror = () => {
+      websocket.value!.onerror = () => {
         lostConnection.value = true
       }
-      websocket.value.onclose = () => {
+      websocket.value!.onclose = () => {
         lostConnection.value = true
       }
     })
@@ -88,7 +89,7 @@ function initTerm() {
 }
 
 function sendMessage(data: Message) {
-  websocket.value.send(JSON.stringify(data))
+  websocket.value?.send(JSON.stringify(data))
 }
 
 function wsOnMessage(msg: { data: string | Uint8Array }) {