Working on CI/CD

.github/workflows/deploy.yml

@@ -0,0 +1,39 @@
+name: Docker Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Docker login
+        run: docker login -u "${{ secrets.DOCKERHUB_USERNAME }}" -p "${{ secrets.DOCKERHUB_TOKEN }}"
+
+      - name: Build and push Docker images
+        run: |
+          docker-compose build
+          docker-compose push
+
+      - name: Deploy to server
+        uses: appleboy/ssh-action@v1.2.1
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          password: ${{ secrets.SERVER_PASSWORD }}
+          script: |
+            docker-compose -f /path/to/your/docker-compose.yml down
+            docker-compose -f /path/to/your/docker-compose.yml pull
+            docker-compose -f /path/to/your/docker-compose.yml up -d
+        env:
+          FILE_GOPHERNEST_USER: ${{ secrets.FILE_GOPHERNEST_USER }}
+          FILE_GOPHERNEST_PASSWORD: ${{ secrets.FILE_GOPHERNEST_PASSWORD }}
+          FILE_GOPHERNEST_JWT_SECRET: ${{ secrets.FILE_GOPHERNEST_JWT_SECRET }}
+          DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}

backend/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "npx tsc",
     "start": "node dist/server.js",
-    "dev": "source .env && ts-node-dev src/server.ts"
+    "dev": "ts-node-dev src/server.ts"
   },
   "keywords": [],
   "author": "",

backend/src/server.ts

@@ -10,6 +10,7 @@ import {appendDirectoryToArchive, appendFileToArchive} from "./download";
 import path from "node:path";
 import {verifyToken} from "./authenicate";
 import jwt from "jsonwebtoken";
+import {config} from "dotenv";
 
 /**
  * App details
@@ -22,7 +23,7 @@ const ROOT: string = "/home/azpect";
  * Configure the .env file, this is for testing only
  * TODO: Remove this
  */
-// config({path: ".env"});
+config({path: ".env"});
 
 /**
  * Invalid file extensions for the file editor.

docker-compose.yml

@@ -16,7 +16,10 @@ services:
       - "5000:5000"
     volumes:
       # TODO: This will need to be configured, need to rebuild part of the program for that though
-      - /home/azpect:/media/vault
+      - /home/azpect/Documents:/home/azpect/Documents
-    env_file:
+    environment:
-      # TODO: This will need to be configured to use GH secrets, ez though
+      FILE_GOPHERNEST_USER: ${FILE_GOPHERNEST_USER}
-      - ./backend/.env
+      FILE_GOPHERNEST_PASSWORD: ${FILE_GOPHERNEST_PASSWORD}
+      FILE_GOPHERNEST_JWT_SECRET: ${FILE_GOPHERNEST_JWT_SECRET}
+      DOCKERHUB_USERNAME: ${DOCKERHUB_USERNAME}
+      DOCKERHUB_TOKEN: ${DOCKERHUB_TOKEN}

frontend/src/components/PathDisplay.jsx

@@ -5,12 +5,13 @@
  * @returns {JSX.Element}
  * @constructor
  */
