refactor: use our base image to build UI's image (#24)

- Use our base nodejs/ngnix image to build to docker
- Add section on running with SSL
- Document SSL environment variables
- Include certificate generation instructions
- Add notes about SSL usage

.pre-commit-config.yaml

@@ -27,10 +27,10 @@ repos:
         language: system
         always_run: true
         pass_filenames: false
-        entry: npm run lint -- --write
+        entry: npm run lint -ws -- --write
       - id: build
         name: build project
         language: system
         always_run: true
         pass_filenames: false
-        entry: npm run build
+        entry: npm run build -ws

Dockerfile

@@ -1,14 +1,16 @@
-FROM node:alpine
+FROM ghcr.io/littlehorse-enterprises/alpine-nginx-nodejs/nginx-nodejs:main
 WORKDIR /app
 
-COPY ./ui/.next/standalone ./
-COPY ./ui/.next/static ./ui/.next/static
-COPY ./node_modules ./node_modules
+COPY ./ui/.next/standalone/ui ./
+COPY ./ui/.next/standalone/node_modules ./node_modules
+COPY ./ui/.next/static ./.next/static
+
 COPY ./entrypoint.sh ./
 
-ENV NODE_ENV=production \
-    PORT=3000 \
-    HOSTNAME="0.0.0.0"
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+ENV NODE_ENV=production
+
 EXPOSE 3000
 
 ENTRYPOINT [ "./entrypoint.sh" ]

README.md

@@ -7,6 +7,21 @@ This repository contains the code for:
 
 This repository will help you interact with LittleHorse's UserTask API.
 
+## Overview
+
+The LH UserTask UI provides a complete solution for managing human tasks within LittleHorse workflows. It consists of:
+
+1. A modern web interface built with Next.js for managing and interacting with user tasks
+2. A TypeScript API client that simplifies integration with the UserTasks API
+3. Integration with Keycloak or any OIDC provider for secure authentication and authorization
+
+This project is designed to work seamlessly with LittleHorse's workflow engine, allowing organizations to:
+
+- Manage human-driven tasks within automated workflows
+- Assign and track tasks for individuals or groups
+- Monitor task progress and completion
+- Maintain security through OIDC authentication
+
 ## Quickstart with Standalone Image
 
 ### Prerequisites for Quickstart
@@ -15,6 +30,7 @@ This repository will help you interact with LittleHorse's UserTask API.
 - [httpie](https://httpie.io/) (for testing commands)
 - [jq](https://jqlang.github.io/jq/) (for testing commands)
 - [lhctl](https://littlehorse.dev/docs/getting-started/installation) (for testing commands)
+- [openssl](https://www.openssl.org/) (for SSL certificates)
 
 The fastest way to get started is using our standalone image that includes all necessary components:
 
@@ -145,3 +161,61 @@ The UI will start with watch mode on <http://localhost:3001>
 - User Tasks UI: <http://localhost:3001>
 - LittleHorse Dashboard: <http://localhost:8080>
 - Keycloak Admin Console: <http://localhost:8888>
+
+## Running with SSL
+
+To run the UI with SSL enabled, you'll need to:
+
+1. Generate SSL certificates using the provided script:
+
+```bash
+./local-dev/issue-certificates.sh
+```
+
+This script will:
+
+- Create a `ssl` directory if it doesn't exist
+- Generate a self-signed certificate (`cert.pem`) and private key (`key.pem`)
+- Set up the certificates with a 10-year validity period
+- Configure them for localhost usage
+
+2. Run the container with SSL enabled:
+
+```bash
+docker run --rm -d \
+    -e SSL=enabled \
+    -v $(pwd)/ssl:/ssl \
+    -e NEXTAUTH_URL='https://localhost:3443' \
+    -e NEXTAUTH_SECRET='your-secret-here' \
+    -e KEYCLOAK_HOST='http://localhost:8888' \
+    -e KEYCLOAK_REALM='default' \
+    -e KEYCLOAK_CLIENT_ID='user-tasks-client' \
+    -e KEYCLOAK_CLIENT_SECRET=' ' \
+    -e LHUT_API_URL='http://localhost:8089' \
+    -p 3000:3000 -p 3443:3443 \
+    ghcr.io/littlehorse-enterprises/lh-user-tasks-api/lh-user-tasks-ui:main
+```
+
+When SSL is enabled, the UI will be available on:
+
+- HTTP: <http://localhost:3000>
+- HTTPS: <https://localhost:3443>
+
+### Environment Variables for SSL
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `SSL` | Set to `enabled` to enable SSL | Yes |
+| `NEXTAUTH_URL` | Full URL where the app will be accessible (use HTTPS port) | Yes |
+| `NEXTAUTH_SECRET` | Random string used to hash tokens | Yes |
+| `KEYCLOAK_HOST` | Keycloak server URL | Yes |
+| `KEYCLOAK_REALM` | Keycloak realm name | Yes |
+| `KEYCLOAK_CLIENT_ID` | Client ID from Keycloak | Yes |
+| `KEYCLOAK_CLIENT_SECRET` | Client secret from Keycloak | Yes |
+| `LHUT_API_URL` | URL of the User Tasks API | Yes |
+
+### Notes
+
+- For production environments, replace the self-signed certificates with proper SSL certificates
+- The self-signed certificate will trigger browser warnings - this is expected for local development
+- Make sure your Keycloak configuration includes the HTTPS URL in the allowed redirect URIs

api-client/README.md

@@ -47,7 +47,8 @@ console.log(response);
        scheduledTime: "2024-03-20T15:30:00Z",
        userGroup: {
          id: "550e8400-e29b-41d4-a716-446655440000",
-         name: "Finance Team"
+         name: "Finance Team",
+         valid: true
        }
      },
      {
@@ -58,14 +59,16 @@ console.log(response);
        notes: "Document needs final approval",
        scheduledTime: "2024-03-20T14:00:00Z",
        userGroup: {
-         id: "550e8400-e29b-41d4-a716-446655440002",
-         name: "Legal Team"
+         id: "legal",
+         name: null,
+         valid: false // This means the user group does not exist in the OIDC provider the api is configured with
        },
        user: {
          id: "123e4567-e89b-12d3-a456-426614174002",
          email: "[email protected]",
          firstName: "John",
-         lastName: "Doe"
+         lastName: "Doe",
+         valid: true
        }
      }
    ],

entrypoint.sh

@@ -37,4 +37,4 @@ if [ ! "${LHUT_API_URL+x}" ]; then
     exit 1
 fi
 
-node ui/server.js
+/entrypoint.sh

local-dev/issue-certificates.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+set -e
+
+if ! command -v openssl &> /dev/null; then
+    echo "openssl command could not be found, install https://www.openssl.org/"
+    exit 1
+fi
+
+SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
+cd "$SCRIPT_DIR"
+
+SSL_PATH=ssl
+rm -rf $SSL_PATH
+mkdir -p $SSL_PATH
+
+########################################################
+# SSL Certificates
+########################################################
+echo "Creating SSL Certificates"
+openssl req -x509 -sha256 -nodes \
+    -days 3650 -newkey rsa:2048 \
+    -subj '/O=LH User Tasks/CN=localhost' \
+    -keyout "$SSL_PATH/key.pem" \
+    -out "$SSL_PATH/cert.pem" \
+    -addext "subjectAltName = DNS:localhost" > /dev/null 2>&1
+
+echo "Certificates generated successfully in $SSL_PATH/"
+echo "- cert.pem: SSL certificate"
+echo "- key.pem: Private key"