Merge pull request #22 from jackyzha0/paste-modal

on new paste modal

10 files changed, 155 insertions, 37 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 390e3f5..2fbee85 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,8 @@
     "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.1.0",
+    "use-clipboard-copy": "^0.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index da540d0..4bb7b33 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import FloatingLabel from './decorators/FloatingLabel'
 import Dropdown from 'react-dropdown';
 
-const CharLimitContainer = styled.div`
+const RelPositioning = styled.div`
     position: relative; 
 `
 
@@ -16,7 +16,7 @@ const FlexChild = styled.div`
 class TitleInput extends React.Component {
     render() {
         return (
-            <CharLimitContainer>
+            <RelPositioning>
                 <FloatingLabel
                     label="title"
                     id={this.props.id}
@@ -35,7 +35,7 @@ class TitleInput extends React.Component {
                 <CharLimit
                     content={this.props.value}
                     maxLength={this.props.maxLength} />
-            </CharLimitContainer>
+            </RelPositioning>
         );
     }
 }
@@ -43,7 +43,7 @@ class TitleInput extends React.Component {
 class PasteInput extends React.Component {
     render() {
         return (
-            <CharLimitContainer>
+            <RelPositioning>
                 <FloatingLabel
                     label="content"
                     id={this.props.id}
@@ -60,7 +60,7 @@ class PasteInput extends React.Component {
                 <CharLimit
                     content={this.props.content}
                     maxLength={this.props.maxLength} />
-            </CharLimitContainer>
+            </RelPositioning>
         );
     }
 }
@@ -69,7 +69,7 @@ class PassInput extends React.Component {
     render() {
         return (
             <FlexChild>
-                <CharLimitContainer>
+                <RelPositioning>
                     <FloatingLabel
                         label="password"
                         id={this.props.id}
@@ -83,7 +83,7 @@ class PassInput extends React.Component {
                         onChange={this.props.onChange}
                         value={this.props.value}
                         id={this.props.id} />
-                </CharLimitContainer>
+                </RelPositioning>
             </FlexChild>
         );
     }
@@ -127,4 +127,27 @@ class ExpiryInput extends React.Component {
     }
 }
 
-export { TitleInput, PasteInput, PassInput, ExpiryInput }
\ No newline at end of file
+class PasteURLInput extends React.Component {
+    render() {
+        return (
+            <FlexChild>
+                <RelPositioning>
+                    <FloatingLabel
+                        label="url"
+                        id={this.props.id}
+                        value={this.props.id} />
+                    <input
+                        name="paste_url"
+                        className="lt-shadow"
+                        type="text"
+                        readOnly
+                        autoFocus
+                        id={this.props.id}
+                        value={this.props.fullURL} />
+                </RelPositioning>
+            </FlexChild>
+        );
+    }
+}
+
+export { TitleInput, PasteInput, PassInput, ExpiryInput, PasteURLInput }
\ No newline at end of file
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index f48f48b..0b1c795 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { TitleInput, PasteInput } from './Inputs'
 import OptionsContainer from './Options'
-import { Redirect } from 'react-router-dom'
 import Error from './Err'
 import { PostNewPaste } from '../helpers/httpHelper'
+import PasteModal from './modals/PasteModal'
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -22,13 +22,6 @@ class NewPaste extends React.Component {
         this.ErrorLabel = React.createRef();
     }
 
-    renderRedirect = () => {
-        if (this.state.hash !== '') {
-            const redirUrl = `/${this.state.hash}`
-            return <Redirect to={redirUrl} />
-        }
-    }
-
     componentDidUpdate() {
         if (this.state.title === "") {
             document.title = `ctrl-v`;
@@ -69,7 +62,7 @@ class NewPaste extends React.Component {
     render() {
         return (
             <form onSubmit={this.handleSubmit}>
-                {this.renderRedirect()}
+                <PasteModal hash={this.state.hash} />
                 <TitleInput 
                     onChange={this.handleChange}
                     value={this.state.title}
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 7232825..835deaf 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Error from './Err';
 import { TitleInput, PasteInput } from './Inputs';
 import PasteInfo from  './PasteInfo';
-import PasswordModal from './PasswordModal'
+import PasswordModal from './modals/PasswordModal'
 import { FetchPaste, FetchPasswordPaste } from '../helpers/httpHelper'
 
 const RENDER_MODES = Object.freeze({
diff --git a/frontend/src/components/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index ff4a0df..619e60a 100644
--- a/frontend/src/components/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import Modal from 'react-modal';
-import styled from 'styled-components'
-import { PassInput } from './Inputs'
-import Error from './Err';
+import { PassInput } from '../Inputs'
+import { RightPad, LeftPad, ModalHeader } from './shared'
+import Error from '../Err';
 
 const modalStyles = {
     content: {
@@ -15,18 +15,6 @@ const modalStyles = {
     }
 };
 
-const PassProtected = styled.h3`
-    font-weight: 700
-`
-
-const RightPad = styled.div`
-    margin-right: 3em;
-`
-
-const LeftPad = styled.div`
-    margin-left: 2em;
-`
-
 class PasswordModal extends React.Component {
 
     componentWillMount() {
@@ -51,11 +39,10 @@ class PasswordModal extends React.Component {
                 isOpen={this.props.hasPass && !this.props.validPass}
                 style={modalStyles}
                 contentLabel="enter paste password"
-                classNames
             >
                 <form onSubmit={this.submitPassword}>
                     <LeftPad>
-                        <PassProtected><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</PassProtected>
+                        <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
                     </LeftPad>
                     <RightPad>
                         <PassInput
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
new file mode 100644
index 0000000..75c28a8
--- /dev/null
+++ b/frontend/src/components/modals/PasteModal.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Modal from 'react-modal';
+import { LeftPad, ModalHeader, RightPad } from './shared'
+import { useHistory } from 'react-router-dom';
+import { PasteURLInput } from '../Inputs'
+import { useClipboard } from 'use-clipboard-copy';
+
+const modalStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '500px',
+        height: '250px',
+        border: '1px solid #11111188'
+    }
+};
+
+const PasteModal = (props) => {
+    const history = useHistory();
+    const fullURL = `${window.location.href}${props.hash}`;
+    const clipboard = useClipboard({ copiedTimeout: 3000 });
+    Modal.setAppElement('body');
+
+    const redir = () => {
+        const redirUrl = `/${props.hash}`
+        history.push(redirUrl);
+    }
+
+    return (
+        <Modal
+            isOpen={props.hash !== ''}
+            style={modalStyles}
+            contentLabel="paste created"
+        >
+            <form onSubmit={redir}>
+                <LeftPad>
+                    <ModalHeader><span role="img" aria-label="success">📎&nbsp;</span>paste created</ModalHeader>
+                </LeftPad>
+                    <RightPad>
+                        <PasteURLInput 
+                            id="paste_modal"
+                            fullURL={fullURL} />
+                        <input 
+                            hidden
+                            type="text"
+                            value={fullURL} 
+                            readOnly
+                            ref={clipboard.target} />
+                    </RightPad>
+                <LeftPad>
+                    <button 
+                        className="lt-button lt-shadow lt-hover"
+                        type="submit">
+                            view
+                    </button>
+                    <button 
+                        className="lt-button lt-shadow lt-hover"
+                        type="button" 
+                        onClick={clipboard.copy}>
+                            {clipboard.copied ? 'copied' : 'copy url'}
+                    </button>
+                </LeftPad>
+            </form>
+        </Modal>
+    );
+}
+
+export default PasteModal
\ No newline at end of file
diff --git a/frontend/src/components/modals/shared.js b/frontend/src/components/modals/shared.js
new file mode 100644
index 0000000..9359436
--- /dev/null
+++ b/frontend/src/components/modals/shared.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+export const RightPad = styled.div`
+    margin-right: 3em;
+`
+
+export const LeftPad = styled.div`
+    margin-left: 2em;
+`
+
+export const ModalHeader = styled.h3`
+    font-weight: 700
+`
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 3279aac..32e4065 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -86,7 +86,7 @@ a {
   color: #111111;
 }
 
-input[type=submit] {
+input[type=submit], button[type=submit] {
   font-family: 'Lora', serif;
   font-weight: 700;
   color: #faf9f5;
@@ -96,6 +96,18 @@ input[type=submit] {
   outline: 0;
 }
 
+button[type=button] {
+  font-family: 'Lora', serif;
+  width: 7em;
+  padding: calc(0.8em - 1px) 1.5em;
+  border-radius: 3px;
+  color: #111111;
+  background-color: #faf9f5;
+  border: 1px solid #565656;
+  outline: none;
+  margin: 2em 2em;
+}
+
 ul {
   list-style-type: none;
   display: inline-block;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e10893d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "use-clipboard-copy": "^0.1.2"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..242ac1d
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,15 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+clipboard-copy@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
+  integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
+
+use-clipboard-copy@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/use-clipboard-copy/-/use-clipboard-copy-0.1.2.tgz#83b16292dfa8ea262be714252022a8b4ad1c28c5"
+  integrity sha512-EkauxqyX+us4+Mfif/f61ew89EAOWIArqFpHR0jSG4SwwuDZzDAOeqO7gkK0vi+DQVADeB1RB3xqU3U0oOO3NQ==
+  dependencies:
+    clipboard-copy "^3.0.0"