Support Basic Auth in staging testing mode (#15)

.devcontainer/data-portal.yaml

@@ -9,5 +9,7 @@ ssl_key: .devcontainer/key.pem
 
 log_level: DEBUG
 
+base_url: http://127.0.0.1:8080
+
 mass_url: /api/mass
-metldata_url: /api/metldata
+metldata_url: /api/metldata

.devcontainer/dev_launcher

@@ -1,46 +1,16 @@
 #!/bin/bash
 
-# USAGE: dev_launcher.sh [staging]
-
 cd /workspace
 
-# Default backend type is the mock service worker
-backend_type="msw"
-
-# The hostname used for the staging deployment
-staging_server="data.staging.ghga.dev"
-
-# Check command line argument
+# allow passing modes as arguments
 if [ "$1" = "staging" ]; then
-  backend_type="staging"
-fi
-
-# Create a suitable proxy config file
-if [ "$backend_type" = "staging" ]; then
-  echo "Using staging backend.ç.."
-  server="$staging_server"
-  server_ip=$(dig +short $server @8.8.8.8)
-  port=443
-  ssl=true
-  cp proxy.staging.conf.json proxy.conf.json
-  if ! grep -qs "^$server_ip" /etc/hosts; then
-    echo "Adding $server to /etc/hosts"
-    echo "$server_ip $server" | sudo tee -a /etc/hosts
+  export data_portal_base_url="https://data.staging.ghga.dev"
+  if [[ "$2" = *:* ]]; then
+    export data_portal_basic_auth="$2"
   fi
-  echo "Please configure your host computer"
-  echo "to resolve $server to 127.0.0.1."
-else
-  echo "Using mock service worker..."
-  server="localhost"
-  server_ip="127.0.0.1"
-  port=8080
-  ssl=false
-  echo "{}" > proxy.conf.json
+elif [ "$1" = "msw" ]; then
+  export data_portal_base_url="http://127.0.0.1:8080"
 fi
 
-export data_portal_host=127.0.0.1
-export data_portal_port=$port
-export data_portal_ssl=$ssl
-
-# start development server
-/workspace/run.js --dev
+# start the development server
+./run.js --dev

.devcontainer/devcontainer.json

@@ -9,6 +9,8 @@
   // "features": {},
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [8080, 443],
+  // Create an empty local env file if it does not yet exist
+  "initializeCommand": "touch .devcontainer/local.env",
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "dev_install",
   // Configure tool-specific properties.

.devcontainer/docker-compose.yml

@@ -15,9 +15,8 @@ services:
     # Comment out the next line to use the root user for all processes.
     user: node
 
-    # define environment variables
-    environment:
-      DATA_PORTAL_CONFIG_YAML: /workspace/.devcontainer/data-portal.yaml
+    env_file:
+      - local.env
 
     # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
-    # (Adding the "ports" property to this file will not forward from a Codespace.)
+    # (Adding the "ports" property to this file will not forward from a Codespace.)

.gitignore

@@ -12,12 +12,12 @@
 npm-debug.log
 yarn-error.log
 
+# Environment files
+**/*.env
+
 # Test certificates
 *.pem
 
-# Dynamic proxy config file
-proxy.conf.json
-
 # Documentation
 documentation
 

.vscode/settings.json

@@ -17,5 +17,6 @@
   },
   "eslint.options": {
     "overrideConfigFile": "/workspace/eslint.config.js"
-  }
+  },
+  "remote.localPortHost": "allInterfaces"
 }

README.md

@@ -20,10 +20,16 @@ If you want to test the application against the backend provided by the staging
 dev_launcher staging
 ```
 
-In this case, a proxy configuration will be used that proxies all API endpoints to the staging environment, while the application itself is still served by the development server.
+In this case, a proxy configuration will be used that proxies all API endpoints to the staging environment, while the application itself is still served by the development server. You can change the name of the staging backend via the environment variable `data_portal_base_url`.
 
 If you change the hosts file on your host computer so that localhost points to `data.staging.ghga.dev`, then this setup also allows testing authentication using the real OIDC provider. You need to point your browser to `https://data.staging.ghga.dev` in this case. The development server will serve the application via SSL in this setup, using the certificate created in `.devcontainer/cert.pem`. You can add the corresponding CA certificate `.devcontainer/ca-cert.pem` to the trusted certificates of your development computer or web browser to avoid the warnings when loading the page.
 
+If the staging backend requires an additional Basic authentication, you can set it in the environment variable `data_portal_basic_auth` or pass it on the command line like this:
+
+```bash
+dev_launcher staging username:password
+```
+
 ## Code scaffolding
 
 Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

angular.json

@@ -29,9 +29,7 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -70,7 +68,7 @@
           },
           "defaultConfiguration": "development",
           "options": {
-            "proxyConfig": "proxy.conf.json",
+            "proxyConfig": "proxy.conf.js",
             "host": "127.0.0.1",
             "port": 8080
           }
@@ -90,30 +88,22 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "eslintConfig": "./eslint.config.js",
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html",
-              "**/*.md"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html", "**/*.md"]
           }
         }
       }
     }
   },
   "cli": {
     "analytics": false,
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
-}
+}

