Merge pull request #10 from jackyzha0/react

add focus opacity change, password input

7 files changed, 127 insertions, 11 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 6cb6a53..a299964 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "rc-slider": "^9.2.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-modal": "^3.11.2",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.0"
   },
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 46d87ba..0f98915 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -8,7 +8,7 @@
       name="ctrl-v"
       content="some_description"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jackyzha0/lite.css@latest/src/lite.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jackyzha0/[email protected]/src/lite.css">
     <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Roboto+Mono&display=swap" rel="stylesheet">
     <title>ctrl-v</title>
   </head>
diff --git a/frontend/src/components/FloatingLabel.js b/frontend/src/components/FloatingLabel.js
new file mode 100644
index 0000000..814790c
--- /dev/null
+++ b/frontend/src/components/FloatingLabel.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import styled, { css } from 'styled-components'
+
+const StyledLabel = styled.label`
+    position: absolute;
+    top: 0.5em;
+    font-weight: 700;
+    font-size: 1em;
+    opacity: 0;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+
+    ${props =>
+        (props.value.length > 0) &&
+        css`
+        top: 0em;
+        opacity: 1
+    `};
+`
+
+class FloatingLabel extends React.Component {
+    render() {
+        return (
+            <StyledLabel 
+                label={this.props.label}
+                value={this.props.value}
+                className={this.props.id}
+                htmlFor={this.props.id}>
+                    {this.props.label}
+            </StyledLabel>
+        );
+    }
+}
+
+export default FloatingLabel
\ No newline at end of file
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index d2238af..a45e6de 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import CharLimit from './CharLimit'
 import styled from 'styled-components'
+import FloatingLabel from './FloatingLabel'
 
 const CharLimitContainer = styled.div`
     position: relative; 
@@ -10,11 +11,17 @@ class TitleInput extends React.Component {
     render() {
         return (
             <CharLimitContainer>
+                <FloatingLabel
+                    label="title"
+                    id={this.props.id}
+                    value={this.props.value} />
                 <input
                     name="title"
                     className="lt-shadow"
                     placeholder="Title"
+                    id={this.props.id}
                     type="text"
+                    autoFocus
                     autoComplete="off"
                     onChange={this.props.onChange}
                     value={this.props.value} />
@@ -30,10 +37,15 @@ class PasteInput extends React.Component {
     render() {
         return (
             <CharLimitContainer>
+                <FloatingLabel
+                    label="content"
+                    id={this.props.id}
+                    value={this.props.content} />
                 <textarea
                     name="content"
                     placeholder="Paste your text here"
                     value={this.props.content}
+                    id={this.props.id}
                     onChange={this.props.onChange}
                     className="lt-shadow" />
                 <CharLimit
@@ -44,4 +56,26 @@ class PasteInput extends React.Component {
     }
 }
 
-export { TitleInput, PasteInput }
\ No newline at end of file
+class PassInput extends React.Component {
+    render() {
+        return (
+            <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>
+        );
+    }
+}
+
+export { TitleInput, PasteInput, PassInput }
\ No newline at end of file
diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
new file mode 100644
index 0000000..81f2046
--- /dev/null
+++ b/frontend/src/components/Options.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components'
+import { PassInput } from './Inputs'
+
+const Float = styled.div`
+    float: right; 
+`
+
+class OptionsContainer extends React.Component {
+    render() {
+        return (
+            <Float>
+                <PassInput
+                    value={this.props.pass}
+                    onChange={this.props.onChange}
+                    id="passwordInput" />
+            </Float>
+        );
+    }
+}
+
+export default OptionsContainer
\ No newline at end of file
diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js
index f026ef9..95ef6d8 100644
--- a/frontend/src/components/PasteArea.js
+++ b/frontend/src/components/PasteArea.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { TitleInput, PasteInput } from './Inputs'
+import OptionsContainer from './Options'
 
 class PasteArea extends React.Component {
     constructor(props) {
@@ -7,6 +8,7 @@ class PasteArea extends React.Component {
         this.state = { 
             title: '',
             content: '',
+            pass: '',
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -42,13 +44,18 @@ class PasteArea extends React.Component {
                 <TitleInput 
                     onChange={this.handleChange}
                     value={this.state.title}
-                    maxLength="100" />
+                    maxLength="100"
+                    id="titleInput" />
                 <PasteInput
                     onChange={this.handleChange}
                     content={this.state.content}
-                    maxLength="100000" />
+                    maxLength="100000"
+                    id="pasteInput" />
                 <br />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+                <OptionsContainer
+                    pass={this.state.pass}
+                    onChange={this.handleChange} />
             </form>
         );
     }
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 902a096..720b736 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -14,19 +14,39 @@ form {
   width: 100%;
 }
 
-textarea, input[type=text] {
+textarea, input[type=text], input[type=password] {
   width: 100%;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.8em;
-  padding: 0.8em;
+  padding: calc(0.8em - 1px);
   border-radius: 3px;
   border: 1px solid #565656;
   outline: none;
-  margin: 1.2em 0;
+  margin: 1.7em 0;
+}
+
+textarea, input[type=text], input[type=password] {
+  opacity: 0.5;
+  transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+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;
+  resize: vertical;
+  min-height: 2em;
 }
 
 a {
@@ -38,9 +58,6 @@ input[type=submit] {
   font-weight: 700;
   color: #faf9f5;
   background-color: #111111;
-  padding: 0.75em 2em;
-}
-
-input[type=submit]:focus {
+  padding: 0.8em 2em;
   outline: 0;
 }
\ No newline at end of file