Implement initial version of signing application

.eslintignore

+/vendor/**
+/dist/**
+/*.js
\ No newline at end of file

.eslintrc.json

+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "mocha": true
+    },
+    "extends": ["eslint:recommended", "plugin:jsdoc/recommended"],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-unused-vars": ["error", { "args": "none" }],
+        "semi": [2, "always"],
+        "jsdoc/require-jsdoc": 0,
+        "jsdoc/require-param-description": 0,
+        "jsdoc/require-returns": 0,
+        "jsdoc/require-param-type": 0
+    }
+}
\ No newline at end of file

.gitignore

+dist
+node_modules
+.idea
+npm-debug.log
+.vscode
+.cert
\ No newline at end of file

.gitlab/issue_templates/issue.md

+#### Expected behavior
+
+#### Actual behavior
+
+#### Steps to reproduce
+
+#### Output from the Javascript console in your browser
+<!-- You have to enable the developer tools with Ctrl + Shift + I in your browser. -->
\ No newline at end of file

.gitmodules

+[submodule "vendor/auth"]
+	path = vendor/auth
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Auth.git
+[submodule "vendor/common"]
+	path = vendor/common
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
+[submodule "vendor/notification"]
+	path = vendor/notification
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Notification.git
+[submodule "vendor/language-select"]
+	path = vendor/language-select
+	url = git@gitlab.tugraz.at:VPU/WebComponents/LanguageSelect.git
+[submodule "vendor/person-profile"]
+	path = vendor/person-profile
+	url = git@gitlab.tugraz.at:VPU/WebComponents/PersonProfile.git

README.md

+# VPU Offical Digital Signing Application
+
+[GitLab Repository](https://gitlab.tugraz.at/VPU/Apps/Signature)
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/Apps/Signature.git
+cd Signature
+git submodule update --init
+
+# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8001 
+npm run watch-local
+
+# run tests
+npm test
+```
+
+Jump to <http://localhost:8001> and you should get a Single Sign On login page.
+
+## Browser versions
+
+These browser versions should work with the application.
+
+- Firefox 67+ (2019-05)
+- Chrome 67+ (2018-05)
+- Edge 79+ (2020-01)
+- Safari 11.1+ (2018-04)
+- Opera 64+ (2019-10)
+- iOS Safari 12+/iOS 12+ (2018-09)
+
+We use a row of newer features:
+
+- https://caniuse.com/#feat=custom-elementsv1
+- https://caniuse.com/#feat=es6-module-dynamic-import
+- https://caniuse.com/#feat=shadowdomv1
+- https://caniuse.com/#feat=mdn-javascript_statements_import_meta
+- https://caniuse.com/#feat=es6-module
+- https://caniuse.com/#feat=async-functions

assets/.htaccess.ejs

+DirectoryIndex <%= geturl('vpu-signature.html') %>
+<FilesMatch "^(de|en|)$">
+    FallbackResource <%= geturl('vpu-signature.html') %>
+</FilesMatch>
+
+Header set Cache-Control "must-revalidate, max-age=60"
+Header set Content-Security-Policy "default-src 'self' 'unsafe-eval' 'unsafe-inline' analytics.tugraz.at <%= keyCloakServer %> <%= entryPointURL %>; img-src *"
+
+# Apache adds a "-gzip" suffix to the etag when it uses gzip but doesn't
+# take that into account when receiving requests.
+# See https://bz.apache.org/bugzilla/show_bug.cgi?id=45023
+RequestHeader edit "If-None-Match" '^"((.*)-(gzip|br))"$' '"$1", "$2"'
\ No newline at end of file

assets/Makefile

+SOURCE=logo.svg
+
+all: icon-192.png icon-512.png
+
+icon-192.png: $(SOURCE)
+	inkscape $(SOURCE) --export-png $@ -w 192 -h 192
+
+icon-512.png: $(SOURCE)
+	inkscape $(SOURCE) --export-png $@ -w 512 -h 512

assets/browser-check.js

+/* eslint-disable */
+
+(function () {
+
+// https://caniuse.com/#feat=es6
+function supportsES6() {
+    if (typeof Symbol == "undefined")
+        return false;
+
+    try {
+        eval("class Foo {}");
+        eval("var bar = (x) => x+1");
+    } catch (e) {
+        console.log(e);
+        return false;
+    }
+
+    return true;
+}
+
+// https://caniuse.com/#feat=es6-module-dynamic-import
+function supportsDynamicImport() {
+    try {
+        new Function('import("")');
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
+
+// https://caniuse.com/#feat=shadowdomv1
+function supportsShadowDOM() {
+    return (typeof Element != "undefined" && 'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype);
+}
+
+// https://caniuse.com/#feat=custom-elementsv1
+function supportsCustomElements() {
+    return !!window.customElements;
+}
+
+// https://caniuse.com/#feat=async-functions
+function supportsAsyncAwait() {
+    try {
+        eval('async () => {}');
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
+
+// https://caniuse.com/#feat=mdn-javascript_statements_import_meta
+function supportsImportMeta() {
+    // TODO: sadly no idea how to test this..
+    return true;
+}
+
+// Eval can be disabled through https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+function supportsEval() {
+    try {
+        eval('');
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
+
+function isBrowserSupported() {
+    if (!supportsEval()) {
+        console.log("Eval support disabled, skipping browser feature detection.");
+        return true;
+    }
+
+    if (!supportsES6()) {
+        console.log("ES6 not supported");
+        return false;
+    }
+
+    if (!supportsDynamicImport()) {
+        console.log("Dynamic imports not supported");
+        return false;
+    }
+
+    if (!supportsShadowDOM()) {
+        console.log("Shadow DOM not supported");
+        return false;
+    }
+
+    if (!supportsCustomElements()) {
+        console.log("Custom Elements not supported");
+        return false;
+    }
+
+    if (!supportsAsyncAwait()) {
+        console.log("Async Await not supported");
+        return false;
+    }
+    
+    if (!supportsImportMeta()) {
+        console.log("import.meta not supported");
+        return false;
+    }
+
+    return true;
+}
+
+var MultiString = function(f) {
+    return f.toString().split('\n').slice(1, -1).join('\n');
+};
+
+var ms = MultiString(function() {/**
+<style>
+    #unsupported .overlay {
+        font-family: sans-serif;
+        font-size: 0.9em;
+        line-height: 1.5em;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #fafafa;
+        color: #333;
+        z-index: 1001;
+    }
+    #unsupported .content{
+        position: absolute;
+        top: 50%;
+        left: 0;
+        text-align: center;
+        width: 80%;
+        left: 10%;
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+    #unsupported .separator {
+        letter-spacing: 0.3em;
+        margin: 2em 0;
+    }
+    #unsupported .footer {
+        position: fixed;
+        top: 0.5em;
+        line-height: 2em;
+        width: 100%;
+        text-align: center;
+    }
+</style>
+<div id="unsupported">
+    <div class="overlay">
+        <div class="content">
+            <h2>Ihr Browser wird leider nicht mehr unterstützt</h2>
+            <p>
+                Diese Applikation benötigt Funktionen, die von Ihrem aktuellen Browser noch nicht bereitgestellt werden.
+                Bitte probieren Sie es mit einem anderen Browser oder aktualisieren Sie Ihren aktuellen.
+            </p>
+            <h3 class="separator">🙁🙁🙁🙁🙁🙁🙁🙁🙁🙁🙁🙁</h3>
+            <h2>Your browser is sadly no longer supported</h2>
+            <p>
+                This application requires features that are not yet provided by your current browser.
+                Please try to use a different browser or update your current one.
+            </p>
+        </div>
+        <div class="footer">
+            IT Support: <a href="mailto:it-support@tugraz.at">it-support@tugraz.at</a>
+            <br>
+            <a href="https://datenschutz.tugraz.at/erklaerung/" target="_blank" rel="noopener">Datenschutzerklärung / Privacy Policy</a>
+        </div>
+    </div> 
+</div>
+**/});
+
+function main() {
+    if (!isBrowserSupported()) {
+        document.body.innerHTML = ms;
+    }
+}
+
+main();
+
+})();

assets/favicon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 100 100.00096"
+   version="1.1"
+   width="100"
+   height="100"
+   xml:space="preserve"
+   id="int-header-logo-img"><metadata
+     id="metadata35"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs33" /><g
+     id="g28"
+     transform="matrix(1.25,0,0,-1.25,-6.7752613e-4,100.00096)"><g
+       id="g26"
+       transform="scale(0.1)"><g
+         transform="translate(68.08042,192.54384)"
+         id="g3745"><path
+           style="fill:#e4154b"
+           d="M 0,103.73 H 207.45 V 311.19 L 0,311.2 Z"
+           id="path2" /><path
+           style="fill:#e4154b"
+           d="M 228.19,103.73 H 435.65 V 311.19 H 228.19 Z"
+           id="path4" /><path
+           style="fill:#e4154b"
+           d="M 456.41,103.73 H 663.85 V 311.19 H 456.41 Z"
+           id="path6" /><path
+           style="fill:#e4154b"
+           d="M 103.72,0 H 311.19 V 207.46 H 103.72 Z"
+           id="path8" /><path
+           style="fill:#e4154b"
+           d="M 352.68,207.46 H 560.12 V 414.92 H 352.68 Z"
+           id="path10" /></g></g></g></svg>
\ No newline at end of file

assets/htaccess-shared

+# This is used for our hashed shared resources.
+# They should be immutable, but rollup doesn't do content based hashing so there might be corner cases
+Header set Cache-Control "public, max-age=86400"
\ No newline at end of file

assets/logo.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="int-header-logo-img"
+   width="105.82501pt"
+   height="105.82501pt"
+   version="1.1"
+   viewBox="0 0 141.10003 141.10139"
+   sodipodi:docname="tu-graz-logo-white.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata35">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs33" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2302"
+     inkscape:window-height="1379"
+     id="namedview31"
+     showgrid="false"
+     units="pt"
+     inkscape:zoom="1.4182226"
+     inkscape:cx="162.3796"
+     inkscape:cy="-160.98113"
+     inkscape:window-x="0"
+     inkscape:window-y="54"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="int-header-logo-img" />
+  <g
+     transform="matrix(1.25,0,0,-1.25,0,96.4832)"
+     id="g28">
+    <g
+       transform="scale(0.1)"
+       id="g26">
+      <path
+         d="M 0,103.73 H 207.45 V 311.19 L 0,311.2 Z"
+         style="fill:#e4154b"
+         id="path2"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 228.19,103.73 H 435.65 V 311.19 H 228.19 Z"
+         style="fill:#e4154b"
+         id="path4"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 456.41,103.73 H 663.85 V 311.19 H 456.41 Z"
+         style="fill:#e4154b"
+         id="path6"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 103.72,0 H 311.19 V 207.46 H 103.72 Z"
+         style="fill:#e4154b"
+         id="path8"
+         inkscape:connector-curvature="0" />
+      <path
+         d="M 352.68,207.46 H 560.12 V 414.92 H 352.68 Z"
+         style="fill:#e4154b"
+         id="path10"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 751.04,277.91 h -66.426 v 33.195 h 171.19 V 277.91 H 789.397 V 104.18 h -38.359 v 173.73"
+         style="fill:#fffff4"
+         id="path12"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 1048.3,180.22 c 0,-12.461 -2.25,-23.711 -6.72,-33.75 -4.5,-10.039 -10.61,-18.555 -18.36,-25.567 -7.76,-7.031 -16.9,-12.421 -27.503,-16.21 -10.605,-3.809 -22.109,-5.7036 -34.551,-5.7036 -12.422,0 -23.945,1.8946 -34.551,5.7036 -10.605,3.789 -19.824,9.179 -27.656,16.21 -7.851,7.012 -13.984,15.528 -18.34,25.567 -4.394,10.039 -6.582,21.289 -6.582,33.75 v 130.89 h 38.379 V 181.52 c 0,-5.039 0.801,-10.351 2.442,-15.898 1.64,-5.547 4.336,-10.664 8.125,-15.332 3.789,-4.668 8.789,-8.516 15.039,-11.523 6.211,-3.008 13.926,-4.512 23.144,-4.512 9.199,0 16.914,1.504 23.145,4.512 6.23,3.007 11.25,6.855 15.039,11.523 3.77,4.668 6.48,9.785 8.12,15.332 1.63,5.547 2.45,10.859 2.45,15.898 v 129.59 h 38.38 V 180.22"
+         style="fill:#ffffff"
+         id="path14"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 832.56,75.664 c -7.597,3.2812 -17.46,4.8632 -25.332,4.8632 -22.929,0 -35.605,-14.434 -35.605,-33.184 0,-18.613 12.383,-32.637 33.34,-32.637 5.351,0 9.59,0.5274 12.969,1.3086 v 23.867 h -20.84 v 14.414 h 39.687 V 4.9988 c -10.41,-2.6172 -21.25,-4.707 -31.816,-4.707 -31.797,0 -53.906,14.805 -53.906,45.742 0,31.348 20.566,48.906 53.906,48.906 11.406,0 20.41,-1.4453 28.867,-3.8086 l -1.27,-15.469"
+         style="fill:#fffff8"
+         id="path16"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 856.2,69.375 h 16.758 V 54.043 h 0.293 c 0.84,6.289 8.574,16.914 19.824,16.914 1.836,0 3.828,0 5.782,-0.5273 v -17.715 c -1.68,0.918 -5.059,1.4454 -8.457,1.4454 -15.333,0 -15.333,-17.832 -15.333,-27.52 V 1.8551 H 856.2 v 67.52"
+         style="fill:#fffff8"
+         id="path18"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 913.75,65.84 c 7.324,3.1446 17.187,5.1172 25.215,5.1172 22.09,0 31.23,-8.5351 31.23,-28.457 v -8.6523 c 0,-6.8165 0.156,-11.934 0.293,-16.914 0.137,-5.1172 0.41,-9.8242 0.84,-15.078 h -16.602 c -0.703,3.5352 -0.703,8.0078 -0.839,10.098 h -0.293 c -4.36,-7.4618 -13.81,-11.661 -22.38,-11.661 -12.793,0 -25.332,7.207 -25.332,20.059 0,10.078 5.195,15.976 12.383,19.258 7.187,3.2812 16.464,3.9453 24.355,3.9453 h 10.41 c 0,10.879 -5.195,14.551 -16.328,14.551 -8.008,0 -16.035,-2.8907 -22.363,-7.3438 l -0.586,15.078 z m 22.11,-52.715 c 5.782,0 10.274,2.3633 13.223,6.0352 3.105,3.8086 3.945,8.6523 3.945,13.906 h -8.164 c -8.437,0 -20.957,-1.3086 -20.957,-11.68 0,-5.7617 5.195,-8.2617 11.953,-8.2617"
+         style="fill:#fffff8"
+         id="path20"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 985.69,69.375 h 57.422 V 54.961 l -36.04,-39.473 h 37.31 V 1.855 h -60.235 v 14.297 l 36.715,39.59 H 985.69 v 13.633"
+         style="fill:#fffff8"
+         id="path22"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 1059.6,0 h 69.102 V 69.121 H 1059.6 Z"
+         style="fill:#e4154b"
+         id="path24"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

assets/manifest.json

+{
+  "short_name": "Signature",
+  "name": "TUGraz Signature",
+  "start_url": "./vpu-signature.html",
+  "icons": [
+    {
+      "src": "local/vpu-signature/icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "local/vpu-signature/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "background_color": "#245B78",
+  "display": "standalone",
+  "theme_color": "#E4154B"
+}
+

assets/silent-check-sso.html

+<html>
+<body>
+    <script>
+        parent.postMessage(location.href, location.origin)
+    </script>
+</body>
+</html>
\ No newline at end of file

assets/vpu-signature-pdf-upload.metadata.json

+{
+  "element": "vpu-signature-pdf-upload",
+  "module_src": "vpu-signature-pdf-upload.js",
+  "routing_name": "pdf-upload",
+  "name": {
+    "de": "PDF hochladen",
+    "en": "Upload PDF"
+  },
+  "short_name": {
+    "de": "PDF hochladen",
+    "en": "Upload PDF"
+  },
+  "description": {
+    "de": "Erlaubt das Hochladen von PDF Dateien um sie mit einer Amtssignatur zu versehen",
+    "en": "Allows upload of PDF files to officially sign them"
+  }
+}
+

assets/vpu-signature-profile.metadata.json

+{
+  "element": "vpu-signature-profile",
+  "module_src": "vpu-signature-profile.js",
+  "routing_name": "person-profile",
+  "name": {
+    "de": "Benutzerprofil",
+    "en": "User profile"
+  },
+  "short_name": {
+    "de": "Profil",
+    "en": "Profile"
+  },
+  "description": {
+    "de": "Zeigt informationen über den Benutzer an",
+    "en": "Shows information about the user"
+  }
+}
\ No newline at end of file

assets/vpu-signature.html.ejs

+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Favicons -->
+    <link rel="shortcut icon" type="image/x-icon" href="<%= geturl('local/vpu-signature/favicon.ico') %>">
+    <link rel="icon" type="image/svg+xml" href="<%= geturl('local/vpu-signature/favicon.svg') %>" sizes="any">
+
+    <!-- XXX: Disable adoptedStyleSheets so that lit-element doesn't use it and we can edit CSS in the Chrome dev tools -->
+<% if (environment === "local") { -%>
+    <script>
+        delete Document.prototype.adoptedStyleSheets;
+    </script>
+<% } -%>
+
+    <!-- PWA manfiest file -->
+    <link rel="manifest" href="<%= geturl('vpu-signature.manifest.json') %>">
+
+    <!-- Loading spinner -->
+    <script type="module" src="<%= geturl('local/vpu-signature/spinner.js') %>"></script>
+
+    <!-- App bundles-->
+    <script type="module" id="vpu-app-src" src="<%= geturl('vpu-signature.js') %>"></script>
+
+    <!-- Prevent Chrome/Edge from suggesting to translate the page -->
+    <meta name="google" content="notranslate">
+
+    <!-- Preload fonts -->
+    <link rel="preload" href="<%= geturl('local/vpu-signature/fonts/SourceSansPro-Light.otf.woff2') %>" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<%= geturl('local/vpu-signature/fonts/SourceSansPro-Regular.otf.woff2') %>" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<%= geturl('local/vpu-signature/fonts/SourceSansPro-Semibold.otf.woff2') %>" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<%= geturl('local/vpu-signature/fonts/SourceSansPro-Bold.otf.woff2') %>" as="font" type="font/woff2" crossorigin>
+
+    <!-- Matomo -->
+    <script type="text/javascript">
+        var _paq = window._paq || [];
+        _paq.push(['setCustomVariable', 1, "GitCommit", "<%= buildinfo.info %>", "visit"]);
+        _paq.push(['enableHeartBeatTimer']);
+        _paq.push(['disableCookies']);
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+
+        (function() {
+            var u="https://analytics.tugraz.at/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '<%= matomoSiteId %>']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+
+        // track changed locations
+        window.addEventListener('locationchanged', function(e) {
+            _paq.push(['setReferrerUrl', e.detail.referrerUrl]);
+            _paq.push(['setCustomUrl', location.href]);
+            // _paq.push(['setDocumentTitle', '']);
+            _paq.push(['trackPageView']);
+
+            // make Matomo aware of newly added content
+            var content = document.getElementById('content');
+            _paq.push(['MediaAnalytics::scanForMedia', content]);
+            _paq.push(['FormAnalytics::scanForForms', content]);
+            _paq.push(['trackContentImpressionsWithinNode', content]);
+            _paq.push(['enableLinkTracking']);
+        });
+
+        // track errors
+        window.addEventListener('error', function(e) {
+            _paq.push(['trackEvent', 'Error', e.error.message + '\n' + e.error.stack]);
+        });
+    </script>
+    <!-- End Matomo Code -->
+
+    <!-- Font related CSS -->
+    <style>
+        body {
+            font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
+            font-weight: 300;
+            margin: 0;
+        }
+
+        @font-face {
+            font-family: 'Source Sans Pro';
+            font-weight: 300;
+            src: url('<%= geturl('local/vpu-signature/fonts/SourceSansPro-Light.otf.woff2') %>') format('woff2');
+            font-display: block;
+        }
+
+        @font-face {
+            font-family: 'Source Sans Pro';
+            font-weight: 400;
+            src: url('<%= geturl('local/vpu-signature/fonts/SourceSansPro-Regular.otf.woff2') %>') format('woff2');
+            font-display: block;
+        }
+
+        @font-face {
+            font-family: 'Source Sans Pro';
+            font-weight: 600;
+            src: url('<%= geturl('local/vpu-signature/fonts/SourceSansPro-Semibold.otf.woff2') %>') format('woff2');
+            font-display: block;
+        }
+
+        @font-face {
+            font-family: 'Source Sans Pro';
+            font-weight: 700;
+            src: url('<%= geturl('local/vpu-signature/fonts/SourceSansPro-Bold.otf.woff2') %>') format('woff2');
+            font-display: block;
+        }
+
+        /* TU-Graz style override */
+        html {
+            --vpu-override-primary-bg-color: #245b78;
+            --vpu-override-info-bg-color: #245b78;
+            --vpu-override-danger-bg-color: #e4154b;
+            --vpu-override-warning-bg-color: #ffe183;
+            --vpu-override-warning-text-color: black;
+            --vpu-override-success-bg-color: #259207;
+        }
+    </style>
+
+    <!-- Preloading/Preconnecting -->
+    <link rel="preconnect" href="<%= entryPointURL %>">
+    <link rel="preconnect" href="<%= keyCloakBaseURL %>">
+</head>
+
+<body>
+<vpu-app lang="de" src="<%= geturl('vpu-signature.topic.metadata.json') %>" entry-point-url="<%= entryPointURL %>" base-path="<%= geturl('') %>"><vpu-spinner></vpu-spinner></vpu-app>
+
+<!-- Error handling for too old browsers -->
+<script src="<%= geturl('local/vpu-signature/browser-check.js') %>" defer></script>
+<noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript>
+</body>
+</html>
\ No newline at end of file