Merge pull request #11 from jackyzha0/pass_and_expiry

add password stuff + expiry stuff

1 files changed, 59 insertions, 13 deletions

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