Merge pull request #44 from MaxLeiter/passwordPosts

Protected posts
This commit is contained in:
Max Leiter 2022-03-21 17:43:05 -07:00 committed by GitHub
commit fb38ecc932
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 1280 additions and 436 deletions

View file

@ -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

View file

@ -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

View file

@ -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
@ -134,4 +137,4 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
}
export default FormattingIcons
export default FormattingIcons

View file

@ -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"

View file

@ -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
window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
Cookies.set('drift-theme', Array.isArray(type) ? type[0] : type)
}

View file

@ -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",
}

View file

@ -1,17 +1,7 @@
import useSWR from "swr"
import PostList from "../post-list"
import Cookies from "js-cookie"
const fetcher = (url: string) => fetch(url, {
headers: {
'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} />
const MyPosts = ({ posts, error }: { posts: any, error: any }) => {
return <PostList posts={posts} error={error} />
}
export default MyPosts

View file

@ -1,10 +1,9 @@
import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
import { memo, useCallback, useEffect } from 'react'
import { Text, useTheme, useToasts } from '@geist-ui/core'
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' })

View file

@ -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'
export type Document = {
title: string
content: string
id: string
}
import type { PostVisibility, Document as DocumentType } from '@lib/types';
import PasswordModal from './password';
import getPostPath from '@lib/get-post-path';
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',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${Cookies.get("drift-token")}`
},
body: JSON.stringify({
title,
files: docs,
visibility,
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" })
if (visibility === 'protected' && !password) {
setPasswordModalVisible(true)
return
}
await sendRequest('/server-api/posts/create', {
title,
files: docs,
visibility,
password,
userId: Cookies.get('drift-userid') || ''
})
}
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,10 +143,12 @@ 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 >
</div>
)
}
export default Post
export default Post

View file

@ -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

View file

@ -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'

View file

@ -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>

View file

@ -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 }) {

View file

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

View file

@ -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}`
}
}

12
client/lib/types.d.ts vendored Normal file
View file

@ -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
}

View file

@ -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);

View file

@ -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"
}
}

View file

@ -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';
export type ThemeProps = {
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
}
import { ThemeProps } from '@lib/types';
import Cookies from 'js-cookie';
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 theme = useTheme();
const [themeType, setThemeType] = useSharedState<string>('theme', Cookies.get('drift-theme') || 'light')
useEffect(() => {
if (typeof window === 'undefined' || !window.localStorage) return
const storedTheme = window.localStorage.getItem('drift-theme')
const storedTheme = Cookies.get('drift-theme')
if (storedTheme) setThemeType(storedTheme)
// TODO: useReducer?
}, [setThemeType, themeType])

View file

@ -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

View file

@ -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 {

View file

@ -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

View file

@ -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

View file

@ -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 (

View file

@ -1,45 +1,32 @@
import { Button, Page, Text } from "@geist-ui/core";
import Skeleton from 'react-loading-skeleton';
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Document from '../../components/document'
import Header from "../../components/header";
import VisibilityBadge from "../../components/visibility-badge";
import { PostProps } from "../_app";
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 Cookies from "js-cookie";
import cookie from "cookie";
import { GetServerSideProps } from "next";
import type { GetStaticPaths, GetStaticProps } from "next";
import { PostVisibility, ThemeProps } from "@lib/types";
type File = {
id: string
title: string
content: string
}
const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
const [post, setPost] = useState(renderedPost);
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState<string>()
const router = useRouter();
type Files = File[]
useEffect(() => {
async function fetchPost() {
setIsLoading(true);
if (renderedPost) {
setPost(renderedPost)
setIsLoading(false)
return;
}
if (!Cookies.get('drift-token')) {
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,80 +46,74 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
return (
<Page width={"100%"}>
{!isLoading && (
<PageSeo
title={`${post.title} - Drift`}
description={post.description}
isPrivate={post.visibility === 'private'}
/>
)}
<PageSeo
title={`${post.title} - Drift`}
description={post.description}
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>
<span><VisibilityBadge visibility={post.visibility} /></span>
</div>
<Button auto onClick={download}>
Download as ZIP archive
</Button>
<div className={styles.header}>
<div className={styles.titleAndBadge}>
<Text h2>{post.title}</Text>
<span><VisibilityBadge visibility={post.visibility} /></span>
</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'}
/>
))}
</>}
<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`];
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}`
}
});
try {
post = await post.json();
} catch (e) {
console.log(e);
post = null;
export const getStaticPaths: GetStaticPaths = async () => {
const posts = await fetch(process.env.API_URL + `/posts/`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"x-secret-key": process.env.SECRET_KEY || "",
}
}
})
const json = await posts.json()
const filtered = json.filter((post: any) => post.visibility === "public" || post.visibility === "unlisted")
const paths = filtered.map((post: any) => ({
params: { id: post.id }
}))
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

View file

@ -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

View file

@ -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%"}>

View file

@ -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%">

View file

@ -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",

File diff suppressed because it is too large Load diff

View file

@ -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()
}

View file

@ -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;

View file

@ -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 jwt from '../../lib/middleware/jwt'
import config from '../lib/config'
import jwt from '../lib/middleware/jwt'
const NO_EMPTY_SPACE_REGEX = /^\S*$/

View file

@ -1,10 +1,10 @@
import { Router } from 'express'
// import { Movie } from '../models/Post'
import { File } from '../../lib/models/File'
import secretKey from '../lib/middleware/secret-key';
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') {
res.setHeader("Cache-Control", "public, max-age=86400");
res.json(file);
// } else {
// TODO: should this be `private, `?
// res.setHeader("Cache-Control", "max-age=86400");
// res.json(file);
// }
// TODO: JWT-checkraw files
if (file?.post?.visibility === "private") {
// jwt(req as UserJwtRequest, res, () => {
// res.json(file);
// })
res.json(file);
} else {
res.json(file);
}
}
catch (e) {
next(e);
}
});

View file

@ -1,10 +1,11 @@
import { Router } from 'express'
// import { Movie } from '../models/Post'
import { File } from '../../lib/models/File'
import { Post } from '../../lib/models/Post';
import jwt, { UserJwtRequest } from '../../lib/middleware/jwt';
import { File } from '../lib/models/File'
import { Post } from '../lib/models/Post';
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') {
res.setHeader("Cache-Control", "public, max-age=86400");
if (post.visibility === 'public' || post?.visibility === 'unlisted') {
res.json(post);
} else {
// TODO: should this be `private, `?
res.setHeader("Cache-Control", "max-age=86400");
jwt(req, res, () => {
} else if (post.visibility === 'private') {
jwt(req as UserJwtRequest, res, () => {
res.json(post);
});
})
} else if (post.visibility === 'protected') {
}
}
catch (e) {
next(e);
}
});

View file

@ -1,9 +1,7 @@
import { Router } from 'express'
// import { Movie } from '../models/Post'
import { User } from '../../lib/models/User'
import { File } from '../../lib/models/File'
import jwt, { UserJwtRequest } from '../../lib/middleware/jwt'
import { Post } from '../../lib/models/Post'
import { User } from '../lib/models/User'
import jwt from '../lib/middleware/jwt'
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)
}
})

View file

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

View file

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