feat: new sms bind (#117)

.nvmrc

@@ -1 +1 @@
-v20.10.0
+v22.12.0

.yarn/versions/7cefad94.yml

@@ -0,0 +1,3 @@
+releases:
+  "@aoi-js/frontend": patch
+  "@aoi-js/server": patch

apps/frontend/src/components/user/UserAuthSms.vue

@@ -3,13 +3,23 @@
     <VTextField
       v-model="newPhone"
       prepend-inner-icon="mdi-phone"
+      :readonly="codeSent"
       :label="t('term.telephone')"
       :rules="phoneRules"
     />
     <div id="vaptcha"></div>
-    <VOtpInput v-if="token" v-model.trim="code" />
+    <VOtpInput v-if="codeSent" v-model.trim="code" />
   </VCardText>
   <VCardActions>
+    <VBtn
+      variant="elevated"
+      color="info"
+      :disabled="!token || !phoneValid || codeSent"
+      :loading="sendTask.isLoading.value"
+      @click="sendTask.execute(token)"
+    >
+      {{ t('action.send-otp') }}
+    </VBtn>
     <VBtn
       variant="elevated"
       @click="updateTask.execute()"
@@ -22,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useChangePhone } from '@/utils/user/sms'
@@ -33,15 +43,8 @@ const props = defineProps<{
 
 const { t } = useI18n()
 
-const { newPhone, code, token, sendTask, updateTask } = useChangePhone(toRef(props, 'userId'))
-
-const phoneRules = [
-  (value: string) => {
-    const re = /^1\d{10}$/
-    if (re.test(value)) return true
-    return t('hint.violate-phone-rule')
-  }
-]
+const { newPhone, code, token, sendTask, updateTask, phoneRules, phoneValid, codeSent } =
+  useChangePhone(toRef(props, 'userId'))
 </script>
 
 <i18n>

apps/frontend/src/locales/en.yaml

@@ -55,6 +55,7 @@ action:
   fullscreen: Fullscreen
   recommend-problem: Recommend Problem
   select: Select
+  send-otp: Send OTP
 
 term:
   content: Content

apps/frontend/src/locales/zh-Hans.yml

@@ -55,6 +55,7 @@ action:
   fullscreen: 全屏
   recommend-problem: 推荐题目
   select: 选择
+  send-otp: 发送验证码
 
 term:
   content: 内容

apps/frontend/src/utils/user/sms.ts

@@ -1,7 +1,7 @@
-import { ref, type MaybeRef, toRef } from 'vue'
+import { ref, type MaybeRef, toRef, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useAsyncTask, withMessage } from '../async'
+import { noMessage, useAsyncTask, withMessage } from '../async'
 import { http } from '../http'
 import { useVaptcha } from '../vaptcha'
 
@@ -11,11 +11,21 @@ export function useChangePhone(userId: MaybeRef<string>) {
   const newPhone = ref('')
   const code = ref('')
   const userIdRef = toRef(userId)
+  const phoneRules = [
+    (value: string) => {
+      const re = /^1\d{10}$/
+      if (re.test(value)) return true
+      return t('hint.violate-phone-rule')
+    }
+  ]
+  const phoneValid = computed(() => phoneRules.every((rule) => rule(newPhone.value) === true))
   const app = useAppState()
   const { token } = useVaptcha({ onPass: (token) => sendTask.execute(token) })
   const { t } = useI18n()
+  const codeSent = ref(false)
 
   const sendTask = useAsyncTask(async (token: string) => {
+    if (!phoneValid.value) return noMessage()
     await http.post(`user/${userIdRef.value}/preBind`, {
       json: {
         provider: 'sms',
@@ -26,6 +36,7 @@ export function useChangePhone(userId: MaybeRef<string>) {
         mfaToken: app.mfaToken
       }
     })
+    codeSent.value = true
     return withMessage(t('msg.code-sent'))
   })
   const updateTask = useAsyncTask(async () => {
@@ -40,5 +51,5 @@ export function useChangePhone(userId: MaybeRef<string>) {
       }
     })
   })
-  return { newPhone, code, token, sendTask, updateTask }
+  return { newPhone, code, token, sendTask, updateTask, phoneRules, phoneValid, codeSent }
 }

apps/server/src/utils/package.ts

@@ -1,3 +1,3 @@
-import packageJson from '../../package.json' assert { type: 'json' }
+import packageJson from '../../package.json' with { type: 'json' }
 
 export { packageJson }

docker/dockerfiles/server.dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:22-alpine
 
 ARG NODE_ENV=production
 ENV NODE_ENV $NODE_ENV