Merge pull request #380 from Discours/hotfix/loginn_modal_fixies

Hotfix/login modal fixies
2024-01-27 13:48:12 +03:00 · 2024-01-27 13:48:12 +03:00 · f0c31013db
commit f0c31013db
parent 1094a2de6f 2b1342bff0
15 changed files with 58 additions and 31 deletions
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -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",
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@ -427,6 +427,7 @@
  "Upload userpic": "Загрузить аватар",
  "Upload video": "Загрузить видео",
  "Uploading image": "Загружаем изображение",
+  "User with this email already exists": "Пользователь с таким email уже существует",
  "Username": "Имя пользователя",
  "Userpic": "Аватар",
  "Users": "Пользователи",
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -93,11 +93,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)
    }
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@ -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')}&nbsp;
-            <a href="?modal=auth&mode=login" class={styles.link}>
+            <a href="?m=auth&mode=login" class={styles.link}>
              {t('sign in')}
            </a>
          </div>
--- a/src/components/AuthGuard/AuthGuard.tsx
+++ b/src/components/AuthGuard/AuthGuard.tsx
@ -26,7 +26,7 @@ export const AuthGuard = (props: Props) => {
        changeSearchParams(
          {
            source: 'authguard',
-            modal: 'auth',
+            m: 'auth',
          },
          true,
        )
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@ -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) {
--- a/src/components/Nav/AuthModal/LoginForm.tsx
+++ b/src/components/Nav/AuthModal/LoginForm.tsx
@ -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">
--- a/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx
+++ b/src/components/Nav/AuthModal/PasswordField/PasswordField.tsx
@ -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>
--- a/src/components/Nav/AuthModal/RegisterForm.tsx
+++ b/src/components/Nav/AuthModal/RegisterForm.tsx
@ -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
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@ -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)} />*/}
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@ -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>
--- a/src/components/_shared/InviteMembers/InviteMembers.tsx
+++ b/src/components/_shared/InviteMembers/InviteMembers.tsx
@ -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)
    }
--- a/src/pages/types.ts
+++ b/src/pages/types.ts
@ -23,7 +23,7 @@ export type PageProps = {
 }

 export type RootSearchParams = {
-  modal: string
+  m: string // modal
  lang: string
 }

--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@ -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,
  }
 }
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@ -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 {