From d58c7a3ad5dc83a08e040a855f158f8c6c09e154 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Sun, 11 Apr 2021 13:50:20 -0700 Subject: password resolution, dynamic head --- frontend/src/App.js | 55 ----------------------------- frontend/src/components/NextHead.js | 16 +++++++++ frontend/src/http/resolvePaste.js | 69 +++++++++++++++++++------------------ frontend/src/index.js | 10 ------ frontend/src/pages/[hash].js | 11 +++--- frontend/src/pages/_app.js | 26 ++++++++++++++ frontend/src/pages/raw/[hash].js | 13 ++++--- 7 files changed, 90 insertions(+), 110 deletions(-) delete mode 100644 frontend/src/App.js create mode 100644 frontend/src/components/NextHead.js delete mode 100644 frontend/src/index.js (limited to 'frontend/src') diff --git a/frontend/src/App.js b/frontend/src/App.js deleted file mode 100644 index f00397f..0000000 --- a/frontend/src/App.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import NewPaste from './components/pages/NewPaste' -import ViewPaste from './components/pages/ViewPaste' -import styled from 'styled-components' -import { - BrowserRouter as Router, - Switch, - Route, - useParams -} from "react-router-dom"; -import Raw from './components/pages/Raw' -import ThemeProvider from './theme/ThemeProvider' -import GlobalStyle from './theme/GlobalStyle' -import {Watermark} from "./components/Watermark"; - - - -const GetPasteWithParam = () => { - let { hash } = useParams(); - return ; -} - -const GetRawWithParam = () => { - let { hash } = useParams(); - return ; -} - -const App = () => { - return ( - - - - - - - -
- - - - - - - - -
- - - - - ); -} - - -export default App; diff --git a/frontend/src/components/NextHead.js b/frontend/src/components/NextHead.js new file mode 100644 index 0000000..1019f61 --- /dev/null +++ b/frontend/src/components/NextHead.js @@ -0,0 +1,16 @@ +import Head from 'next/head' + +const NextHead = ({data}) => { + const title = data.title || "untitled paste" + const description = `${data.content.slice(0, 100)}... expires: ${data.expiry}` + return ( + ctrl-v | {title} + + + + + + ) +} + +export default NextHead \ No newline at end of file diff --git a/frontend/src/http/resolvePaste.js b/frontend/src/http/resolvePaste.js index 8d40cbe..aa4f8b6 100644 --- a/frontend/src/http/resolvePaste.js +++ b/frontend/src/http/resolvePaste.js @@ -2,42 +2,45 @@ import {useEffect, useState} from 'react' import {fetchPaste, fmtDateStr} from './shared' import {LANGS} from "../components/renderers/Code"; -const resolvePaste = (id, password = "") => { - const response = { - data: { - title: '', - content: '', - language: LANGS.detect, - expiry: '', - }, - unauthorized: false, - error: '', - } - return fetchPaste(id, password) - .then(resp => { - const data = resp.data - response.data = { - ...data, - expiry: fmtDateStr(data.expiry) - } - return response - }) - .catch(error => { - const resp = error.response - if (!resp) { - response.error = 'network error' - return - } +export const defaultResponse = { + data: { + title: '', + content: '', + language: LANGS.detect, + expiry: '', + }, + unauthorized: false, + error: '', +} - if (resp.status === 401) { - response.error = 'unauthorized' - response.unauthorized = true - return - } +const resolvePaste = async (id, password = "") => { + const response = {...defaultResponse} + try { + return await fetchPaste(id, password) + .then(resp => { + const data = resp.data + response.data = { + ...data, + expiry: fmtDateStr(data.expiry) + } + return response + }) + } catch (err) { + const resp = err.response + if (!resp) { + response.error = 'network error' + return response + } - response.error = `${resp.status}: ${resp.data}` + if (resp.status === 401) { + response.error = 'unauthorized' + response.unauthorized = true return response - }) + } + + response.error = `${resp.status}: ${resp.data}` + return response + } } export default resolvePaste \ No newline at end of file diff --git a/frontend/src/index.js b/frontend/src/index.js deleted file mode 100644 index 7173ce5..0000000 --- a/frontend/src/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); \ No newline at end of file diff --git a/frontend/src/pages/[hash].js b/frontend/src/pages/[hash].js index 6d65f3e..f281621 100644 --- a/frontend/src/pages/[hash].js +++ b/frontend/src/pages/[hash].js @@ -7,27 +7,23 @@ import RenderDispatch from '../components/renderers/RenderDispatch' import {Watermark} from "../components/Watermark"; import { useRouter } from 'next/router' import resolvePaste from "../http/resolvePaste"; +import NextHead from "../components/NextHead"; export async function getServerSideProps(ctx) { const data = await resolvePaste(ctx.params.hash) - - // Pass data to the page via props return { props: { ...data } } } const ViewPaste = ({data, unauthorized, error}) => { const router = useRouter() const { hash } = router.query - const [clientData, setClientData] = useState(data); const [theme, setTheme] = useState('atom'); const [isRenderMode, setIsRenderMode] = useState(false); const [enteredPass, setEnteredPass] = useState(''); const [correctPass, setCorrectPass] = useState(!unauthorized); - + const [clientData, setClientData] = useState(data) const {content, language, expiry, title} = clientData; - - const getWithPassword = (password, errorCallback) => { resolvePaste(hash, password) .then(resp => { @@ -54,6 +50,7 @@ const ViewPaste = ({data, unauthorized, error}) => { return (
+ {!error && } { toggleRenderCallback={() => setIsRenderMode(!isRenderMode)} isRenderMode={isRenderMode} onChange={(e) => setTheme(e.target.value)} - err={error} + err={unauthorized ? '' : error} />
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js index e013c64..115f47f 100644 --- a/frontend/src/pages/_app.js +++ b/frontend/src/pages/_app.js @@ -2,6 +2,7 @@ import React from 'react' import ThemeProvider from "../theme/ThemeProvider"; import GlobalStyle from "../theme/GlobalStyle"; import styled from "styled-components"; +import Head from "next/head"; const Main = styled.div` margin-top: 10vh; @@ -11,6 +12,31 @@ const Main = styled.div` const App = ({ Component, pageProps }) => ( + + + + + + + + + ctrl-v | a modern, open-source pastebin +