Add web interface with admin functionality (immich-app#167)

.github/workflows/build_push_docker_latest.yml

@@ -8,7 +8,6 @@ on:
     branches: [main]
 
 jobs:
-
   build_and_push_server_latest:
     runs-on: ubuntu-latest
     steps:
@@ -37,28 +36,56 @@ jobs:
             altran1502/immich-server:latest
 
   build_and_push_microservice_latest:
-      runs-on: ubuntu-latest
-      steps:
-        - name: Checkout
-          uses: actions/checkout@v3
-          with:
-            ref: "main" # branch
-        - name: Set up QEMU
-          uses: docker/[email protected]
-        - name: Set up Docker Buildx
-          id: buildx
-          uses: docker/[email protected]
-        - name: Login to Docker Hub
-          uses: docker/login-action@v2
-          with:
-            username: ${{ secrets.DOCKERHUB_USERNAME }}
-            password: ${{ secrets.DOCKERHUB_TOKEN }}
-        - name: Build and Push Microservices
-          uses: docker/[email protected]
-          with:
-            context: ./microservices
-            file: ./microservices/Dockerfile
-            platforms: linux/arm/v7,linux/amd64
-            push: ${{ github.event_name != 'pull_request' }}
-            tags: |
-              altran1502/immich-microservices:latest
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main" # branch
+      - name: Set up QEMU
+        uses: docker/[email protected]
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/[email protected]
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and Push Microservices
+        uses: docker/[email protected]
+        with:
+          context: ./microservices
+          file: ./microservices/Dockerfile
+          platforms: linux/arm/v7,linux/amd64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-microservices:latest
+
+  build_and_push_web_latest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main" # branch
+      - name: Set up QEMU
+        uses: docker/[email protected]
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/[email protected]
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and Push Web
+        uses: docker/[email protected]
+        with:
+          context: ./web
+          file: ./web/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          target: prod
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-web:latest

.github/workflows/build_push_server_release.yml

@@ -12,14 +12,14 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main" 
+          ref: "main"
           fetch-depth: 0
-    
-      - name: 'Get Previous tag'
+
+      - name: "Get Previous tag"
         id: previoustag
         uses: "WyriHaximus/github-action-get-previous-tag@v1"
         with:
-            fallback: latest 
+          fallback: latest
 
       - name: Set up QEMU
         uses: docker/[email protected]
@@ -50,14 +50,14 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main" 
+          ref: "main"
           fetch-depth: 0
 
-      - name: 'Get Previous tag'
+      - name: "Get Previous tag"
         id: previoustag
         uses: "WyriHaximus/github-action-get-previous-tag@v1"
         with:
-            fallback: latest 
+          fallback: latest
 
       - name: Set up QEMU
         uses: docker/[email protected]
@@ -80,4 +80,43 @@ jobs:
           platforms: linux/arm/v7,linux/amd64
           push: ${{ github.event_name != 'pull_request' }}
           tags: |
-              altran1502/immich-microservices:${{ steps.previoustag.outputs.tag }}
+            altran1502/immich-microservices:${{ steps.previoustag.outputs.tag }}
+
+  build_and_push_web_release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main"
+          fetch-depth: 0
+
+      - name: "Get Previous tag"
+        id: previoustag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          fallback: latest
+
+      - name: Set up QEMU
+        uses: docker/[email protected]
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/[email protected]
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push immich-web release
+        uses: docker/[email protected]
+        with:
+          context: ./web
+          file: ./web/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          target: prod
+          tags: |
+            altran1502/immich-web:${{ steps.previoustag.outputs.tag }}

NOTES.md

@@ -0,0 +1,9 @@
+# TODO
+
+Server scenario with web
+
+[ ] 1 user exist without admin right -> make admin on first check
+
+[ ] 2 users exist without admin right -> ask user to choose which account will be the admin
+
+[ X ] No users exist -> prompt signup form for Admin

README.md

@@ -86,10 +86,11 @@ I haven't tested with `Docker for Windows` as well as `WSL` on Windows
 You can use docker compose for development and testing out the application, there are several services that compose Immich:
 
 1. **NestJs** - Backend of the application
-2. **PostgreSQL** - Main database of the application
-3. **Redis** - For sharing websocket instance between docker instances and background tasks message queue.
-4. **Nginx** - Load balancing and optimized file uploading.
-5. **TensorFlow** - Object Detection and Image Classification.
+2. **SvelteKit** - Web frontend of the application
+3. **PostgreSQL** - Main database of the application
+4. **Redis** - For sharing websocket instance between docker instances and background tasks message queue.
+5. **Nginx** - Load balancing and optimized file uploading.
+6. **TensorFlow** - Object Detection and Image Classification.
 
 ## Step 1: Populate .env file
 
@@ -133,7 +134,7 @@ To start, run
 docker-compose -f ./docker/docker-compose.yml up 
 ```
 
-If you have a few thousand photos/videos, I suggest running docker-compose with scaling option for the `immich_server` container to handle high I/O load when using fast scrolling.
+If you have a few thousand photos/videos, I suggest running docker-compose with scaling option for the `immich_-erver` container to handle high I/O load when using fast scrolling.
 
 ```bash
 docker-compose -f ./docker/docker-compose.yml up --scale immich-server=5 
@@ -144,17 +145,17 @@ The server will be running at `http://your-ip:2283` through `Nginx`
 
 ## Step 3: Register User
 
-Use the command below on your terminal to create user as we don't have user interface for this function yet.
+Access the web interface at `http://your-ip:2285` to register an admin account.
 
-```bash
-curl --location --request POST 'http://your-server-ip:2283/auth/signUp' \
---header 'Content-Type: application/json' \
---data-raw '{
-    "email": "[email protected]",
-    "password": "password"
-}'
-```
+<p align="left">
+  <img src="design/admin-registration-form.png" width="300" title="Admin Registration">
+<p/>
 
+Additional accounts on the server can be created by the admin account.
+
+<p align="left">
+  <img src="design/admin-interface.png" width="500" title="Admin User Management">
+<p/>
 ## Step 4: Run mobile app
 
 The app is distributed on several platforms below.

docker/.env.example

@@ -1,15 +1,51 @@
+###################################################################################
 # Database
+###################################################################################
+
 DB_USERNAME=postgres
 DB_PASSWORD=postgres
 DB_DATABASE_NAME=immich
 
+
+
+
+
+###################################################################################
 # Upload File Config
+###################################################################################
+
 UPLOAD_LOCATION=absolute_location_on_your_machine_where_you_want_to_store_the_backup
 
+
+
+
+###################################################################################
 # JWT SECRET
+###################################################################################
+
 JWT_SECRET=randomstringthatissolongandpowerfulthatnoonecanguess
 
+
+
+
+###################################################################################
 # MAPBOX
-## ENABLE_MAPBOX is either true of false -> if true, you have to provide MAPBOX_KEY
+####################################################################################
+
+# ENABLE_MAPBOX is either true of false -> if true, you have to provide MAPBOX_KEY
 ENABLE_MAPBOX=false
-MAPBOX_KEY=
+MAPBOX_KEY=
+
+
+
+
+###################################################################################
+# WEB
+###################################################################################
+
+# This is the URL of your vm/server where you host Immich, so that the web frontend
+# know where can it make the request to.
+# For example: If your server IP address is 10.1.11.50, the environment variable will
+# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283
+
+VITE_SERVER_ENDPOINT=

docker/docker-compose.dev.yml

@@ -44,6 +44,24 @@ services:
     networks:
       - immich-network
 
+  immich-web:
+    image: immich-web-dev:1.9.0
+    build:
+      context: ../web
+      dockerfile: Dockerfile
+      target: dev
+    command: npm run dev --host
+    env_file:
+      - .env
+    ports:
+      - 3002:3002
+      - 24678:24678
+    volumes:
+      - ../web:/usr/src/app
+      - /usr/src/app/node_modules
+    networks:
+      - immich-network
+    restart: always
 
   redis:
     container_name: immich_redis

docker/docker-compose.yml

@@ -17,7 +17,7 @@ services:
       - database
     networks:
       - immich-network
-    restart: unless-stopped
+    restart: always
 
   immich-microservices:
     image: altran1502/immich-microservices:latest
@@ -34,13 +34,27 @@ services:
       - database
     networks:
       - immich-network
-    restart: unless-stopped
+    restart: always
+
+  immich-web:
+    image: altran1502/immich-web:latest
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    env_file:
+      - .env
+    ports:
+      - 2285:3000
+    networks:
+      - immich-network
+    restart: always
+
 
   redis:
     container_name: immich_redis
     image: redis:6.2
     networks:
       - immich-network
+    restart: always
+
 
   database:
     container_name: immich_postgres
@@ -73,6 +87,7 @@ services:
       - immich-network
     depends_on:
       - immich-server
+    restart: always
 
 networks:
   immich-network:

server/.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 120
+  "printWidth": 120,
+  "semi": true
 }

server/src/api-v1/auth/auth.controller.ts

@@ -7,16 +7,16 @@ import { SignUpDto } from './dto/sign-up.dto';
 
 @Controller('auth')
 export class AuthController {
-  constructor(private readonly authService: AuthService) {}
+  constructor(private readonly authService: AuthService) { }
 
   @Post('/login')
   async login(@Body(ValidationPipe) loginCredential: LoginCredentialDto) {
     return await this.authService.login(loginCredential);
   }
 
-  @Post('/signUp')
-  async signUp(@Body(ValidationPipe) signUpCrendential: SignUpDto) {
-    return await this.authService.signUp(signUpCrendential);
+  @Post('/admin-sign-up')
+  async adminSignUp(@Body(ValidationPipe) signUpCrendential: SignUpDto) {
+    return await this.authService.adminSignUp(signUpCrendential);
   }
 
   @UseGuards(JwtAuthGuard)