fix: throttle sign-up and sign-in button (#7358)

## Summary

<!-- One sentence describing what changed and why. -->
Throttle signup button to prevent duplicate Firebase accounts

## Changes

- **What**: <!-- Core functionality added/modified -->
  - Add throttle to SignUp Button in SignUpForm component
  - Add throttle to SignIn Button in SignInForm component
  - Add loading state to SignUp Button in SignUpForm component

## Review Focus
related to this Notion page:
https://www.notion.so/comfy-org/Implement-Throttle-signup-button-to-prevent-duplicate-Firebase-accounts-2c46d73d36508193a8d1fb5146674956

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7358-fix-throttle-sign-up-and-sign-in-button-2c66d73d365081278f4dde0f34d60153)
by [Unito](https://www.unito.io)
This commit is contained in:
Yourz
2025-12-11 20:48:22 +08:00
committed by GitHub
parent 8e28dda85c
commit a65e63a322
3 changed files with 16 additions and 7 deletions

View File

@@ -60,7 +60,7 @@
</div>
<!-- Submit Button -->
<ProgressSpinner v-if="loading" class="h-8 w-8" />
<ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
<Button
v-else
type="submit"
@@ -74,6 +74,7 @@
import type { FormSubmitEvent } from '@primevue/forms'
import { Form } from '@primevue/forms'
import { zodResolver } from '@primevue/forms/resolvers/zod'
import { useThrottleFn } from '@vueuse/core'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import Password from 'primevue/password'
@@ -100,11 +101,11 @@ const emit = defineEmits<{
const emailInputId = 'comfy-org-sign-in-email'
const onSubmit = (event: FormSubmitEvent) => {
const onSubmit = useThrottleFn((event: FormSubmitEvent) => {
if (event.valid) {
emit('submit', event.values as SignInData)
}
}
}, 1_500)
const handleForgotPassword = async (
email: string,

View File

@@ -28,7 +28,9 @@
<PasswordFields />
<!-- Submit Button -->
<ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
<Button
v-else
type="submit"
:label="t('auth.signup.signUpButton')"
class="mt-4 h-10 font-medium"
@@ -40,24 +42,30 @@
import type { FormSubmitEvent } from '@primevue/forms'
import { Form, FormField } from '@primevue/forms'
import { zodResolver } from '@primevue/forms/resolvers/zod'
import { useThrottleFn } from '@vueuse/core'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import ProgressSpinner from 'primevue/progressspinner'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { signUpSchema } from '@/schemas/signInSchema'
import type { SignUpData } from '@/schemas/signInSchema'
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
import PasswordFields from './PasswordFields.vue'
const { t } = useI18n()
const authStore = useFirebaseAuthStore()
const loading = computed(() => authStore.loading)
const emit = defineEmits<{
submit: [values: SignUpData]
}>()
const onSubmit = (event: FormSubmitEvent) => {
const onSubmit = useThrottleFn((event: FormSubmitEvent) => {
if (event.valid) {
emit('submit', event.values as SignUpData)
}
}
}, 1_500)
</script>

View File

@@ -59,7 +59,7 @@ function useSubscriptionInternal() {
const renewalDate = new Date(subscriptionStatus.value.renewal_date)
return renewalDate.toLocaleDateString(undefined, {
return renewalDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
@@ -71,7 +71,7 @@ function useSubscriptionInternal() {
const endDate = new Date(subscriptionStatus.value.end_date)
return endDate.toLocaleDateString(undefined, {
return endDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'