webapp/src/components/Nav/AuthModal/ForgotPasswordForm.tsx

157 lines
4.7 KiB
TypeScript
Raw Normal View History

import type { AuthModalSearchParams } from './types'
2024-02-01 13:28:21 +00:00
import { ApiResponse, ForgotPasswordResponse } from '@authorizerdev/authorizer-js'
2022-10-21 18:17:04 +00:00
import { clsx } from 'clsx'
2022-10-31 16:40:55 +00:00
import { createSignal, JSX, Show } from 'solid-js'
import { useLocalize } from '../../../context/localize'
2023-12-15 13:45:34 +00:00
import { useSession } from '../../../context/session'
2022-10-21 18:17:04 +00:00
import { useRouter } from '../../../stores/router'
import { validateEmail } from '../../../utils/validateEmail'
2022-10-21 18:17:04 +00:00
import { email, setEmail } from './sharedLogic'
import styles from './AuthModal.module.scss'
2022-10-21 18:17:04 +00:00
type FormFields = {
email: string
}
type ValidationErrors = Partial<Record<keyof FormFields, string | JSX.Element>>
export const ForgotPasswordForm = () => {
const { changeSearchParams } = useRouter<AuthModalSearchParams>()
2023-12-24 12:56:30 +00:00
const { t } = useLocalize()
2022-10-21 18:17:04 +00:00
const handleEmailInput = (newEmail: string) => {
setValidationErrors(({ email: _notNeeded, ...rest }) => rest)
2024-01-13 14:22:04 +00:00
setEmail(newEmail.toLowerCase())
2022-10-21 18:17:04 +00:00
}
2023-12-14 11:49:55 +00:00
const {
2024-01-31 13:24:40 +00:00
actions: { forgotPassword },
2023-12-14 11:49:55 +00:00
} = useSession()
2022-10-21 18:17:04 +00:00
const [isSubmitting, setIsSubmitting] = createSignal(false)
const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
2024-02-01 12:29:20 +00:00
const [isUserNotFound, setIsUserNotFound] = createSignal(false)
const authFormRef: { current: HTMLFormElement } = { current: null }
2023-12-03 10:22:42 +00:00
const [message, setMessage] = createSignal<string>('')
2022-10-21 18:17:04 +00:00
const handleSubmit = async (event: Event) => {
event.preventDefault()
2022-11-14 01:17:12 +00:00
setIsUserNotFound(false)
2022-10-21 18:17:04 +00:00
const newValidationErrors: ValidationErrors = {}
if (!email()) {
newValidationErrors.email = t('Please enter email')
} else if (!validateEmail(email())) {
2022-10-21 18:17:04 +00:00
newValidationErrors.email = t('Invalid email')
}
setValidationErrors(newValidationErrors)
const isValid = Object.keys(newValidationErrors).length === 0
if (!isValid) {
authFormRef.current
.querySelector<HTMLInputElement>(`input[name="${Object.keys(newValidationErrors)[0]}"]`)
.focus()
2022-10-21 18:17:04 +00:00
return
}
setIsSubmitting(true)
try {
2024-01-31 13:24:40 +00:00
const { data, errors } = await forgotPassword({
2023-12-03 10:22:42 +00:00
email: email(),
2023-12-24 08:16:41 +00:00
redirect_uri: window.location.origin,
2023-12-03 10:22:42 +00:00
})
2024-01-31 13:54:43 +00:00
console.debug('[ForgotPasswordForm] authorizer response:', data)
setMessage(data.message)
console.warn(errors)
if (errors.some((e) => e.cause === 'user_not_found')) {
2022-11-14 01:17:12 +00:00
setIsUserNotFound(true)
2024-01-31 13:54:43 +00:00
return
} else {
const errorText = errors.map((e) => e.message).join(' ') // FIXME
setSubmitError(errorText)
2022-11-14 01:17:12 +00:00
}
2024-02-01 12:29:20 +00:00
} catch (error) {
2023-12-24 08:16:41 +00:00
console.error(error)
2022-10-21 18:17:04 +00:00
} finally {
setIsSubmitting(false)
}
}
return (
<form
onSubmit={handleSubmit}
class={clsx(styles.authForm, styles.authFormForgetPassword)}
ref={(el) => (authFormRef.current = el)}
>
2023-05-18 20:02:19 +00:00
<div>
2023-12-24 08:16:41 +00:00
<h4>{t('Restore password')}</h4>
2023-12-03 10:22:42 +00:00
<div class={styles.authSubtitle}>
{t(message()) || t('Everything is ok, please give us your email address')}
</div>
2023-08-21 11:11:18 +00:00
<div
class={clsx('pretty-form__item', {
'pretty-form__item--error': validationErrors().email,
2023-08-21 11:11:18 +00:00
})}
>
<input
2023-12-24 08:16:41 +00:00
disabled={Boolean(message())}
2023-08-21 11:11:18 +00:00
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>
2024-02-01 12:29:20 +00:00
<Show when={isUserNotFound()}>
<div class={styles.validationError}>
{t("We can't find you, check email or")}{' '}
<span
class={'link'}
onClick={() =>
changeSearchParams({
mode: 'login',
})
}
>
{t('register')}
</span>
</div>
</Show>
<Show when={validationErrors().email}>
<div class={styles.validationError}>{validationErrors().email}</div>
</Show>
2023-08-21 11:11:18 +00:00
</div>
2024-02-01 12:29:20 +00:00
<div style={{ 'margin-top': '5rem' }}>
2023-12-24 08:16:41 +00:00
<button
class={clsx('button', styles.submitButton)}
disabled={isSubmitting() || Boolean(message())}
type="submit"
>
2023-05-18 20:02:19 +00:00
{isSubmitting() ? '...' : t('Restore password')}
</button>
</div>
<div class={styles.authControl}>
<span
class={styles.authLink}
onClick={() =>
changeSearchParams({
mode: 'login',
})
}
>
2023-05-18 20:02:19 +00:00
{t('I know the password')}
</span>
</div>
2022-10-21 18:17:04 +00:00
</div>
</form>
)
}