From 28f0e55475ecac41034e3fac8c48ea0a332d364c Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Wed, 13 May 2020 23:34:12 -0700
Subject: on new paste modal

---
 frontend/src/components/Inputs.js               | 39 ++++++++++---
 frontend/src/components/NewPaste.js             | 11 +---
 frontend/src/components/PasswordModal.js        | 75 -------------------------
 frontend/src/components/ViewPaste.js            |  2 +-
 frontend/src/components/modals/PasswordModal.js | 62 ++++++++++++++++++++
 frontend/src/components/modals/PasteModal.js    | 69 +++++++++++++++++++++++
 frontend/src/components/modals/shared.js        | 13 +++++
 7 files changed, 178 insertions(+), 93 deletions(-)
 delete mode 100644 frontend/src/components/PasswordModal.js
 create mode 100644 frontend/src/components/modals/PasswordModal.js
 create mode 100644 frontend/src/components/modals/PasteModal.js
 create mode 100644 frontend/src/components/modals/shared.js

(limited to 'frontend/src/components')

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/PasswordModal.js b/frontend/src/components/PasswordModal.js
deleted file mode 100644
index ff4a0df..0000000
--- a/frontend/src/components/PasswordModal.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import Modal from 'react-modal';
-import styled from 'styled-components'
-import { PassInput } from './Inputs'
-import Error from './Err';
-
-const modalStyles = {
-    content: {
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '400px',
-        height: '250px',
-        border: '1px solid #11111188'
-    }
-};
-
-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() {
-        Modal.setAppElement('body');
-    }
-
-    constructor(props) {
-        super(props);
-        this.submitPassword = this.submitPassword.bind(this);
-        this.ErrorLabel = React.createRef();
-    }
-
-    submitPassword(event) {
-        const password = this.props.value
-        this.props.validateCallback(password)
-        event.preventDefault();
-    }
-
-    render() {
-        return(
-            <Modal
-                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>
-                    </LeftPad>
-                    <RightPad>
-                        <PassInput
-                            value={this.props.value}
-                            onChange={this.props.onChange} />
-                    </RightPad>
-                    <LeftPad>
-                        <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
-                        <Error ref={this.ErrorLabel} />
-                    </LeftPad>
-                </form>
-            </Modal>
-        );
-    }
-}
-
-export default PasswordModal
\ No newline at end of file
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/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
new file mode 100644
index 0000000..619e60a
--- /dev/null
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import Modal from 'react-modal';
+import { PassInput } from '../Inputs'
+import { RightPad, LeftPad, ModalHeader } from './shared'
+import Error from '../Err';
+
+const modalStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '400px',
+        height: '250px',
+        border: '1px solid #11111188'
+    }
+};
+
+class PasswordModal extends React.Component {
+
+    componentWillMount() {
+        Modal.setAppElement('body');
+    }
+
+    constructor(props) {
+        super(props);
+        this.submitPassword = this.submitPassword.bind(this);
+        this.ErrorLabel = React.createRef();
+    }
+
+    submitPassword(event) {
+        const password = this.props.value
+        this.props.validateCallback(password)
+        event.preventDefault();
+    }
+
+    render() {
+        return(
+            <Modal
+                isOpen={this.props.hasPass && !this.props.validPass}
+                style={modalStyles}
+                contentLabel="enter paste password"
+            >
+                <form onSubmit={this.submitPassword}>
+                    <LeftPad>
+                        <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
+                    </LeftPad>
+                    <RightPad>
+                        <PassInput
+                            value={this.props.value}
+                            onChange={this.props.onChange} />
+                    </RightPad>
+                    <LeftPad>
+                        <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
+                        <Error ref={this.ErrorLabel} />
+                    </LeftPad>
+                </form>
+            </Modal>
+        );
+    }
+}
+
+export default PasswordModal
\ No newline at end of file
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
+`
-- 
cgit v1.2.3