FileAPI + Frontend

fileControlPanel/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+public/
 
 # misc
 .DS_Store

fileControlPanel/package.json

@@ -36,6 +36,8 @@
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "babel-loader": "^8.1.0",
-    "babel-polyfill": "^6.26.0"
+    "babel-polyfill": "^6.26.0",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^4.3.1"
   }
 }

fileControlPanel/src/api.js

@@ -13,7 +13,9 @@ export default class API {
 
     async apiCall(method, params) {
         params = params || { };
-        params.csrf_token = this.csrfToken();
+
+        const csrf_token = this.csrfToken();
+        if (csrf_token) params.csrf_token = csrf_token;
         let response = await fetch("/api/" + method, {
             method: 'post',
             headers: {'Content-Type': 'application/json'},
@@ -34,4 +36,16 @@ export default class API {
     async logout() {
         return this.apiCall("user/logout");
     }
+
+    validateToken(token) {
+        return this.apiCall("file/validateToken", { token: token });
+    }
+
+    listFiles() {
+        return this.apiCall("file/listFiles");
+    }
+
+    listTokens() {
+        return this.apiCall("file/listTokens");
+    }
 };

fileControlPanel/src/elements/file-browser.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+export class FileBrowser extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            files: props.files,
+        }
+    }
+
+    formatSize(size) {
+        const suffixes = ["B","KiB","MiB","GiB","TiB"];
+        let i = 0;
+        for (; i < suffixes.length && size >= 1024; i++) {
+            size /= 1024.0;
+        }
+
+        return size.toFixed(1) + " " + suffixes[i];
+    }
+
+    render() {
+        
+        let rows = [];
+        for (const [uid, fileElement] of Object.entries(this.state.files)) {
+            let name = fileElement.name;
+            let type = (fileElement.directory ? "Directory" : fileElement.mimeType);
+            let size = (fileElement.directory ? "" : fileElement.size)
+            // let iconUrl = (fileElement.directory ? "/img/icon/")
+            let iconUrl = "";
+
+            rows.push(
+                <tr key={"file-" + uid}>
+                    <td><img src={iconUrl} alt={"[Icon]"} /></td>
+                    <td>{name}</td>
+                    <td>{type}</td>
+                    <td>{this.formatSize(size)}</td>
+                </tr>
+            );
+        }
+
+        return <>
+            <h4>File Browser</h4>
+            <table className={"table"}>
+                <thead>
+                    <tr>
+                        <th/>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Size</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    { rows }
+                </tbody>
+            </table>
+        </>;
+    }
+}

fileControlPanel/src/elements/icon.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export default function Icon(props) {
+
+    let classes = props.className || [];
+    classes = Array.isArray(classes) ? classes : classes.toString().split(" ");
+    let type = props.type || "fas";
+    let icon = props.icon;
+
+    classes.push(type);
+    classes.push("fa-" + icon);
+
+    if (icon === "spinner" || icon === "circle-notch") {
+        classes.push("fa-spin");
+    }
+
+    let newProps = {...props, className: classes.join(" ") };
+    delete newProps["type"];
+    delete newProps["icon"];
+
+    return (
+        <i {...newProps} />
+    );
+}

fileControlPanel/src/elements/token-list.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+export class TokenList extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            api: props.api,
+            tokens: null
+        }
+    }
+
+    render() {
+
+        let rows = [];
+        if (this.state.tokens === null) {
+            this.state.api.listTokens().then((res) => {
+                this.setState({ ...this.state, tokens: res.tokens });
+            });
+        } else {
+            for (const token of this.state.tokens) {
+                rows.push(
+                    <tr key={"token-" + token.uid}>
+                        <td>{token.token}</td>
+                        <td>{token.type}</td>
+                        <td>{token.valid_until}</td>
+                    </tr>
+                );
+            }
+        }
+
+        return <>
+            <h4>Tokens</h4>
+            <table className={"table"}>
+                <thead>
+                    <tr>
+                        <th>Token</th>
+                        <th>Type</th>
+                        <th>Valid Until</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    { rows }
+                </tbody>
+            </table>
+        </>;
+    }
+}

