client: remove need for multiple post page URLs

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

@@ -37,7 +37,7 @@ const PasswordModal = ({
 			{/* TODO: investigate disableBackdropClick not updating state? */}
 
 			{
-				<Modal visible={isOpen} disableBackdropClick={true}>
+				<Modal visible={isOpen} disableBackdropClick={false}>
 					<Modal.Title>Enter a password</Modal.Title>
 					<Modal.Content>
 						{!error && creating && (

client/components/post-page/index.tsx

@@ -17,19 +17,23 @@ import ExpirationBadge from "@components/badges/expiration-badge"
 import CreatedAgoBadge from "@components/badges/created-ago-badge"
 import Cookies from "js-cookie"
 import getPostPath from "@lib/get-post-path"
+import PasswordModalPage from "./password-modal-wrapper"
 
 type Props = {
 	post: Post
+	isProtected?: boolean
 }
 
-const PostPage = ({ post }: Props) => {
-	const router = useRouter()
-
-	const isMobile = useMediaQuery("mobile")
+const PostPage = ({ post: initialPost, isProtected }: Props) => {
+	const [post, setPost] = useState<Post>(initialPost)
 	const [isExpired, setIsExpired] = useState(
 		post.expiresAt ? new Date(post.expiresAt) < new Date() : null
 	)
 	const [isLoading, setIsLoading] = useState(true)
+
+	const router = useRouter()
+	const isMobile = useMediaQuery("mobile")
+
 	useEffect(() => {
 		const isOwner = post.users
 			? post.users[0].id === Cookies.get("drift-userid")
@@ -84,14 +88,16 @@ const PostPage = ({ post }: Props) => {
 		return <></>
 	}
 
+	const isAvailable = !isExpired && !isProtected && post.title
+
 	return (
 		<Page width={"100%"}>
 			<PageSeo
 				title={`${post.title} - Drift`}
 				description={post.description}
 				isPrivate={false}
 			/>
-
+			{!isAvailable && <PasswordModalPage setPost={setPost} />}
 			<Page.Content className={homeStyles.main}>
 				<div className={styles.header}>
 					<span className={styles.buttons}>

client/components/post-page/password-modal-wrapper.tsx

@@ -0,0 +1,64 @@
+import PasswordModal from "@components/new-post/password-modal"
+import { Page, useToasts } from "@geist-ui/core"
+import { Post } from "@lib/types"
+import { useRouter } from "next/router"
+import { useState } from "react"
+
+type Props = {
+    setPost: (post: Post) => void
+}
+
+const PasswordModalPage = ({ setPost }: Props) => {
+    const router = useRouter()
+    const { setToast } = useToasts()
+    const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(true)
+
+    const onSubmit = async (password: string) => {
+        const res = await fetch(
+            `/server-api/posts/authenticate?id=${router.query.id}&password=${password}`,
+            {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            }
+        )
+
+        if (!res.ok) {
+            setToast({
+                type: "error",
+                text: "Wrong password"
+            })
+            return
+        }
+
+        const data = await res.json()
+        if (data) {
+            if (data.error) {
+                setToast({
+                    text: data.error,
+                    type: "error"
+                })
+            } else {
+                setIsPasswordModalOpen(false)
+                setPost(data)
+            }
+        }
+    }
+
+    const onClose = () => {
+        setIsPasswordModalOpen(false)
+        router.push("/")
+    }
+
+    return (
+        <PasswordModal
+            creating={false}
+            onClose={onClose}
+            onSubmit={onSubmit}
+            isOpen={isPasswordModalOpen}
+        />
+    )
+}
+
+export default PasswordModalPage

client/lib/get-post-path.ts

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

client/pages/post/[id].tsx

@@ -5,31 +5,37 @@ import PostPage from "@components/post-page"
 
 export type PostProps = {
 	post: Post
+	isProtected?: boolean
 }
 
-const PostView = ({ post }: PostProps) => {
-	return <PostPage post={post} />
+const PostView = ({ post, isProtected }: PostProps) => {
+	return <PostPage isProtected={isProtected} post={post} />
 }
 
 export const getServerSideProps: GetServerSideProps = async ({
 	params,
+	req,
 	res
 }) => {
 	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 || ""
+			"x-secret-key": process.env.SECRET_KEY || "",
+			Authorization: `Bearer ${req.cookies["drift-token"]}`
 		}
 	})
 
-	const sMaxAge = 60 * 60 * 24
-	res.setHeader(
-		"Cache-Control",
-		`public, s-maxage=${sMaxAge}, max-age=${sMaxAge}`
-	)
-
-	if (!post.ok || post.status !== 200) {
+	if (post.status === 401 || post.status === 403) {
+		return {
+			// can't access the post if it's private
+			redirect: {
+				destination: "/",
+				permanent: false
+			},
+			props: {}
+		}
+	} else if (post.status === 404 || !post.ok) {
 		return {
 			redirect: {
 				destination: "/404",
@@ -39,7 +45,27 @@ export const getServerSideProps: GetServerSideProps = async ({
 		}
 	}
 
-	const json = await post.json()
+	const json = await post.json() as Post
+	const isAuthor = json.users?.find(user => user.id === req.cookies["drift-userid"])
+
+	if (json.visibility === "public" || json.visibility === "unlisted") {
+		const sMaxAge = 60 * 60 * 12 // half a day
+		res.setHeader(
+			"Cache-Control",
+			`public, s-maxage=${sMaxAge}, max-age=${sMaxAge}`
+		)
+	} else if (json.visibility === "protected" && !isAuthor) {
+		return {
+			props: {
+				post: {
+					id: json.id,
+					visibility: json.visibility,
+					expiresAt: json.expiresAt,
+				},
+				isProtected: true
+			}
+		}
+	}
 
 	return {
 		props: {