Merge pull request #388 from Discours/fix/restore_password_and_chek_email

Fix/restore password and chek email

src/components/Nav/AuthModal/AuthModal.module.scss

@@ -188,11 +188,10 @@
   line-height: 16px;
   margin-top: 0.3em;
 
-  /* Red/500 */
+  color: var(--danger-color);
-  color: #d00820;
 
   a {
-    color: #d00820;
+    color: var(--danger-color);
     border-color: #d00820;
 
     &:hover {

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -1,11 +1,11 @@
 import type { AuthModalSearchParams } from './types'
 
+import { ApiResponse, ForgotPasswordResponse } from '@authorizerdev/authorizer-js'
 import { clsx } from 'clsx'
 import { createSignal, JSX, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
-// import { ApiError } from '../../../graphql/error'
 import { useRouter } from '../../../stores/router'
 import { validateEmail } from '../../../utils/validateEmail'
 
@@ -29,16 +29,14 @@ export const ForgotPasswordForm = () => {
   const {
     actions: { forgotPassword },
   } = useSession()
-  const [submitError, setSubmitError] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
-  const [isUserNotFount, setIsUserNotFound] = createSignal(false)
+  const [isUserNotFound, setIsUserNotFound] = createSignal(false)
   const authFormRef: { current: HTMLFormElement } = { current: null }
   const [message, setMessage] = createSignal<string>('')
 
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
-    setSubmitError('')
     setIsUserNotFound(false)
     const newValidationErrors: ValidationErrors = {}
 
@@ -66,15 +64,8 @@ export const ForgotPasswordForm = () => {
         redirect_uri: window.location.origin,
       })
       console.debug('[ForgotPasswordForm] authorizer response:', data)
-      setMessage(data.message)
+      if (errors && errors.some((error) => error.message.includes('bad user credentials'))) {
-
-      console.warn(errors)
-      if (errors.some((e) => e.cause === 'user_not_found')) {
         setIsUserNotFound(true)
-        return
-      } else {
-        const errorText = errors.map((e) => e.message).join(' ') // FIXME
-        setSubmitError(errorText)
       }
     } catch (error) {
       console.error(error)
@@ -111,37 +102,27 @@ export const ForgotPasswordForm = () => {
           />
 
           <label for="email">{t('Email')}</label>
+          <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>
         </div>
 
-        <Show when={submitError()}>
+        <div style={{ 'margin-top': '5rem' }}>
-          <div class={styles.authInfo}>
-            <ul>
-              <li class={styles.warn}>{submitError()}</li>
-            </ul>
-          </div>
-        </Show>
-
-        <Show when={isUserNotFount()}>
-          <div class={styles.authSubtitle}>
-            {t("We can't find you, check email or")}{' '}
-            <a
-              href="#"
-              onClick={(event) => {
-                event.preventDefault()
-                changeSearchParams({
-                  mode: 'register',
-                })
-              }}
-            >
-              {t('register')}
-            </a>
-            <Show when={validationErrors().email}>
-              <div class={styles.validationError}>{validationErrors().email}</div>
-            </Show>
-          </div>
-        </Show>
-
-        <div>
           <button
             class={clsx('button', styles.submitButton)}
             disabled={isSubmitting() || Boolean(message())}

src/components/Nav/AuthModal/LoginForm.tsx

@@ -1,7 +1,7 @@
 import type { AuthModalSearchParams } from './types'
 
 import { clsx } from 'clsx'
-import { createSignal, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
@@ -106,26 +106,22 @@ export const LoginForm = () => {
     setIsSubmitting(true)
 
     try {
-      await signIn({ email: email(), password: password() })
+      const { errors } = await signIn({ email: email(), password: password() })
-
+      if (errors?.length > 0) {
+        if (errors.some((error) => error.message.includes('bad user credentials'))) {
+          setValidationErrors((prev) => ({
+            ...prev,
+            password: t('Something went wrong, check email and password'),
+          }))
+        } else {
+          setSubmitError(t('Error'))
+        }
+        return
+      }
       hideModal()
-
       showSnackbar({ body: t('Welcome!') })
     } catch (error) {
       console.error(error)
-      if (error instanceof ApiError) {
-        if (error.code === 'email_not_confirmed') {
-          setSubmitError(t('Please, confirm email'))
-          setIsEmailNotConfirmed(true)
-
-          return
-        }
-        if (error.code === 'user_not_found') {
-          setSubmitError(t('Something went wrong, check email and password'))
-
-          return
-        }
-      }
       setSubmitError(error.message)
     } finally {
       setIsSubmitting(false)
@@ -170,6 +166,11 @@ export const LoginForm = () => {
         </div>
 
         <PasswordField variant={'login'} onInput={(value) => handlePasswordInput(value)} />
+        <Show when={validationErrors().password}>
+          <div class={styles.validationError} style={{ position: 'static', 'font-size': '1.4rem' }}>
+            {validationErrors().password}
+          </div>
+        </Show>
 
         <div>
           <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -6,7 +6,6 @@ import { Show, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
-// import { ApiError } from '../../../graphql/error'
 import { checkEmail, useEmailChecks } from '../../../stores/emailChecks'
 import { useRouter } from '../../../stores/router'
 import { hideModal } from '../../../stores/ui'
@@ -113,34 +112,30 @@ export const RegisterForm = () => {
         confirm_password: password(),
         redirect_uri: window.location.origin,
       }
-      await signUp(opts)
+      const { errors } = await signUp(opts)
-
+      if (errors && errors.some((error) => error.message.includes('has already signed up'))) {
+        setValidationErrors((prev) => ({
+          ...prev,
+          email: (
+            <>
+              {t('User with this email already exists')},{' '}
+              <span
+                class={'link'}
+                onClick={() =>
+                  changeSearchParams({
+                    mode: 'login',
+                  })
+                }
+              >
+                {t('sign in')}
+              </span>
+            </>
+          ),
+        }))
+      }
       setIsSuccess(true)
     } catch (error) {
       console.error(error)
-      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)
-      }
     } finally {
       setIsSubmitting(false)
     }

src/context/session.tsx

@@ -59,8 +59,8 @@ export type SessionContextType = {
       callback: (() => Promise<void>) | (() => void),
       modalSource: AuthModalSource,
     ) => void
-    signUp: (params: SignupInput) => Promise<AuthToken | void>
+    signUp: (params: SignupInput) => Promise<{ data: AuthToken; errors: Error[] }>
-    signIn: (params: LoginInput) => Promise<void>
+    signIn: (params: LoginInput) => Promise<{ data: AuthToken; errors: Error[] }>
     signOut: () => Promise<void>
     oauth: (provider: string) => Promise<void>
     forgotPassword: (
@@ -273,16 +273,20 @@ export const SessionProvider = (props: {
   })
 
   // authorizer api proxy methods
+  const authenticate = async (authFunction, params) => {
+    const resp = await authFunction(params)
+    console.debug('[context.session] authenticate:', resp)
+    if (resp?.data && !resp.errors) {
+      setSession(resp.data)
+    }
+    return { data: resp?.data, errors: resp?.errors }
+  }
   const signUp = async (params: SignupInput) => {
-    const authResult: ApiResponse<AuthToken> = await authorizer().signup(params)
+    return authenticate(authorizer().signup, params)
-    if (authResult?.data) setSession(authResult.data)
-    if (authResult?.errors) console.error(authResult.errors)
   }
 
   const signIn = async (params: LoginInput) => {
-    const authResult: ApiResponse<AuthToken> = await authorizer().login(params)
+    return authenticate(authorizer().login, params)
-    if (authResult?.data) setSession(authResult.data)
-    if (authResult?.errors) console.error(authResult.errors)
   }
 
   const signOut = async () => {

src/graphql/client/chat.ts

@@ -28,7 +28,6 @@ export const inboxClient = {
 
   loadChats: async (options: QueryLoad_ChatsArgs): Promise<Chat[]> => {
     const resp = await inboxClient.private.query(myChats, options).toPromise()
-    console.log('!!! resp:', resp)
     return resp.data.load_chats.chats
   },