From 30a2cc2ba38a2a99d69c4095be547efefc5a7aa5 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Wed, 26 May 2021 07:53:02 +0200
Subject: [PATCH] Add documentation and example for
 dbp-official-signature-pdf-upload

---
 README.md                                     | 34 +++++++++++
 .../index.html                                | 59 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 examples/dbp-official-signature-pdf-upload/index.html

diff --git a/README.md b/README.md
index b24920b..488af06 100644
--- a/README.md
+++ b/README.md
@@ -74,3 +74,37 @@ Note that you will need a Keycloak server along with a client id for the domain
     - example `nextcloud-name="My Nextcloud"`
 - `allow-annotating` (optional): Needs to be set to allow annotating the PDFs
     - example `allow-annotating`
+
+### dbp-official-signature-pdf-upload
+
+You can also use a single activity directly from the [Unpkg CDN](https://unpkg.com/browse/@dbp-topics/signature/)
+for example the `dbp-official-signature-pdf-upload` activity to qualifiedly sign PDF documents like this:
+[dbp-official-signature-pdf-upload/index.html](https://gitlab.tugraz.at/dbp/esign/signature/-/tree/master/examples/dbp-official-signature-pdf-upload/index.html)
+
+Note that you will need a Keycloak server along with a client id for the domain you are running this html on.
+
+## Attributes
+
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+    - example `lang="de"`
+- `entry-point-url` (optional, default is the TU Graz entry point url): entry point url to access the api
+    - example `entry-point-url="https://mw-dev.tugraz.at"`
+- `auth` object: you need to set that object property for the auth token
+    - example auth property: `{token: "THE_BEARER_TOKEN"}`
+    - note: most often this should be an attribute that is not set directly, but subscribed at a provider
+- `show-nextcloud-file-picker` (optional): Needs to be set for the Nextcloud file picker to be shown
+    - example `show-nextcloud-file-picker`
+- `nextcloud-web-app-password-url` (optional): Nextcloud Auth Url to use with the Nextcloud file picker
+    - example `nextcloud-web-app-password-url="http://localhost:8081/index.php/apps/webapppassword"`
+    - `nextcloud-web-dav-url` also needs to be set for the Nextcloud file picker to be active
+- `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
+    - example `nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"`
+    - `nextcloud-web-app-password-url` also needs to be set for the Nextcloud file picker to be active
+- `nextcloud-file-url` (optional): Nextcloud File Url to use with the Nextcloud file picker
+    - example `nextcloud-file-url="http://localhost:8081/apps/files/?dir="`
+- `nextcloud-name` (optional): Name of the Nextcloud service
+    - example `nextcloud-name="My Nextcloud"`
+- `allow-annotating` (optional): Needs to be set to allow annotating the PDFs
+    - example `allow-annotating`
+- `show-clipboard` (optional): Needs to be set to allow using the clipboard in the file picker dialog
+    - example `show-clipboard`
diff --git a/examples/dbp-official-signature-pdf-upload/index.html b/examples/dbp-official-signature-pdf-upload/index.html
new file mode 100644
index 0000000..90fe8a2
--- /dev/null
+++ b/examples/dbp-official-signature-pdf-upload/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Package bundles-->
+    <script type="module" src="https://unpkg.com/@dbp-toolkit/provider@0.2.2/dist/dbp-provider.js"></script>
+    <script type="module" src="https://unpkg.com/@dbp-toolkit/auth@0.2.2/dist/dbp-auth.js"></script>
+    <script type="module" src="https://unpkg.com/@dbp-topics/signature@1.0.3/dist/dbp-official-signature-pdf-upload.js"></script>
+
+    <!-- Prevent Chrome/Edge from suggesting to translate the page -->
+    <meta name="google" content="notranslate">
+
+    <!-- Font related CSS -->
+    <style>
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.3/dist/local/@dbp-topics/signature/fonts/source-sans-pro/300.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.3/dist/local/@dbp-topics/signature/fonts/source-sans-pro/400.css";
+        @import "https://unpkg.com/@dbp-topics/signature@1.0.3/dist/local/@dbp-topics/signature/fonts/source-sans-pro/600.css";
+
+        body {
+            font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif';
+            font-weight: 300;
+            margin: 0;
+        }
+
+        /* TU-Graz style override */
+        html {
+            --dbp-override-primary-bg-color: #245b78;
+            --dbp-override-primary-button-border: solid 1px #245b78;
+            --dbp-override-info-bg-color: #245b78;
+            --dbp-override-danger-bg-color: #e4154b;
+            --dbp-override-warning-bg-color: #ffe183;
+            --dbp-override-warning-text-color: black;
+            --dbp-override-success-bg-color: #259207;
+        }
+    </style>
+
+    <!-- Preloading/Preconnecting -->
+    <link rel="preconnect" href="https://mw-dev.tugraz.at">
+    <link rel="preconnect" href="https://auth-dev.tugraz.at/auth">
+</head>
+
+<body>
+
+<dbp-provider auth requested-login-status analytics-event lang="de" entry-point-url="https://mw-dev.tugraz.at">
+    <dbp-auth-keycloak client-id="auth-dev-mw-frontend-local" idp-hint=""
+                       load-person="" realm="tugraz" scope=""
+                       silent-check-sso-redirect-uri="./silent-check-sso.html"
+                       subscribe="requested-login-status,entry-point-url,lang"
+                       try-login=""
+                       url="https://auth-dev.tugraz.at/auth"
+    ></dbp-auth-keycloak>
+    <dbp-login-button subscribe="auth,lang"></dbp-login-button>
+    <dbp-official-signature-pdf-upload subscribe="lang,entry-point-url,auth" show-clipboard></dbp-official-signature-pdf-upload>
+</dbp-provider>
+
+</body>
+</html>
-- 
GitLab