-function HomeButton({onClick}) {
+function HomeButton({onClick, enabled}) {
     return (
         <button
             onClick={onClick}
-            className="hover:bg-gray-200 p-1.5 rounded-full transition-colors duration-150">
+            disabled={!enabled}
-            <svg className="text-black h-4"
+            className="hover:bg-gray-200 p-1.5 rounded-full transition-colors duration-150 disabled:text-gray-500 disabled:hover:bg-red-300 disabled:cursor-not-allowed text-black">
+            <svg className="h-4"
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor">
@@ -20,11 +21,12 @@ function HomeButton({onClick}) {
     )
 }
 
-function BackButton({onClick}) {
+function BackButton({onClick, enabled}) {
     return (
         <button onClick={onClick}
-                className="hover:bg-gray-200 p-1.5 mr-1 rounded-full transition-colors duration-150">
+                disabled={!enabled}
-            <svg className="h-5 text-black" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                className="hover:bg-gray-200 p-1.5 mr-1 rounded-full transition-colors duration-150 disabled:text-gray-500 disabled:hover:bg-red-300 disabled:cursor-not-allowed text-black">
+            <svg className="h-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M4 10L3.29289 10.7071L2.58579 10L3.29289 9.29289L4 10ZM21 18C21 18.5523 20.5523 19 20 19C19.4477 19 19 18.5523 19 18L21 18ZM8.29289 15.7071L3.29289 10.7071L4.70711 9.29289L9.70711 14.2929L8.29289 15.7071ZM3.29289 9.29289L8.29289 4.29289L9.70711 5.70711L4.70711 10.7071L3.29289 9.29289ZM4 9L14 9L14 11L4 11L4 9ZM21 16L21 18L19 18L19 16L21 16ZM14 9C17.866 9 21 12.134 21 16L19 16C19 13.2386 16.7614 11 14 11L14 9Z"/>
             </svg>
@@ -53,15 +55,16 @@ function PathElement({name, index, onClick}) {
  * @param updatePath {function(number)}
  * @param backHome {function}
  * @param backArrow {function}
+ * @param enabled {boolean}
  * @returns {JSX.Element}
  * @constructor
  */
-export default function PathDisplay({path, updatePath, backHome, backArrow}) {
+export default function PathDisplay({path, updatePath, backHome, backArrow, enabled}) {
     return (
         <div
             className="w-2/3 mt-8 border-b-1 border-gray-400 bg-white flex items-center truncate">
-            <HomeButton onClick={backHome}/>
+            <HomeButton onClick={backHome} enabled={enabled}/>
-            <BackButton onClick={backArrow}/>
+            <BackButton onClick={backArrow} enabled={enabled}/>
             {path.map((seg, idx) => <PathElement name={seg} key={idx} index={idx} onClick={updatePath}/>)}
         </div>
     )

frontend/src/pages/Dashboard.jsx

@@ -7,8 +7,11 @@ import Error from "../components/Error.jsx";
 import Editor from "../components/Editor.jsx";
 
 export default function Dashboard() {
+    // Store the default path
+    const defaultPath = ["home", "azpect", "Documents"];
+
     const [token, setToken] = useState(null);
-    const [path, setPath] = useState(["home", "azpect"]);
+    const [path, setPath] = useState([...defaultPath]);
     const [showHidden, setShowHidden] = useState(false);
     const [selected, setSelected] = useState([]);
     const [files, setFiles] = useState([]);
@@ -16,6 +19,7 @@ export default function Dashboard() {
     const [editing, setEditing] = useState("");
     const navigate = useNavigate();
 
+
     /**
      * The name of the value stored in local storage.
      * @type {string}
@@ -78,7 +82,11 @@ export default function Dashboard() {
      * @param index {number} Index to slice to.
      */
     const updatePath = (index) => {
-        setPath(path.slice(0, index + 1));
+        let newPath = path.slice(0, index + 1);
+        if (newPath.length < defaultPath.length) {
+            newPath = [...defaultPath];
+        }
+        setPath(newPath);
     };
 
     /**
@@ -86,7 +94,7 @@ export default function Dashboard() {
      */
     const backHome = () => {
         // TODO: Fix this in production
-        setPath(["home", "azpect"]);
+        setPath([...defaultPath]);
     };
 
     /**
@@ -101,7 +109,9 @@ export default function Dashboard() {
      * Back arrow, goes back one directory (cd ..)
      */
     const backArrow = () => {
-        setPath(path.slice(0, path.length - 1));
+        if (path.length > defaultPath.length) {
+            setPath(path.slice(0, path.length - 1));
+        }
     }
 
     /**
@@ -255,7 +265,8 @@ export default function Dashboard() {
                 {(editing !== "" && !error) &&
                     <Editor content={editingFileContent} path={editing} exit={exitFile} saveExit={exitAndSaveFile}/>}
 
-                <PathDisplay path={path} updatePath={updatePath} backHome={backHome} backArrow={backArrow}/>
+                <PathDisplay path={path} updatePath={updatePath} backHome={backHome} backArrow={backArrow}
+                             enabled={path.length > defaultPath.length}/>
                 <div className="w-2/3 h-5/6 overflow-y-auto border-1 border-gray-300">
                     <DirectoryList dirs={files} showHidden={showHidden} appendPath={appendPath}
                                    toggleSelected={toggleSelected} toggleEditing={toggleEditing}/>