Merge pull request #1 from nitwhiz/next

version 2

README.md

@@ -1 +1,124 @@
-# movie-match
+# movie-match
+
+Helping you find matching movies for you and your SO since 2023!
+
+## Getting Started
+
+### Configuration
+
+Example `config.yaml`, suitable for usage with the `docker-compose.yml` from the next section:
+
+```yaml
+database:
+  host: "db"
+  port: "5432"
+  user: "root"
+  password: "root"
+
+media_providers:
+  tmdb:
+    language: "de"
+    region: "de-DE"
+    api_key: "<YOUR TMDB API KEY>"
+    poster_base_url: "https://image.tmdb.org/t/p/w780"
+
+poster:
+  fs_base_path: "/opt/movie-match/posters"
+
+login:
+  jwt_key: "<something secret>"
+  users:
+    - username: "user1"
+      display_name: "User 1"
+      password: "<PASSWORD HASH, SEE 'Passwords'>"
+    - username: "user2"
+      display_name: "User 2"
+      password: "<PASSWORD HASH, SEE 'Passwords'>"
+
+```
+
+### Passwords
+
+To generate passwords for your user config, run the `hash` command:
+
+```shell
+ docker run --rm -it ghcr.io/nitwhiz/movie-match-server:latest hash 
+```
+
+You should generate passwords with the same version of the server that's going to consume the password.
+
+### Running with `docker-compose`
+
+Example `docker-compose.yml`:
+
+```yaml
+services:
+
+  db:
+    image: postgres:15.1-alpine3.17
+    environment:
+      POSTGRES_USER: "root"
+      POSTGRES_PASSWORD: "root"
+      POSTGRES_DB: "movie_match"
+    ports:
+      - "5432:5432"
+    volumes:
+      - "db_data:/var/lib/postgresql/data"
+    networks:
+      - db
+
+  server:
+    image: ghcr.io/nitwhiz/movie-match-server:latest
+    volumes:
+      - "./config.yaml:/opt/movie-match/config.yaml:ro" # mount your config
+      - "server_data_posters:/opt/movie-match/posters" # mount a directory to store media posters
+    ports:
+      - "6445:6445"
+    depends_on:
+      - db
+    networks:
+      - db
+
+  app:
+    image: ghcr.io/nitwhiz/movie-match-app:latest
+    environment:
+      MOVIEMATCH_API_SERVER_BASE_URL: "http://localhost:6445/"
+    ports:
+      - "8080:80"
+
+networks:
+  db:
+
+volumes:
+  db_data:
+  server_data_posters:
+```
+
+## Server Options
+
+The server is designed to run as
+
+- User Token Cleaner: `--with-token-cleanup`
+- Media Auto Pull Server: `--with-media-auto-pull`
+- Webserver: `--web`
+
+Which part is enabled can be decided via flags, see next section.
+
+The docker containers have all flags enabled by default
+
+### Start a server with all functionalities
+
+```shell
+movie-match serve \
+  --web \
+  --with-token-cleanup \
+  --with-media-auto-pull
+```
+
+### Start a server which does not pull media automatically
+
+```shell
+movie-match serve \
+  --web \
+  --with-token-cleanup
+```

app/.dockerignore

@@ -5,9 +5,7 @@ node_modules/
 .gitignore
 .nvmrc
 .prettierrc.json
-config.yaml.example
 Dockerfile
-README.md
 
 public/env.*.json
 !public/env.template.json

app/package.json

@@ -11,12 +11,15 @@
   "dependencies": {
     "@phosphor-icons/vue": "^1.5.0",
     "axios": "^1.3.2",
+    "eventemitter3": "^5.0.0",
+    "js-cookie": "^3.0.1",
+    "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
-    "pinia": "^2.0.30",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "prettier": "^2.8.4",
     "sass": "^1.58.0",

app/src/ApiClientProvider.vue

@@ -0,0 +1,29 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts" setup>
+// wrapper component to ensure api client is initialized with event listeners
+
+import { useApiClient } from './composables/useApiClient';
+import { useRouter } from 'vue-router';
+import { useCurrentUser } from './composables/useCurrentUser';
+import { RouteName } from './router';
+
+const router = useRouter();
+const apiClient = await useApiClient().apiClient;
+
+(await apiClient)
+  .on('unauthorized', () => {
+    if (router.currentRoute.value.name !== 'login') {
+      router.push({ name: RouteName.LOGIN });
+    }
+  })
+  .on('logout', async () => {
+    const { currentUser } = useCurrentUser();
+
+    currentUser.value = null;
+
+    await router.push({ name: RouteName.LOGIN });
+  });
+</script>

app/src/App.vue

@@ -1,6 +1,12 @@
 <template>
   <Suspense>
-    <router-view />
+    <ApiClientProvider>
+      <router-view />
+    </ApiClientProvider>
     <template #fallback>Loading ...</template>
   </Suspense>
 </template>
+
+<script lang="ts" setup>
+import ApiClientProvider from './ApiClientProvider.vue';
+</script>