From 07a3d810065e6e8b838c5e53bc7d18241e0ff3c5 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Tue, 12 May 2020 21:09:50 -0700
Subject: password modal

---
 frontend/src/components/App.js           | 19 +++++----
 frontend/src/components/Inputs.js        |  2 +-
 frontend/src/components/PasswordModal.js | 73 ++++++++++++++++++++++++++++++++
 frontend/src/components/ViewPaste.js     | 50 ++++++++++++++++++----
 4 files changed, 126 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/PasswordModal.js

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 605903e..3b147db 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -39,19 +39,20 @@ function App() {
               <span role="img" aria-label="clipboard">📋&nbsp;</span>
               <Link to="/">ctrl-v</Link>
             </h1>
-
             <Desc />
           </nav>
         </SpacedTitle>
 
-        <Switch>
-          <Route path="/:hash" 
-            children={<GetPasteWithParam />} 
-          />
-          <Route path="/">
-            <NewPaste />
-          </Route>
-        </Switch>
+        <main id="appElement">
+          <Switch>
+            <Route path="/:hash" 
+              children={<GetPasteWithParam />} 
+            />
+            <Route path="/">
+              <NewPaste />
+            </Route>
+          </Switch>
+        </main>
 
         <Footer />
       </div>
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index b61869f..da540d0 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -77,7 +77,7 @@ class PassInput extends React.Component {
                     <input
                         name="pass"
                         className="lt-shadow"
-                        placeholder="password (optional)"
+                        placeholder="password"
                         type="password"
                         autoComplete="off"
                         onChange={this.props.onChange}
diff --git a/frontend/src/components/PasswordModal.js b/frontend/src/components/PasswordModal.js
new file mode 100644
index 0000000..ef96f9d
--- /dev/null
+++ b/frontend/src/components/PasswordModal.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import Modal from 'react-modal';
+import styled from 'styled-components'
+import { PassInput } from './Inputs'
+
+const modalStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '400px',
+        height: '250px',
+        border: '1px solid #11111188'
+    }
+};
+
+const PassProtected = styled.h3`
+    font-weight: 700
+`
+
+const RightPad = styled.div`
+    margin-right: 3em;
+`
+
+const LeftPad = styled.div`
+    margin-left: 2em;
+`
+
+class PasswordModal extends React.Component {
+
+    componentWillMount() {
+        Modal.setAppElement('body');
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.submitPassword = this.submitPassword.bind(this);
+    }
+
+    submitPassword(event) {
+        const password = this.props.value
+        this.props.validateCallback(password)
+        event.preventDefault();
+    }
+
+    render() {
+        return(
+            <Modal
+                isOpen={this.props.hasPass && !this.props.validPass}
+                style={modalStyles}
+                contentLabel="enter paste password"
+                classNames
+            >
+                <form onSubmit={this.submitPassword}>
+                    <LeftPad>
+                        <PassProtected><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</PassProtected>
+                    </LeftPad>
+                    <RightPad>
+                        <PassInput
+                            value={this.props.value}
+                            onChange={this.props.onChange} />
+                    </RightPad>
+                    <LeftPad>
+                        <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
+                    </LeftPad>
+                </form>
+            </Modal>
+        );
+    }
+}
+
+export default PasswordModal
\ No newline at end of file
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 79b1840..4b7c46c 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import Error from './Err';
 import { TitleInput, PasteInput } from './Inputs';
 import PasteInfo from  './PasteInfo';
