+ {showLockIcon && (
+
+ {
+ setOpenPasswordDialog(true);
+ }}
+ >
+
+
+ )}
+ {showUnlockIcon && (
+
+ {
+ setOpenPasswordDialog(true);
+ }}
+ >
+
+
+ )}
{readOnly ? (
isSameContentbuid ? (
diff --git a/src/components/MonacoEditor.js b/src/components/MonacoEditor.js
index 4721580..8ad2486 100644
--- a/src/components/MonacoEditor.js
+++ b/src/components/MonacoEditor.js
@@ -1,4 +1,4 @@
-import { useState, useContext } from "react";
+import { useState, useContext, useEffect } from "react";
import Editor, { DiffEditor } from "@monaco-editor/react";
import MDEditor from "@uiw/react-md-editor";
@@ -17,6 +17,10 @@ let reqData = {};
const getData = async (
setData,
+ setEncrypted,
+ setOldEncrypted,
+ setEncryptedReadOnly,
+ setOpenPasswordDialog,
id,
redirect,
base_url,
@@ -39,6 +43,10 @@ const getData = async (
reqData = res.data[0];
console.log(reqData);
setIsSameContentbuid(reqData.edit);
+ setEncrypted(reqData.isEncrypted || false);
+ setOldEncrypted(reqData.isEncrypted || false);
+ setEncryptedReadOnly(reqData.isEncrypted || false);
+ setOpenPasswordDialog(reqData.isEncrypted || false);
setData(reqData.data);
setLoading(false);
}
@@ -57,10 +65,14 @@ const useStyles = makeStyles((theme) => ({
export default function MEditor() {
const {
theme: curTheme,
+ encryptedReadOnly,
readOnly,
language,
setLanguage,
setReadOnly,
+ setEncrypted,
+ setOldEncrypted,
+ setEncryptedReadOnly,
setUrl,
isDiff,
isMarkdownView,
@@ -69,6 +81,7 @@ export default function MEditor() {
setData,
base_url,
setIsSameContentbuid,
+ setOpenPasswordDialog,
oldData,
edited,
} = useContext(StagBinContext);
@@ -82,62 +95,71 @@ export default function MEditor() {
// console.log(redirect);
const [loading, setLoading] = useState(id ? true : false);
- function set_data_if_exists() {
- if (id) {
- if (id.indexOf(".") !== -1) {
- let ext = id.split(".").at(-1);
- id = id.split(".")[0];
- switch (ext) {
- case "md":
- case "markdown":
- updateIsMarkdownView(true);
- break;
- case "js":
- case "javascript":
- setLanguage("javascript");
- break;
- case "c":
- case "cpp":
- setLanguage("cpp");
- break;
- case "py":
- case "python":
- setLanguage("python");
- break;
- case "html":
- setLanguage("html");
- break;
- case "css":
- setLanguage("css");
- break;
- case "java":
- setLanguage("java");
- break;
- case "go":
- setLanguage("go");
- break;
- default:
- break;
+
+ useEffect(() => {
+ function set_data_if_exists() {
+ if (id) {
+ if (id.indexOf(".") !== -1) {
+ let ext = id.split(".").at(-1);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ id = id.split(".")[0];
+ switch (ext) {
+ case "md":
+ case "markdown":
+ updateIsMarkdownView(true);
+ break;
+ case "js":
+ case "javascript":
+ setLanguage("javascript");
+ break;
+ case "c":
+ case "cpp":
+ setLanguage("cpp");
+ break;
+ case "py":
+ case "python":
+ setLanguage("python");
+ break;
+ case "html":
+ setLanguage("html");
+ break;
+ case "css":
+ setLanguage("css");
+ break;
+ case "java":
+ setLanguage("java");
+ break;
+ case "go":
+ setLanguage("go");
+ break;
+ default:
+ break;
+ }
+ } else {
+ setLanguage("javascript");
+ }
+ if (!(!readOnly && edited)) setReadOnly(true);
+ setUrl(id);
+ if (!edited && !encryptedReadOnly) {
+ getData(
+ setData,
+ setEncrypted,
+ setOldEncrypted,
+ setEncryptedReadOnly,
+ setOpenPasswordDialog,
+ id,
+ redirect,
+ base_url,
+ setIsSameContentbuid,
+ setLoading
+ );
}
- } else {
- setLanguage("javascript");
- }
- if (!(!readOnly && edited)) setReadOnly(true);
- setUrl(id);
- if (!edited) {
- getData(
- setData,
- id,
- redirect,
- base_url,
- setIsSameContentbuid,
- setLoading
- );
}
}
- }
- set_data_if_exists();
+ set_data_if_exists();
+ }, []);
+
// if (data) {
// document.getElementById("m-placeholder").style.display = "none";
// }
@@ -184,7 +206,7 @@ export default function MEditor() {
value={data}
colorDecorators="true"
options={{
- readOnly: readOnly,
+ readOnly: readOnly || (encryptedReadOnly && !edited),
renderLineHighlight: "none",
}}
onChange={(value, event) => {
diff --git a/src/components/MyEditor.js b/src/components/MyEditor.js
deleted file mode 100644
index c4f4f8a..0000000
--- a/src/components/MyEditor.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useParams } from "react-router-dom";
-import { useState } from "react";
-import ReactQuill from "react-quill";
-import "react-quill/dist/quill.snow.css";
-import "react-quill/dist/quill.bubble.css";
-
-const MyEditor = () => {
- const { id } = useParams();
- const [convertedText, setConvertedText] = useState(id);
- return (
-
-
- );
-};
-
-export default MyEditor;
diff --git a/src/components/PasswordDialog.js b/src/components/PasswordDialog.js
new file mode 100644
index 0000000..d358ca4
--- /dev/null
+++ b/src/components/PasswordDialog.js
@@ -0,0 +1,64 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+export default function FormDialog(props) {
+ const [open] = [props.open];
+ const [password, setPassword] = [props.password, props.setPassword];
+ const edited = props.edited;
+ const handleClose = props.handleClose;
+ const encrypted = props.encrypted;
+ return (
+
+
+
+ );
+}
diff --git a/src/components/TopAppBar.js b/src/components/TopAppBar.js
index fb65b68..788c271 100644
--- a/src/components/TopAppBar.js
+++ b/src/components/TopAppBar.js
@@ -18,10 +18,10 @@ import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import LockIcon from "@material-ui/icons/Lock";
+import LockOpenIcon from "@material-ui/icons/LockOpen";
import Input from "@material-ui/core/Input";
import Tooltip from "@material-ui/core/Tooltip";
-import Swal from "sweetalert2";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
@@ -31,11 +31,9 @@ import VSCodeDiffIcon from "./icons/VSCodeDiffIcon";
// Logo
import logo from "../assets/images/logo.png";
-// Compiler
-import compiler from "../utils/compiler";
-
// Context
import { StagBinContext } from "../App";
+import { RAW_URL } from "../Constants";
const useStyles = makeStyles((theme) => ({
root: {
@@ -100,6 +98,8 @@ export default function BackToTop(props) {
theme: curTheme,
url,
compileMode,
+ encrypted,
+ encryptedReadOnly,
setUrl,
readOnly,
invokeSave,
@@ -117,22 +117,27 @@ export default function BackToTop(props) {
setEdited,
data,
setOldData,
- setOutput,
+ setOpenPasswordDialog,
} = useContext(StagBinContext);
const classes = useStyles();
- const showCustomUrl = !compileMode && true;
- const showBinLanguages = !compileMode;
- const showCompileLanguages = compileMode;
- const showNewIcon = !compileMode; // Will update when we allow managing sessions for compilers
- const showDownload = !compileMode && readOnly; // Will update when we allow managing sessions for compilers
- const showMarkdown = !compileMode && language === "markdown";
- const showDiffIcon = !compileMode && edited;
- const showEditIcon = !compileMode && readOnly && isSameContentbuid;
- const showSaveIcon = !compileMode && !readOnly;
+ const showCustomUrl = true;
+ const showBinLanguages = true;
+ const showNewIcon = true; // Will update when we allow managing sessions for compilers
+ const showDownload = readOnly; // Will update when we allow managing sessions for compilers
+ const showMarkdown = language === "markdown";
+ const showDiffIcon = edited && !encryptedReadOnly;
+ const showEditIcon = readOnly && isSameContentbuid && !encrypted;
+ const showRawIcon = readOnly && !encrypted;
+ const showSaveIcon =
+ // When it is not encrypted and not read only
+ // When it is encrypted but not read only and encryptedReadOnly
+ (!encrypted && !readOnly) || (encrypted && !readOnly && encryptedReadOnly);
const showCompilerIcon = !readOnly;
- const showRunIcon = !readOnly && compileMode;
+ const showLockIcon = !readOnly && !encrypted;
+ const showUnlockIcon = readOnly && encrypted;
+
return (
- {showRunIcon && (
-
+ {showRawIcon && (
+
{
- // if code is empty, don't run
- if (data === "") {
- Swal.fire({
- icon: "warning",
- title: "Oops...",
- text: "Code is empty!",
- toast: true,
- position: "center-end",
- showConfirmButton: false,
- timer: 1500,
- });
- } else {
- const temp_output = await compiler(data, language);
- setOutput(temp_output);
- }
+ aria-label="Raw"
+ onClick={() => {
+ // Redirect to raw
+ window.location.href = `${RAW_URL}${url}`;
}}
>
-
)}
{showCompilerIcon && (
-
+
{
setCompileMode(!compileMode);
}}
@@ -226,6 +224,34 @@ export default function BackToTop(props) {
)}
+ {showLockIcon && (
+
+ {
+ setOpenPasswordDialog(true);
+ }}
+ >
+
+
+ )}
+ {showUnlockIcon && (
+
+ {
+ setOpenPasswordDialog(true);
+ }}
+ >
+
+
+ )}
{showBinLanguages && (
)}
- {showCompileLanguages && (
-
-
- Language
-
-
-
- )}
+
{showDownload && (
({
+ root: {
+ position: "fixed",
+ bottom: theme.spacing(1),
+ right: theme.spacing(2),
+ minHeight: "10px",
+ zIndex: 99999,
+ },
+ centerItems: {
+ justifyContent: "space-between",
+ },
+ urlEdit: {
+ justifyContent: "center",
+ marginLeft: "500px",
+ paddingBottom: "15px",
+ },
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ marginTop: "-5px",
+ color: "inherit",
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+}));
+
+function ScrollTop(props) {
+ const { children, window } = props;
+ const classes = useStyles();
+ // Note that you normally won't need to set the window ref as useScrollTrigger
+ // will default to window.
+ // This is only being set here because the demo is in an iframe.
+ const trigger = useScrollTrigger({
+ target: window ? window() : undefined,
+ disableHysteresis: true,
+ threshold: 100,
+ });
+
+ const handleClick = (event) => {
+ const anchor = (event.target.ownerDocument || document).querySelector(
+ "#back-to-top-anchor"
+ );
+
+ if (anchor) {
+ anchor.scrollIntoView({ behavior: "smooth", block: "center" });
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+export default function BackToTop(props) {
+ const {
+ theme: curTheme,
+ compileMode,
+ language,
+ setLanguage,
+ base_url,
+ setCompileMode,
+ data,
+ setOutput,
+ } = useContext(StagBinContext);
+
+ const classes = useStyles();
+
+ return (
+
+ {children}
+
+
+
+
+
+ 
+ {/* StagBIN */}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Topbar.js b/src/components/Topbar.js
deleted file mode 100644
index 8a02d23..0000000
--- a/src/components/Topbar.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-import "bootstrap/dist/css/bootstrap.min.css";
-
-export default function TopBar(props) {
- const curTheme = props.curTheme;
- return (
-
+
+ {
+ // if code is empty, don't run
+ if (data === "") {
+ Swal.fire({
+ icon: "warning",
+ title: "Oops...",
+ text: "Code is empty!",
+ toast: true,
+ position: "center-end",
+ showConfirmButton: false,
+ timer: 1500,
+ });
+ } else {
+ const temp_output = await compiler(data, language);
+ setOutput(temp_output);
+ }
+ }}
+ >
+
+
+
+
+ {
+ setCompileMode(!compileMode);
+ }}
+ >
+
+
+
+
+
+ Language
+
+
+
+
+
-
-
- );
-}