add password stuff + expiry stuff

6 files changed, 100 insertions, 20 deletions

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index eeb3e58..17240f5 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import Header from './Header'
 import PasteArea from './PasteArea'
+import Footer from './Footer'
 
 function App() {
   return (
     <div className="lt-content-column">
       <Header />
       <PasteArea />
+      <Footer />
     </div>
   );
 }
diff --git a/frontend/src/components/FloatingLabel.js b/frontend/src/components/FloatingLabel.js
index 814790c..e1fc0ba 100644
--- a/frontend/src/components/FloatingLabel.js
+++ b/frontend/src/components/FloatingLabel.js
@@ -12,7 +12,7 @@ const StyledLabel = styled.label`
     ${props =>
         (props.value.length > 0) &&
         css`
-        top: 0em;
+        top: -0.1em;
         opacity: 1
     `};
 `
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
new file mode 100644
index 0000000..ecd85e1
--- /dev/null
+++ b/frontend/src/components/Footer.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components'
+
+const SpacedFooter = styled.div`
+    margin: 1em 0;
+`
+
+const Link = (props) => {
+    return (
+        <a href={props.link} target="_blank" rel="noopener noreferrer">{props.name}</a>
+    );
+}
+
+const Footer = () => {
+    return (
+        <SpacedFooter>
+            © 2020 &mdash; <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" />
+        </SpacedFooter>
+    );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index a45e6de..aa68a70 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -2,11 +2,17 @@ import React from 'react';
 import CharLimit from './CharLimit'
 import styled from 'styled-components'
 import FloatingLabel from './FloatingLabel'
+import Dropdown from 'react-dropdown';
 
 const CharLimitContainer = styled.div`
     position: relative; 
 `
 
+const FlexChild = styled.div`
+    display: block;
+    margin-left: 2em;
+`
+
 class TitleInput extends React.Component {
     render() {
         return (
@@ -59,23 +65,63 @@ class PasteInput extends React.Component {
 class PassInput extends React.Component {
     render() {
         return (
-            <CharLimitContainer>
+            <FlexChild>
+                <CharLimitContainer>
+                    <FloatingLabel
+                        label="password"
+                        id={this.props.id}
+                        value={this.props.value} />
+                    <input
+                        name="pass"
+                        className="lt-shadow"
+                        placeholder="password (optional)"
+                        type="password"
+                        autoComplete="off"
+                        onChange={this.props.onChange}
+                        value={this.props.value}
+                        id={this.props.id} />
+                </CharLimitContainer>
+            </FlexChild>
+        );
+    }
+}
+
+class ExpiryInput extends React.Component {
+    
+    _onSelect(option) {
+        this.callBackRef({target: {
+            name: 'expiry',
+            value: option.label
+        }});
+    }
+
+    render() {
+        const options = [
+            '5 years',
+            '1 year', 
+            '1 month',
+            '1 week',
+            '1 day',
+            '1 hour',
+            '10 min',
+        ];
+
+        return (
+            <FlexChild>
+                <Dropdown 
+                    options={options} 
+                    onChange={this._onSelect} 
+                    callBackRef={this.props.onChange}
+                    value={this.props.value} 
+                    placeholder="1 week"
+                    id={this.props.id} />
                 <FloatingLabel
-                    label="password"
+                    label="expiry"
                     id={this.props.id}
                     value={this.props.value} />
-                <input
-                    name="pass"
-                    className="lt-shadow"
-                    placeholder="password (optional)"
-                    type="password"
-                    autoComplete="off"
-                    onChange={this.props.onChange}
-                    value={this.props.value}
-                    id={this.props.id} />
-            </CharLimitContainer>
+            </FlexChild>
         );
     }
 }
 
-export { TitleInput, PasteInput, PassInput }
\ No newline at end of file
+export { TitleInput, PasteInput, PassInput, ExpiryInput }
\ No newline at end of file
diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index 81f2046..21e932a 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -1,20 +1,27 @@
 import React from 'react';
 import styled from 'styled-components'
-import { PassInput } from './Inputs'
+import { PassInput, ExpiryInput } from './Inputs'
 
-const Float = styled.div`
-    float: right; 
+const Flex = styled.div`
+    float: right;
+    display: flex;
+    flex-direction: row;
+    transform: translateY(0.2em);
 `
 
 class OptionsContainer extends React.Component {
     render() {
         return (
-            <Float>
+            <Flex>
                 <PassInput
                     value={this.props.pass}
                     onChange={this.props.onChange}
                     id="passwordInput" />
-            </Float>
+                <ExpiryInput
+                    value={this.props.expiry}
+                    onChange={this.props.onChange}
+                    id="expiryInput" />
+            </Flex>
         );
     }
 }
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
index 95ef6d8..4232c7f 100644
--- a/frontend/src/components/PasteArea.js
+++ b/frontend/src/components/PasteArea.js
@@ -9,6 +9,7 @@ class PasteArea extends React.Component {
             title: '',
             content: '',
             pass: '',
+            expiry: ''
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -35,6 +36,8 @@ class PasteArea extends React.Component {
     handleSubmit(event) {
         console.log(`title: ${this.state.title}`)
         console.log(`content: ${this.state.content}`)
+        console.log(`pass: ${this.state.pass}`)
+        console.log(`expiry: ${this.state.expiry}`)
         event.preventDefault();
     }
 
@@ -51,10 +54,10 @@ class PasteArea extends React.Component {
                     content={this.state.content}
                     maxLength="100000"
                     id="pasteInput" />
-                <br />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
                 <OptionsContainer
                     pass={this.state.pass}
+                    expiry={this.state.expiry}
                     onChange={this.handleChange} />
             </form>
         );