password modal

4 files changed, 126 insertions, 18 deletions

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