added webUI for entering encryption password

backend/key/getKey.ts

@@ -1,6 +1,7 @@
 const prompt = require('password-prompt')
 import env from "../enviroment/env";
 import crypto from "crypto";
+import getWebUIKey from "./getWebUIKey";
 
 const getKey = async() => {
 
@@ -13,7 +14,7 @@ const getKey = async() => {
 
     } else if (process.env.NODE_ENV === "production") {
 
-        let password: string = await prompt("Enter Server Encryption Password: ", {method: "hide"});
+        let password = await getWebUIKey();
 
         password = crypto.createHash("md5").update(password).digest("hex");
 

backend/key/getWebUIKey.ts

@@ -0,0 +1,53 @@
+import express, {Request, Response} from "express";
+import http from "http";
+import path from "path";
+import bodyParser from "body-parser";
+const app = express();
+
+const getWebUIKey = () => {
+
+    const publicPath = path.join(__dirname, "..", "..", "webUI");
+
+
+    return new Promise<string>((resolve, reject) => {
+
+        app.use(express.static(publicPath));
+        app.use(express.json());
+        app.use(bodyParser.json({limit: "50mb"}));
+        app.use(bodyParser.urlencoded({limit: "50mb", extended: true, parameterLimit:50000}))
+
+        app.post("/submit", (req: Request, res: Response) => {
+
+            const password = req.body.password;
+
+            if (password && password.length > 0) {
+
+                console.log("Got WebUI key");
+                res.send();
+                server.close();
+                resolve(password);
+            }
+        })
+
+        app.get("*", (req: Request, res: Response) => {
+
+            res.sendFile(path.join(publicPath, "index.html"));
+
+        })
+
+        const port = process.env.HTTP_PORT || process.env.PORT;
+        const url = process.env.URL;
+
+        const server = http.createServer(app) as any;
+
+        server.listen(port, url, () => {
+
+            const fullURL = `${url!}:${port!}`;
+
+            console.log("\nPlease Navigate To", fullURL, "To Enter Encryption Password\n")
+        });
+
+    })
+}
+
+export default getWebUIKey;

package.json

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "server": "live-server public/",
-    "build": "tsc && webpack -p --env production",
+    "build": "tsc && webpack -p --env production && webpack --config webUI.config.js",
+    "build:webUI": "webpack --config webUI.config.js",
     "build:dev": "tsc && webpack --env development",
     "dev-server": "webpack-dev-server",
     "test": "NODE_ENV=test env-cmd -f ./config/test.env jest --config=jest.config.json --watchAll --runInBand",

tsconfig.json

@@ -69,6 +69,8 @@
     "public",
     "node_modules",
     "webpack.config.js",
-    "dist"
+    "dist",
+    "webUI",
+    "webUI.config.js"
   ]
 }

webUI.config.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const webpack = require("webpack")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = (env) => { 
+    
+    if (env === "test") {
+
+        console.log("Loading test env variables")
+        require("dotenv").config({path: ".env.test"})
+
+    } else if (env === "development") {
+
+        console.log("Loading development env variables")
+        require("dotenv").config({path: ".env.development"})
+
+    } else {
+
+        console.log("Loading production env variables")
+        require("dotenv").config({path: ".env.production"});
+    }
+    
+    return {
+        entry: './webUI/src/index.js',
+        output: {
+            path: path.resolve(__dirname, 'webUI', "dist"),
+            filename: 'bundle.js'
+        },
+        plugins: [
+            new webpack.DefinePlugin({
+                "process.env.PORT": JSON.stringify(process.env.PORT),
+                "process.env.REMOTE_URL": JSON.stringify(process.env.REMOTE_URL),
+                "process.env.ENABLE_VIDEO_TRANSCODING": JSON.stringify(process.env.ENABLE_VIDEO_TRANSCODING),
+                "process.env.DISABLE_STORAGE": JSON.stringify(process.env.DISABLE_STORAGE)
+            }),
+        ],
+}};

webUI/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+
+    
+    <title>MyDrive</title>
+    <link rel="icon" href="/images/icon.png">
+    <link rel="shortcut icon" type="image/png" href="/images/icon.png">
+    <link rel="shortcut icon" sizes="192x192" href="/images/icon.png">
+    <link rel="apple-touch-icon" href="/images/icon.png">
+    <link rel="stylesheet" type="text/css" href="./src/styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+</head>
+
+<body>
+
+    <div id="main-div">
+
+        <div id="box-div">
+
+            <p id="title">Enter Encryption Password</p>
+            <form id="form-submit">
+                <input id="input-password" type="password" placeholder="Password"/>
+                <button id="submit-button">Submit</button>
+            </form>
+
+        </div>
+
+    </div>
+    <!-- <script src="/socket.io/socket.io.js"></script> -->
+    <script src="./dist/bundle.js"></script>
+</body>
+
+</html>

webUI/src/index.js

@@ -0,0 +1,28 @@
+console.log("Hello, there", process.env.PORT);
+import axios from "axios";
+
+const formElement = document.getElementById("form-submit")
+const inputElement = document.getElementById("input-password");
+const mainDiv = document.getElementById("main-div")
+
+formElement.addEventListener("submit", async (e) => {
+
+    e.preventDefault();
+
+    const fullURL = process.env.REMOTE_URL;
+
+    const value = inputElement.value;
+
+    const data = {password: value}
+
+    axios.post(fullURL + "/submit", data).then(() => {
+
+        inputElement.value = "";
+        mainDiv.style.display = "none";
+
+    }).catch((err) => {
+        console.log("Error", err);
+    });
+
+    
+})

webUI/src/styles.css

@@ -0,0 +1,79 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+#main-div {
+   height: 100vh;
+   width: 100vw;
+   /* background: blue; */
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+}
+
+#box-div {
+    height: 30%;
+    width: 90%;
+    /* background: purple; */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    border: .5px;
+    border-style: groove;
+}
+
+@media (min-width:600px) { 
+    #box-div {
+
+        height: 30%;
+        width: 400px;
+        /* background: purple; */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        border: .5px;
+        border-style: groove;
+    }
+ }
+
+#input-password {
+    border: 1px solid #cacccd;
+    border-radius: 2px;
+    height: 43px;
+    font-size: 1.8rem;
+    font-weight: 300;
+    padding: 1.2rem;
+    margin: 0 0 1.2rem 0;
+    width: -webkit-fill-available;
+    margin-top: -17px;
+}
+
+#submit-button {
+    color: #fff;
+    background: #3c85ed;
+    font-size: 1.8rem;
+    padding: 1.2rem;
+    border: none;
+    display: inline-block;
+    text-decoration: none;
+    line-height: 1;
+    border-radius: 2px;
+}
+
+#title {
+    margin: 0 0 3rem 0;
+    line-height: 1;
+    font-family: Arial,Helvetica,sans-serif;
+    font-weight: 500;
+    color: #666;
+    font-size: 2em;
+    margin-top: 24px;
+}