add focus opacity change, password input

1 files changed, 35 insertions, 1 deletions

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