Merge pull request #12 from privacybydesign/feature/irma-demos-container

add index, dockerfile and github flow push docker image to ghcr

.github/workflows/delivery.yml

@@ -0,0 +1,43 @@
+name: Delivery
+
+on: 
+  push:
+    branches: [ master ]
+  release:
+    # Note: a current limitation is that when a release is edited after publication, then the Docker tags are not automatically updated.
+    types: [ published ]
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  publish-docker-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=semver,pattern={{major}}.{{minor}}.{{patch}}
+            type=raw,value=edge
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}      
+
+      - name: Build container and push to GitHub Container Registry
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/status-checks.yml

@@ -0,0 +1,16 @@
+name: Status checks
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+  # Make it possible to trigger the checks manually.
+  workflow_dispatch:
+
+jobs:
+  docker-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run Dockerfile build stage
+        run: docker build -t privacybydesign/irma-demos:build .

Dockerfile

@@ -0,0 +1,30 @@
+FROM node:18 AS builder
+
+RUN apt-get update && apt-get install -y \
+    php \
+    php-cli \
+    php-zip \
+    unzip
+
+RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
+
+WORKDIR /app
+
+COPY . .
+
+RUN composer install
+RUN yarn install
+
+RUN chmod +x build_artifacts.sh
+RUN ./build_artifacts.sh
+
+FROM php:8.0-apache
+
+COPY --from=builder /app/ /var/www/html/
+
+RUN chown -R www-data:www-data /var/www/html \
+    && chmod -R 755 /var/www/html
+
+RUN echo "Listen 8080" >> /etc/apache2/ports.conf
+
+EXPOSE 8080

README.md

@@ -2,13 +2,25 @@
 
 This project is the combination of all demos hosted on https://privacybydesign.foundation/demo/.
 
+## Preliminaries
+Make sure you have an [IRMA server] (https://github.com/privacybydesign/irmago running.
+
+
 ### Install
 * Run `composer install`
 * Run `yarn install`
 * Set IRMA server URL and API token of the IRMA server of your choice in `config.php`.
 * Follow the instructions in `data`.
 * Run ./build_artifacts.sh
 
+### Install all the demos with Docker (Locally)
+Alternatively, you can run the demos with Docker.
+* Build the image with `docker build -t <irma-demos-image> .`. Docker will run the necessary scripts to build the necessary
+node packages and sets up a php server on port 8080.
+* You need a Yivi server to be running on 8088.
+* You can run the docker image you previously built with `docker run -d --network="host" <irma-demos-image>`. The --network flag will make it possible to communicate with the locally running Yivi server.
+
+
 ### Adding a new demo
 Example when adding a demo called new-demo:
 * Make a new demo directory in the project root: `mkdir new-demo`

config.php

@@ -1,7 +1,7 @@
 <?php
-
-define('IRMA_SERVER_URL', 'http://localhost:8088');
-define('API_TOKEN', '');
+ 
+define('IRMA_SERVER_URL', getenv('IRMA_SERVER_URL') ?: 'http://localhost:8088');
+define('API_TOKEN', getenv('API_TOKEN') ?: '');
 define('DEMO', false);
 define('JWT_ENABLED', true);
 

docker-compose.yml

@@ -0,0 +1,23 @@
+services:
+  php:
+    build: .
+    ports:
+      - "8080:8080"
+    networks:
+      - app-network
+    depends_on:
+      - irma
+    environment:
+      - IRMA_SERVER_URL=http://irma:8088  # This maps the IRMA server URL
+
+  irma:
+    build: https://github.com/privacybydesign/irmago.git
+    ports:
+      - "8088:8088"
+    command: server --no-auth --no-tls
+    networks:
+      - app-network
+
+networks:
+  app-network:
+    driver: bridge

index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- Ensure proper rendering and touch zooming -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Bootstrap CSS -->
+    <link href="assets/bootstrap.min.css" rel="stylesheet">
+    <title>Yivi Demos</title>
+    <script type="text/javascript"></script>
+    <script type="text/javascript"></script>
+    <script type="text/javascript"></script>
+</head>
+<body>
+<div class="container mt-5">
+    <div itemprop="articleSection">
+        <p>
+            This page describes different possible applications of Yivi, both for disclosing relevant information about yourself and for digital signing. With each of the buttons below, additional information is provided. Detailed 
+            <a href="https://www.yivi.app/en/for_developers/">explanations</a> are available.
+        </p>        
+        <dl class="row">
+            <dt class="col-sm-4">Log in with e-mail address</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/mail/index.en.html">E-mail log in</a>
+            </dd>
+
+            <dt class="col-sm-4">Yivi signatures for permissions and statements</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/signature/index.en.html">Yivi signatures</a>
+            </dd>
+
+            <dt class="col-sm-4">Submitting address information by automatic form-filling</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/address/index.en.html">Filling in address</a>
+            </dd>
+
+            <dt class="col-sm-4">Verification whether someone is a student</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/student/index.en.html">Student check</a>
+            </dd>
+
+            <dt class="col-sm-4">Age verification</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/18plus/index.en.html">18+ check</a>
+                <a class="btn btn-primary" href="https://angrygames.demo.caesarproducts.nl/">Angry Games demo</a>
+            </dd>
+
+            <dt class="col-sm-4">Registration and verification for watching movies online</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="https://privacybydesign.foundation/demo-en/irmaTube/">YiviTube</a>
+            </dd>
+
+            <dt class="col-sm-4">Chained Yivi sessions</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/irmaTubePremium/index.en.html">YiviTube Premium</a>
+            </dd>
+
+            <dt class="col-sm-4">Verification whether someone is being alive</dt>
+            <dd class="col-sm-8 mb-3">
+                <a class="btn btn-primary" href="/beingalive/index.en.html">Attestatio de vita demo</a>
+            </dd>
+        </dl>
+    </div>
+</div>
+
+</body>
+</html>