Merge pull request #44 from MaxLeiter/passwordPosts

Protected posts

README.md

@@ -30,6 +30,7 @@ You can change these to your liking.
 - `API_URL`: defaults to localhost:3001, but allows you to host the front-end separately from the backend on a service like Vercel or Netlify
 - `WELCOME_CONTENT`: a markdown string (with \n newlines) that's rendered on the home page
 - `WELCOME_TITLE`: the file title for the post on the homepage.
+- `SECRET_KEY`: a secret key used for validating API requests that is never exposed to the browser
 
 `server/.env`:
 
@@ -38,6 +39,7 @@ You can change these to your liking.
 - `JWT_SECRET`: a secure token for JWT tokens. You can generate one [here](https://www.grc.com/passwords.htm).
 - `MEMORY_DB`: if `true`, a sqlite database will not be created and changes will only exist in memory. Mainly for the demo.
 - `REGISTRATION_PASSWORD`: if MEMORY_DB is not `true`, the user will be required to provide this password to sign-up, in addition to their username and account password. If it's not set, no password will be required.
+- `SECRET_KEY`: the same secret key as the client
 
 ## Current status
 

client/.env.local

@@ -1,3 +1,4 @@
 API_URL=http://localhost:3000
 WELCOME_TITLE="Welcome to Drift"
 WELCOME_CONTENT="### Drift is a self-hostable clone of GitHub Gist. \nIt is a simple way to share code and text snippets with your friends, with support for the following:\n  \n  - Render GitHub Extended Markdown (including images)\n  - User authentication\n  - Private, public, and secret posts\n  \n  If you want to signup, you can join at [/signup](/signup) as long as you have a passcode provided by the administrator (which you don\'t need for this demo).\n  **This demo is on a memory-only database, so accounts and pastes can be deleted at any time.**\n  You can find the source code on [GitHub](https://github.com/MaxLeiter/drift).\n  \n  Drift was inspired by [this tweet](https://twitter.com/emilyst/status/1499858264346935297):\n  > What is the absolute closest thing to GitHub Gist that can be self-hosted?\n    In terms of design and functionality. Hosts images and markdown, rendered. Creates links that can be private or public. Uses/requires registration. I have looked at dozens of pastebin-like things."
+SECRET_KEY=secret

client/components/document/formatting-icons/index.tsx

@@ -1,5 +1,8 @@
 import { ButtonGroup, Button } from "@geist-ui/core"
-import { Bold, Italic, Link, Image as ImageIcon } from '@geist-ui/icons'
+import Bold from '@geist-ui/icons/bold'
+import Italic from '@geist-ui/icons/italic'
+import Link from '@geist-ui/icons/link'
+import ImageIcon from '@geist-ui/icons/image'
 import { RefObject, useCallback, useMemo } from "react"
 import styles from '../document.module.css'
 
@@ -20,7 +23,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
     //     return { textBefore: '', textAfter: '' }
     // }, [textareaRef,])
 
-    const handleBoldClick = useCallback((e) => {
+    const handleBoldClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd
@@ -37,7 +40,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
-    const handleItalicClick = useCallback((e) => {
+    const handleItalicClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd
@@ -52,7 +55,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
-    const handleLinkClick = useCallback((e) => {
+    const handleLinkClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd
@@ -73,7 +76,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
         }
     }, [setText, textareaRef])
 
-    const handleImageClick = useCallback((e) => {
+    const handleImageClick = useCallback(() => {
         if (textareaRef?.current && setText) {
             const selectionStart = textareaRef.current.selectionStart
             const selectionEnd = textareaRef.current.selectionEnd

client/components/document/index.tsx

@@ -2,7 +2,9 @@ import { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea, Tooltip } fro
 import { ChangeEvent, memo, useCallback, useMemo, useRef, useState } from "react"
 import styles from './document.module.css'
 import MarkdownPreview from '../preview'
-import { Trash, Download, ExternalLink } from '@geist-ui/icons'
+import Trash from '@geist-ui/icons/trash'
+import Download from '@geist-ui/icons/download'
+import ExternalLink from '@geist-ui/icons/externalLink'
 import FormattingIcons from "./formatting-icons"
 import Skeleton from "react-loading-skeleton"
 // import Link from "next/link"

client/components/header/controls.tsx

@@ -2,15 +2,15 @@ import React from 'react'
 import MoonIcon from '@geist-ui/icons/moon'
 import SunIcon from '@geist-ui/icons/sun'
 import { Select } from '@geist-ui/core'
-import { ThemeProps } from '../../pages/_app'
 // import { useAllThemes, useTheme } from '@geist-ui/core'
 import styles from './header.module.css'
+import { ThemeProps } from '@lib/types'
+import Cookies from 'js-cookie'
 
 const Controls = ({ changeTheme, theme }: ThemeProps) => {
     const switchThemes = (type: string | string[]) => {
         changeTheme()
-        if (typeof window === 'undefined' || !window.localStorage) return
+        Cookies.set('drift-theme', Array.isArray(type) ? type[0] : type)
-        window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
     }
 
 

client/components/header/index.tsx

@@ -1,11 +1,21 @@
 import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, Tabs, Spacer } from "@geist-ui/core";
-import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons";
 import { DriftProps } from "../../pages/_app";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import styles from './header.module.css';
 import { useRouter } from "next/router";
 import useSignedIn from "../../lib/hooks/use-signed-in";
 
+import HomeIcon from '@geist-ui/icons/home';
+import MenuIcon from '@geist-ui/icons/menu';
+import GitHubIcon from '@geist-ui/icons/github';
+import SignOutIcon from '@geist-ui/icons/userX';
+import SignInIcon from '@geist-ui/icons/user';
+import SignUpIcon from '@geist-ui/icons/userPlus';
+import NewIcon from '@geist-ui/icons/plusCircle';
+import YourIcon from '@geist-ui/icons/list'
+import MoonIcon from '@geist-ui/icons/moon';
+import SunIcon from '@geist-ui/icons/sun';
+
 type Tab = {
     name: string
     icon: JSX.Element
@@ -61,7 +71,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
             {
                 name: "Sign out",
                 href: "/signout",
-                icon: <SignoutIcon />,
+                icon: <SignOutIcon />,
                 condition: isSignedIn,
                 value: "signout"
             },
@@ -94,7 +104,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                         setSelectedTab('');
                     }
                 },
-                icon: theme === 'light' ? <Moon /> : <Sun />,
+                icon: theme === 'light' ? <MoonIcon /> : <SunIcon />,
                 condition: true,
                 value: "theme",
             }

client/components/my-posts/index.tsx

@@ -1,17 +1,7 @@
-import useSWR from "swr"
 import PostList from "../post-list"
-import Cookies from "js-cookie"
 
-const fetcher = (url: string) => fetch(url, {
+const MyPosts = ({ posts, error }: { posts: any, error: any }) => {
-    headers: {
+    return <PostList posts={posts} error={error} />
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${Cookies.get("drift-token")}`
-    },
-}).then(r => r.json())
-
-const MyPosts = () => {
-    const { data, error } = useSWR('/server-api/users/mine', fetcher)
-    return <PostList posts={data} error={error} />
 }
 
 export default MyPosts

client/components/new-post/drag-and-drop/index.tsx

@@ -1,10 +1,9 @@
-import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
+import { Text, useTheme, useToasts } from '@geist-ui/core'
-import { memo, useCallback, useEffect } from 'react'
+import { memo } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './drag-and-drop.module.css'
-import { Document } from '../'
+import type { Document } from '@lib/types'
 import generateUUID from '@lib/generate-uuid'
-import { XCircle } from '@geist-ui/icons'
 const allowedFileTypes = [
     'application/json',
     'application/x-javascript',
@@ -99,7 +98,7 @@ function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
     const { setToast } = useToasts()
     const onDrop = async (acceptedFiles: File[]) => {
         const newDocs = await Promise.all(acceptedFiles.map((file) => {
-            return new Promise<Document>((resolve, reject) => {
+            return new Promise<Document>((resolve) => {
                 const reader = new FileReader()
 
                 reader.onabort = () => setToast({ text: 'File reading was aborted', type: 'error' })

client/components/new-post/index.tsx

@@ -2,28 +2,55 @@ import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react'
 import generateUUID from '@lib/generate-uuid';
-import Document from '../document';
+import DocumentComponent from '../document';
 import FileDropzone from './drag-and-drop';
 import styles from './post.module.css'
 import Title from './title';
 import Cookies from 'js-cookie'
-
+import type { PostVisibility, Document as DocumentType } from '@lib/types';
-export type Document = {
+import PasswordModal from './password';
-    title: string
+import getPostPath from '@lib/get-post-path';
-    content: string
-    id: string
-}
 
 const Post = () => {
     const { setToast } = useToasts()
-
     const router = useRouter();
     const [title, setTitle] = useState<string>()
-    const [docs, setDocs] = useState<Document[]>([{
+    const [docs, setDocs] = useState<DocumentType[]>([{
         title: '',
         content: '',
         id: generateUUID()
     }])
+    const [passwordModalVisible, setPasswordModalVisible] = useState(false)
+    const sendRequest = useCallback(async (url: string, data: { visibility?: PostVisibility, title?: string, files?: DocumentType[], password?: string, userId: string }) => {
+        const res = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${Cookies.get('drift-token')}`
+            },
+            body: JSON.stringify({
+                title,
+                files: docs,
+                ...data,
+            })
+        })
+
+        if (res.ok) {
+            const json = await res.json()
+            router.push(getPostPath(json.visibility, json.id))
+        } else {
+            const json = await res.json()
+            setToast({
+                text: json.message,
+                type: 'error'
+            })
+        }
+
+    }, [docs, router, setToast, title])
+
+    const closePasswordModel = () => {
+        setPasswordModalVisible(false)
+    }
 
     const [isSubmitting, setSubmitting] = useState(false)
 
@@ -31,29 +58,25 @@ const Post = () => {
         setDocs(docs.filter((doc) => doc.id !== id))
     }
 
-    const onSubmit = async (visibility: string) => {
+    const onSubmit = async (visibility: PostVisibility, password?: string) => {
         setSubmitting(true)
-        const response = await fetch('/server-api/posts/create', {
+
-            method: 'POST',
+        if (visibility === 'protected' && !password) {
-            headers: {
+            setPasswordModalVisible(true)
-                'Content-Type': 'application/json',
+            return
-                'Authorization': `Bearer ${Cookies.get("drift-token")}`
+        }
-            },
+
-            body: JSON.stringify({
+        await sendRequest('/server-api/posts/create', {
             title,
             files: docs,
             visibility,
-                userId: Cookies.get("drift-userid"),
+            password,
+            userId: Cookies.get('drift-userid') || ''
         })
-        })
-
-        const json = await response.json()
-        setSubmitting(false)
-        if (json.id)
-            router.push(`/post/${json.id}`)
-        else {
-            setToast({ text: json.error.message, type: "error" })
     }
+
+    const onClosePasswordModal = () => {
+        setPasswordModalVisible(false)
     }
 
     const updateTitle = useCallback((title: string, id: string) => {
@@ -64,9 +87,9 @@ const Post = () => {
         setDocs(docs.map((doc) => doc.id === id ? { ...doc, content } : doc))
     }, [docs])
 
-    const uploadDocs = useCallback((files: Document[]) => {
+    const uploadDocs = useCallback((files: DocumentType[]) => {
         // if no title is set and the only document is empty,
-        const isFirstDocEmpty = docs.length === 1 && docs[0].title === '' && docs[0].content === ''
+        const isFirstDocEmpty = docs.length <= 1 && docs[0].title === '' && docs[0].content === ''
         const shouldSetTitle = !title && isFirstDocEmpty
         if (shouldSetTitle) {
             if (files.length === 1) {
@@ -87,7 +110,7 @@ const Post = () => {
             {
                 docs.map(({ content, id, title }) => {
                     return (
-                        <Document
+                        <DocumentComponent
                             remove={() => remove(id)}
                             key={id}
                             editable={true}
@@ -120,7 +143,9 @@ const Post = () => {
                     <ButtonDropdown.Item main onClick={() => onSubmit('private')}>Create Private</ButtonDropdown.Item>
                     <ButtonDropdown.Item onClick={() => onSubmit('public')} >Create Public</ButtonDropdown.Item>
                     <ButtonDropdown.Item onClick={() => onSubmit('unlisted')} >Create Unlisted</ButtonDropdown.Item>
+                    <ButtonDropdown.Item onClick={() => onSubmit('protected')} >Create with Password</ButtonDropdown.Item>
                 </ButtonDropdown>
+                <PasswordModal isOpen={passwordModalVisible} onClose={onClosePasswordModal} onSubmit={(password) => onSubmit('protected', password)} />
             </div>
         </div>
     )

client/components/new-post/password/index.tsx

@@ -0,0 +1,50 @@
+import { Input, Modal, Note, Spacer } from "@geist-ui/core"
+import { useState } from "react"
+
+type Props = {
+    isOpen: boolean
+    onClose: () => void
+    onSubmit: (password: string) => void
+}
+
+const PasswordModal = ({ isOpen, onClose, onSubmit: onSubmitAfterVerify }: Props) => {
+    const [password, setPassword] = useState<string>()
+    const [confirmPassword, setConfirmPassword] = useState<string>()
+    const [error, setError] = useState<string>()
+
+    const onSubmit = () => {
+        if (!password || !confirmPassword) {
+            setError('Please enter a password')
+            return
+        }
+
+        if (password !== confirmPassword) {
+            setError("Passwords do not match")
+            return
+        }
+
+        onSubmitAfterVerify(password)
+    }
+
+    return (<>
+        {<Modal visible={isOpen} >
+            <Modal.Title>Enter a password</Modal.Title>
+            <Modal.Content>
+                {!error && <Note type="warning" label='Warning'>
+                    This doesn&apos;t protect your post from the server administrator.
+                </Note>}
+                {error && <Note type="error" label='Error'>
+                    {error}
+                </Note>}
+                <Spacer />
+                <Input width={"100%"} label="Password" marginBottom={1} htmlType="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
+                <Input width={"100%"} label="Confirm" htmlType="password" placeholder="Confirm Password" onChange={(e) => setConfirmPassword(e.target.value)} />
+            </Modal.Content>
+            <Modal.Action passive onClick={onClose}>Cancel</Modal.Action>
+            <Modal.Action onClick={onSubmit}>Submit</Modal.Action>
+        </Modal>}
+    </>)
+}
+
+
+export default PasswordModal

client/components/new-post/title/index.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, memo } from 'react'
+import { memo } from 'react'
 import { Text, Input } from '@geist-ui/core'
 import ShiftBy from '@components/shift-by'
 import styles from '../post.module.css'

client/components/post-list/list-item.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react"
 import timeAgo from "@lib/time-ago"
 import ShiftBy from "../shift-by"
 import VisibilityBadge from "../visibility-badge"
+import getPostPath from "@lib/get-post-path"
 
 const FilenameInput = ({ title }: { title: string }) => <Input
     value={title}
@@ -33,7 +34,7 @@ const ListItem = ({ post }: { post: any }) => {
             <Grid.Container>
                 <Grid md={14} xs={14}>
                     <Text h3 paddingLeft={1 / 2} >
-                        <NextLink passHref={true} href={`/post/${post.id}`}>
+                        <NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
                             <Link color>{post.title}
                                 <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
                             </Link>

client/components/preview/react-markdown-preview.tsx

@@ -1,14 +1,15 @@
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-async-light';
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 
 // @ts-ignore because of no types in remark-a11y-emoji
-import a11yEmoji from '@fec/remark-a11y-emoji';
+// import a11yEmoji from '@fec/remark-a11y-emoji';
 
 import styles from './preview.module.css'
-import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus'
+import light from 'react-syntax-highlighter/dist/cjs/styles/prism/vs'
 import useSharedState from "@lib/hooks/use-shared-state";
 
 type Props = {
@@ -20,7 +21,7 @@ const ReactMarkdownPreview = ({ content, height }: Props) => {
     const [themeType] = useSharedState<string>('theme')
     return (<div style={{ height }}>
         <ReactMarkdown className={styles.markdownPreview}
-            remarkPlugins={[remarkGfm, a11yEmoji]}
+            remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]]}
             components={{
                 code({ node, inline, className, children, ...props }) {

client/components/visibility-badge/index.tsx

@@ -1,9 +1,8 @@
 import { Badge } from "@geist-ui/core"
-
+import { PostVisibility } from "@lib/types"
-type Visibility = "unlisted" | "private" | "public"
 
 type Props = {
-    visibility: Visibility
+    visibility: PostVisibility
 }
 
 const VisibilityBadge = ({ visibility }: Props) => {

client/lib/get-post-path.ts

@@ -0,0 +1,13 @@
+import type { PostVisibility } from "./types"
+
+export default function getPostPath(visibility: PostVisibility, id: string) {
+    switch (visibility) {
+        case "private":
+            return `/post/private/${id}`
+        case "protected":
+            return `/post/protected/${id}`
+        case "unlisted":
+        case "public":
+            return `/post/${id}`
+    }
+}

client/lib/types.d.ts

@@ -0,0 +1,12 @@
+export type PostVisibility = "unlisted" | "private" | "public" | "protected"
+
+export type ThemeProps = {
+    theme: "light" | "dark" | string,
+    changeTheme: () => void
+}
+
+export type Document = {
+    title: string
+    content: string
+    id: string
+}

client/next.config.js

@@ -1,6 +1,10 @@
 const dotenv = require("dotenv");
 dotenv.config();
 
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -21,4 +25,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);

client/package.json

@@ -6,10 +6,10 @@
     "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@fec/remark-a11y-emoji": "^3.1.0",
     "@geist-ui/core": "^2.3.5",
     "@geist-ui/icons": "^1.0.1",
     "@types/cookie": "^0.4.1",
@@ -19,7 +19,8 @@
     "cookie": "^0.4.2",
     "dotenv": "^16.0.0",
     "js-cookie": "^3.0.1",
-    "next": "12.1.0",
+    "next": "^12.1.1-canary.15",
+    "prism-react-renderer": "^1.3.1",
     "prismjs": "^1.27.0",
     "react": "17.0.2",
     "react-debounce-render": "^8.0.2",
@@ -31,18 +32,21 @@
     "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.2",
+    "rehype-remark": "^9.1.2",
     "rehype-slug": "^5.0.1",
-    "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "swr": "^1.2.2"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^12.1.0",
     "@types/node": "17.0.21",
     "@types/react": "17.0.39",
+    "@types/react-dom": "^17.0.14",
     "@types/react-syntax-highlighter": "^13.5.2",
     "eslint": "8.10.0",
     "eslint-config-next": "12.1.0",
-    "typescript": "4.6.2"
+    "typescript": "4.6.2",
+    "typescript-plugin-css-modules": "^3.4.0"
   }
 }

client/pages/_app.tsx

@@ -7,17 +7,8 @@ import useSharedState from '@lib/hooks/use-shared-state';
 import 'react-loading-skeleton/dist/skeleton.css'
 import { SkeletonTheme } from 'react-loading-skeleton';
 import Head from 'next/head';
-
+import { ThemeProps } from '@lib/types';
-export type ThemeProps = {
+import Cookies from 'js-cookie';
-  theme: "light" | "dark" | string,
-  changeTheme: () => void
-}
-
-export type PostProps = {
-  renderedPost: any | null, // Still don't have an official data type for posts
-  theme: "light" | "dark" | string,
-  changeTheme: () => void
-}
 
 type AppProps<P = any> = {
   pageProps: P;
@@ -26,11 +17,10 @@ type AppProps<P = any> = {
 export type DriftProps = ThemeProps
 
 function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
-  const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
+  const [themeType, setThemeType] = useSharedState<string>('theme', Cookies.get('drift-theme') || 'light')
-  const theme = useTheme();
+
   useEffect(() => {
-    if (typeof window === 'undefined' || !window.localStorage) return
+    const storedTheme = Cookies.get('drift-theme')
-    const storedTheme = window.localStorage.getItem('drift-theme')
     if (storedTheme) setThemeType(storedTheme)
     // TODO: useReducer?
   }, [setThemeType, themeType])

client/pages/_middleware.tsx

@@ -2,7 +2,7 @@ import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
 
 const PUBLIC_FILE = /.(.*)$/
 
-export function middleware(req: NextRequest, ev: NextFetchEvent) {
+export function middleware(req: NextRequest) {
     const pathname = req.nextUrl.pathname
     const signedIn = req.cookies['drift-token']
     const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href

client/pages/api/raw/[id].ts

@@ -2,13 +2,22 @@ import { NextApiRequest, NextApiResponse } from "next"
 
 const getRawFile = async (req: NextApiRequest, res: NextApiResponse) => {
     const { id, download } = req.query
-    const file = await fetch(`${process.env.API_URL}/files/raw/${id}`)
+    const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
+        headers: {
+            'Accept': 'text/plain',
+            'x-secret-key': process.env.SECRET_KEY || '',
+            'Authorization': `Bearer ${req.cookies['drift-token']}`,
+        }
+    })
+
+    res.setHeader("Content-Type", "text/plain")
+    res.setHeader('Cache-Control', 's-maxage=86400');
+
     if (file.ok) {
         const data = await file.json()
         const { title, content } = data
         // serve the file raw as plain text
-        res.setHeader("Content-Type", "text/plain")
+
-        res.setHeader('Cache-Control', 's-maxage=86400');
         if (download) {
             res.setHeader("Content-Disposition", `attachment; filename="${title}"`)
         } else {

client/pages/index.tsx

@@ -2,11 +2,11 @@ import styles from '@styles/Home.module.css'
 import { Page, Spacer, Text } from '@geist-ui/core'
 
 import Header from '@components/header'
-import { ThemeProps } from './_app'
 import Document from '@components/document'
 import Image from 'next/image'
 import ShiftBy from '@components/shift-by'
 import PageSeo from '@components/page-seo'
+import { ThemeProps } from '@lib/types'
 
 export function getStaticProps() {
   const introDoc = process.env.WELCOME_CONTENT

client/pages/mine.tsx

@@ -3,18 +3,58 @@ import { Page } from '@geist-ui/core'
 
 import Header from '@components/header'
 import MyPosts from '@components/my-posts'
+import cookie from "cookie";
+import { GetServerSideProps } from 'next';
+import { ThemeProps } from '@lib/types';
 
-const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => {
+const Home = ({ posts, error, theme, changeTheme }: ThemeProps & { posts: any; error: any; }) => {
   return (
     <Page className={styles.container} width="100%">
       <Page.Header>
         <Header theme={theme} changeTheme={changeTheme} />
       </Page.Header>
       <Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
-        <MyPosts />
+        <MyPosts error={error} posts={posts} />
       </Page.Content>
     </Page >
   )
 }
+// get server side props 
+export const getServerSideProps: GetServerSideProps = async ({ req }) => {
+  const driftToken = cookie.parse(req.headers.cookie || '')[`drift-token`]
+  if (!driftToken) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      }
+    }
+  }
+
+  const posts = await fetch(process.env.API_URL + `/posts/mine`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${driftToken}`,
+      "x-secret-key": process.env.SECRET_KEY || ''
+    }
+  })
+
+  if (!posts.ok || posts.status !== 200) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false,
+      }
+    }
+  }
+
+  return {
+    props: {
+      posts: await posts.json(),
+      error: posts.status !== 200,
+    }
+  }
+}
 
 export default Home

client/pages/new.tsx

@@ -3,12 +3,10 @@ import NewPost from '@components/new-post'
 import { Page } from '@geist-ui/core'
 import useSignedIn from '@lib/hooks/use-signed-in'
 import Header from '@components/header'
-import { ThemeProps } from './_app'
-import { useRouter } from 'next/router'
 import PageSeo from '@components/page-seo'
+import { ThemeProps } from '@lib/types'
 
 const New = ({ theme, changeTheme }: ThemeProps) => {
-  const router = useRouter()
   const isSignedIn = useSignedIn()
 
   return (

client/pages/post/[id].tsx

@@ -1,45 +1,32 @@
 import { Button, Page, Text } from "@geist-ui/core";
-import Skeleton from 'react-loading-skeleton';
 
-import { useRouter } from "next/router";
+import Document from '@components/document'
-import { useEffect, useState } from "react";
+import Header from "@components/header";
-import Document from '../../components/document'
+import VisibilityBadge from "@components/visibility-badge";
-import Header from "../../components/header";
-import VisibilityBadge from "../../components/visibility-badge";
-import { PostProps } from "../_app";
 import PageSeo from "components/page-seo";
 import styles from './styles.module.css';
-import Cookies from "js-cookie";
+import type { GetStaticPaths, GetStaticProps } from "next";
-import cookie from "cookie";
+import { PostVisibility, ThemeProps } from "@lib/types";
-import { GetServerSideProps } from "next";
 
-
+type File = {
-const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
+    id: string
-    const [post, setPost] = useState(renderedPost);
+    title: string
-    const [isLoading, setIsLoading] = useState(true)
+    content: string
-    const [error, setError] = useState<string>()
-    const router = useRouter();
-
-    useEffect(() => {
-        async function fetchPost() {
-            setIsLoading(true);
-
-            if (renderedPost) {
-                setPost(renderedPost)
-                setIsLoading(false)
-                
-                return;
 }
 
-            if (!Cookies.get('drift-token')) {
+type Files = File[]
-                router.push('/signin');
-            } else {
-                setError('Something went wrong fetching the post');
-            }
-        }
-        fetchPost()
-    }, [router, router.query.id])
 
+export type PostProps = ThemeProps & {
+    post: {
+        id: string
+        title: string
+        description: string
+        visibility: PostVisibility
+        files: Files
+    }
+}
+
+const Post = ({ post, theme, changeTheme }: PostProps) => {
     const download = async () => {
         const clientZip = require("client-zip")
 
@@ -59,25 +46,17 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
 
     return (
         <Page width={"100%"}>
-            {!isLoading && (
             <PageSeo
                 title={`${post.title} - Drift`}
                 description={post.description}
-                    isPrivate={post.visibility === 'private'}
+                isPrivate={false}
             />
-            )}
 
             <Page.Header>
                 <Header theme={theme} changeTheme={changeTheme} />
             </Page.Header>
             <Page.Content width={"var(--main-content-width)"} margin="auto">
                 {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
-
-                {error && <Text type="error">{error}</Text>}
-                {!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
-                    <Document skeleton={true} />
-                </>}
-                {!isLoading && post && <>
                 <div className={styles.header}>
                     <div className={styles.titleAndBadge}>
                         <Text h2>{post.title}</Text>
@@ -97,42 +76,44 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
                         initialTab={'preview'}
                     />
                 ))}
-                </>}
             </Page.Content>
         </Page >
     )
 }
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getStaticPaths: GetStaticPaths = async () => {
-
+    const posts = await fetch(process.env.API_URL + `/posts/`, {
-    const headers = context.req.headers;
-    const host = headers.host;
-    const driftToken = cookie.parse(headers.cookie || '')[`drift-token`];
-    
-    let post;
-    
-    if (context.query.id) {
-        post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
         method: "GET",
         headers: {
             "Content-Type": "application/json",
-                "Authorization": `Bearer ${driftToken}`
+            "x-secret-key": process.env.SECRET_KEY || "",
         }
-        });
+    })
 
-        try {
+    const json = await posts.json()
-            post = await post.json();
+    const filtered = json.filter((post: any) => post.visibility === "public" || post.visibility === "unlisted")
-        } catch (e) {
+    const paths = filtered.map((post: any) => ({
-            console.log(e);
+        params: { id: post.id }
-            post = null;
+    }))
+
+    return { paths, fallback: 'blocking' }
 }
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+    const post = await fetch(process.env.API_URL + `/posts/${params?.id}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            "x-secret-key": process.env.SECRET_KEY || "",
         }
+    })
 
     return {
         props: {
-            renderedPost: post
+            post: await post.json()
-        }
+        },
     }
 }
 
 export default Post
+

client/pages/post/private/[id].tsx

@@ -0,0 +1,129 @@
+import { Button, Page, Text } from "@geist-ui/core";
+
+import Document from '@components/document'
+import Header from "@components/header";
+import VisibilityBadge from "@components/visibility-badge";
+import PageSeo from "components/page-seo";
+import styles from '../styles.module.css';
+import cookie from "cookie";
+import type { GetServerSideProps } from "next";
+import { PostVisibility, ThemeProps } from "@lib/types";
+
+type File = {
+    id: string
+    title: string
+    content: string
+}
+
+type Files = File[]
+
+export type PostProps = ThemeProps & {
+    post: {
+        id: string
+        title: string
+        description: string
+        visibility: PostVisibility
+        files: Files
+    }
+}
+
+const Post = ({ post, theme, changeTheme }: PostProps) => {
+    const download = async () => {
+        const clientZip = require("client-zip")
+
+        const blob = await clientZip.downloadZip(post.files.map((file: any) => {
+            return {
+                name: file.title,
+                input: file.content,
+                lastModified: new Date(file.updatedAt)
+            }
+        })).blob()
+        const link = document.createElement("a")
+        link.href = URL.createObjectURL(blob)
+        link.download = `${post.title}.zip`
+        link.click()
+        link.remove()
+    }
+
+    return (
+        <Page width={"100%"}>
+            <PageSeo
+                title={`${post.title} - Drift`}
+                description={post.description}
+                isPrivate={true}
+            />
+
+            <Page.Header>
+                <Header theme={theme} changeTheme={changeTheme} />
+            </Page.Header>
+            <Page.Content width={"var(--main-content-width)"} margin="auto">
+                {/* {!isLoading && <PostFileExplorer files={post.files} />} */}
+                <div className={styles.header}>
+                    <div className={styles.titleAndBadge}>
+                        <Text h2>{post.title}</Text>
+                        <span><VisibilityBadge visibility={post.visibility} /></span>
+                    </div>
+                    <Button auto onClick={download}>
+                        Download as ZIP archive
+                    </Button>
+                </div>
+                {post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
+                    <Document
+                        key={id}
+                        id={id}
+                        content={content}
+                        title={title}
+                        editable={false}
+                        initialTab={'preview'}
+                    />
+                ))}
+            </Page.Content>
+        </Page >
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    const headers = context.req.headers
+    const host = headers.host
+    const driftToken = cookie.parse(headers.cookie || '')[`drift-token`]
+
+    if (context.query.id) {
+        const post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${driftToken}`,
+                "x-secret-key": process.env.SECRET_KEY || "",
+            }
+        })
+
+        if (!post.ok || post.status !== 200) {
+            return {
+                redirect: {
+                    destination: '/',
+                    permanent: false,
+                },
+            }
+        }
+        try {
+            const json = await post.json();
+
+            return {
+                props: {
+                    post: json
+                }
+            }
+        } catch (e) {
+            console.log(e)
+        }
+    }
+
+    return {
+        props: {
+            post: null
+        }
+    }
+}
+
+export default Post
+

client/pages/signin.tsx

@@ -2,7 +2,7 @@ import { Page } from "@geist-ui/core";
 import PageSeo from "@components/page-seo";
 import Auth from "@components/auth";
 import Header from "@components/header";
-import { ThemeProps } from "./_app";
+import { ThemeProps } from "@lib/types";
 
 const SignIn = ({ theme, changeTheme }: ThemeProps) => (
     <Page width={"100%"}>

client/pages/signup.tsx

@@ -2,7 +2,7 @@ import { Page } from "@geist-ui/core";
 import Auth from "@components/auth";
 import Header from "@components/header";
 import PageSeo from '@components/page-seo';
-import { ThemeProps } from "./_app";
+import { ThemeProps } from "@lib/types";
 
 const SignUp = ({ theme, changeTheme }: ThemeProps) => (
     <Page width="100%">

client/tsconfig.json

@@ -1,15 +1,26 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

server/src/lib/middleware/secret-key.ts

@@ -0,0 +1,14 @@
+import { NextFunction, Request, Response } from 'express';
+
+const key = process.env.SECRET_KEY;
+if (!key) {
+    throw new Error('SECRET_KEY is not set.');
+}
+
+export default function authenticateToken(req: Request, res: Response, next: NextFunction) {
+    const requestKey = req.headers['x-secret-key']
+    if (requestKey !== key) {
+        return res.sendStatus(401)
+    }
+    next()
+}

server/src/lib/models/Post.ts

@@ -38,7 +38,7 @@ export class Post extends Model {
   @BelongsToMany(() => User, () => PostAuthor)
   users?: User[];
 
-  @HasMany(() => File)
+  @HasMany(() => File, { constraints: false })
   files?: File[];
 
   @CreatedAt
@@ -48,6 +48,9 @@ export class Post extends Model {
   @Column
   visibility!: string;
 
+  @Column
+  password?: string;
+
   @UpdatedAt
   @Column
   updatedAt!: Date;

server/src/routes/auth.ts

@@ -1,9 +1,9 @@
 import { Router } from 'express'
 import { genSalt, hash, compare } from "bcrypt"
-import { User } from '../../lib/models/User'
+import { User } from '../lib/models/User'
 import { sign } from 'jsonwebtoken'
-import config from '../../lib/config'
+import config from '../lib/config'
-import jwt from '../../lib/middleware/jwt'
+import jwt from '../lib/middleware/jwt'
 
 const NO_EMPTY_SPACE_REGEX = /^\S*$/
 

server/src/routes/files.ts

@@ -1,10 +1,10 @@
 import { Router } from 'express'
-// import { Movie } from '../models/Post'
+import secretKey from '../lib/middleware/secret-key';
-import { File } from '../../lib/models/File'
+import { File } from '../lib/models/File'
 
 export const files = Router()
 
-files.get("/raw/:id", async (req, res, next) => {
+files.get("/raw/:id", secretKey, async (req, res, next) => {
     try {
         const file = await File.findOne({
             where: {
@@ -12,18 +12,18 @@ files.get("/raw/:id", async (req, res, next) => {
             },
             attributes: ["title", "content"],
         })
-        // TODO: fix post inclusion
+
-        // if (file?.post.visibility === 'public' || file?.post.visibility === 'unlisted') {
+        // TODO: JWT-checkraw files
-        res.setHeader("Cache-Control", "public, max-age=86400");
+        if (file?.post?.visibility === "private") {
-        res.json(file);
+            // jwt(req as UserJwtRequest, res, () => {
-        // } else {
-        // TODO: should this be `private, `?
-        // res.setHeader("Cache-Control", "max-age=86400");
             //     res.json(file);
-        // }
+            // })
+            res.json(file);
+        } else {
+            res.json(file);
+        }
     }
     catch (e) {
         next(e);
     }
 });
-

server/src/routes/posts.ts

@@ -1,10 +1,11 @@
 import { Router } from 'express'
 // import { Movie } from '../models/Post'
-import { File } from '../../lib/models/File'
+import { File } from '../lib/models/File'
-import { Post } from '../../lib/models/Post';
+import { Post } from '../lib/models/Post';
-import jwt, { UserJwtRequest } from '../../lib/middleware/jwt';
+import jwt, { UserJwtRequest } from '../lib/middleware/jwt';
 import * as crypto from "crypto";
-import { User } from '../../lib/models/User';
+import { User } from '../lib/models/User';
+import secretKey from '../lib/middleware/secret-key';
 
 export const posts = Router()
 
@@ -26,7 +27,6 @@ posts.post('/create', jwt, async (req, res, next) => {
             throw new Error("Please provide a visibility.")
         }
 
-        // Create the "post" object 
         const newPost = new Post({
             title: req.body.title,
             visibility: req.body.visibility,
@@ -35,7 +35,6 @@ posts.post('/create', jwt, async (req, res, next) => {
         await newPost.save()
         await newPost.$add('users', req.body.userId);
         const newFiles = await Promise.all(req.body.files.map(async (file) => {
-            // Establish a "file" for each file in the request
             const newFile = new File({
                 title: file.title,
                 content: file.content,
@@ -59,7 +58,47 @@ posts.post('/create', jwt, async (req, res, next) => {
     }
 });
 
-posts.get("/:id", async (req: UserJwtRequest, res, next) => {
+posts.get("/", secretKey, async (req, res, next) => {
+    try {
+        const posts = await Post.findAll({
+            attributes: ["id", "title", "visibility", "createdAt"],
+        })
+        res.json(posts);
+    } catch (e) {
+        next(e);
+    }
+});
+
+posts.get("/mine", jwt, secretKey, async (req: UserJwtRequest, res, next) => {
+    if (!req.user) {
+        return res.status(401).json({ error: "Unauthorized" })
+    }
+
+    try {
+        const user = await User.findByPk(req.user.id, {
+            include: [
+                {
+                    model: Post,
+                    as: "posts",
+                    include: [
+                        {
+                            model: File,
+                            as: "files"
+                        }
+                    ]
+                },
+            ],
+        })
+        if (!user) {
+            return res.status(404).json({ error: "User not found" })
+        }
+        return res.json(user.posts?.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()))
+    } catch (error) {
+        next(error)
+    }
+})
+
+posts.get("/:id", secretKey, async (req, res, next) => {
     try {
         const post = await Post.findOne({
             where: {
@@ -78,20 +117,21 @@ posts.get("/:id", async (req: UserJwtRequest, res, next) => {
                 },
             ]
         })
+        if (!post) {
+            throw new Error("Post not found.")
+        }
 
-        if (post?.visibility === 'public' || post?.visibility === 'unlisted') {
+        if (post.visibility === 'public' || post?.visibility === 'unlisted') {
-            res.setHeader("Cache-Control", "public, max-age=86400");
             res.json(post);
-        } else {
+        } else if (post.visibility === 'private') {
-            // TODO: should this be `private, `?
+            jwt(req as UserJwtRequest, res, () => {
-            res.setHeader("Cache-Control", "max-age=86400");
-            jwt(req, res, () => {
                 res.json(post);
-            });
+            })
+        } else if (post.visibility === 'protected') {
+
         }
     }
     catch (e) {
         next(e);
     }
 });
-

server/src/routes/users.ts

@@ -1,9 +1,7 @@
 import { Router } from 'express'
 // import { Movie } from '../models/Post'
-import { User } from '../../lib/models/User'
+import { User } from '../lib/models/User'
-import { File } from '../../lib/models/File'
+import jwt from '../lib/middleware/jwt'
-import jwt, { UserJwtRequest } from '../../lib/middleware/jwt'
-import { Post } from '../../lib/models/Post'
 
 export const users = Router()
 
@@ -16,31 +14,3 @@ users.get('/', jwt, async (req, res, next) => {
     }
 })
 
-users.get("/mine", jwt, async (req: UserJwtRequest, res, next) => {
-    if (!req.user) {
-        return res.status(401).json({ error: "Unauthorized" })
-    }
-
-    try {
-        const user = await User.findByPk(req.user.id, {
-            include: [
-                {
-                    model: Post,
-                    as: "posts",
-                    include: [
-                        {
-                            model: File,
-                            as: "files"
-                        }
-                    ]
-                },
-            ],
-        })
-        if (!user) {
-            return res.status(404).json({ error: "User not found" })
-        }
-        return res.json(user.posts?.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()))
-    } catch (error) {
-        next(error)
-    }
-})

server/src/server.ts

@@ -1,7 +1,7 @@
 import { createServer } from 'http';
 import { app } from './app';
-import config from '../lib/config';
+import config from './lib/config';
-import { sequelize } from '../lib/sequelize';
+import { sequelize } from './lib/sequelize';
 
 (async () => {
   await sequelize.sync();

server/tsconfig.json

@@ -15,6 +15,6 @@
     "strictPropertyInitialization": true,
     "outDir": "dist"
   },
-  "include": ["lib/**/*.ts", "index.ts", "src/**/*.ts"],
+  "include": ["index.ts", "src/**/*.ts"],
   "exclude": ["node_modules"]
 }