oauth-confirm moved

src/components/Nav/AuthModal/ConfirmEmail.tsx

@@ -1,4 +1,4 @@
-import styles from './EmailConfirm.module.scss'
+import styles from './ConfirmEmail.module.scss'
 import authModalStyles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { t } from '../../../utils/intl'
@@ -11,7 +11,7 @@ type ConfirmEmailSearchParams = {
   token: string
 }
 
-export const EmailConfirm = () => {
+export const ConfirmEmail = () => {
   const confirmedEmail = 'test@test.com'
 
   const { searchParams } = useRouter<ConfirmEmailSearchParams>()

src/components/Nav/AuthModal/ConfirmOAuth.tsx

@@ -0,0 +1,38 @@
+import styles from './ConfirmEmail.module.scss'
+import authModalStyles from './AuthModal.module.scss'
+import { clsx } from 'clsx'
+import { t } from '../../../utils/intl'
+import { hideModal } from '../../../stores/ui'
+import { onMount } from 'solid-js'
+import { useRouter } from '../../../stores/router'
+
+type ConfirmOAuthSearchParams = {
+  token: string
+}
+
+export const ConfirmOAuth = () => {
+  const { searchParams } = useRouter<ConfirmOAuthSearchParams>()
+
+  onMount(async () => {
+    console.debug('[confirm-oauth] params', searchParams())
+    const token = searchParams().token
+    localStorage.setItem('token', token)
+    window.addEventListener('mousemove', () => window.close())
+    window.addEventListener('keydown', () => window.close())
+    window.addEventListener('click', () => window.close())
+  })
+
+  return (
+    <div>
+      <div class={styles.title}>{t('Hooray! Welcome!')}</div>
+      <div class={styles.text}>
+        {t("You've confirmed your account")} { /* TODO: get '%username%' */ }
+      </div>
+      <div>
+        <button class={clsx('button', authModalStyles.submitButton)} onClick={() => hideModal()}>
+          {t('Back to mainpage')}
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/Nav/AuthModal/index.tsx

@@ -1,5 +1,5 @@
 import { Show } from 'solid-js/web'
-import { createEffect, createMemo, onMount } from 'solid-js'
+import { createEffect, createMemo } from 'solid-js'
 import { t } from '../../../utils/intl'
 import { hideModal } from '../../../stores/ui'
 import { handleClientRouteLinkClick, useRouter } from '../../../stores/router'
@@ -8,25 +8,15 @@ import styles from './AuthModal.module.scss'
 import { LoginForm } from './LoginForm'
 import { RegisterForm } from './RegisterForm'
 import { ForgotPasswordForm } from './ForgotPasswordForm'
-import { EmailConfirm } from './EmailConfirm'
+import { ConfirmEmail } from './ConfirmEmail'
 import type { AuthModalMode, AuthModalSearchParams } from './types'
+import { ConfirmOAuth } from './ConfirmOAuth'
 
-const AUTH_MODAL_MODES: Record<AuthModalMode, AuthModalMode> = {
-  login: 'login',
-  register: 'register',
-  'forgot-password': 'forgot-password',
-  // eslint-disable-next-line sonarjs/no-duplicate-string
-  'confirm-email': 'confirm-email'
-}
 
 export const AuthModal = () => {
   let rootRef: HTMLDivElement
-
   const { searchParams } = useRouter<AuthModalSearchParams>()
-
-  const mode = createMemo<AuthModalMode>(() => {
-    return AUTH_MODAL_MODES[searchParams().mode] || 'login'
-  })
+  const mode = createMemo<AuthModalMode>(() => searchParams().mode || 'login')
 
   createEffect((oldMode) => {
     if (oldMode !== mode()) {
@@ -38,12 +28,12 @@ export const AuthModal = () => {
     <div
       ref={rootRef}
       class={clsx('row', styles.view)}
-      classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }}
+      classList={{ [styles.signUp]: mode() === 'register' || mode().startsWith('confirm-') }}
     >
       <div class={clsx('col-sm-6', 'd-md-none', styles.authImage)}>
         <div
           class={styles.authImageText}
-          classList={{ [styles.hidden]: mode() !== 'register' && mode() !== 'confirm-email' }}
+          classList={{ [styles.hidden]: mode() !== 'register' && !mode().startsWith('confirm-') }}
         >
           <h2>{t('Discours')}</h2>
           <h4>{t(`Join the global community of authors!`)}</h4>
@@ -80,7 +70,10 @@ export const AuthModal = () => {
           <ForgotPasswordForm />
         </Show>
         <Show when={mode() === 'confirm-email'}>
-          <EmailConfirm />
+          <ConfirmEmail />
+        </Show>
+        <Show when={mode() === 'confirm-oauth'}>
+          <ConfirmOAuth />
         </Show>
       </div>
     </div>

src/components/Nav/AuthModal/types.ts

@@ -1,4 +1,4 @@
-export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'forgot-password'
+export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'confirm-oauth' | 'forgot-password'
 
 export type AuthModalSearchParams = {
   mode: AuthModalMode

src/components/Nav/Confirmed.scss

@@ -1,6 +0,0 @@
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 420px;
-}

src/components/Nav/Confirmed.tsx

@@ -1,18 +0,0 @@
-import './Confirmed.scss'
-import { onMount } from 'solid-js'
-import { t } from '../../utils/intl'
-
-export const Confirmed = (props: { token?: string }) => {
-  onMount(() => {
-    const token = props.token ?? document.cookie.split(';').at(0).replace('token=', '')
-    window.addEventListener('mousemove', () => window.close())
-    window.addEventListener('keydown', () => window.close())
-    window.addEventListener('click', () => window.close())
-    localStorage.setItem('token', token)
-  })
-  return (
-    <>
-      <div class="center">{t('You was successfully authorized')}</div>
-    </>
-  )
-}

src/components/Nav/Popup.tsx

@@ -1,11 +1,11 @@
-import { createEffect, createSignal, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, JSX, onMount, Show } from 'solid-js'
 import style from './Popup.module.scss'
 import { hideModal, useModalStore } from '../../stores/ui'
 import { clsx } from 'clsx'
 
 interface PopupProps {
   name: string
-  children: any
+  children: JSX.Element
   class?: string
 }
 

src/graphql/types.gen.ts

@@ -171,7 +171,7 @@ export type Mutation = {
 }
 
 export type MutationConfirmEmailArgs = {
-  code: Scalars['String']
+  token: Scalars['String']
 }
 
 export type MutationCreateChatArgs = {

src/locales/ru.json

@@ -157,6 +157,7 @@
   "Restore password": "Восстановить пароль",
   "Hooray! Welcome!": "Ура! Добро пожаловать!",
   "You've confirmed email": "Вы подтвердили почту",
+  "You've confirmed your account": "Вы подтвердили свою учётную запись",
   "This email is already taken. If it's you": "Такой email уже зарегистрирован. Если это вы",
   "enter": "войдите"
 }

src/pages/confirm/[token].astro

@@ -1,12 +1,4 @@
 ---
-import { Confirmed } from '../../components/Nav/Confirmed'
-import { t } from '../../utils/intl'
-
 const token = Astro.params.token?.toString() || ''
+return Astro.redirect('/?modal=confirm-oauth&token=' + token)
 ---
-<html>
-<head><title>{t('Discours')}</title></head>
-<body>
-  <Confirmed token={token} />
-</body>
-</html>

src/pages/confirm/index.astro

@@ -1,10 +0,0 @@
----
-import { t } from '../../utils/intl'
-import { Confirmed } from '../../components/Nav/Confirmed'
----
-<html>
-<head><title>{t('Discours')}</title></head>
-<body>
-    <Confirmed />
-</body>
-</html>

src/utils/config.ts

@@ -1,4 +1,4 @@
 export const isDev = import.meta.env.MODE === 'development'
 
-export const apiBaseUrl = 'https://newapi.discours.io'
-// export const apiBaseUrl = 'http://localhost:8000'
+// export const apiBaseUrl = 'https://newapi.discours.io'
+export const apiBaseUrl = 'http://localhost:8000'