From 59d33042f2ba8120995480a779b6b66f505a9e86 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Sun, 20 Mar 2022 14:09:56 -0700 Subject: [PATCH] client: fix auth errors and wrap markdown headings in links --- client/components/auth/index.tsx | 14 +++--- client/components/preview/preview.module.css | 24 +++++++++ .../preview/react-markdown-preview.tsx | 8 ++- client/package.json | 2 + client/yarn.lock | 50 +++++++++++++++++++ server/src/routes/auth.ts | 10 ++-- 6 files changed, 96 insertions(+), 12 deletions(-) diff --git a/client/components/auth/index.tsx b/client/components/auth/index.tsx index c173ea64..1db9c549 100644 --- a/client/components/auth/index.tsx +++ b/client/components/auth/index.tsx @@ -1,5 +1,5 @@ import { FormEvent, useState } from 'react' -import { Button, Input, Text, useToasts, Note } from '@geist-ui/core' +import { Button, Input, Text, Note } from '@geist-ui/core' import styles from './auth.module.css' import { useRouter } from 'next/router' import Link from '../Link' @@ -15,8 +15,6 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => { const [password, setPassword] = useState(''); const [errorMsg, setErrorMsg] = useState(''); - const { setToast } = useToasts(); - const signingIn = page === 'signin' const handleJson = (json: any) => { @@ -29,8 +27,7 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => { const handleSubmit = async (e: FormEvent) => { e.preventDefault() - - if (!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6) return setErrorMsg(ERROR_MESSAGE) + if (page === "signup" && (!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6)) return setErrorMsg(ERROR_MESSAGE) else setErrorMsg(''); const reqOpts = { @@ -45,12 +42,13 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => { const signUrl = signingIn ? '/server-api/auth/signin' : '/server-api/auth/signup'; const resp = await fetch(signUrl, reqOpts); const json = await resp.json(); - - if (!resp.ok) throw new Error(); + console.log(json) + if (!resp.ok) throw new Error(json.error.message); handleJson(json) } catch (err: any) { - setToast({ text: "Something went wrong", type: 'error' }) + console.log(err) + setErrorMsg(err.message ?? "Something went wrong") } } diff --git a/client/components/preview/preview.module.css b/client/components/preview/preview.module.css index 6831ce4b..82d7ab6f 100644 --- a/client/components/preview/preview.module.css +++ b/client/components/preview/preview.module.css @@ -19,6 +19,30 @@ margin-bottom: 0.5rem; } +/* Auto-linked headers */ +.markdownPreview h1 a, +.markdownPreview h2 a, +.markdownPreview h3 a, +.markdownPreview h4 a, +.markdownPreview h5 a, +.markdownPreview h6 a { + color: inherit; +} + +/* Auto-linked headers */ +.markdownPreview h1 a:hover::after, +.markdownPreview h2 a:hover::after, +.markdownPreview h3 a:hover::after, +.markdownPreview h4 a:hover::after, +.markdownPreview h5 a:hover::after, +.markdownPreview h6 a:hover::after { + content: " " attr(href); + filter: opacity(0.5); + font-size: 0.8em; + font-weight: normal; + text-decoration: none; +} + .markdownPreview h1 { font-size: 2rem; } diff --git a/client/components/preview/react-markdown-preview.tsx b/client/components/preview/react-markdown-preview.tsx index f1113370..fc4e6416 100644 --- a/client/components/preview/react-markdown-preview.tsx +++ b/client/components/preview/react-markdown-preview.tsx @@ -1,9 +1,12 @@ import ReactMarkdown from "react-markdown" import remarkGfm from "remark-gfm" import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +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 styles from './preview.module.css' import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism' import useSharedState from "@lib/hooks/use-shared-state"; @@ -16,7 +19,9 @@ type Props = { const ReactMarkdownPreview = ({ content, height }: Props) => { const [themeType] = useSharedState('theme') return (
- {
) } + export default ReactMarkdownPreview diff --git a/client/package.json b/client/package.json index 59fa0b18..0a61aa98 100644 --- a/client/package.json +++ b/client/package.json @@ -27,7 +27,9 @@ "react-markdown": "^8.0.0", "react-syntax-highlighter": "^15.4.5", "react-syntax-highlighter-virtualized-renderer": "^1.1.0", + "rehype-autolink-headings": "^6.1.1", "rehype-katex": "^6.0.2", + "rehype-slug": "^5.0.1", "rehype-stringify": "^9.0.3", "remark-gfm": "^3.0.1", "remark-math": "^5.1.1", diff --git a/client/yarn.lock b/client/yarn.lock index 28d7f557..5c3bd26b 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1026,6 +1026,11 @@ get-symbol-description@^1.0.0: call-bind "^1.0.2" get-intrinsic "^1.1.1" +github-slugger@^1.1.1: + version "1.4.0" + resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e" + integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ== + glob-parent@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" @@ -1126,6 +1131,18 @@ hast-util-from-parse5@^7.0.0: vfile-location "^4.0.0" web-namespaces "^2.0.0" +hast-util-has-property@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/hast-util-has-property/-/hast-util-has-property-2.0.0.tgz#c15cd6180f3e535540739fcc9787bcffb5708cae" + integrity sha512-4Qf++8o5v14us4Muv3HRj+Er6wTNGA/N9uCaZMty4JWvyFKLdhULrv4KE1b65AthsSO9TXSZnjuxS8ecIyhb0w== + +hast-util-heading-rank@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-2.1.0.tgz#c39f34fa8330ebfec03a08b5d5019ed56122029c" + integrity sha512-w+Rw20Q/iWp2Bcnr6uTrYU6/ftZLbHKhvc8nM26VIWpDqDMlku2iXUVTeOlsdoih/UKQhY7PHQ+vZ0Aqq8bxtQ== + dependencies: + "@types/hast" "^2.0.0" + hast-util-is-element@^2.0.0: version "2.1.2" resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz#fc0b0dc7cef3895e839b8d66979d57b0338c68f3" @@ -1162,6 +1179,13 @@ hast-util-to-html@^8.0.0: stringify-entities "^4.0.2" unist-util-is "^5.0.0" +hast-util-to-string@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz#b008b0a4ea472bf34dd390b7eea1018726ae152a" + integrity sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A== + dependencies: + "@types/hast" "^2.0.0" + hast-util-to-text@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz#b7699a75f7a61af6e0befb67660cd78460d96dc6" @@ -2409,6 +2433,19 @@ regexpp@^3.2.0: resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg== +rehype-autolink-headings@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/rehype-autolink-headings/-/rehype-autolink-headings-6.1.1.tgz#0cb874a56f3de6ead1c2268d7f0fc5006f244db5" + integrity sha512-NMYzZIsHM3sA14nC5rAFuUPIOfg+DFmf9EY1YMhaNlB7+3kK/ZlE6kqPfuxr1tsJ1XWkTrMtMoyHosU70d35mA== + dependencies: + "@types/hast" "^2.0.0" + extend "^3.0.0" + hast-util-has-property "^2.0.0" + hast-util-heading-rank "^2.0.0" + hast-util-is-element "^2.0.0" + unified "^10.0.0" + unist-util-visit "^4.0.0" + rehype-katex@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-6.0.2.tgz#20197bbc10bdf79f6b999bffa6689d7f17226c35" @@ -2433,6 +2470,19 @@ rehype-parse@^8.0.0: parse5 "^6.0.0" unified "^10.0.0" +rehype-slug@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-5.0.1.tgz#6e732d0c55b3b1e34187e74b7363fb53229e5f52" + integrity sha512-X5v3wV/meuOX9NFcGhJvUpEjIvQl2gDvjg3z40RVprYFt7q3th4qMmYLULiu3gXvbNX1ppx+oaa6JyY1W67pTA== + dependencies: + "@types/hast" "^2.0.0" + github-slugger "^1.1.1" + hast-util-has-property "^2.0.0" + hast-util-heading-rank "^2.0.0" + hast-util-to-string "^2.0.0" + unified "^10.0.0" + unist-util-visit "^4.0.0" + rehype-stringify@^9.0.3: version "9.0.3" resolved "https://registry.yarnpkg.com/rehype-stringify/-/rehype-stringify-9.0.3.tgz#70e3bd6d4d29e7acf36b802deed350305d2c3c17" diff --git a/server/src/routes/auth.ts b/server/src/routes/auth.ts index fd75a59a..7a3aa7e7 100644 --- a/server/src/routes/auth.ts +++ b/server/src/routes/auth.ts @@ -43,13 +43,17 @@ auth.post('/signup', async (req, res, next) => { }); auth.post('/signin', async (req, res, next) => { + const error = "User does not exist or password is incorrect" + const errorToThrow = new Error(error); try { - validateAuthPayload(req.body.username, req.body.password) + if (!req.body.username || !req.body.password) { + throw errorToThrow + } const username = req.body.username.toLowerCase(); const user = await User.findOne({ where: { username: username } }); if (!user) { - throw new Error("User does not exist"); + throw errorToThrow } const password_valid = await compare(req.body.password, user.password); @@ -57,7 +61,7 @@ auth.post('/signin', async (req, res, next) => { const token = generateAccessToken(user.id); res.status(200).json({ token: token, userId: user.id }); } else { - throw new Error("Password Incorrect"); + throw errorToThrow } } catch (e) {