+import PasswordModal from './PasswordModal'
 
 const RENDER_MODES = Object.freeze({
     RAW: 'raw text',
@@ -19,10 +20,18 @@ class ViewPaste extends React.Component {
             title: 'untitled paste',
             content: '',
             hasPass: false,
+            enteredPass: '',
+            validPass: false,
             expiry: 'no expiry',
             error: '',
             mode: RENDER_MODES.RAW, 
         };
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({ enteredPass: event.target.value });
     }
 
     newErr(msg, duration = 5000) {
@@ -50,9 +59,21 @@ class ViewPaste extends React.Component {
         }
     }
 
+    validatePass(pass) {
+        // stub
+        console.log(pass)
+        // need to toggle validPass
+    }
+
     render() {
         return (
             <div>
+                <PasswordModal
+                    hasPass={this.state.hasPass}
+                    validPass={this.state.validPass}
+                    value={this.state.enteredPass}
+                    onChange={this.handleChange}
+                    validateCallback={this.validatePass} />
                 <TitleInput
                     value={this.state.title}
                     id="titleInput"
@@ -74,28 +95,41 @@ class ViewPaste extends React.Component {
         return d.toLocaleDateString("en-US", options).toLocaleLowerCase()
     }
 
+    setStateFromData(data) {
+        this.setState({
+            title: data.title,
+            content: data.content,
+            expiry: this.fmtDateStr(data.expiry),
+        })
+    }
+
     componentDidMount() {
         const serverURL = `http://localhost:8080/api/${this.props.hash}`
 
         axios.get(serverURL)
             .then((response) => {
                 const data = response.data
-                this.setState({
-                    title: data.title,
-                    content: data.content,
-                    expiry: this.fmtDateStr(data.expiry),
-                })
+                this.setStateFromData(data)
             }).catch((error) => {
                 const resp = error.response
 
+                console.log(resp.status)
+
+                // catch 401 unauth (password protected)
+                if (resp.status === 401) {
+                    this.setState({hasPass: true})
+                    return
+                }
+
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
                     this.newErr(errTxt, -1)
-                } else {
-                    // some weird err (e.g. network)
-                    this.newErr(error, -1)
+                    return
                 }
+
+                // some weird err (e.g. network)
+                this.newErr(error, -1)
             })
     }
 }
-- 
cgit v1.2.3


From 4c6d5b49deb330200cbedc76334e6aa9cd848c94 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Tue, 12 May 2020 21:39:57 -0700
Subject: working password render

---
 frontend/src/components/PasswordModal.js |  2 ++
 frontend/src/components/ViewPaste.js     | 50 ++++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/PasswordModal.js b/frontend/src/components/PasswordModal.js
index ef96f9d..4b37dfe 100644
--- a/frontend/src/components/PasswordModal.js
+++ b/frontend/src/components/PasswordModal.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Modal from 'react-modal';
 import styled from 'styled-components'
 import { PassInput } from './Inputs'
+import Error from './Err';
 
 const modalStyles = {
     content: {
@@ -63,6 +64,7 @@ class PasswordModal extends React.Component {
                     </RightPad>
                     <LeftPad>
                         <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
+                        <Error msg={this.props.error} />
                     </LeftPad>
                 </form>
             </Modal>
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 4b7c46c..d591d19 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -24,10 +24,12 @@ class ViewPaste extends React.Component {
             validPass: false,
             expiry: 'no expiry',
             error: '',
+            passError: '',
             mode: RENDER_MODES.RAW, 
         };
 
         this.handleChange = this.handleChange.bind(this);
+        this.validatePass = this.validatePass.bind(this);
     }
 
     handleChange(event) {
@@ -45,6 +47,18 @@ class ViewPaste extends React.Component {
         }
     }
 
+    newPassErr() {
+        // shake thing
+        // set err field and clear input
+        this.setState({ 
+            passError: "incorrect pass",
+            enteredPass: "",
+        })
+        setTimeout(() => {
+            this.setState({ passError: '' })
+        }, 3000);
+    }
+
     drawRightMode() {
         switch (this.state.mode) {
             // TODO: add other renderers
@@ -60,9 +74,35 @@ class ViewPaste extends React.Component {
     }
 
     validatePass(pass) {
-        // stub
-        console.log(pass)
-        // need to toggle validPass
+        var bodyFormData = new FormData();
+        bodyFormData.set('password', pass);
+
+        axios({
+            method: 'post',
+            url: `http://localhost:8080/api/${this.props.hash}`,
+            data: bodyFormData,
+            headers: { 'Content-Type': 'multipart/form-data' },
+        }).then((response) => {
+            this.setState({ validPass: true })
+            this.setStateFromData(response.data)
+        }).catch((error) => {
+            const resp = error.response
+
+            // 401 unauth (bad pass)
+            if (resp.status === 401) {
+                this.newPassErr()
+                return
+            }
+
+            // otherwise, just log it lmao
+            if (resp !== undefined) {
+                const errTxt = `${resp.statusText}: ${resp.data}`
+                this.newErr(errTxt)
+            } else {
+                // some weird err (e.g. network)
+                this.newErr(error)
+            }
+        });
     }
 
     render() {
@@ -73,6 +113,7 @@ class ViewPaste extends React.Component {
                     validPass={this.state.validPass}
                     value={this.state.enteredPass}
                     onChange={this.handleChange}
+                    error={this.state.passError}
                     validateCallback={this.validatePass} />
                 <TitleInput
                     value={this.state.title}
@@ -96,6 +137,7 @@ class ViewPaste extends React.Component {
     }
 
     setStateFromData(data) {
+        console.log(data)
         this.setState({
             title: data.title,
             content: data.content,
@@ -113,8 +155,6 @@ class ViewPaste extends React.Component {
             }).catch((error) => {
                 const resp = error.response
 
-                console.log(resp.status)
-
                 // catch 401 unauth (password protected)
                 if (resp.status === 401) {
                     this.setState({hasPass: true})
-- 
cgit v1.2.3


From b8118ba07534cdcd01788c6c508be267da1fa87e Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Tue, 12 May 2020 22:28:19 -0700
Subject: abstract http funcs into helper

---
 frontend/src/components/NewPaste.js   | 75 ++++++++---------------------------
 frontend/src/components/ViewPaste.js  | 57 +++++++++++---------------
 frontend/src/components/httpHelper.js | 67 +++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/httpHelper.js

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 3bdd41a..dbcc5a7 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { TitleInput, PasteInput } from './Inputs'
 import OptionsContainer from './Options'
-import axios from 'axios';
 import { Redirect } from 'react-router-dom'
 import Error from './Err'
+import { PostNewPaste } from './httpHelper'
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -52,65 +52,24 @@ class NewPaste extends React.Component {
         });
     }
 
-    parseExpiry(e) {
-        var cur = new Date();
-        var inSeconds = 0
-        switch (e) {
-            case '5 years':
-                inSeconds = 600 * 6 * 24 * 7 * 4 * 12 * 5
-                break;
-            case '1 year':
-                inSeconds = 600 * 6 * 24 * 7 * 4 * 12
-                break;
-            case '1 month':
-                inSeconds = 600 * 6 * 24 * 7 * 4
-                break;
-            case '1 day':
-                inSeconds = 600 * 6 * 24
-                break;
-            case '1 hour':
-                inSeconds = 600 * 6
-                break;
-            case '10 min':
-                inSeconds = 600
-                break;
-            case '1 week':
-            default:
-                inSeconds = 600 * 6 * 24 * 7
-                break;
-        }
-        return new Date(cur.getTime() + inSeconds * 1000).toISOString();
-    }
-
     handleSubmit(event) {
-        var bodyFormData = new FormData();
-        bodyFormData.set('title', this.state.title);
-        bodyFormData.set('content', this.state.content);
-        bodyFormData.set('password', this.state.pass);
-        bodyFormData.set('expiry', this.parseExpiry(this.state.expiry));
-
-        axios({
-            method: 'post',
-            url: 'http://localhost:8080/api',
-            data: bodyFormData,
-            headers: { 'Content-Type': 'multipart/form-data' },
-        }).then((response) => {
-            // on success, redir
-            this.setState({ hash: response.data.hash })
-        }).catch((error) => {
-            const resp = error.response
-
-            // some weird err
-            if (resp !== undefined) {
-                const errTxt = `${resp.statusText}: ${resp.data}`
-                this.newErr(errTxt)
-            } else {
-                // some weird err (e.g. network)
-                this.newErr(error)
-            }
-        });
-
         event.preventDefault();
+        PostNewPaste(this.state)
+            .then((response) => {
+                // on success, redir
+                this.setState({ hash: response.data.hash })
+            }).catch((error) => {
+                const resp = error.response
+
+                // some weird err
+                if (resp !== undefined) {
+                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    this.newErr(errTxt)
+                } else {
+                    // some weird err (e.g. network)
+                    this.newErr(error)
+                }
+            });
     }
 
     render() {
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index d591d19..6a2be4c 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import axios from 'axios';
 import Error from './Err';
 import { TitleInput, PasteInput } from './Inputs';
 import PasteInfo from  './PasteInfo';
 import PasswordModal from './PasswordModal'
+import { FetchPaste, FetchPasswordPaste } from './httpHelper'
 
 const RENDER_MODES = Object.freeze({
     RAW: 'raw text',
@@ -74,35 +74,28 @@ class ViewPaste extends React.Component {
     }
 
     validatePass(pass) {
-        var bodyFormData = new FormData();
-        bodyFormData.set('password', pass);
-
-        axios({
-            method: 'post',
-            url: `http://localhost:8080/api/${this.props.hash}`,
-            data: bodyFormData,
-            headers: { 'Content-Type': 'multipart/form-data' },
-        }).then((response) => {
-            this.setState({ validPass: true })
-            this.setStateFromData(response.data)
-        }).catch((error) => {
-            const resp = error.response
-
-            // 401 unauth (bad pass)
-            if (resp.status === 401) {
-                this.newPassErr()
-                return
-            }
-
-            // otherwise, just log it lmao
-            if (resp !== undefined) {
-                const errTxt = `${resp.statusText}: ${resp.data}`
-                this.newErr(errTxt)
-            } else {
-                // some weird err (e.g. network)
-                this.newErr(error)
-            }
-        });
+        FetchPasswordPaste(this.props.hash, pass)
+            .then((response) => {
+                this.setState({ validPass: true })
+                this.setStateFromData(response.data)
+            }).catch((error) => {
+                const resp = error.response
+
+                // 401 unauth (bad pass)
+                if (resp.status === 401) {
+                    this.newPassErr()
+                    return
+                }
+
+                // otherwise, just log it lmao
+                if (resp !== undefined) {
+                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    this.newErr(errTxt)
+                } else {
+                    // some weird err (e.g. network)
+                    this.newErr(error)
+                }
+            });
     }
 
     render() {
@@ -146,9 +139,7 @@ class ViewPaste extends React.Component {
     }
 
     componentDidMount() {
-        const serverURL = `http://localhost:8080/api/${this.props.hash}`
-
-        axios.get(serverURL)
+        FetchPaste(this.props.hash)
             .then((response) => {
                 const data = response.data
                 this.setStateFromData(data)
diff --git a/frontend/src/components/httpHelper.js b/frontend/src/components/httpHelper.js
new file mode 100644
index 0000000..696980c
--- /dev/null
+++ b/frontend/src/components/httpHelper.js
@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+const base = `http://localhost:8080/api`
+
+
+export function FetchPaste(hash) {
+    const serverURL = `${base}/${hash}`
+    console.log(serverURL)
+    return axios.get(serverURL)
+}
+
+export function FetchPasswordPaste(hash, pass) {
+    var bodyFormData = new FormData();
+    bodyFormData.set('password', pass);
+
+    return axios({
+        method: 'post',
+        url: `${base}/${hash}`,
+        data: bodyFormData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+    })
+}
+
+export function PostNewPaste(state) {
+    var bodyFormData = new FormData();
+    bodyFormData.set('title', state.title);
+    bodyFormData.set('content', state.content);
+    bodyFormData.set('password', state.pass);
+    bodyFormData.set('expiry', parseExpiry(state.expiry));
+
+    return axios({
+        method: 'post',
+        url: 'http://localhost:8080/api',
+        data: bodyFormData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+    })
+}
+
+function parseExpiry(e) {
+    var cur = new Date();
+    var inSeconds = 0
+    switch (e) {
+        case '5 years':
+            inSeconds = 600 * 6 * 24 * 7 * 4 * 12 * 5
+            break;
+        case '1 year':
+            inSeconds = 600 * 6 * 24 * 7 * 4 * 12
+            break;
+        case '1 month':
+            inSeconds = 600 * 6 * 24 * 7 * 4
+            break;
+        case '1 day':
+            inSeconds = 600 * 6 * 24
+            break;
+        case '1 hour':
+            inSeconds = 600 * 6
+            break;
+        case '10 min':
+            inSeconds = 600
+            break;
+        case '1 week':
+        default:
+            inSeconds = 600 * 6 * 24 * 7
+            break;
+    }
+    return new Date(cur.getTime() + inSeconds * 1000).toISOString();
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 93a5b395effd88a783ef4bcd4162de281f6281ee Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Tue, 12 May 2020 22:30:23 -0700
Subject: fix dir

---
 frontend/src/components/NewPaste.js   |  2 +-
 frontend/src/components/ViewPaste.js  |  2 +-
 frontend/src/components/httpHelper.js | 67 -----------------------------------
 frontend/src/helpers/httpHelper.js    | 67 +++++++++++++++++++++++++++++++++++
 4 files changed, 69 insertions(+), 69 deletions(-)
 delete mode 100644 frontend/src/components/httpHelper.js
 create mode 100644 frontend/src/helpers/httpHelper.js

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index dbcc5a7..1409c22 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -3,7 +3,7 @@ import { TitleInput, PasteInput } from './Inputs'
 import OptionsContainer from './Options'
 import { Redirect } from 'react-router-dom'
 import Error from './Err'
-import { PostNewPaste } from './httpHelper'
+import { PostNewPaste } from '../helpers/httpHelper'
 
 class NewPaste extends React.Component {
     constructor(props) {
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 6a2be4c..d7bd355 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -3,7 +3,7 @@ import Error from './Err';
 import { TitleInput, PasteInput } from './Inputs';
 import PasteInfo from  './PasteInfo';
 import PasswordModal from './PasswordModal'
-import { FetchPaste, FetchPasswordPaste } from './httpHelper'
+import { FetchPaste, FetchPasswordPaste } from '../helpers/httpHelper'
 
 const RENDER_MODES = Object.freeze({
     RAW: 'raw text',
diff --git a/frontend/src/components/httpHelper.js b/frontend/src/components/httpHelper.js
deleted file mode 100644
index 696980c..0000000
--- a/frontend/src/components/httpHelper.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import axios from 'axios';
-
-const base = `http://localhost:8080/api`
-
-
-export function FetchPaste(hash) {
-    const serverURL = `${base}/${hash}`
-    console.log(serverURL)
-    return axios.get(serverURL)
-}
-
-export function FetchPasswordPaste(hash, pass) {
-    var bodyFormData = new FormData();
-    bodyFormData.set('password', pass);
-
-    return axios({
-        method: 'post',
-        url: `${base}/${hash}`,
-        data: bodyFormData,
-        headers: { 'Content-Type': 'multipart/form-data' },
-    })
-}
-
-export function PostNewPaste(state) {
-    var bodyFormData = new FormData();
-    bodyFormData.set('title', state.title);
-    bodyFormData.set('content', state.content);
-    bodyFormData.set('password', state.pass);
-    bodyFormData.set('expiry', parseExpiry(state.expiry));
-
-    return axios({
-        method: 'post',
-        url: 'http://localhost:8080/api',
-        data: bodyFormData,
-        headers: { 'Content-Type': 'multipart/form-data' },
-    })
-}
-
-function parseExpiry(e) {
-    var cur = new Date();
-    var inSeconds = 0
-    switch (e) {
-        case '5 years':
-            inSeconds = 600 * 6 * 24 * 7 * 4 * 12 * 5
-            break;
-        case '1 year':
-            inSeconds = 600 * 6 * 24 * 7 * 4 * 12
-            break;
-        case '1 month':
-            inSeconds = 600 * 6 * 24 * 7 * 4
-            break;
-        case '1 day':
-            inSeconds = 600 * 6 * 24
-            break;
-        case '1 hour':
-            inSeconds = 600 * 6
-            break;
-        case '10 min':
-            inSeconds = 600
-            break;
-        case '1 week':
-        default:
-            inSeconds = 600 * 6 * 24 * 7
-            break;
-    }
-    return new Date(cur.getTime() + inSeconds * 1000).toISOString();
-}
\ No newline at end of file
diff --git a/frontend/src/helpers/httpHelper.js b/frontend/src/helpers/httpHelper.js
new file mode 100644
index 0000000..696980c
--- /dev/null
+++ b/frontend/src/helpers/httpHelper.js
@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+const base = `http://localhost:8080/api`
+
+
+export function FetchPaste(hash) {
+    const serverURL = `${base}/${hash}`
+    console.log(serverURL)
+    return axios.get(serverURL)
+}
+
+export function FetchPasswordPaste(hash, pass) {
+    var bodyFormData = new FormData();
+    bodyFormData.set('password', pass);
+
+    return axios({
+        method: 'post',
+        url: `${base}/${hash}`,
+        data: bodyFormData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+    })
+}
+
+export function PostNewPaste(state) {
+    var bodyFormData = new FormData();
+    bodyFormData.set('title', state.title);
+    bodyFormData.set('content', state.content);
+    bodyFormData.set('password', state.pass);
+    bodyFormData.set('expiry', parseExpiry(state.expiry));
+
+    return axios({
+        method: 'post',
+        url: 'http://localhost:8080/api',
+        data: bodyFormData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+    })
+}
+
+function parseExpiry(e) {
+    var cur = new Date();
+    var inSeconds = 0
+    switch (e) {
+        case '5 years':
+            inSeconds = 600 * 6 * 24 * 7 * 4 * 12 * 5
+            break;
+        case '1 year':
+            inSeconds = 600 * 6 * 24 * 7 * 4 * 12
+            break;
+        case '1 month':
+            inSeconds = 600 * 6 * 24 * 7 * 4
+            break;
+        case '1 day':
+            inSeconds = 600 * 6 * 24
+            break;
+        case '1 hour':
+            inSeconds = 600 * 6
+            break;
+        case '10 min':
+            inSeconds = 600
+            break;
+        case '1 week':
+        default:
+            inSeconds = 600 * 6 * 24 * 7
+            break;
+    }
+    return new Date(cur.getTime() + inSeconds * 1000).toISOString();
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 94a9b304546dd1213ef2f15e57f5966ab88b80b7 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Tue, 12 May 2020 23:08:20 -0700
Subject: abstract err show logic

---
 frontend/src/components/Err.js           | 50 +++++++++++++++++++++++++++-----
 frontend/src/components/NewPaste.js      | 14 +++------
 frontend/src/components/PasswordModal.js |  4 +--
 frontend/src/components/ViewPaste.js     | 41 +++++++-------------------
 frontend/src/helpers/httpHelper.js       |  1 -
 5 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js
index 8562a74..dc78398 100644
--- a/frontend/src/components/Err.js
+++ b/frontend/src/components/Err.js
@@ -1,18 +1,54 @@
 import React from 'react';
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 const ErrMsg = styled.p`
     display: inline;
     font-weight: 700;
     margin-left: 2em;
-    color: #ff3333
+    color: #ff3333;
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
+
+    ${props => 
+        (props.active) && css`
+            opacity: 1
+        `
+    };
 `
 
-const Error = (props) => {
-    const msg = props.msg.toString().toLowerCase()
-    return (
-        <ErrMsg> {msg} </ErrMsg>
-    );
+class Error extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            active: false,
+            msg: '',
+        };
+
+        this.showMessage = this.showMessage.bind(this);
+    }
+
+    showMessage(msg, duration = 3000) {
+        this.setState({ 
+            active: true,
+            msg: msg
+        })
+
+        // fadeout after duration ms if duration != -1
+        if (duration !== -1) {
+            setTimeout(() => {
+                this.setState({ active: false })
+            }, duration);
+        }
+    }
+
+    render() {
+        const msg = this.state.msg.toString().toLowerCase()
+        return (
+            <ErrMsg active={this.state.active}> {msg} </ErrMsg>
+        );
+    }
 }
 
 export default Error
\ No newline at end of file
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 1409c22..f48f48b 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -19,13 +19,7 @@ class NewPaste extends React.Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    newErr(msg, duration = 5000) {
-        this.setState({ error: msg })
-        setTimeout(() => {
-            this.setState({ error: '' })
-        }, duration);
+        this.ErrorLabel = React.createRef();
     }
 
     renderRedirect = () => {
@@ -64,10 +58,10 @@ class NewPaste extends React.Component {
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt)
+                    this.ErrorLabel.current.showMessage(errTxt)
                 } else {
                     // some weird err (e.g. network)
-                    this.newErr(error)
+                    this.ErrorLabel.current.showMessage(error)
                 }
             });
     }
@@ -87,7 +81,7 @@ class NewPaste extends React.Component {
                     maxLength="100000"
                     id="pasteInput" />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
-                <Error msg={this.state.error} />
+                <Error ref={this.ErrorLabel} />
                 <OptionsContainer
                     pass={this.state.pass}
                     expiry={this.state.expiry}
diff --git a/frontend/src/components/PasswordModal.js b/frontend/src/components/PasswordModal.js
index 4b37dfe..ff4a0df 100644
--- a/frontend/src/components/PasswordModal.js
+++ b/frontend/src/components/PasswordModal.js
@@ -35,8 +35,8 @@ class PasswordModal extends React.Component {
 
     constructor(props) {
         super(props);
-
         this.submitPassword = this.submitPassword.bind(this);
+        this.ErrorLabel = React.createRef();
     }
 
     submitPassword(event) {
@@ -64,7 +64,7 @@ class PasswordModal extends React.Component {
                     </RightPad>
                     <LeftPad>
                         <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
-                        <Error msg={this.props.error} />
+                        <Error ref={this.ErrorLabel} />
                     </LeftPad>
                 </form>
             </Modal>
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index d7bd355..7232825 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -30,35 +30,14 @@ class ViewPaste extends React.Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.validatePass = this.validatePass.bind(this);
+        this.ErrorLabel = React.createRef();
+        this.PasswordModal = React.createRef();
     }
 
     handleChange(event) {
         this.setState({ enteredPass: event.target.value });
     }
 
-    newErr(msg, duration = 5000) {
-        this.setState({ error: msg })
-
-        // if duration -1, dont clear
-        if (duration !== -1) {
-            setTimeout(() => {
-                this.setState({ error: '' })
-            }, duration);
-        }
-    }
-
-    newPassErr() {
-        // shake thing
-        // set err field and clear input
-        this.setState({ 
-            passError: "incorrect pass",
-            enteredPass: "",
-        })
-        setTimeout(() => {
-            this.setState({ passError: '' })
-        }, 3000);
-    }
-
     drawRightMode() {
         switch (this.state.mode) {
             // TODO: add other renderers
@@ -83,17 +62,19 @@ class ViewPaste extends React.Component {
 
                 // 401 unauth (bad pass)
                 if (resp.status === 401) {
-                    this.newPassErr()
+                    this.PasswordModal.current
+                        .ErrorLabel.current
+                        .showMessage("incorrect pass")
                     return
                 }
 
                 // otherwise, just log it lmao
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt)
+                    this.ErrorLabel.current.showMessage(errTxt)
                 } else {
                     // some weird err (e.g. network)
-                    this.newErr(error)
+                    this.ErrorLabel.current.showMessage(error)
                 }
             });
     }
@@ -102,11 +83,11 @@ class ViewPaste extends React.Component {
         return (
             <div>
                 <PasswordModal
+                    ref={this.PasswordModal}
                     hasPass={this.state.hasPass}
                     validPass={this.state.validPass}
                     value={this.state.enteredPass}
                     onChange={this.handleChange}
-                    error={this.state.passError}
                     validateCallback={this.validatePass} />
                 <TitleInput
                     value={this.state.title}
@@ -118,7 +99,7 @@ class ViewPaste extends React.Component {
                 <PasteInfo
                     expiry={this.state.expiry}
                     mode={this.state.mode} />
-                <Error msg={this.state.error} />
+                <Error ref={this.ErrorLabel} />
             </div>
         );
     }
@@ -155,12 +136,12 @@ class ViewPaste extends React.Component {
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt, -1)
+                    this.ErrorLabel.current.showMessage(errTxt, -1)
                     return
                 }
 
                 // some weird err (e.g. network)
-                this.newErr(error, -1)
+                this.ErrorLabel.current.showMessage(error, -1)
             })
     }
 }
diff --git a/frontend/src/helpers/httpHelper.js b/frontend/src/helpers/httpHelper.js
index 696980c..6bf0fae 100644
--- a/frontend/src/helpers/httpHelper.js
+++ b/frontend/src/helpers/httpHelper.js
@@ -2,7 +2,6 @@ import axios from 'axios';
 
 const base = `http://localhost:8080/api`
 
-
 export function FetchPaste(hash) {
     const serverURL = `${base}/${hash}`
     console.log(serverURL)
-- 
cgit v1.2.3


From 9f21feea4abaec28e01d547f8d9a1ced444fcb26 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Wed, 13 May 2020 00:18:45 -0700
Subject: use var

---
 frontend/src/helpers/httpHelper.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/helpers/httpHelper.js b/frontend/src/helpers/httpHelper.js
index 6bf0fae..27695d5 100644
--- a/frontend/src/helpers/httpHelper.js
+++ b/frontend/src/helpers/httpHelper.js
@@ -29,7 +29,7 @@ export function PostNewPaste(state) {
 
     return axios({
         method: 'post',
-        url: 'http://localhost:8080/api',
+        url: base,
         data: bodyFormData,
         headers: { 'Content-Type': 'multipart/form-data' },
     })
-- 
cgit v1.2.3