fileControlPanel/src/index.js

@@ -1,8 +1,9 @@
 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 {
 
@@ -10,25 +11,94 @@ class FileControlPanel extends React.Component {
         super(props);
         this.api = new API();
         this.state = {
-            loaded: false
+            loaded: false,
+            validatingToken: false,
+            errorMessage: "",
+            user: { },
+            token: { valid: false, value: "", validUntil: null, type: null },
+            files: [],
         };
     }
 
-    render() {
-
-        if (!this.state.loaded) {
-            this.api.fetchUser().then(() => {
-                this.setState({ ...this.state, loaded: true });
-            });
-        } else if (this.state.user.loggedIn) {
-
-        } else {
-
-        }
-
-        return <></>;
+    onValidateToken() {
+        this.setState({ ...this.state, validatingToken: true, errorMessage: "" })
+        this.api.validateToken(this.state.token.value).then((res) => {
+            if (res.success) {
+                this.setState({ ...this.state, validatingToken: false,
+                    token: {
+                        ...this.state.token,
+                        valid: true,
+                        validUntil: res.token.valid_util,
+                        type: res.token.type
+                    },
+                    files: res.files
+                });
+            } else {
+                this.setState({ ...this.state, validatingToken: false, errorMessage: res.msg });
+            }
+        });
     }
 
+    onUpdateToken(e) {
+        this.setState({ ...this.state, token: { ...this.state.token, value: e.target.value } });
+    }
+
+    render() {
+        const self = this;
+        const errorMessageShown = !!this.state.errorMessage;
+
+        if (!this.state.loaded) {
+            this.api.fetchUser().then((isLoggedIn) => {
+                console.log(`api.fetchUser => ${isLoggedIn}`);
+                if (isLoggedIn) {
+                    this.api.listFiles().then((res) => {
+                        console.log(`api.listFiles => ${res.success}`);
+                        this.setState({ ...this.state, loaded: true, user: this.api.user, files: res.files });
+                    });
+                } else {
+                    this.setState({ ...this.state, loaded: true, user: this.api.user });
+                }
+            });
+            return <>Loading… <Icon icon={"spinner"} /></>;
+        } else if (this.api.loggedIn || this.state.token.valid) {
+            let tokenList = (this.api.loggedIn) ?
+                <div className={"row"}>
+                    <div className={"col-lg-6 col-md-8 col-sm-10 col-xs-12 mx-auto"}>
+                        <TokenList api={this.api} />
+                    </div>
+                </div> :
+                <></>;
+
+            return <div className={"container mt-4"}>
+                <div className={"row"}>
+                    <div className={"col-lg-6 col-md-8 col-sm-10 col-xs-12 mx-auto"}>
+                        <h2>File Control Panel</h2>
+                        <FileBrowser files={this.state.files}/>
+                    </div>
+                </div>
+                { tokenList }
+            </div>;
+        } else {
+            return <div className={"container mt-4"}>
+                <div className={"row"}>
+                    <div className={"col-lg-6 col-md-8 col-sm-10 col-xs-12 mx-auto"}>
+                        <h2>File Control Panel</h2>
+                        <form onSubmit={(e) => e.preventDefault()}>
+                            <label htmlFor={"token"}>Enter a file token to download or upload files</label>
+                            <input type={"text"} className={"form-control"} name={"token"} placeholder={"Enter token…"} maxLength={36}
+                                   value={this.state.token.value} onChange={(e) => self.onUpdateToken(e)}/>
+                            <button className={"btn btn-success mt-2"} onClick={this.onValidateToken.bind(this)} disabled={this.state.validatingToken}>
+                                { this.state.validatingToken ? <>Validating… <Icon icon={"spinner"}/></> : "Submit" }
+                            </button>
+                        </form>
+                        <div className={"alert alert-danger mt-2"} hidden={!errorMessageShown}>
+                            { this.state.errorMessage }
+                        </div>
+                    </div>
+                </div>
+            </div>;
+        }
+    }
 }
 
 ReactDOM.render(