Separated the Autoplex web UI into its own service

docker-compose.dev.yml

@@ -1,11 +1,19 @@
 version: "3.9"
 
 services:
-  request:
+  webui:
     build:
       target: dev
     ports:
-      - 3001:3001
+      - 3201:3201
+    volumes:
+      - ./packages:/opt/app/packages
+      - ./services/autoplex-webui:/opt/app/services/autoplex-webui
+    tty: true
+
+  request:
+    build:
+      target: dev
     volumes:
       - ./packages:/opt/app/packages
       - ./services/request:/opt/app/services/request

docker-compose.prod.yml

@@ -1,6 +1,12 @@
 version: "3.9"
 
 services:
+  webui:
+    build:
+      target: prod
+    environment:
+      NODE_ENV: production
+
   request:
     build:
       target: prod

docker-compose.yml

@@ -1,6 +1,15 @@
 version: "3.9"
 
 services:
+  webui:
+    build:
+      context: .
+      args:
+        SERVICE: autoplex-webui
+    env_file:
+      ./services/autoplex-webui/.env
+    restart: unless-stopped
+
   request:
     build:
       context: .
@@ -9,6 +18,7 @@ services:
     depends_on:
       - "database"
       - "torrent_client"
+      - "webui"
     env_file:
       - ./services/request/.env
     links:

services/autoplex-webui/.env.example

@@ -0,0 +1,2 @@
+# The base URL the site is hosted on
+BASE_URL = "https://autoplex.dlii.tech"

services/autoplex-webui/README.md

@@ -0,0 +1,3 @@
+# Autoplex Web UI
+
+The web UI for the Autoplex service

services/autoplex-webui/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@autoplex-service/autoplex-webui",
+  "version": "0.0.0",
+  "keywords": [],
+  "author": "David Ludwig",
+  "license": "ISC",
+  "main": "./dist/server/index.js",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build": "yarn run build:backend && yarn run build:frontend",
+    "build:backend": "tsc -p ./tsconfig.server.json",
+    "build:frontend": "vue-tsc --noEmit -p ./tsconfig.vite.json && vite build",
+    "start": "NODE_ENV=production node .",
+    "start:dev": "vite"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "fastify": "^3.14.1",
+    "fastify-static": "^4.0.1",
+    "jwt-decode": "^3.1.2",
+    "validate.js": "^0.13.1",
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.6",
+    "vuedraggable": "^4.0.1",
+    "vuex": "^4.0.0",
+    "websocket": "^1.0.33"
+  },
+  "devDependencies": {
+    "@types/node": "^15.0.1",
+    "@vitejs/plugin-vue": "^1.2.1",
+    "@vue/compiler-sfc": "^3.0.5",
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.9",
+    "rimraf": "^3.0.2",
+    "tailwindcss": "^2.1.1",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.3",
+    "vite": "^2.1.5",
+    "vue-tsc": "^0.0.15"
+  }
+}

services/autoplex-webui/src/common/api_schema.ts

@@ -0,0 +1,60 @@
+/**
+ * Basic user information schema
+ */
+export interface IUser {
+	id     : number,
+	name   : string,
+	isAdmin: boolean
+}
+
+/**
+ * The JWT auth token structure
+ */
+export interface ITokenSchema extends IUser {
+	iat    : number,
+	exp    : number
+}
+
+/**
+ * The general API response structure
+ */
+export interface IApiResponse {
+	status: string
+}
+
+/**
+ * A generic data response from the API
+ */
+export interface IApiDataResponse<T> extends IApiResponse {
+	data: T
+}
+
+export interface IApiPaginatedResponse<T> {
+	page        : number,
+	results     : T[],
+	totalPages  : number,
+	totalResults: number
+};
+
+/**
+ * A movie listing returned from the API
+ */
+export interface IApiMovie {
+	plexLink   : string | null,
+	posterPath : string | null,
+	releaseDate: string | null,
+	ticketId   : number | null,
+	title      : string,
+	tmdbId     : number
+}
+
+/**
+ * Movie details returned from the API
+ */
+export interface IApiMovieDetails extends IApiMovie {
+	backdropPath: string | null,
+	imdbId      : string | null,
+	overview    : string | null,
+	runtime     : number | null,
+	requestedBy : IUser  | null
+}

services/autoplex-webui/src/common/validation.ts

