mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-22 15:54:09 +00:00
693fbbd3e4
## Summary Migrate the onboarding / login / sign-up / survey pieces from `rh-test` to `main`. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6564-WIP-Bring-Onboarding-in-from-rh-test-2a16d73d365081318483f993e3ca0f89) by [Unito](https://www.unito.io) --------- Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: GitHub Action <action@github.com>
127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<template>
|
|
<div class="flex h-full items-center justify-center p-8">
|
|
<div class="max-w-[100vw] p-2 lg:w-96">
|
|
<!-- Header -->
|
|
<div class="mb-8 flex flex-col gap-4">
|
|
<h1 class="my-0 text-xl leading-normal font-medium">
|
|
{{ t('cloudForgotPassword_title') }}
|
|
</h1>
|
|
<p class="my-0 text-base text-muted">
|
|
{{ t('cloudForgotPassword_instructions') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form class="flex flex-col gap-6" @submit.prevent="handleSubmit">
|
|
<div class="flex flex-col gap-2">
|
|
<label
|
|
class="mb-2 text-base font-medium opacity-80"
|
|
for="reset-email"
|
|
>
|
|
{{ t('cloudForgotPassword_emailLabel') }}
|
|
</label>
|
|
<InputText
|
|
id="reset-email"
|
|
v-model="email"
|
|
type="email"
|
|
:placeholder="t('cloudForgotPassword_emailPlaceholder')"
|
|
class="h-10"
|
|
:invalid="!!errorMessage && !email"
|
|
autocomplete="email"
|
|
required
|
|
/>
|
|
<small v-if="errorMessage" class="text-red-500">
|
|
{{ errorMessage }}
|
|
</small>
|
|
</div>
|
|
|
|
<Message v-if="successMessage" severity="success">
|
|
{{ successMessage }}
|
|
</Message>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<Button
|
|
type="submit"
|
|
:label="t('cloudForgotPassword_sendResetLink')"
|
|
:loading="loading"
|
|
:disabled="!email || loading"
|
|
class="h-10 font-medium text-white"
|
|
/>
|
|
|
|
<Button
|
|
type="button"
|
|
:label="t('cloudForgotPassword_backToLogin')"
|
|
severity="secondary"
|
|
class="h-10 bg-[#2d2e32]"
|
|
@click="navigateToLogin"
|
|
/>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Help text -->
|
|
<p class="mt-5 text-sm text-gray-600">
|
|
{{ t('cloudForgotPassword_didntReceiveEmail') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import InputText from 'primevue/inputtext'
|
|
import Message from 'primevue/message'
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
|
|
|
|
const { t } = useI18n()
|
|
const router = useRouter()
|
|
const authActions = useFirebaseAuthActions()
|
|
|
|
const email = ref('')
|
|
const loading = ref(false)
|
|
const errorMessage = ref('')
|
|
const successMessage = ref('')
|
|
|
|
const navigateToLogin = () => {
|
|
void router.push({ name: 'cloud-login' })
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
if (!email.value) {
|
|
errorMessage.value = t('cloudForgotPassword_emailRequired')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
errorMessage.value = ''
|
|
successMessage.value = ''
|
|
|
|
try {
|
|
// sendPasswordReset is already wrapped and returns a promise
|
|
await authActions.sendPasswordReset(email.value)
|
|
|
|
successMessage.value = t('cloudForgotPassword_passwordResetSent')
|
|
|
|
// Optionally redirect to login after a delay
|
|
setTimeout(() => {
|
|
navigateToLogin()
|
|
}, 3000)
|
|
} catch (error) {
|
|
console.error('Password reset error:', error)
|
|
errorMessage.value = t('cloudForgotPassword_passwordResetError')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
:deep(.p-inputtext) {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: #2d2e32 !important;
|
|
}
|
|
</style>
|