Merge pull request #40 from StagBIN/dev

[WIP] Adding support for encrypted pastes and raw data viewing

package.json

@@ -12,19 +12,21 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@uiw/react-md-editor": "^3.6.0",
+    "ace-builds": "^1.14.0",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
     "draft-js": "^0.11.7",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
-    "react-ace": "^9.4.3",
+    "react-ace": "^10.1.0",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
-    "react-quill": "^1.3.5",
     "react-responsive": "^9.0.0-beta.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "string-crypt": "^0.0.1",
+    "string-crypto": "^2.0.2",
     "styled-components": "^5.3.0",
     "sweetalert2": "^11.4.37",
     "uuid": "^8.3.2",

src/App.js

@@ -26,10 +26,15 @@ import MEditor from "./components/MonacoEditor";
 import PEditor from "./components/AceEditor";
 import MobileTopAppBar from "./components/MobileTopAppBar";
 import TopAppBar from "./components/TopAppBar";
+import TopAppBarCompiler from "./components/TopAppBarCompiler";
 import BottomAppBar from "./components/BottomAppBar";
 import { API_URL } from "./Constants";
 import MCompiler from "./components/MonacoCompiler";
 
+// For Encryption
+import StringCrypto from "string-crypto";
+import PasswordDialog from "./components/PasswordDialog";
+
 export const StagBinContext = createContext();
 
 function CustomAlert(props) {
@@ -86,9 +91,12 @@ function App() {
     id,
     buid,
     base_url,
+    encrypted,
+    oldEncrypted,
     setSuccess,
     setSizeWarning,
-    setDataEmptyError
+    setDataEmptyError,
+    setEncryptError
   ) => {
     const headers = { buid };
 
@@ -105,6 +113,11 @@ function App() {
       return;
     }
 
+    if (!encrypted && oldEncrypted) {
+      setEncryptError(true);
+      return;
+    }
+
     const res = await axios.patch(
       API_URL + id,
       {
@@ -135,6 +148,7 @@ function App() {
     id,
     buid,
     base_url,
+    encyrpted,
     setSuccess,
     setSizeWarning,
     setDataEmptyError
@@ -156,6 +170,7 @@ function App() {
       data,
       buid,
       id,
+      isEncrypted: encyrpted,
     });
 
     if (res.status === 200) {
@@ -185,13 +200,44 @@ function App() {
   const [success, setSuccess] = useState(false);
   const [size_warning, setSizeWarning] = useState(false);
   const [data_empty_error, setDataEmptyError] = useState(false);
+  const [encrypt_error, setEncryptError] = useState(false);
   const [isMarkdownView, updateIsMarkdownView] = useState(false);
   const [isSameContentbuid, setIsSameContentbuid] = useState("");
   const [edited, setEdited] = useState(false);
   const [isDiff, setIsDiff] = useState(false);
   const [compileMode, setCompileMode] = useState(code ? true : false);
   const [output, setOutput] = useState("Your output here!");
 
+  // Encryption
+  const [encrypted, setEncrypted] = useState(false);
+  const [oldEncrypted, setOldEncrypted] = useState(false);
+  const [encryptedReadOnly, setEncryptedReadOnly] = useState(false);
+  const [openPasswordDialog, setOpenPasswordDialog] = useState(false);
+
+  // For Encryption
+  const [password, setPassword] = useState("");
+  const { encryptString, decryptString } = new StringCrypto();
+
+  const handlePassWordClose = () => {
+    setOpenPasswordDialog(false);
+    if (password.length > 0) {
+      if (data.length <= 0) {
+        setDataEmptyError(true);
+      } else {
+        if (encrypted) {
+          console.log(decryptString(data, password));
+          setData(decryptString(data, password));
+          setEncrypted(false);
+          setEncryptedReadOnly(true);
+        } else {
+          setEncrypted(true);
+          setData(encryptString(data, password));
+          setEncryptedReadOnly(true);
+        }
+      }
+    }
+  };
+
   // const themeToggler = () => {
   //   theme === "light" ? setTheme("dark") : setTheme("light");
   //   localStorage.setItem("stagbin_theme", theme === "light" ? "dark" : "light");
@@ -220,16 +266,20 @@ function App() {
         url,
         system_id,
         base_url,
+        encrypted,
+        oldEncrypted,
         setSuccess,
         setSizeWarning,
-        setDataEmptyError
+        setDataEmptyError,
+        setEncryptError
       );
     } else {
       post_save(
         data,
         url,
         system_id,
         base_url,
+        encrypted,
         setSuccess,
         setSizeWarning,
         setDataEmptyError
@@ -245,6 +295,7 @@ function App() {
     setSuccess(false);
     setSizeWarning(false);
     setDataEmptyError(false);
+    setEncryptError(false);
   };
 
   return (
@@ -259,20 +310,29 @@ function App() {
             compileMode,
             data,
             edited,
+            encrypted,
+            encryptedReadOnly,
+            oldEncrypted,
+            setOldEncrypted,
             language,
             oldData,
+            openPasswordDialog,
             output,
             readOnly,
             isDiff,
             isMarkdownView,
             isSameContentbuid,
             setCompileMode,
             setData,
+            setDataEmptyError,
             setEdited,
+            setEncrypted,
+            setEncryptedReadOnly,
             setIsDiff,
             setIsSameContentbuid,
             setLanguage,
             setOldData,
+            setOpenPasswordDialog,
             setOutput,
             setReadOnly,
             setUrl,
@@ -287,7 +347,7 @@ function App() {
                   <MobileTopAppBar />
                 </MediaQuery>
                 <MediaQuery minWidth={480}>
-                  <TopAppBar />
+                  {compileMode ? <TopAppBarCompiler /> : <TopAppBar />}
                 </MediaQuery>
               </div>
               <Switch>
@@ -329,19 +389,37 @@ function App() {
               onClose={handleCloseSnackBar}
               autoHideDuration={6000}
             >
-              <CustomAlert onClose={handleCloseSnackBar} severity="Error">
+              <CustomAlert onClose={handleCloseSnackBar} severity="error">
                 Content cannot be empty
               </CustomAlert>
             </Snackbar>
+            <Snackbar
+              open={encrypt_error}
+              onClose={handleCloseSnackBar}
+              autoHideDuration={6000}
+            >
+              <CustomAlert onClose={handleCloseSnackBar} severity="error">
+                Content needs to be reencrypted
+              </CustomAlert>
+            </Snackbar>
             <Snackbar
               open={pageDown}
               onClose={handleCloseSnackBar}
               autoHideDuration={1000000}
             >
-              <CustomAlert onClose={handleCloseSnackBar} severity="Error">
+              <CustomAlert onClose={handleCloseSnackBar} severity="error">
                 Internal Server Error, We are working on it
               </CustomAlert>
             </Snackbar>
+            <PasswordDialog
+              open={openPasswordDialog}
+              setOpen={setOpenPasswordDialog}
+              password={password}
+              setPassword={setPassword}
+              encrypted={encrypted}
+              handleClose={handlePassWordClose}
+              edited={edited}
+            />
           </div>
         </StagBinContext.Provider>
       </>

src/Constants.js

@@ -1,3 +1,4 @@
 const API_URL = "https://api.stagbin.tk/dev/content/";
+const RAW_URL = "https://raw.stagbin.tk/StagBIN-Raw/";
 
-export { API_URL };
+export { API_URL, RAW_URL };

src/components/AceEditor.js

@@ -26,6 +26,9 @@ const getData = async (
   id,
   base_url,
   setIsSameContentbuid,
+  setEncrypted,
+  setEncryptedReadOnly,
+  setOpenPasswordDialog,
   setLoading
 ) => {
   // setLoading(true);
@@ -41,6 +44,9 @@ const getData = async (
     reqData = res.data[0];
     // console.log(reqData);
     setIsSameContentbuid(reqData.edit);
+    setEncrypted(reqData.isEncrypted || false);
+    setEncryptedReadOnly(reqData.isEncrypted || false);
+    setOpenPasswordDialog(reqData.isEncrypted || false);
     setData(reqData.data);
     setLoading(false);
   }
@@ -66,6 +72,10 @@ export default function PEditor() {
     setUrl,
     data,
     setData,
+    encryptedReadOnly,
+    setEncrypted,
+    setEncryptedReadOnly,
+    setOpenPasswordDialog,
     base_url,
     setIsSameContentbuid,
     edited,
@@ -86,8 +96,17 @@ export default function PEditor() {
       }
       if (!(!readOnly && edited)) setReadOnly(true);
       setUrl(id);
-      if (!edited)
-        getData(setData, id, base_url, setIsSameContentbuid, setLoading);
+      if (!edited && !encryptedReadOnly)
+        getData(
+          setData,
+          id,
+          base_url,
+          setIsSameContentbuid,
+          setEncrypted,
+          setEncryptedReadOnly,
+          setOpenPasswordDialog,
+          setLoading
+        );
     }
   }
   set_data_if_exists();

src/components/BottomAppBar.js

@@ -38,7 +38,7 @@ export default function BottomAppBar(props) {
       >
         <Toolbar className={classes.toolbar}>
           <a href="https://stagbin.tk" style={{ color: "inherit" }}>
-            <small>&copy; Copyright 2021, StagBIN</small>
+            <small>&copy; Copyright 2023, StagBIN</small>
           </a>
           <div style={{ margin: "8px" }}>
             <a href="https://github.com/StagBin" style={{ color: "inherit" }}>

src/components/BottomBar.js

@@ -16,7 +16,7 @@ export default function BottomBar(props) {
       >
         <Link to="/" className="navbar-brand">
           {" "}
-          <small>&copy; Copyright 2021, StagBIN</small>{" "}
+          <small>&copy; Copyright 2023, StagBIN</small>{" "}
         </Link>
       </nav>
     </div>

src/components/MobileTopAppBar.js

@@ -11,6 +11,8 @@ import Zoom from "@material-ui/core/Zoom";
 import AddIcon from "@material-ui/icons/Add";
 import SaveIcon from "@material-ui/icons/Save";
 import EditIcon from "@material-ui/icons/Edit";
+import LockIcon from "@material-ui/icons/Lock";
+import LockOpenIcon from "@material-ui/icons/LockOpen";
 import FormControl from "@material-ui/core/FormControl";
 import { Tooltip } from "@material-ui/core";
 import IconButton from "@material-ui/core/IconButton";
@@ -80,8 +82,13 @@ export default function BackToTop(props) {
     setReadOnly,
     setEdited,
     data,
+    encrypted,
+    setOpenPasswordDialog,
   } = useContext(StagBinContext);
 
+  const showLockIcon = !readOnly && !encrypted;
+  const showUnlockIcon = readOnly && encrypted;
+
   const classes = useStyles();
   // console.log(readOnly);
   return (
@@ -109,6 +116,34 @@ export default function BackToTop(props) {
             }}
           ></FormControl>
           <div style={{ display: "inline-flex" }}>
+            {showLockIcon && (
+              <Tooltip title="Encrypt">
+                <IconButton
+                  edge="end"
+                  color="inherit"
+                  aria-label="Save"
+                  onClick={() => {
+                    setOpenPasswordDialog(true);
+                  }}
+                >
+                  <LockIcon />
+                </IconButton>
+              </Tooltip>
+            )}
+            {showUnlockIcon && (
+              <Tooltip title="Decrypt">
+                <IconButton
+                  edge="end"
+                  color="inherit"
+                  aria-label="Save"
+                  onClick={() => {
+                    setOpenPasswordDialog(true);
+                  }}
+                >
+                  <LockOpenIcon />
+                </IconButton>
+              </Tooltip>
+            )}
             {readOnly ? (
               isSameContentbuid ? (
                 <Tooltip title="Edit">