101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
|
import { Show } from 'solid-js/web'
|
||
|
|
import { t } from '../../../utils/intl'
|
||
|
|
import styles from './AuthModal.module.scss'
|
||
|
|
import { clsx } from 'clsx'
|
||
|
|
import { createSignal, JSX } from 'solid-js'
|
||
|
|
import { useRouter } from '../../../stores/router'
|
||
|
|
import { email, setEmail } from './sharedLogic'
|
||
|
|
import type { AuthModalSearchParams } from './types'
|
||
|
|
import { isValidEmail } from './validators'
|
||
|
|
import { checkEmail, register } from '../../../stores/auth'
|
||
|
|
import { ApiError } from '../../../utils/apiClient'
|
||
|
|
|
||
|
|
type FormFields = {
|
||
|
|
email: string
|
||
|
|
}
|
||
|
|
|
||
|
|
type ValidationErrors = Partial<Record<keyof FormFields, string | JSX.Element>>
|
||
|
|
|
||
|
|
export const ForgotPasswordForm = () => {
|
||
|
|
const { changeSearchParam } = useRouter<AuthModalSearchParams>()
|
||
|
|
|
||
|
|
const handleEmailInput = (newEmail: string) => {
|
||
|
|
setValidationErrors(({ email: _notNeeded, ...rest }) => rest)
|
||
|
|
setEmail(newEmail)
|
||
|
|
}
|
||
|
|
|
||
|
|
const [submitError, setSubmitError] = createSignal('')
|
||
|
|
const [isSubmitting, setIsSubmitting] = createSignal(false)
|
||
|
|
const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
|
||
|
|
|
||
|
|
const handleSubmit = async (event: Event) => {
|
||
|
|
event.preventDefault()
|
||
|
|
|
||
|
|
setSubmitError('')
|
||
|
|
|
||
|
|
const newValidationErrors: ValidationErrors = {}
|
||
|
|
|
||
|
|
if (!email()) {
|
||
|
|
newValidationErrors.email = t('Please enter email')
|
||
|
|
} else if (!isValidEmail(email())) {
|
||
|
|
newValidationErrors.email = t('Invalid email')
|
||
|
|
}
|
||
|
|
|
||
|
|
setValidationErrors(newValidationErrors)
|
||
|
|
|
||
|
|
const isValid = Object.keys(newValidationErrors).length === 0
|
||
|
|
|
||
|
|
if (!isValid) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsSubmitting(true)
|
||
|
|
|
||
|
|
try {
|
||
|
|
// TODO: send mail with link to new password form
|
||
|
|
} catch (error) {
|
||
|
|
setSubmitError(error.message)
|
||
|
|
} finally {
|
||
|
|
setIsSubmitting(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form>
|
||
|
|
<h4>{t('Forgot password?')}</h4>
|
||
|
|
{t('Everything is ok, please give us your email address')}
|
||
|
|
<Show when={submitError()}>
|
||
|
|
<div class={styles.authInfo}>
|
||
|
|
<ul>
|
||
|
|
<li class={styles.warn}>{submitError()}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</Show>
|
||
|
|
<div class="pretty-form__item">
|
||
|
|
<input
|
||
|
|
id="email"
|
||
|
|
name="email"
|
||
|
|
autocomplete="email"
|
||
|
|
type="email"
|
||
|
|
value={email()}
|
||
|
|
placeholder={t('Email')}
|
||
|
|
onInput={(event) => handleEmailInput(event.currentTarget.value)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<label for="email">{t('Email')}</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
|
||
|
|
{isSubmitting() ? '...' : t('Restore password')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class={styles.authControl}>
|
||
|
|
<span class={styles.authLink} onClick={() => changeSearchParam('mode', 'login')}>
|
||
|
|
{t('I know the password')}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
)
|
||
|
|
}
|