data-portal.default.yaml

@@ -3,11 +3,15 @@
 host: 0.0.0.0
 port: 8080
 
+basic_auth: null
+
 ssl: false
 ssl_cert: cert.pem
 ssl_key: key.pem
 
 log_level: INFO
 
+base_url: http://127.0.0.1:8080
+
 mass_url: /api/mass
 metldata_url: /api/metldata

package.json

@@ -20,51 +20,51 @@
   "type": "module",
   "private": true,
   "dependencies": {
-    "@angular-eslint/eslint-plugin": "^18.4.0",
-    "@angular-eslint/template-parser": "^18.4.0",
-    "@angular/animations": "19.0.0-rc.2",
-    "@angular/cdk": "19.0.0-rc.2",
-    "@angular/common": "19.0.0-rc.2",
-    "@angular/compiler": "19.0.0-rc.2",
-    "@angular/core": "19.0.0-rc.2",
-    "@angular/forms": "19.0.0-rc.2",
-    "@angular/material": "19.0.0-rc.2",
-    "@angular/platform-browser": "19.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "19.0.0-rc.2",
-    "@angular/router": "19.0.0-rc.2",
+    "@angular-eslint/eslint-plugin": "^18.4.1",
+    "@angular-eslint/template-parser": "^18.4.1",
+    "@angular/animations": "19.0.0-rc.3",
+    "@angular/cdk": "19.0.0-rc.3",
+    "@angular/common": "19.0.0-rc.3",
+    "@angular/compiler": "19.0.0-rc.3",
+    "@angular/core": "19.0.0-rc.3",
+    "@angular/forms": "19.0.0-rc.3",
+    "@angular/material": "19.0.0-rc.3",
+    "@angular/platform-browser": "19.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "19.0.0-rc.3",
+    "@angular/router": "19.0.0-rc.3",
     "js-yaml": "^4.1.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.0.0-rc.2",
-    "@angular/cli": "19.0.0-rc.2",
-    "@angular/compiler-cli": "19.0.0-rc.2",
+    "@angular-devkit/build-angular": "19.0.0-rc.3",
+    "@angular/cli": "19.0.0-rc.3",
+    "@angular/compiler-cli": "19.0.0-rc.3",
     "@compodoc/compodoc": "^1.1.26",
     "@eslint/markdown": "^6.2.1",
     "@types/jasmine": "~5.1.4",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
-    "angular-eslint": "18.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "angular-eslint": "^18.4.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-boundaries": "^5.0.0",
-    "eslint-plugin-jsdoc": "^50.4.3",
+    "eslint-plugin-boundaries": "^5.0.1",
+    "eslint-plugin-jsdoc": "^50.5.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "jasmine-core": "~5.4.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.4.48",
+    "postcss": "^8.4.49",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.14.0"
+    "typescript-eslint": "^8.15.0"
   }
 }