Fix modal window
This commit is contained in:
ilya-bkv
parent
afed10dfd2
commit
5a47db8430
|
|
@ -405,6 +405,7 @@
|
|||
"Upload userpic": "Upload userpic",
|
||||
"Upload video": "Upload video",
|
||||
"Uploading image": "Uploading image",
|
||||
"User with this email already exists": "User with this email already exists",
|
||||
"Username": "Username",
|
||||
"Userpic": "Userpic",
|
||||
"Users": "Users",
|
||||
|
|
|
|||
|
|
@ -427,6 +427,7 @@
|
|||
"Upload userpic": "Загрузить аватар",
|
||||
"Upload video": "Загрузить видео",
|
||||
"Uploading image": "Загружаем изображение",
|
||||
"User with this email already exists": "Пользователь с таким email уже существует",
|
||||
"Username": "Имя пользователя",
|
||||
"Userpic": "Аватар",
|
||||
"Users": "Пользователи",
|
||||
|
|
|
|||
|
|
@ -92,11 +92,11 @@ export const App = (props: Props) => {
|
|||
let is404 = props.is404
|
||||
|
||||
createEffect(() => {
|
||||
if (!searchParams().modal) {
|
||||
if (!searchParams().m) {
|
||||
hideModal()
|
||||
}
|
||||
|
||||
const modal = MODALS[searchParams().modal]
|
||||
const modal = MODALS[searchParams().m]
|
||||
if (modal) {
|
||||
showModal(modal)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,11 +172,11 @@ export const CommentsTree = (props: Props) => {
|
|||
fallback={
|
||||
<div class={styles.signInMessage}>
|
||||
{t('To write a comment, you must')}{' '}
|
||||
<a href="?modal=auth&mode=register" class={styles.link}>
|
||||
<a href="?m=auth&mode=register" class={styles.link}>
|
||||
{t('sign up')}
|
||||
</a>{' '}
|
||||
{t('or')}
|
||||
<a href="?modal=auth&mode=login" class={styles.link}>
|
||||
<a href="?m=auth&mode=login" class={styles.link}>
|
||||
{t('sign in')}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ export const AuthorCard = (props: Props) => {
|
|||
>
|
||||
<div class={styles.subscribersContainer}>
|
||||
<Show when={props.followers && props.followers.length > 0}>
|
||||
<a href="?modal=followers" class={styles.subscribers}>
|
||||
<a href="?m=followers" class={styles.subscribers}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => (
|
||||
<Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
|
||||
|
|
@ -155,7 +155,7 @@ export const AuthorCard = (props: Props) => {
|
|||
</Show>
|
||||
|
||||
<Show when={props.following && props.following.length > 0}>
|
||||
<a href="?modal=following" class={styles.subscribers}>
|
||||
<a href="?m=following" class={styles.subscribers}>
|
||||
<For each={props.following.slice(0, 3)}>
|
||||
{(f) => {
|
||||
if ('name' in f) {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const LoginForm = () => {
|
|||
setIsEmailNotConfirmed(false)
|
||||
setSubmitError('')
|
||||
changeSearchParams({ mode: 'forgot-password' })
|
||||
// NOTE: temporary solition, needs logix in authorizer
|
||||
// NOTE: temporary solution, needs logic in authorizer
|
||||
/* FIXME:
|
||||
const { actions: { authorizer } } = useSession()
|
||||
const result = await authorizer().verifyEmail({ token })
|
||||
|
|
@ -140,9 +140,9 @@ export const LoginForm = () => {
|
|||
<div class={styles.authInfo}>
|
||||
<div class={styles.warn}>{submitError()}</div>
|
||||
<Show when={isEmailNotConfirmed()}>
|
||||
<a href="#" onClick={handleSendLinkAgainClick}>
|
||||
<span class={'link'} onClick={handleSendLinkAgainClick}>
|
||||
{t('Send link again')}
|
||||
</a>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
|
|
@ -169,7 +169,7 @@ export const LoginForm = () => {
|
|||
</Show>
|
||||
</div>
|
||||
|
||||
<PasswordField onInput={(value) => handlePasswordInput(value)} />
|
||||
<PasswordField variant={'login'} onInput={(value) => handlePasswordInput(value)} />
|
||||
|
||||
<div>
|
||||
<button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ type Props = {
|
|||
class?: string
|
||||
errorMessage?: (error: string) => void
|
||||
onInput: (value: string) => void
|
||||
variant?: 'login' | 'registration'
|
||||
}
|
||||
|
||||
export const PasswordField = (props: Props) => {
|
||||
|
|
@ -49,7 +50,7 @@ export const PasswordField = (props: Props) => {
|
|||
on(
|
||||
() => error(),
|
||||
() => {
|
||||
props.errorMessage ?? props.errorMessage(error())
|
||||
props.errorMessage && props.errorMessage(error())
|
||||
},
|
||||
{ defer: true },
|
||||
),
|
||||
|
|
@ -59,7 +60,7 @@ export const PasswordField = (props: Props) => {
|
|||
<div class={clsx(styles.PassportField, props.class)}>
|
||||
<div
|
||||
class={clsx('pretty-form__item', {
|
||||
'pretty-form__item--error': error(),
|
||||
'pretty-form__item--error': error() && props.variant !== 'login',
|
||||
})}
|
||||
>
|
||||
<input
|
||||
|
|
@ -78,7 +79,7 @@ export const PasswordField = (props: Props) => {
|
|||
>
|
||||
<Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
|
||||
</button>
|
||||
<Show when={error()}>
|
||||
<Show when={error() && props.variant !== 'login'}>
|
||||
<div class={clsx(styles.registerPassword, styles.validationError)}>{error()}</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -118,13 +118,29 @@ export const RegisterForm = () => {
|
|||
setIsSuccess(true)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
|
||||
// TODO: move to context/session
|
||||
if (error?.code === 'user_already_exists') {
|
||||
return
|
||||
if (error) {
|
||||
if (error.message.includes('has already signed up')) {
|
||||
setValidationErrors((errors) => ({
|
||||
...errors,
|
||||
email: (
|
||||
<>
|
||||
{t('User with this email already exists')},{' '}
|
||||
<span
|
||||
class={'link'}
|
||||
onClick={() =>
|
||||
changeSearchParams({
|
||||
mode: 'login',
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('sign in')}
|
||||
</span>
|
||||
</>
|
||||
),
|
||||
}))
|
||||
}
|
||||
console.error(error)
|
||||
}
|
||||
|
||||
setSubmitError(error.message)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
|
@ -138,9 +154,7 @@ export const RegisterForm = () => {
|
|||
<AuthModalHeader modalType="register" />
|
||||
<Show when={submitError()}>
|
||||
<div class={styles.authInfo}>
|
||||
<ul>
|
||||
<li class={styles.warn}>{submitError()}</li>
|
||||
</ul>
|
||||
<div class={styles.warn}>{submitError()}</div>
|
||||
</div>
|
||||
</Show>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@ export const HeaderAuth = (props: Props) => {
|
|||
when={isAuthenticatedControlsVisible()}
|
||||
fallback={
|
||||
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
|
||||
<a href="?modal=auth&mode=login">
|
||||
<a href="?m=auth&mode=login">
|
||||
<span class={styles.textLabel}>{t('Enter')}</span>
|
||||
<Icon name="key" class={styles.icon} />
|
||||
{/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
|
|||
<a href={getPagePath(router, 'drafts')}>{t('Drafts')}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={`${getPagePath(router, 'author', { slug: author().slug })}?modal=following`}>
|
||||
<a href={`${getPagePath(router, 'author', { slug: author().slug })}?m=following`}>
|
||||
{t('Subscriptions')}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@ export const InviteMembers = (props: Props) => {
|
|||
]
|
||||
|
||||
const { sortedAuthors } = useAuthorsStore({ sortBy: 'name' })
|
||||
const { actions } = useInbox()
|
||||
const {
|
||||
actions: { loadChats, createChat },
|
||||
} = useInbox()
|
||||
const [authorsToInvite, setAuthorsToInvite] = createSignal<InviteAuthor[]>()
|
||||
|
||||
const [searchResultAuthors, setSearchResultAuthors] = createSignal<Author[]>()
|
||||
|
|
@ -99,10 +101,10 @@ export const InviteMembers = (props: Props) => {
|
|||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
const initChat = await actions.createChat(collectionToInvite(), 'chat Title')
|
||||
const initChat = await createChat(collectionToInvite(), 'chat Title')
|
||||
console.debug('[components.Inbox] create chat result:', initChat)
|
||||
hideModal()
|
||||
await actions.loadChats()
|
||||
await loadChats()
|
||||
} catch (error) {
|
||||
console.error('handleCreate chat', error)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export type PageProps = {
|
|||
}
|
||||
|
||||
export type RootSearchParams = {
|
||||
modal: string
|
||||
m: string // modal
|
||||
lang: string
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -152,9 +152,14 @@ export const useRouter = <TSearchParams extends Record<string, string> = Record<
|
|||
searchParamsStore.open(newSearchParams, replace)
|
||||
}
|
||||
|
||||
const clearSearchParams = (replace = false) => {
|
||||
searchParamsStore.open({}, replace)
|
||||
}
|
||||
|
||||
return {
|
||||
page,
|
||||
searchParams,
|
||||
changeSearchParams,
|
||||
clearSearchParams,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const MODALS: Record<ModalType, ModalType> = {
|
|||
|
||||
const [modal, setModal] = createSignal<ModalType>(null)
|
||||
|
||||
const { changeSearchParams } = useRouter<
|
||||
const { changeSearchParams, clearSearchParams } = useRouter<
|
||||
AuthModalSearchParams & ConfirmEmailSearchParams & RootSearchParams
|
||||
>()
|
||||
|
||||
|
|
@ -60,7 +60,10 @@ export const showModal = (modalType: ModalType, modalSource?: AuthModalSource) =
|
|||
setModal(modalType)
|
||||
}
|
||||
|
||||
export const hideModal = () => setModal(null)
|
||||
export const hideModal = () => {
|
||||
clearSearchParams()
|
||||
setModal(null)
|
||||
}
|
||||
|
||||
export const useModalStore = () => {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user