93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import type { AuthModalMode, AuthModalSearchParams } from './types'
|
|
|
|
import { clsx } from 'clsx'
|
|
import { Component, Show, createEffect, createMemo } from 'solid-js'
|
|
import { Dynamic } from 'solid-js/web'
|
|
|
|
import { useLocalize } from '../../../context/localize'
|
|
import { useRouter } from '../../../stores/router'
|
|
import { hideModal } from '../../../stores/ui'
|
|
import { isMobile } from '../../../utils/media-query'
|
|
|
|
import { ChangePasswordForm } from './ChangePasswordForm'
|
|
import { EmailConfirm } from './EmailConfirm'
|
|
import { ForgotPasswordForm } from './ForgotPasswordForm'
|
|
import { LoginForm } from './LoginForm'
|
|
import { RegisterForm } from './RegisterForm'
|
|
|
|
import styles from './AuthModal.module.scss'
|
|
|
|
const AUTH_MODAL_MODES: Record<AuthModalMode, Component> = {
|
|
login: LoginForm,
|
|
register: RegisterForm,
|
|
'forgot-password': ForgotPasswordForm,
|
|
'confirm-email': EmailConfirm,
|
|
'change-password': ChangePasswordForm
|
|
}
|
|
|
|
export const AuthModal = () => {
|
|
const rootRef: { current: HTMLDivElement } = { current: null }
|
|
const { t } = useLocalize()
|
|
const { searchParams } = useRouter<AuthModalSearchParams>()
|
|
const { source } = searchParams()
|
|
|
|
const mode = createMemo<AuthModalMode>(() => {
|
|
return AUTH_MODAL_MODES[searchParams().mode] ? searchParams().mode : 'login'
|
|
})
|
|
|
|
createEffect((oldMode) => {
|
|
if (oldMode !== mode() && !isMobile()) {
|
|
rootRef.current?.querySelector('input')?.focus()
|
|
}
|
|
}, null)
|
|
|
|
return (
|
|
<div
|
|
ref={(el) => (rootRef.current = el)}
|
|
class={clsx(styles.view, {
|
|
row: !source,
|
|
[styles.signUp]: mode() === 'register' || mode() === 'confirm-email'
|
|
})}
|
|
>
|
|
<Show when={!source}>
|
|
<div class={clsx('col-md-12 d-none d-md-flex', styles.authImage)}>
|
|
<div
|
|
class={styles.authImageText}
|
|
classList={{ [styles.hidden]: mode() !== 'register' && mode() !== 'confirm-email' }}
|
|
>
|
|
<div>
|
|
<h4>{t('Join the global community of authors!')}</h4>
|
|
<p class={styles.authBenefits}>
|
|
{t(
|
|
'Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine'
|
|
)}
|
|
.
|
|
{t('New stories every day and even more!')}
|
|
</p>
|
|
</div>
|
|
<p class={styles.disclaimer}>
|
|
{t('By signing up you agree with our')}{' '}
|
|
<a
|
|
href="/about/terms-of-use"
|
|
onClick={() => {
|
|
hideModal()
|
|
}}
|
|
>
|
|
{t('terms of use')}
|
|
</a>
|
|
, {t('personal data usage and email notifications')}.
|
|
</p>
|
|
</div>
|
|
</div>{' '}
|
|
</Show>
|
|
<div
|
|
class={clsx(styles.auth, {
|
|
'col-md-12': !source
|
|
})}
|
|
>
|
|
<Dynamic component={AUTH_MODAL_MODES[mode()]} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|