fix: user status

src/features/auth/components/LoginWithVerifyCodeForm.vue

@@ -56,7 +56,7 @@ import TextField from '@/components/form/TextField.vue'
 import { loginWithCodeSchema } from '@/features/auth/schema'
 import AuthHeading from '@/features/auth/components/AuthHeading.vue'
 import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
-import { useForgotPasswordMutation, useLoginWithCodeMutation } from '@/services/query/auth'
+import { useForgotPasswordMutation, useRequestLoginOtpMutation } from '@/services/query/auth'
 
 const props = defineProps({
   mode: { type: String, default: 'loginWithCode' },
@@ -71,20 +71,20 @@ const form = ref({ phone: '' })
 const { validate, validateAt, errors } = useYup(schema)
 
 const { savePhoneNumber } = useAuth()
-const loginCodeMutation = useLoginWithCodeMutation()
+const requestLoginOtpMutation = useRequestLoginOtpMutation()
 const forgotPasswordMutation = useForgotPasswordMutation()
 
 const loading = computed(
-  () => loginCodeMutation.isPending.value || forgotPasswordMutation.isPending.value
+  () => requestLoginOtpMutation.isPending.value || forgotPasswordMutation.isPending.value
 )
 
 const onSubmit = async () => {
   const { isValid, payload } = await validate(form.value)
   if (!isValid) return
   if (isForgotPassword.value) {
-    await forgotPasswordMutation.mutateAsync(payload)
+    await forgotPasswordMutation.mutateAsync({ phone: payload.phone })
   } else {
-    await loginCodeMutation.mutateAsync(payload)
+    await requestLoginOtpMutation.mutateAsync({ phone: payload.phone })
   }
   savePhoneNumber(payload.phone)
   emit('next', { phone: payload.phone, mode: props.mode })

src/features/auth/components/VerifyCodeForm.vue

@@ -55,10 +55,12 @@ import TextField from '@/components/form/TextField.vue'
 import { verifyCodeSchema } from '@/features/auth/schema'
 import AuthHeading from '@/features/auth/components/AuthHeading.vue'
 import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
+import { usePasswordReset } from '@/features/auth/composables/usePasswordReset'
 import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'
 import {
   useForgotPasswordMutation,
-  useLoginWithCodeMutation,
+  useRequestLoginOtpMutation,
+  useVerifyLoginOtpMutation,
   useResendVerificationCodeMutation,
   useVerifyCodeMutation,
   useVerifyForgotPasswordCodeMutation,
@@ -76,15 +78,16 @@ const form = ref({ verifyCode: '' })
 const { validate, validateAt, errors } = useYup(schema)
 
 const { applySession } = useAuth()
+const { setResetTicket } = usePasswordReset()
 const router = useRouter()
 const redirectAfterLogin = useRedirectAfterLogin()
 
-const verifyLoginMutation = useLoginWithCodeMutation()
+const verifyLoginMutation = useVerifyLoginOtpMutation()
 const verifySignupMutation = useVerifyCodeMutation()
 const verifyForgotMutation = useVerifyForgotPasswordCodeMutation()
 const resendCodeMutation = useResendVerificationCodeMutation()
 const forgotMutation = useForgotPasswordMutation()
-const loginCodeMutation = useLoginWithCodeMutation()
+const requestLoginOtpMutation = useRequestLoginOtpMutation()
 
 const submitting = computed(
   () =>
@@ -97,37 +100,43 @@ const resending = computed(
   () =>
     resendCodeMutation.isPending.value ||
     forgotMutation.isPending.value ||
-    loginCodeMutation.isPending.value
+    requestLoginOtpMutation.isPending.value
 )
 
 const onSubmit = async () => {
   const { isValid, payload } = await validate(form.value)
   if (!isValid) return
-  const body = { phone: props.phoneNumber, verifyCode: payload.verifyCode }
+  const code = payload.verifyCode
 
   if (props.mode === 'loginWithCode') {
-    const response = await verifyLoginMutation.mutateAsync(body)
+    const response = await verifyLoginMutation.mutateAsync({
+      phone: props.phoneNumber,
+      code,
+      deviceName: 'web',
+    })
     applySession(response?.data ?? response)
     redirectAfterLogin()
     return
   }
 
   if (props.mode === 'forgotPassword') {
-    await verifyForgotMutation.mutateAsync(body)
+    const response = await verifyForgotMutation.mutateAsync({ phone: props.phoneNumber, code })
+    const data = response?.data ?? response
+    setResetTicket({ phone: props.phoneNumber, token: data?.resetToken })
     router.push({ name: 'reset-password' })
     return
   }
 
-  await verifySignupMutation.mutateAsync(body)
-  emit('verified', body)
+  await verifySignupMutation.mutateAsync({ phone: props.phoneNumber, verifyCode: code })
+  emit('verified', { phone: props.phoneNumber, verifyCode: code })
 }
 
 const onResend = async () => {
   if (!props.phoneNumber) return
-  const body = { phoneNumber: props.phoneNumber }
+  const body = { phone: props.phoneNumber }
   if (props.mode === 'forgotPassword') await forgotMutation.mutateAsync(body)
-  else if (props.mode === 'loginWithCode') await loginCodeMutation.mutateAsync(body)
-  else await resendCodeMutation.mutateAsync(body)
+  else if (props.mode === 'loginWithCode') await requestLoginOtpMutation.mutateAsync(body)
+  else await resendCodeMutation.mutateAsync({ phoneNumber: props.phoneNumber })
 }
 </script>
 

src/features/auth/composables/usePasswordReset.js

@@ -0,0 +1,20 @@
+import { ref } from 'vue'
+
+const phone = ref('')
+const token = ref('')
+
+export const usePasswordReset = () => {
+  const setResetTicket = ({ phone: phoneNumber, token: resetToken }) => {
+    if (phoneNumber) phone.value = phoneNumber
+    if (resetToken) token.value = resetToken
+  }
+
+  const clearResetTicket = () => {
+    phone.value = ''
+    token.value = ''
+  }
+
+  return { phone, token, setResetTicket, clearResetTicket }
+}
+
+export default usePasswordReset

src/features/auth/pages/ResetPasswordPage.vue

@@ -52,6 +52,7 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import useYup from '@/composables/useYup'
 import useAuth from '@/composables/useAuth'
 import BaseButton from '@/components/BaseButton.vue'
@@ -63,15 +64,16 @@ import AuthShell from '@/features/auth/components/AuthShell.vue'
 import { useResetPasswordMutation } from '@/services/query/auth'
 import AuthHeading from '@/features/auth/components/AuthHeading.vue'
 import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
-import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'
+import { usePasswordReset } from '@/features/auth/composables/usePasswordReset'
 
-const { user, applySession } = useAuth()
-const redirectAfterLogin = useRedirectAfterLogin()
+const { user } = useAuth()
+const { phone: resetPhone, token: resetToken, clearResetTicket } = usePasswordReset()
+const router = useRouter()
 
 const schema = resetPasswordSchema
 
 const form = ref({
-  phone: user.value?.phone || '',
+  phone: resetPhone.value || user.value?.phone || '',
   password: '',
   passwordConfirmation: '',
 })
@@ -82,9 +84,14 @@ const resetMutation = useResetPasswordMutation()
 const onSubmit = async () => {
   const { isValid, payload } = await validate(form.value)
   if (!isValid) return
-  const response = await resetMutation.mutateAsync(payload)
-  applySession(response?.data ?? response)
-  redirectAfterLogin()
+  await resetMutation.mutateAsync({
+    phone: form.value.phone,
+    token: resetToken.value,
+    password: payload.password,
+    passwordConfirmation: payload.passwordConfirmation,
+  })
+  clearResetTicket()
+  router.push({ name: 'login' })
 }
 </script>