+
+
+ onPopupChange(e, "durability")}/>
+
+
+
+
+
+ {popup.tokenType === "upload" ?
+ <>
+
+
+
+
+ Upload Restrictions:
+
+
+ onPopupChange(e, "maxFiles")}/>
+
+
+
+ onPopupChange(e, "maxSize")}/>
+
+
+
+ onPopupChange(e, "extensions")}/>
+
+ :
+ <>
+ }
+
+ ;
+
+ function pushAlert(res, title) {
+ let newAlerts = alerts.slice();
+ newAlerts.push({type: "danger", message: res.msg, title: title});
+ setAlerts(newAlerts);
+ }
+
+ function removeAlert(i) {
+ if (i >= 0 && i < alerts.length) {
+ let newAlerts = alerts.slice();
+ newAlerts.splice(i, 1);
+ setAlerts(newAlerts);
+ }
+ }
+
+ function onRevokeToken(token) {
+ api.revokeToken(token).then((res) => {
+ if (res.success) {
+ let newTokens = tokens.slice();
+ for (const tokenObj of newTokens) {
+ if (tokenObj.token === token) {
+ tokenObj.valid_until = moment();
+ break;
+ }
+ }
+ setTokens(newTokens);
+ } else {
+ pushAlert(res, "Error revoking token");
+ }
+ });
+ }
+
+ function onPopupOpen() {
+ setPopup({...popup, visible: true});
+ }
+
+ function onPopupClose() {
+ setPopup({...popup, visible: false});
+ }
+
+ function onPopupChange(e, key) {
+ setPopup({...popup, [key]: e.target.value});
+ }
+
+ function onPopupButton(btn) {
+
+ if (btn === "Ok") {
+ let durability = popup.durability;
+ let validUntil = (durability === 0 ? null : moment().add(durability, "hours").format("YYYY-MM-DD HH:mm:ss"));
+ if (popup.tokenType === "download") {
+ api.createDownloadToken(durability, selectedFiles).then((res) => {
+ if (!res.success) {
+ pushAlert(res, "Error creating token");
+ } else {
+ let newTokens = tokens.slice();
+ newTokens.push({token: res.token, valid_until: validUntil, type: "download"});
+ setTokens(newTokens);
+ }
+ });
+ } else if (popup.tokenType === "upload") {
+ let parentId = popup.directory === 0 ? null : popup.directory;
+ api.createUploadToken(durability, parentId, popup.maxFiles, popup.maxSize, popup.extensions).then((res) => {
+ if (!res.success) {
+ pushAlert(res, "Error creating token");
+ } else {
+ let newTokens = tokens.slice();
+ newTokens.push({uid: res.tokenId, token: res.token, valid_until: validUntil, type: "upload"});
+ setTokens(newTokens);
+ }
+ });
+ }
+ }
+
+ onPopupClose();
+ }
+
+ function onCopyToken(index) {
+ let newTokens = tokens.slice();
+ let token = newTokens[index].token;
+ let url = window.location.href;
+ if (!url.endsWith("/")) url += "/";
+ url += token;
+ navigator.clipboard.writeText(url);
+ newTokens[index].tooltip = true;
+ setTokens(newTokens);
+ }
+}
\ No newline at end of file
diff --git a/fileControlPanel/src/index.js b/fileControlPanel/src/index.js
new file mode 100644
index 0000000..335127b
--- /dev/null
+++ b/fileControlPanel/src/index.js
@@ -0,0 +1,230 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import API from "./api";
+import Icon from "./elements/icon";
+import {FileBrowser} from "./elements/file-browser";
+import {TokenList} from "./elements/token-list";
+
+class FileControlPanel extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.api = new API();
+ this.state = {
+ loaded: false,
+ validatingToken: false,
+ errorMessage: "",
+ user: { },
+ token: { valid: false, value: "", validUntil: null, type: null },
+ files: {},
+ restrictions: { maxFiles: 0, maxSize: 0, extensions: "" }
+ };
+ }
+
+ onFetchFiles(files) {
+ this.setState({ ...this.state, files: files });
+ }
+
+ getDirectories(prefix = "/", items = null) {
+ let directories = { }
+ items = items || this.state.files;
+
+ if (prefix === "/") {
+ directories[0] = "/";
+ }
+
+ for(const fileItem of Object.values(items)) {
+ if (fileItem.isDirectory) {
+ let path = prefix + (prefix.length > 1 ? "/" : "") + fileItem.name;
+ directories[fileItem.uid] = path;
+ directories = Object.assign(directories, {...this.getDirectories(path, fileItem.items)});
+ }
+ }
+ return directories;
+ }
+
+ getSelectedIds(items = null, recursive = true) {
+ let ids = [];
+ items = items || this.state.files;
+ for (const fileItem of Object.values(items)) {
+ if (fileItem.selected) {
+ ids.push(fileItem.uid);
+ }
+ if (recursive && fileItem.isDirectory) {
+ ids.push(...this.getSelectedIds(fileItem.items));
+ }
+ }
+
+ return ids;
+ }
+
+ onSelectAll(selected, items) {
+ for (const fileElement of Object.values(items)) {
+ fileElement.selected = selected;
+ if (fileElement.isDirectory) {
+ this.onSelectAll(selected, fileElement.items);
+ }
+ }
+ }
+
+ onSelectFile(e, uid, items=null) {
+
+ let found = false;
+ let updatedFiles = (items === null) ? {...this.state.files} : items;
+ if (updatedFiles.hasOwnProperty(uid)) {
+ let fileElement = updatedFiles[uid];
+ found = true;
+ fileElement.selected = e.target.checked;
+ if (fileElement.isDirectory) {
+ this.onSelectAll(fileElement.selected, fileElement.items);
+ }
+ } else {
+ for (const fileElement of Object.values(updatedFiles)) {
+ if (fileElement.isDirectory) {
+ if (this.onSelectFile(e, uid, fileElement.items)) {
+ if (!e.target.checked) {
+ fileElement.selected = false;
+ }/* else if (this.getSelectedIds(fileElement.items, false).length === Object.values(fileElement.items).length) {
+ fileElement.selected = true;
+ }*/
+ found = true;
+ break;
+ }
+ }
+ }
+ }
+
+ if (items === null) {
+ this.setState({
+ ...this.state,
+ files: updatedFiles
+ });
+ }
+
+ return found;
+ }
+
+ onValidateToken(token = null) {
+ if (token === null) {
+ this.setState({ ...this.state, validatingToken: true, errorMessage: "" });
+ token = this.state.token.value;
+ }
+
+ this.api.validateToken(token).then((res) => {
+ let newState = { ...this.state, loaded: true, validatingToken: false };
+ if (res.success) {
+ newState.token = { ...this.state.token, valid: true, validUntil: res.token.valid_until, type: res.token.type };
+ if (!newState.token.value) {
+ newState.token.value = token;
+ }
+ newState.files = res.files;
+ newState.restrictions = res.restrictions;
+ } else {
+ newState.token.value = (newState.token.value ? "" : token);
+ newState.errorMessage = res.msg;
+ }
+
+ this.setState(newState);
+ });
+ }
+
+ onUpdateToken(e) {
+ this.setState({ ...this.state, token: { ...this.state.token, value: e.target.value } });
+ }
+
+ render() {
+ const self = this;
+ const errorMessageShown = !!this.state.errorMessage;
+
+ // still loading
+ if (!this.state.loaded) {
+
+ let checkUser = true;
+ let pathName = window.location.pathname;
+ if (pathName.startsWith("/files")) {
+ pathName = pathName.substr("/files".length);
+ }
+
+ if (pathName.length > 1) {
+ let end = (pathName.endsWith("/") ? pathName.length - 2 : pathName.length - 1);
+ let start = (pathName.startsWith("/files/") ? ("/files/").length : 1);
+ let token = pathName.substr(start, end);
+ if (token) {
+ this.onValidateToken(token);
+ checkUser = false;
+ }
+ }
+
+ if (checkUser) {
+ this.api.fetchUser().then((isLoggedIn) => {
+ if (isLoggedIn) {
+ this.api.listFiles().then((res) => {
+ this.setState({ ...this.state, loaded: true, user: this.api.user, files: res.files });
+ this.api.getRestrictions().then((res) => {
+ this.setState({ ...this.state, restrictions: res.restrictions });
+ })
+ });
+ } else {
+ this.setState({ ...this.state, loaded: true, user: this.api.user });
+ }
+ });
+ }
+
+ return <>Loading…