@@ -0,0 +1,90 @@
+export const constraints = {
+	api: {
+		movie: {
+			search: {
+				query: {
+					presence: {
+						allowEmpty: false,
+						message: "The query cannot be blank"
+					}
+				},
+				year: {
+					numericality: {
+						onlyInteger: true,
+						greaterThan: 0,
+						notGreaterThan: "Invalid year",
+						notValid: "Invalid year",
+						notInteger: "Invalid year"
+					}
+				}
+			}
+		}
+	},
+	login: {
+		email: {
+			presence: {
+				allowEmpty: false,
+				message: "An email address is required"
+			}
+		},
+		password: {
+			presence: {
+				allowEmpty: false,
+				message: "A password is required"
+			}
+		}
+	},
+	register: {
+		token: {
+			presence: {
+				message: "A valid token is required to register"
+			},
+			token: {
+				message: "A valid token is required to register"
+			}
+		},
+		name: {
+			presence: {
+				allowEmpty: false,
+				message: "Your name is required"
+			},
+			length: {
+				maximum: 50,
+				tooLong: "Your name cannot exceed 50 characters"
+			}
+		},
+		email: {
+			presence: {
+				allowEmpty: false,
+				message: "Your email is required"
+			},
+			length: {
+				maximum: 255,
+				tooLong: "An email address cannot exceed 255 characters"
+			},
+			email: {
+				message: "A valid email address is required"
+			}
+		},
+		password: {
+			presence: {
+				allowEmpty: false,
+				message: "A password is required"
+			},
+			length: {
+				minimum: 8,
+				tooShort: "Password should be at least 8 characters"
+			}
+		},
+		retypePassword: {
+			presence: {
+				allowEmpty: false,
+				message: "Re-type your password to confirm it"
+			},
+			equality: {
+				attribute: "password",
+				message: "Passwords must match"
+			}
+		}
+	}
+};

services/autoplex-webui/src/server/index.ts

@@ -0,0 +1,27 @@
+import fastify from "fastify";
+import fastifyStatic from "fastify-static";
+import { join } from "path";
+
+/**
+ * Create the server instance
+ */
+let server = fastify();
+
+/**
+ * Serve static assets
+ */
+server.register(fastifyStatic, {
+	root: join(__dirname, "../public")
+});
+
+/**
+ * If a file is not found, return the web UI
+ */
+server.setNotFoundHandler((_, reply) => {
+	return reply.sendFile("index.html");
+});
+
+/**
+ * Serve the web UI
+ */
+server.listen(3201, "0.0.0.0");

services/autoplex-webui/tsconfig.json

@@ -0,0 +1,76 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                         /* Enable incremental compilation */
+    "target": "es5",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    // "module": "commonjs",                        /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": [],                                   /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                             /* Allow javascript files to be compiled. */
+    // "checkJs": true,                             /* Report errors in .js files. */
+    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                              /* Generates corresponding '.map' file. */
+    // "outFile": "./",                             /* Concatenate and emit output to single file. */
+    "outDir": "./dist",                             /* Redirect output structure to the directory. */
+    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                           /* Enable project compilation */
+    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
+    // "removeComments": true,                      /* Do not emit comments to output. */
+    // "noEmit": true,                              /* Do not emit outputs. */
+    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true,                     /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                                 /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                    /* Enable strict null checks. */
+    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
+    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "baseUrl": "./src",                             /* Base directory to resolve non-absolute module names. */
+    // "paths": {}                                  /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "typeRoots": [                                  /* List of folders to include type definitions from. */
+      "src/typings"
+    ],
+    // "types": [],                                 /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    "experimentalDecorators": true,                 /* Enables experimental support for ES7 decorators. */
+    "emitDecoratorMetadata": true,                  /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
+  },
+  "include": [
+    "src"
+  ]
+}

services/request/Dockerfile

@@ -1,20 +0,0 @@
-FROM node:14-alpine AS base
-WORKDIR /app
-RUN mkdir /var/autoplex && chown node:node -R /var/autoplex
-
-# An image containing necessary components for building
-FROM base AS builder
-COPY package.json yarn.lock index.html postcss.config.js tailwind.config.js vite.config.ts tsconfig.* ./
-RUN rm -rf node_modules && yarn install --frozen-lockfile
-COPY src src
-
-# An image to build the app
-FROM builder AS build
-RUN yarn run build
-
-# An image containing the built app and production dependencies
-FROM base AS prod
-COPY --from=build /app/build ./build
-COPY package.json yarn.lock ./
-RUN rm -rf node_modules && yarn install --production --frozen-lockfile
-CMD [ "yarn", "run", "start" ]

services/request/package.json

@@ -8,10 +8,7 @@
   "scripts": {
     "clean": "rimraf ./dist",
     "cli:token": "node -r ts-node/register -r tsconfig-paths/register ./src/cli/create_token.ts",
-    "dev": "vite",
-    "build": "yarn run build:backend && yarn run build:frontend",
-    "build:backend": "ttsc -P ./tsconfig.server.json",
-    "build:frontend": "vue-tsc --noEmit -p ./tsconfig.vite.json && vite build",
+    "build": "ttsc",
     "start": "NODE_ENV=production node .",
     "start:dev": "nodemon"
   },
