add password stuff + expiry stuff

8 files changed, 144 insertions, 28 deletions

diff --git a/frontend/package.json b/frontend/package.json
index a299964..26a63d5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "d3-scale": "^3.2.1",
     "rc-slider": "^9.2.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-dropdown": "^1.7.0",
     "react-modal": "^3.11.2",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.0"
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>
         );
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 720b736..3d05fa0 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -14,7 +14,7 @@ form {
   width: 100%;
 }
 
-textarea, input[type=text], input[type=password] {
+textarea, input[type=text], input[type=password], .Dropdown-root {
   width: 100%;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.8em;
@@ -25,7 +25,45 @@ textarea, input[type=text], input[type=password] {
   margin: 1.7em 0;
 }
 
-textarea, input[type=text], input[type=password] {
+.Dropdown-root {
+  cursor: pointer;
+}
+
+.Dropdown-root:hover, .Dropdown-root.is-open {
+   opacity: 1;
+}
+
+.Dropdown-root + label {
+  top: 0.5em;
+  opacity: 0;
+}
+
+.Dropdown-root.is-open + label, .Dropdown-root:hover + label {
+  opacity: 1;
+  top: -0.1em;
+}
+
+.Dropdown-placeholder {
+  width: 5em;
+}
+
+.Dropdown-menu {
+  border-top: 1px solid #111111;
+  margin-top: 0.5em;
+  bottom: auto;
+}
+
+.Dropdown-option {
+  margin-top: 0.5em;
+  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+.Dropdown-option:hover {
+  font-weight: 700;
+  opacity: 0.4;
+}
+
+textarea, input[type=text], input[type=password], .Dropdown-root {
   opacity: 0.5;
   transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
 }
@@ -34,17 +72,12 @@ textarea:focus, input[type=text]:focus, input[type=password]:focus {
   opacity: 1;
 }
 
-.passwordInput {
-  transform: translateY(-1.6em);
-}
-
 input[type=password] {
-  margin-top: 0 !important;
   font-weight: 700;
 }
 
 textarea {
-  height: 50vh;
+  height: 45vh;
   resize: vertical;
   min-height: 2em;
 }
@@ -59,5 +92,6 @@ input[type=submit] {
   color: #faf9f5;
   background-color: #111111;
   padding: 0.8em 2em;
+  margin: 2em 0;
   outline: 0;
 }
\ No newline at end of file