ANDROID: file manager webui (wip)

chrisws · chrisws · commit 2b901dbbb775 · 2022-07-11T21:01:40.000+10:00
diff --git a/src/platform/android/app/src/main/java/net/sourceforge/smallbasic/WebServer.java b/src/platform/android/app/src/main/java/net/sourceforge/smallbasic/WebServer.java
@@ -34,6 +34,7 @@
 public abstract class WebServer {
   private static final int BUFFER_SIZE = 32768;
   private static final int SEND_SIZE = BUFFER_SIZE / 4;
+  private static final String UTF_8 = "utf-8";
 
   public WebServer() {
     super();
@@ -67,7 +68,7 @@ public void run() {
   private Map<String, Collection<String>> getParameters(String url) throws IOException {
     Map<String, Collection<String>> result = new HashMap<>();
     try {
-      String[] args = URLDecoder.decode(url, "utf-8").split("[?]");
+      String[] args = URLDecoder.decode(url, UTF_8).split("[?]");
       if (args.length == 2) {
         for (String arg : args[1].split("&")) {
           String[] field = arg.split("=");
@@ -113,7 +114,7 @@ private Map<String, String> getPostData(InputStream inputStream, final String li
       int eq = nextField.indexOf("=");
       if (eq != -1) {
         String key = nextField.substring(0, eq);
-        String value = URLDecoder.decode(nextField.substring(eq + 1), "utf-8");
+        String value = URLDecoder.decode(nextField.substring(eq + 1), UTF_8);
         result.put(key, value);
       }
     }
@@ -144,10 +145,22 @@ private Response handleDownload(Map<String, Collection<String>> parameters) thro
     return new Response(new ByteArrayInputStream(outputStream.toByteArray()), outputStream.size());
   }
 
+  /**
+   * Handler for failed token validation
+   */
+  private Response handleError(String error) throws IOException {
+    JsonBuilder out = new JsonBuilder();
+    out.append('{');
+    out.append("error", error, false);
+    out.append('}');
+    return new Response(out.getBytes());
+  }
+
   /**
    * Handler for files API
    */
   private Response handleFileList() throws IOException {
+    log("sending file list");
     JsonBuilder builder = new JsonBuilder();
     builder.append('[');
     long id = 0;
@@ -252,6 +265,7 @@ private void runServer(final int socketNum, final String token) throws IOExcepti
               handlePost(socket, postData, fields[1]);
             } else {
               log("Invalid token");
+              handleError("invalid token").send(socket);
             }
           } else {
             log("Invalid request");
@@ -328,7 +342,7 @@ void append(String field, long value, boolean nextField) {
     }
 
     byte[] getBytes() throws UnsupportedEncodingException {
-      return json.toString().getBytes("utf-8");
+      return json.toString().getBytes(UTF_8);
     }
   }
 
@@ -344,6 +358,16 @@ public Response(InputStream inputStream, long length) {
       this.length = length;
     }
 
+    public Response(String data) throws IOException {
+      this.inputStream = new ByteArrayInputStream(data.getBytes(UTF_8));
+      this.length = data.length();
+    }
+
+    public Response(byte[] bytes) {
+      this.inputStream = new ByteArrayInputStream(bytes);
+      this.length = bytes.length;
+    }
+
     InputStream getInputStream() {
       return inputStream;
     }
diff --git a/src/platform/android/webui/src/App.js b/src/platform/android/webui/src/App.js
@@ -7,6 +7,7 @@ import {
   AppBar,
   Box,
   Button,
+  CssBaseline,
   Link,
   TextField,
   Toolbar,
@@ -58,11 +59,19 @@ const columns = [{
   },
 }];
 
+function getFetchHeader(body) {
+  return {
+    method: 'POST',
+    headers: {'Content-Type': 'application/text;charset=utf-8'},
+    body: body
+  };
+}
+
 function GridToolbarDownload(props) {
   let color = useTheme().palette.primary.main;
   let args = "";
   let join = "";
-  console.log(props.rows);
+
   props.selections.forEach(i => {
     args += join + "f=" + encodeURIComponent(props.rows[i].fileName);
     join = "&";
@@ -92,8 +101,91 @@ function AppToolbar(props) {
 
 function FileList(props) {
   const [selectionModel, setSelectionModel] = useState([]);
+
+  return (
+    <DataGrid rows={props.rows}
+              columns={columns}
+              pageSize={5}
+              components={{Toolbar: AppToolbar}}
+              componentsProps={{toolbar: {selections: selectionModel, rows: props.rows}}}
+              onSelectionModelChange={(model) => setSelectionModel(model)}
+              selectionModel={selectionModel}
+              rowsPerPageOptions={[5]}
+              checkboxSelection
+              disableSelectionOnClick/>
+  );
+}
+
+function TokenInput(props) {
+  const [token, setToken] = useState("");
+  const [error, setError] = useState(false);
+
+  const onClick = () => {
+    const validate = async () => {
+      let response = await fetch('/api/files', getFetchHeader("token=" + token));
+      let data = await response.json();
+      if (data.error) {
+        setError(true);
+      } else {
+        props.setRows(data);
+        props.setToken(token);
+      }
+    };
+    if (token) {
+      validate().catch(console.error);
+    }
+  };
+
+  const onChange = (event) => {
+    setToken(event.target.value);
+    if (!event.target.value) {
+      setError(false);
+    }
+  };
+
+  const onKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      onClick();
+    }
+  };
+
+  const help = "Enter the access token displayed on the SmallBASIC [About] screen.";
+  let helperText = error ? "Invalid token. " + help : help;
+
+  return (
+    <Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
+      <Box sx={{display: 'flex', flexDirection: 'column', marginBottom: '10em'}}>
+        <Box sx={{marginBottom: '1em'}}>
+          <TextField sx={{width: '20em'}}
+                     error={error}
+                     value={token}
+                     onChange={onChange}
+                     onKeyPress={onKeyPress}
+                     helperText={helperText}
+                     label="Enter your access token"/>
+        </Box>
+        <Box>
+          <Button onClick={onClick} variant="contained">Submit</Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default function App() {
+  const [token, setToken] = useState(null);
+  const [rows, setRows] = useState([]);
+
+  let content;
+  if (token) {
+    content = <FileList rows={rows}/>;
+  } else {
+    content = <TokenInput setRows={setRows} setToken={setToken} token={token}/>;
+  }
+
   return (
-    <Box sx={{flexGrow: 1}}>
+    <Box>
+      <CssBaseline/>
       <AppBar position="static">
         <Toolbar>
           <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
@@ -109,41 +201,8 @@ function FileList(props) {
         </Toolbar>
       </AppBar>
       <Box sx={{height: 'calc(100vh - 5.5em)', width: '100%'}}>
-        <DataGrid rows={props.rows}
-                  columns={columns}
-                  pageSize={5}
-                  components={{Toolbar: AppToolbar}}
-                  componentsProps={{toolbar: {selections: selectionModel, rows: props.rows}}}
-                  onSelectionModelChange={(model) => setSelectionModel(model)}
-                  selectionModel={selectionModel}
-                  rowsPerPageOptions={[5]}
-                  checkboxSelection
-                  disableSelectionOnClick/>
+        {content}
       </Box>
     </Box>
-
-  );
-}
-
-export default function App() {
-  const [token, setToken] = useState("token=ABC123");
-  const [rows, setRows] = useState([]);
-
-  useEffect(() => {
-    const getFiles = async () => {
-      let response = await fetch('/api/files', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/text;charset=utf-8'
-        },
-        body: token
-      });
-      setRows(await response.json());
-    };
-    getFiles().catch(console.error);
-  }, [token, setRows]);
-
-  return (
-    <FileList rows={rows}/>
   );
 }