@@ -20,7 +17,6 @@
     "@autoplex/microservice": "^0.0.0",
     "@autoplex/utils": "^0.0.0",
     "@autoplex/webserver": "^0.0.0",
-    "@fortawesome/fontawesome-free": "^5.15.3",
     "bcrypt": "^5.0.1",
     "discord.js": "^12.5.3",
     "fastify": "^3.14.1",
@@ -36,10 +32,6 @@
     "tvdb-v4": "^1.0.0",
     "typeorm": "^0.2.32",
     "validate.js": "^0.13.1",
-    "vue": "^3.0.5",
-    "vue-router": "^4.0.6",
-    "vuedraggable": "^4.0.1",
-    "vuex": "^4.0.0",
     "websocket": "^1.0.33",
     "xml2js": "^0.4.23"
   },
@@ -48,19 +40,12 @@
     "@types/jsonwebtoken": "^8.5.1",
     "@types/node-ipc": "^9.1.3",
     "@types/xml2js": "^0.4.8",
-    "@vitejs/plugin-vue": "^1.2.1",
-    "@vue/compiler-sfc": "^3.0.5",
     "@zerollup/ts-transform-paths": "^1.7.18",
-    "autoprefixer": "^10.2.5",
     "nodemon": "^2.0.7",
-    "postcss": "^8.2.9",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^2.1.1",
     "ts-node": "^9.1.1",
     "tsconfig-paths": "^3.9.0",
     "ttypescript": "^1.5.12",
-    "typescript": "^4.1.3",
-    "vite": "^2.1.5",
-    "vue-tsc": "^0.0.15"
+    "typescript": "^4.1.3"
   }
 }

services/request/src/cli/create_token.ts

@@ -1,10 +0,0 @@
-import connectToDatabase from "@server/database";
-import { RegisterToken } from "@server/database/entities";
-import { env } from "@server/util";
-
-(async () => {
-	await connectToDatabase();
-	let token = await RegisterToken.generate()
-	console.log(`${env("BASE_URL")}/register?token=${token.token}`);
-	process.exit(0);
-})();

services/request/src/server/services/WebServer/routes/index.ts

@@ -1,7 +1,9 @@
 import api from "./api";
 import auth from "./auth";
+import web from "./web";
 
 export default {
 	api,
-	auth
+	auth,
+	web
 }

services/request/src/server/services/WebServer/routes/web.ts

@@ -0,0 +1,10 @@
+import { RouteRegisterFactory, MiddlewareMethod } from "@autoplex/webserver";
+import Application from "@server/Application";
+
+export default function register(factory: RouteRegisterFactory<MiddlewareMethod<void>, Application>, app: Application) {
+
+	/**
+	 * Register the proxy route for the web UI server
+	 */
+	factory.proxy("/", "http://webui:3201");
+}

services/request/src/server/services/index.ts

@@ -4,7 +4,7 @@ import MovieSearch      from "./MovieSearch";
 import PlexLibrary      from "./PlexLibrary";
 import SeekerIpcClient  from "./Ipc/SeekerIpcClient";
 import TvDb             from "./TvDb";
-import WebServer        from "./WebServer";
+import WebServer        from "./WebServer/WebServer";
 
 export default {
 	Database,

services/request/tsconfig.json

@@ -4,7 +4,7 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es5",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     // "module": "commonjs",                        /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
@@ -46,15 +46,13 @@
     // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     "baseUrl": "./src",                             /* Base directory to resolve non-absolute module names. */
     "paths": {                                      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@app/*": ["app/*"],
       "@common/*": ["common/*"],
       "@lib/*": ["lib/*"],
       "@server/*": ["server/*"],
     },
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
-    "typeRoots": [                                  /* List of folders to include type definitions from. */
-      "src/typings"
-    ],
+    // "typeRoots": []                              /* List of folders to include type definitions from. */
+
     // "types": [],                                 /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
@@ -62,7 +60,7 @@
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
 
     /* Source Map Options */
-    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    "sourceRoot": "src",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
     // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
     // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
@@ -73,9 +71,10 @@
 
     /* Advanced Options */
     "skipLibCheck": true,                           /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
-  },
-  "include": [
-    "src"
-  ]
+    "forceConsistentCasingInFileNames": true,       /* Disallow inconsistently-cased references to the same file. */
+
+    "plugins": [
+      { "transform": "@zerollup/ts-transform-paths" }
+    ]
+  }
 }