add req auth for header buttons (#163)

public/locales/en/translation.json

@@ -70,6 +70,7 @@
   "Create Group": "Create a group",
   "Create account": "Create an account",
   "Create an account to add to your bookmarks": "Create an account to add to your bookmarks",
+  "Create an account to publish articles": "Create an account to publish articles",
   "Create an account to participate in discussions": "Create an account to participate in discussions",
   "Create an account to subscribe": "Create an account to subscribe",
   "Create an account to subscribe to new publications": "Create an account to subscribe to new publications",
@@ -102,6 +103,7 @@
   "Enter text": "Enter text",
   "Enter the Discours": "Enter the Discours",
   "Enter the Discours to add to your bookmarks": "Enter the Discours to add to your bookmarks",
+  "Enter the Discours to publish articles": "Enter the Discours to publish articles",
   "Enter the Discours to participate in discussions": "Enter the Discours to participate in discussions",
   "Enter the Discours to subscribe": "Enter the Discours to subscribe",
   "Enter the Discours to subscribe to new publications": "Enter the Discours to subscribe to new publications",

public/locales/ru/translation.json

@@ -74,6 +74,7 @@
   "Create Group": "Создать группу",
   "Create account": "Создать аккаунт",
   "Create an account to add to your bookmarks": "Создайте аккаунт, чтобы добавить в закладки",
+  "Create an account to publish articles": "Создайте аккаунт, чтобы публиковать статьи",
   "Create an account to participate in discussions": "Создайте аккаунт для участия в дискуссиях",
   "Create an account to subscribe": "Создайте аккаунт, чтобы подписаться",
   "Create an account to subscribe to new publications": "Создайте аккаунт для подписки на новые публикации",
@@ -106,6 +107,7 @@
   "Enter image title": "Введите название изображения",
   "Enter text": "Введите текст",
   "Enter the Discours": "Войти в Дискурс",
+  "Enter the Discours to publish articles": "Войдите в Дискурс, чтобы публиковать статьи",
   "Enter the Discours to add to your bookmarks": "Войдите в Дискурс, чтобы добавить в закладки",
   "Enter the Discours to participate in discussions": "Войдите в Дискурс для участия в дискуссиях",
   "Enter the Discours to subscribe": "Войдите в Дискурс для подписки на новые публикации",

src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx

@@ -19,6 +19,12 @@ export const AuthModalHeader = (props: Props) => {
     const title = modalType === 'login' ? 'Enter the Discours' : 'Create account'
 
     switch (source) {
+      case 'create': {
+        return {
+          title: t(`${title} to publish articles`),
+          description: ''
+        }
+      }
       case 'bookmark': {
         return {
           title: t(`${title} to add to your bookmarks`),

src/components/Nav/AuthModal/types.ts

@@ -1,5 +1,5 @@
 export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'forgot-password'
-export type AuthModalSource = 'discussions' | 'vote' | 'subscribe' | 'bookmark' | 'follow'
+export type AuthModalSource = 'discussions' | 'vote' | 'subscribe' | 'bookmark' | 'follow' | 'create'
 
 export type AuthModalSearchParams = {
   mode: AuthModalMode

src/components/Nav/Header.tsx

@@ -1,6 +1,7 @@
 import { Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
 import { getPagePath } from '@nanostores/router'
 import { clsx } from 'clsx'
+import { redirectPage } from '@nanostores/router'
 
 import { Modal } from './Modal'
 import { AuthModal } from './AuthModal'
@@ -16,6 +17,7 @@ import { router, useRouter } from '../../stores/router'
 import { getDescription } from '../../utils/meta'
 
 import { useLocalize } from '../../context/localize'
+import { useSession } from '../../context/session'
 
 import styles from './Header.module.scss'
 
@@ -37,6 +39,10 @@ export const Header = (props: Props) => {
 
   const { modal } = useModalStore()
 
+  const {
+    actions: { requireAuthentication }
+  } = useSession()
+
   const { page, searchParams } = useRouter<HeaderSearchParams>()
 
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
@@ -86,6 +92,21 @@ export const Header = (props: Props) => {
     props.scrollToComments(value)
   }
 
+  const handleBookmarkButtonClick = (ev) => {
+    requireAuthentication(() => {
+      // TODO: implement bookmark clicked
+      ev.preventDefault()
+    }, 'bookmark')
+  }
+
+  const handleCreateButtonClick = (ev) => {
+    requireAuthentication(() => {
+      ev.preventDefault()
+
+      redirectPage(router, 'create')
+    }, 'create')
+  }
+
   return (
     <header
       class={styles.mainHeader}
@@ -151,11 +172,11 @@ export const Header = (props: Props) => {
                 <Icon name="comment" class={styles.icon} />
                 <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
               </div>
-              <a href={getPagePath(router, 'create')} class={styles.control}>
+              <a href="#" class={styles.control} onClick={handleCreateButtonClick}>
                 <Icon name="pencil-outline" class={styles.icon} />
                 <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
               </a>
-              <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
+              <a href="#" class={styles.control} onClick={handleBookmarkButtonClick}>
                 <Icon name="bookmark" class={styles.icon} />
                 <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
               </a>