@dbp-topics/signature/dist/dbp-qualified-signature-pdf-upload.js.map

[GitLab Repository](https://gitlab.tugraz.at/dbp/esign/signature) | [npmjs package](https://www.npmjs.com/package/@dbp-topics/signature) | [Unpkg CDN](https://unpkg.com/browse/@dbp-topics/signature/) | [Esign Bundle](https://gitlab.tugraz.at/dbp/esign/dbp

{"version":3,"file":"dbp-qualified-signature-pdf-upload.js","sources":["../src/ext-sign-iframe.js","../src/dbp-qualified-signature-pdf-upload.js"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {MiniSpinner} from '@dbp-toolkit/common';\nimport {ScopedElementsMixin} from '@open-wc/scoped-elements';\n\n/**\n * Set the URL via setUrl(), reset via reset().\n *\n * Emits two custom events:\n *  signature-error with a \"message\"\n *  signature-done with an \"id\"\n */\nexport class ExternalSignIFrame extends ScopedElementsMixin(LitElement) {\n    constructor() {\n        super();\n        this._loading = false;\n        this.locationCount = 0;\n        this.loginPageLoaded = false;\n        this._onReceiveIframeMessage = this._onReceiveIframeMessage.bind(this);\n    }\n\n    static get scopedElements() {\n        return {\n            'dbp-mini-spinner': MiniSpinner,\n        };\n    }\n\n    static get properties() {\n        return {\n            _loading: {type: Boolean, attribute: false},\n            locationCount: {type: Number, attribute: 'location-count', reflect: true},\n            loginPageLoaded: {type: Boolean, attribute: 'login-page-loaded', reflect: true},\n        };\n    }\n\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('message', this._onReceiveIframeMessage);\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('message', this._onReceiveIframeMessage);\n        super.disconnectedCallback();\n    }\n\n    _onReceiveIframeMessage(event) {\n        const data = event.data;\n        if (data.type === 'pdf-as-error') {\n            let error = data.error;\n            if (data.cause) {\n                error = `${error}: ${data.cause}`;\n            }\n            this.dispatchEvent(\n                new CustomEvent('signature-error', {\n                    detail: {\n                        message: error,\n                    },\n                })\n            );\n        } else if (data.type === 'pdf-as-callback') {\n            this.dispatchEvent(\n                new CustomEvent('signature-done', {\n                    detail: {\n                        id: data.sessionId,\n                    },\n                })\n            );\n        }\n    }\n\n    setUrl(url) {\n        let iframe = this.renderRoot.querySelector('#iframe');\n        this._loading = true;\n        iframe.src = url;\n        this.locationCount = 0;\n    }\n\n    reset() {\n        this.setUrl('about:blank');\n        this.locationCount = 0;\n    }\n\n    static get styles() {\n        return css`\n            :host {\n                display: inline-block;\n            }\n\n            #iframe {\n                /* \"overflow\" should not be supported by browsers,\n                  but some seem to use it */\n                overflow: hidden;\n                border-width: 0;\n                width: 100%;\n                height: 100%;\n            }\n\n            .hidden {\n                display: none;\n            }\n        `;\n    }\n\n    update(changedProperties) {\n        changedProperties.forEach((oldValue, propName) => {\n            switch (propName) {\n                case 'locationCount':\n                    this.loginPageLoaded = this.locationCount > 1;\n                    break;\n            }\n        });\n\n        super.update(changedProperties);\n    }\n\n    render() {\n        let onDone = (event) => {\n            this._loading = false;\n            this.locationCount++;\n        };\n\n        let onError = (event) => {\n            this._loading = false;\n        };\n\n        return html`\n            ${this._loading\n                ? html`\n                      <dbp-mini-spinner></dbp-mini-spinner>\n                  `\n                : html``}\n            <!-- \"scrolling\" is deprecated, but still seem to help -->\n            <iframe\n                id=\"iframe\"\n                class=${classMap({hidden: this._loading})}\n                @load=\"${onDone}\"\n                @error=\"${onError}\"\n                scrolling=\"no\"></iframe>\n        `;\n    }\n}\n","import {createInstance} from './i18n.js';\nimport {humanFileSize} from '@dbp-toolkit/common/i18next.js';\nimport {css, html} from 'lit';\nimport {ScopedElementsMixin} from '@open-wc/scoped-elements';\nimport DBPSignatureLitElement from './dbp-signature-lit-element';\nimport {PdfPreview} from './dbp-pdf-preview';\nimport * as commonUtils from '@dbp-toolkit/common/utils';\nimport * as utils from './utils';\nimport {Button, Icon, MiniSpinner} from '@dbp-toolkit/common';\nimport * as commonStyles from '@dbp-toolkit/common/styles';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {FileSource} from '@dbp-toolkit/file-handling';\nimport JSONLD from '@dbp-toolkit/common/jsonld';\nimport {TextSwitch} from './textswitch.js';\nimport {FileSink} from '@dbp-toolkit/file-handling';\nimport {name as pkgName} from './../package.json';\nimport {send as notify} from '@dbp-toolkit/common/notification';\nimport metadata from './dbp-qualified-signature-pdf-upload.metadata.json';\nimport {Activity} from './activity.js';\nimport {PdfAnnotationView} from './dbp-pdf-annotation-view';\nimport {ExternalSignIFrame} from './ext-sign-iframe.js';\nimport * as SignatureStyles from './styles';\n\nclass QualifiedSignaturePdfUpload extends ScopedElementsMixin(DBPSignatureLitElement) {\n    constructor() {\n        super();\n        this._i18n = createInstance();\n        this.lang = this._i18n.language;\n        this.entryPointUrl = '';\n        this.nextcloudWebAppPasswordURL = '';\n        this.nextcloudWebDavURL = '';\n        this.nextcloudName = '';\n        this.nextcloudFileURL = '';\n        this.nextcloudAuthInfo = '';\n        this.externalAuthInProgress = false;\n        this.signedFiles = [];\n        this.signedFilesCount = 0;\n        this.signedFilesToDownload = 0;\n        this.errorFiles = [];\n        this.errorFilesCount = 0;\n        this.uploadStatusFileName = '';\n        this.uploadStatusText = '';\n        this.currentFile = {};\n        this.currentFileName = '';\n        this.currentFilePlacementMode = '';\n        this.currentFileSignaturePlacement = {};\n        this.signingProcessEnabled = false;\n        this.signingProcessActive = false;\n        this.signaturePlacementInProgress = false;\n        this.withSigBlock = false;\n        this.queuedFilesSignaturePlacements = [];\n        this.queuedFilesPlacementModes = [];\n        this.queuedFilesNeedsPlacement = new Map();\n        this.currentPreviewQueueKey = '';\n        this.allowAnnotating = false;\n        this.queuedFilesAnnotations = [];\n        this.queuedFilesAnnotationModes = [];\n        this.queuedFilesAnnotationsCount = 0;\n        this.queuedFilesAnnotationSaved = [];\n        this.queuedFilesEnabledAnnotations = [];\n        this.isAnnotationViewVisible = false;\n        this.addAnnotationInProgress = false;\n        this.activity = new Activity(metadata);\n        this.fileHandlingEnabledTargets = 'local';\n        this._onReceiveBeforeUnload = this.onReceiveBeforeUnload.bind(this);\n    }\n\n    static get scopedElements() {\n        return {\n            'dbp-icon': Icon,\n            'dbp-file-source': FileSource,\n            'dbp-file-sink': FileSink,\n            'dbp-pdf-preview': PdfPreview,\n            'dbp-mini-spinner': MiniSpinner,\n            'dbp-button': Button,\n            'dbp-textswitch': TextSwitch,\n            'dbp-pdf-annotation-view': PdfAnnotationView,\n            'external-sign-iframe': ExternalSignIFrame,\n        };\n    }\n\n    static get properties() {\n        return {\n            ...super.properties,\n            lang: {type: String},\n            entryPointUrl: {type: String, attribute: 'entry-point-url'},\n            nextcloudWebAppPasswordURL: {type: String, attribute: 'nextcloud-web-app-password-url'},\n            nextcloudWebDavURL: {type: String, attribute: 'nextcloud-webdav-url'},\n            nextcloudName: {type: String, attribute: 'nextcloud-name'},\n            nextcloudFileURL: {type: String, attribute: 'nextcloud-file-url'},\n            nextcloudAuthInfo: {type: String, attribute: 'nextcloud-auth-info'},\n            signedFiles: {type: Array, attribute: false},\n            signedFilesCount: {type: Number, attribute: false},\n            signedFilesToDownload: {type: Number, attribute: false},\n            queuedFilesCount: {type: Number, attribute: false},\n            errorFiles: {type: Array, attribute: false},\n            errorFilesCount: {type: Number, attribute: false},\n            uploadInProgress: {type: Boolean, attribute: false},\n            uploadStatusFileName: {type: String, attribute: false},\n            uploadStatusText: {type: String, attribute: false},\n            externalAuthInProgress: {type: Boolean, attribute: false},\n            signingProcessEnabled: {type: Boolean, attribute: false},\n            signingProcessActive: {type: Boolean, attribute: false},\n            queueBlockEnabled: {type: Boolean, attribute: false},\n            currentFile: {type: Object, attribute: false},\n            currentFileName: {type: String, attribute: false},\n            signaturePlacementInProgress: {type: Boolean, attribute: false},\n            withSigBlock: {type: Boolean, attribute: false},\n            isSignaturePlacement: {type: Boolean, attribute: false},\n            allowAnnotating: {type: Boolean, attribute: 'allow-annotating'},\n            isAnnotationViewVisible: {type: Boolean, attribute: false},\n            queuedFilesAnnotations: {type: Array, attribute: false},\n            queuedFilesAnnotationsCount: {type: Number, attribute: false},\n            addAnnotationInProgress: {type: Boolean, attribute: false},\n            queuedFilesAnnotationModes: {type: Array, attribute: false},\n            queuedFilesAnnotationSaved: {type: Array, attribute: false},\n            fileHandlingEnabledTargets: {type: String, attribute: 'file-handling-enabled-targets'},\n        };\n    }\n\n    connectedCallback() {\n        super.connectedCallback();\n        // needs to be called in a function to get the variable scope of \"this\"\n        setInterval(() => {\n            this.handleQueuedFiles();\n        }, 1000);\n\n        // we want to be able to cancel the leaving of the page\n        window.addEventListener('beforeunload', this._onReceiveBeforeUnload);\n    }\n\n    disconnectedCallback() {\n        // remove event listeners\n        window.removeEventListener('beforeunload', this._onReceiveBeforeUnload);\n        window.removeEventListener('beforeunload', this._onReceiveBeforeUnload);\n\n        super.disconnectedCallback();\n    }\n\n    async queueFile(file) {\n        let id = await super.queueFile(file);\n        await this._updateNeedsPlacementStatus(id);\n        this.requestUpdate();\n        return id;\n    }\n\n    /**\n     * Processes queued files\n     */\n    async handleQueuedFiles() {\n        const i18n = this._i18n;\n        this.endSigningProcessIfQueueEmpty();\n        if (this.queuedFilesCount === 0) {\n            // reset signingProcessEnabled button\n            this.signingProcessEnabled = false;\n            return;\n        }\n\n        if (\n            !this.signingProcessEnabled ||\n            this.externalAuthInProgress ||\n            this.uploadInProgress ||\n            this.addAnnotationInProgress\n        ) {\n            return;\n        }\n        this.signaturePlacementInProgress = false;\n\n        // Validate that all PDFs with a signature have manual placement\n        for (const key of Object.keys(this.queuedFiles)) {\n            const isManual = this.queuedFilesPlacementModes[key] === 'manual';\n            if (this.queuedFilesNeedsPlacement.get(key) && !isManual) {\n                // Some have a signature but are not \"manual\", stop everything\n                notify({\n                    body: i18n.t('error-manual-positioning-missing'),\n                    type: 'danger',\n                    timeout: 5,\n                });\n                this.signingProcessEnabled = false;\n                this.signingProcessActive = false;\n                return;\n            }\n        }\n\n        // take the file off the queue\n        const key = Object.keys(this.queuedFiles)[0];\n        const entry = this.takeFileFromQueue(key);\n        const file = entry.file;\n        this.currentFile = file;\n\n        // set placement mode and parameters to restore them when canceled\n        this.currentFilePlacementMode = this.queuedFilesPlacementModes[key];\n        this.currentFileSignaturePlacement = this.queuedFilesSignaturePlacements[key];\n        this.uploadInProgress = true;\n        let params = {};\n\n        // prepare parameters to tell PDF-AS where and how the signature should be placed\n        if (this.queuedFilesPlacementModes[key] === 'manual') {\n            const data = this.queuedFilesSignaturePlacements[key];\n            if (data !== undefined) {\n                params = utils.fabricjs2pdfasPosition(data);\n            }\n        }\n\n        params['profile'] = 'default';\n\n        this.uploadStatusText = i18n.t('qualified-pdf-upload.upload-status-file-text', {\n            fileName: file.name,\n            fileSize: humanFileSize(file.size, false),\n        });\n\n        const annotationsEnabled = this.isAnnotationsEnabledForKey(key);\n        const annotations = this.takeAnnotationsFromQueue(key);\n        await this.uploadFile(file, params, annotationsEnabled ? annotations : []);\n        this.uploadInProgress = false;\n    }\n\n    /**\n     * Decides if the \"beforeunload\" event needs to be canceled\n     *\n     * @param event\n     */\n    onReceiveBeforeUnload(event) {\n        const i18n = this._i18n;\n        // we don't need to stop if there are no signed files\n        if (this.signedFilesCount === 0) {\n            return;\n        }\n\n        // we need to handle custom events ourselves\n        if (!event.isTrusted) {\n            // note that this only works with custom event since calls of \"confirm\" are ignored\n            // in the non-custom event, see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event\n            const result = confirm(i18n.t('qualified-pdf-upload.confirm-page-leave'));\n\n            // don't stop the page leave if the user wants to leave\n            if (result) {\n                return;\n            }\n        }\n\n        // Cancel the event as stated by the standard\n        event.preventDefault();\n\n        // Chrome requires returnValue to be set\n        event.returnValue = '';\n    }\n\n    /**\n     * Parse error message for user friendly output\n     *\n     * @param error\n     */\n    parseError(error) {\n        const i18n = this._i18n;\n        let errorParsed = error;\n        // Common Error Messages fpr pdf-as: https://www.buergerkarte.at/konzept/securitylayer/spezifikation/20140114/errorcodes/errorcodes.html\n        // SecurityLayer Error: [6000] Unklassifizierter Abbruch durch den Bürger.\n        if (error.includes('SecurityLayer Error: [6001]')) {\n            errorParsed = i18n.t('error-cancel-message');\n        }\n        // SecurityLayer Error: [6001] Abbruch durch den Bürger über die Benutzerschnittstelle.\n        else if (error.includes('SecurityLayer Error: [6000]')) {\n            errorParsed = i18n.t('error-cancel-message');\n        }\n        // SecurityLayer Error: [6002] Abbruch auf Grund mangelnder Rechte zur Befehlsausführung.\n        else if (error.includes('SecurityLayer Error: [6002]')) {\n            errorParsed = i18n.t('error-rights-message');\n        }\n        return errorParsed;\n    }\n\n    _onIFrameDone(event) {\n        const sessionId = event.detail.id;\n\n        // check if sessionId is valid\n        if (typeof sessionId !== 'string' || sessionId.length < 15) {\n            return;\n        }\n\n        console.log('Got iframe message for sessionId ' + sessionId);\n        const that = this;\n\n        // get correct file name\n        const fileName = this.currentFileName === '' ? 'mydoc.pdf' : this.currentFileName;\n\n        // fetch pdf from api gateway with sessionId\n        JSONLD.getInstance(this.entryPointUrl).then(\n            (jsonld) => {\n                let apiUrlBase;\n                try {\n                    apiUrlBase = jsonld.getApiUrlForEntityName('EsignQualifiedlySignedDocument');\n                } catch (error) {\n                    apiUrlBase = jsonld.getApiUrlForEntityName('QualifiedlySignedDocument');\n                }\n\n                const apiUrl =\n                    apiUrlBase +\n                    '/' +\n                    encodeURIComponent(sessionId) +\n                    '?fileName=' +\n                    encodeURIComponent(fileName);\n\n                fetch(apiUrl, {\n                    headers: {\n                        'Content-Type': 'application/ld+json',\n                        Authorization: 'Bearer ' + that.auth.token,\n                    },\n                })\n                    .then((result) => {\n                        // hide iframe\n                        that.externalAuthInProgress = false;\n                        this._('#iframe').reset();\n                        this.endSigningProcessIfQueueEmpty();\n\n                        if (!result.ok) throw result;\n\n                        return result.json();\n                    })\n                    .then((document) => {\n                        // this doesn't seem to trigger an update() execution\n                        that.signedFiles.push(document);\n                        // this triggers the correct update() execution\n                        that.signedFilesCount++;\n\n                        this.sendSetPropertyEvent('analytics-event', {\n                            category: 'QualifiedlySigning',\n                            action: 'DocumentSigned',\n                            name: document.contentSize,\n                        });\n                    })\n                    .catch((error) => {\n                        let file = this.currentFile;\n                        // let's override the json to inject an error message\n                        file.json = {'hydra:description': 'Download failed!'};\n\n                        this.addToErrorFiles(file);\n                    });\n            },\n            {},\n            that.lang\n        );\n    }\n\n    _onIFrameError(event) {\n        let error = event.detail.message;\n        let file = this.currentFile;\n        file.json = {'hydra:description': this.parseError(error)};\n        this.addToErrorFiles(file);\n        this._('#iframe').reset();\n        this.externalAuthInProgress = false;\n        this.endSigningProcessIfQueueEmpty();\n    }\n\n    addToErrorFiles(file) {\n        this.endSigningProcessIfQueueEmpty();\n\n        // this doesn't seem to trigger an update() execution\n        this.errorFiles[Math.floor(Math.random() * 1000000)] = file;\n        // this triggers the correct update() execution\n        this.errorFilesCount++;\n\n        this.sendSetPropertyEvent('analytics-event', {\n            category: 'QualifiedlySigning',\n            action: 'SigningFailed',\n            name: file.json['hydra:description'],\n        });\n    }\n\n    /**\n     * @param data\n     */\n    onFileUploadFinished(data) {\n        if (data.status !== 201) {\n            this.addToErrorFiles(data);\n        } else if (data.json['@type'] === 'http://schema.org/EntryPoint') {\n            // after the \"real\" upload we immediately start with the 2FA process\n\n            // show the iframe and lock processing\n            this.externalAuthInProgress = true;\n\n            const entryPoint = data.json;\n            this.currentFileName = entryPoint.name;\n\n            // we need the full file to upload it again in case the download of the signed file fails\n            this.currentFile = data;\n\n            // we want to load the redirect url in the iframe\n            let iframe = this._('#iframe');\n            iframe.setUrl(entryPoint.url);\n        }\n    }\n\n    update(changedProperties) {\n        changedProperties.forEach((oldValue, propName) => {\n            switch (propName) {\n                case 'lang':\n                    this._i18n.changeLanguage(this.lang);\n                    break;\n                case 'entryPointUrl':\n                    JSONLD.getInstance(this.entryPointUrl).then((jsonld) => {\n                        let apiUrlBase;\n                        try {\n                            apiUrlBase = jsonld.getApiUrlForEntityName(\n                                'EsignQualifiedSigningRequest'\n                            );\n                        } catch (error) {\n                            apiUrlBase = jsonld.getApiUrlForEntityName('QualifiedSigningRequest');\n                        }\n                        this.fileSourceUrl = apiUrlBase;\n                    });\n                    break;\n            }\n        });\n        super.update(changedProperties);\n    }\n\n    clearQueuedFiles() {\n        this.queuedFilesSignaturePlacements = [];\n        this.queuedFilesPlacementModes = [];\n        this.queuedFilesNeedsPlacement.clear();\n        super.clearQueuedFiles();\n    }\n\n    static get styles() {\n        // language=css\n        return css`\n            ${commonStyles.getThemeCSS()}\n            ${commonStyles.getGeneralCSS(false)}\n            ${commonStyles.getButtonCSS()}\n            ${commonStyles.getNotificationCSS()}\n            ${SignatureStyles.getSignatureCss()}\n\n            \n            #external-auth #iframe {\n                margin-top: 0.5em;\n            }\n\n            #external-auth .button.is-cancel {\n                color: var(--dbp-danger);\n            }\n\n            #iframe {\n                width: 100%;\n                height: 350px;\n                /* keeps the A-Trust webpage aligned left */\n                max-width: 575px;\n            }\n        `;\n    }\n\n    /**\n     * Returns the list of queued files\n     *\n     * @returns {*[]} Array of html templates\n     */\n    getQueuedFilesHtml() {\n        const ids = Object.keys(this.queuedFiles);\n        const i18n = this._i18n;\n        let results = [];\n\n        ids.forEach((id) => {\n            const file = this.queuedFiles[id].file;\n            const isManual = this.queuedFilesPlacementModes[id] === 'manual';\n            const placementMissing = this.queuedFilesNeedsPlacement.get(id) && !isManual;\n\n            results.push(html`\n                <div class=\"file-block\">\n                    <div class=\"header\">\n                        <span class=\"filename\">\n                            <strong>${file.name}</strong>\n                            (${humanFileSize(file.size)})\n                        </span>\n                        <button\n                            class=\"button close\"\n                            ?disabled=\"${this.signingProcessEnabled}\"\n                            title=\"${i18n.t(\n                                'qualified-pdf-upload.remove-queued-file-button-title'\n                            )}\"\n                            @click=\"${() => {\n                                this.takeFileFromQueue(id);\n                            }}\">\n                            <dbp-icon name=\"trash\"></dbp-icon>\n                        </button>\n                    </div>\n                    <div class=\"bottom-line\">\n                        <div></div>\n                        <button\n                            class=\"button\"\n                            ?disabled=\"${this.signingProcessEnabled}\"\n                            @click=\"${() => {\n                                this.showPreview(id);\n                            }}\">\n                            ${i18n.t('qualified-pdf-upload.show-preview')}\n                        </button>\n                        <span class=\"headline\">${i18n.t('qualified-pdf-upload.positioning')}:</span>\n                        <dbp-textswitch\n                            name1=\"auto\"\n                            name2=\"manual\"\n                            name=\"${this.queuedFilesPlacementModes[id] || 'auto'}\"\n                            class=\"${classMap({\n                                'placement-missing': placementMissing,\n                                switch: true,\n                            })}\"\n                            value1=\"${i18n.t('qualified-pdf-upload.positioning-automatic')}\"\n                            value2=\"${i18n.t('qualified-pdf-upload.positioning-manual')}\"\n                            ?disabled=\"${this.signingProcessEnabled}\"\n                            @change=${(e) =>\n                                this.queuePlacementSwitch(id, e.target.name)}></dbp-textswitch>\n                        <span class=\"headline ${classMap({hidden: !this.allowAnnotating})}\">\n                            ${i18n.t('qualified-pdf-upload.annotation')}:\n                        </span>\n                        <div class=\"${classMap({hidden: !this.allowAnnotating})}\">\n                            <dbp-textswitch\n                                id=\"annotation-switch\"\n                                name1=\"no-text\"\n                                name2=\"text-selected\"\n                                name=\"${this.queuedFilesAnnotationModes[id] || 'no-text'}\"\n                                class=\"${classMap({switch: true})}\"\n                                value1=\"${i18n.t('qualified-pdf-upload.annotation-no')}\"\n                                value2=\"${i18n.t('qualified-pdf-upload.annotation-yes')}\"\n                                ?disabled=\"${this.signingProcessEnabled}\"\n                                @change=${(e) =>\n                                    this.showAnnotationView(id, e.target.name)}></dbp-textswitch>\n                        </div>\n                    </div>\n                    <div class=\"error-line\">\n                        ${placementMissing\n                            ? html`\n                                  ${i18n.t('label-manual-positioning-missing')}\n                              `\n                            : ''}\n                    </div>\n                </div>\n            `);\n        });\n\n        return results;\n    }\n\n    /**\n     * Returns the list of successfully signed files\n     *\n     * @returns {*[]} Array of html templates\n     */\n    getSignedFilesHtml() {\n        const ids = Object.keys(this.signedFiles);\n        const i18n = this._i18n;\n        let results = [];\n\n        ids.forEach((id) => {\n            const file = this.signedFiles[id];\n\n            results.push(html`\n                <div class=\"file-block\" id=\"file-block-${id}\">\n                    <div class=\"header\">\n                        <span class=\"filename\">\n                            <span class=\"bold-filename\">${file.name}</span>\n                            (${humanFileSize(file.contentSize)})\n                        </span>\n                        <button\n                            class=\"button\"\n                            title=\"${i18n.t('qualified-pdf-upload.download-file-button-title')}\"\n                            @click=\"${() => {\n                                this.downloadFileClickHandler(file, 'file-block-' + id);\n                            }}\">\n                            <dbp-icon name=\"download\"></dbp-icon>\n                        </button>\n                    </div>\n                </div>\n            `);\n        });\n\n        return results;\n    }\n\n    /**\n     * Returns the list of files of failed signature processes\n     *\n     * @returns {*[]} Array of html templates\n     */\n    getErrorFilesHtml() {\n        const ids = Object.keys(this.errorFiles);\n        const i18n = this._i18n;\n        let results = [];\n\n        ids.forEach((id) => {\n            const data = this.errorFiles[id];\n\n            if (data.file === undefined) {\n                return;\n            }\n\n            results.push(html`\n                <div class=\"file-block error\">\n                    <div class=\"header\">\n                        <span class=\"filename\">\n                            <strong>${data.file.name}</strong>\n                            (${humanFileSize(data.file.size)})\n                        </span>\n                        <div class=\"buttons\">\n                            <button\n                                class=\"button\"\n                                title=\"${i18n.t(\n                                    'qualified-pdf-upload.re-upload-file-button-title'\n                                )}\"\n                                @click=\"${() => {\n                                    this.fileQueueingClickHandler(data.file, id);\n                                }}\">\n                                <dbp-icon name=\"reload\"></dbp-icon>\n                            </button>\n                            <button\n                                class=\"button\"\n                                title=\"${i18n.t(\n                                    'qualified-pdf-upload.remove-failed-file-button-title'\n                                )}\"\n                                @click=\"${() => {\n                                    this.takeFailedFileFromQueue(id);\n                                }}\">\n                                <dbp-icon name=\"trash\"></dbp-icon>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"bottom-line\">\n                        <strong class=\"error\">${data.json['hydra:description']}</strong>\n                    </div>\n                </div>\n            `);\n        });\n\n        return results;\n    }\n\n    hasSignaturePermissions() {\n        return this._hasSignaturePermissions('ROLE_SCOPE_QUALIFIED-SIGNATURE');\n    }\n\n    async stopSigningProcess() {\n        if (!this.externalAuthInProgress) {\n            return;\n        }\n\n        this._('#iframe').reset();\n        this.signingProcessEnabled = false;\n        this.externalAuthInProgress = false;\n        this.signingProcessActive = false;\n\n        if (this.currentFile.file !== undefined) {\n            const key = await this.queueFile(this.currentFile.file);\n\n            // set placement mode and parameters, so they are restore when canceled\n            this.queuedFilesPlacementModes[key] = this.currentFilePlacementMode;\n            this.queuedFilesSignaturePlacements[key] = this.currentFileSignaturePlacement;\n        }\n    }\n\n    render() {\n        const placeholderUrl = commonUtils.getAssetURL(\n            pkgName,\n            'qualified-signature-placeholder.png'\n        );\n        const i18n = this._i18n;\n\n        return html`\n            <div\n                class=\"${classMap({\n                    hidden:\n                        !this.isLoggedIn() || !this.hasSignaturePermissions() || this.isLoading(),\n                })}\">\n                <div class=\"field ${classMap({'is-disabled': this.isUserInterfaceDisabled()})}\">\n                    <h2>${this.activity.getName(this.lang)}</h2>\n                    <p class=\"subheadline\">${this.activity.getDescription(this.lang)}</p>\n                    <div class=\"control\">\n                        <p>${i18n.t('qualified-pdf-upload.upload-text')}</p>\n                        <button\n                            @click=\"${() => {\n                                this._('#file-source').setAttribute('dialog-open', '');\n                            }}\"\n                            ?disabled=\"${this.signingProcessActive}\"\n                            class=\"button is-primary\">\n                            ${i18n.t('qualified-pdf-upload.upload-button-label')}\n                        </button>\n                        <dbp-file-source\n                            id=\"file-source\"\n                            subscribe=\"nextcloud-store-session:nextcloud-store-session\"\n                            context=\"${i18n.t('qualified-pdf-upload.file-picker-context')}\"\n                            allowed-mime-types=\"application/pdf\"\n                            enabled-targets=\"${this.fileHandlingEnabledTargets}\"\n                            nextcloud-auth-url=\"${this.nextcloudWebAppPasswordURL}\"\n                            nextcloud-web-dav-url=\"${this.nextcloudWebDavURL}\"\n                            nextcloud-name=\"${this.nextcloudName}\"\n                            nextcloud-auth-info=\"${this.nextcloudAuthInfo}\"\n                            nextcloud-file-url=\"${this.nextcloudFileURL}\"\n                            decompress-zip\n                            max-file-size=\"32000\"\n                            lang=\"${this.lang}\"\n                            ?disabled=\"${this.signingProcessActive}\"\n                            text=\"${i18n.t('qualified-pdf-upload.upload-area-text')}\"\n                            button-label=\"${i18n.t('qualified-pdf-upload.upload-button-label')}\"\n                            @dbp-file-source-file-selected=\"${this.onFileSelected}\"\n                            @dbp-file-source-switched=\"${this\n                                .onFileSourceSwitch}\"></dbp-file-source>\n                    </div>\n                </div>\n                <div id=\"grid-container\">\n                    <div class=\"left-container\">\n                        <div\n                            class=\"files-block field ${classMap({\n                                hidden: !this.queueBlockEnabled,\n                            })}\">\n                            <!-- Queued files headline and queueing spinner -->\n                            <h3\n                                class=\"${classMap({\n                                    'is-disabled': this.isUserInterfaceDisabled(),\n                                })}\">\n                                ${i18n.t('qualified-pdf-upload.queued-files-label')}\n                            </h3>\n                            <!-- Buttons to start/stop signing process and clear queue -->\n                            <div class=\"control field\">\n                                <button\n                                    @click=\"${this.clearQueuedFiles}\"\n                                    ?disabled=\"${this.queuedFilesCount === 0 ||\n                                    this.signingProcessActive ||\n                                    this.isUserInterfaceDisabled()}\"\n                                    class=\"button ${classMap({\n                                        'is-disabled': this.isUserInterfaceDisabled(),\n                                    })}\">\n                                    ${i18n.t('qualified-pdf-upload.clear-all')}\n                                </button>\n                                <button\n                                    @click=\"${() => {\n                                        this.signingProcessEnabled = true;\n                                        this.signingProcessActive = true;\n                                    }}\"\n                                    ?disabled=\"${this.queuedFilesCount === 0}\"\n                                    class=\"button is-right is-primary ${classMap({\n                                        'is-disabled': this.isUserInterfaceDisabled(),\n                                    })}\">\n                                    ${i18n.t('qualified-pdf-upload.start-signing-process-button')}\n                                </button>\n                                <!--\n                                <button @click=\"${this.stopSigningProcess}\"\n                                        ?disabled=\"${this.uploadInProgress}\"\n                                        id=\"cancel-signing-process\"\n                                        class=\"button is-right ${classMap({\n                                    hidden: !this.signingProcessActive,\n                                })}\">\n                                    ${i18n.t('qualified-pdf-upload.stop-signing-process-button')}\n                                </button>\n                                -->\n                            </div>\n                            <!-- List of queued files -->\n                            <div\n                                class=\"control file-list ${classMap({\n                                    'is-disabled': this.isUserInterfaceDisabled(),\n                                })}\">\n                                ${this.getQueuedFilesHtml()}\n                            </div>\n                            <!-- Text \"queue empty\" -->\n                            <div\n                                class=\"empty-queue control ${classMap({\n                                    hidden: this.queuedFilesCount !== 0,\n                                    'is-disabled': this.isUserInterfaceDisabled(),\n                                })}\">\n                                ${i18n.t('qualified-pdf-upload.queued-files-empty1')}\n                                <br />\n                                ${i18n.t('qualified-pdf-upload.queued-files-empty2')}\n                            </div>\n                        </div>\n                        <!-- List of signed PDFs -->\n                        <div\n                            class=\"files-block field ${classMap({\n                                hidden: this.signedFilesCount === 0,\n                                'is-disabled': this.isUserInterfaceDisabled(),\n                            })}\">\n                            <h3>${i18n.t('qualified-pdf-upload.signed-files-label')}</h3>\n                            <!-- Button to download all signed PDFs -->\n                            <div class=\"field ${classMap({hidden: this.signedFilesCount === 0})}\">\n                                <div class=\"control\">\n                                    <button @click=\"${this.clearSignedFiles}\" class=\"button\">\n                                        ${i18n.t('qualified-pdf-upload.clear-all')}\n                                    </button>\n                                    <dbp-button\n                                        id=\"zip-download-button\"\n                                        value=\"${i18n.t(\n                                            'qualified-pdf-upload.download-zip-button'\n                                        )}\"\n                                        title=\"${i18n.t(\n                                            'qualified-pdf-upload.download-zip-button-tooltip'\n                                        )}\"\n                                        class=\"is-right\"\n                                        @click=\"${this.zipDownloadClickHandler}\"\n                                        type=\"is-primary\"></dbp-button>\n                                </div>\n                            </div>\n                            <div class=\"control\">${this.getSignedFilesHtml()}</div>\n                        </div>\n                        <!-- List of errored files -->\n                        <div\n                            class=\"files-block error-files field ${classMap({\n                                hidden: this.errorFilesCount === 0,\n                                'is-disabled': this.isUserInterfaceDisabled(),\n                            })}\">\n                            <h3>${i18n.t('qualified-pdf-upload.error-files-label')}</h3>\n                            <!-- Button to upload errored files again -->\n                            <div class=\"field ${classMap({hidden: this.errorFilesCount === 0})}\">\n                                <div class=\"control\">\n                                    <button @click=\"${this.clearErrorFiles}\" class=\"button\">\n                                        ${i18n.t('qualified-pdf-upload.clear-all')}\n                                    </button>\n                                    <dbp-button\n                                        id=\"re-upload-all-button\"\n                                        ?disabled=\"${this.uploadInProgress}\"\n                                        value=\"${i18n.t(\n                                            'qualified-pdf-upload.re-upload-all-button'\n                                        )}\"\n                                        title=\"${i18n.t(\n                                            'qualified-pdf-upload.re-upload-all-button-title'\n                                        )}\"\n                                        class=\"is-right\"\n                                        @click=\"${this.reUploadAllClickHandler}\"\n                                        type=\"is-primary\"></dbp-button>\n                                </div>\n                            </div>\n                            <div class=\"control\">${this.getErrorFilesHtml()}</div>\n                        </div>\n                    </div>\n                    <div class=\"right-container\">\n                        <!-- PDF preview -->\n                        <div\n                            id=\"pdf-preview\"\n                            class=\"field ${classMap({hidden: !this.signaturePlacementInProgress})}\">\n                            <h3>\n                                ${this.withSigBlock\n                                    ? i18n.t('qualified-pdf-upload.signature-placement-label')\n                                    : i18n.t('qualified-pdf-upload.preview-label')}\n                            </h3>\n                            <div class=\"box-header\">\n                                <div class=\"filename\">\n                                    <strong>${this.currentFile.name}</strong>\n                                    (${humanFileSize(\n                                        this.currentFile !== undefined ? this.currentFile.size : 0\n                                    )})\n                                </div>\n                                <button class=\"is-cancel\" @click=\"${this.hidePDF}\">\n                                    <dbp-icon name=\"close\"></dbp-icon>\n                                </button>\n                            </div>\n                            <dbp-pdf-preview\n                                lang=\"${this.lang}\"\n                                allow-signature-rotation\n                                signature-placeholder-image-src=\"${placeholderUrl}\"\n                                signature-width=\"80\"\n                                signature-height=\"29\"\n                                @dbp-pdf-preview-accept=\"${this.storePDFData}\"\n                                @dbp-pdf-preview-cancel=\"${this.hidePDF}\"></dbp-pdf-preview>\n                        </div>\n                        <!-- Annotation view -->\n                        <div\n                            id=\"annotation-view\"\n                            class=\"field ${classMap({\n                                hidden: !this.isAnnotationViewVisible || !this.allowAnnotating,\n                            })}\">\n                            <h2>${i18n.t('qualified-pdf-upload.annotation-view-label')}</h2>\n                            <div class=\"box-header\">\n                                <div class=\"filename\">\n                                    <strong>\n                                        ${this.currentFile.file !== undefined\n                                            ? this.currentFile.file.name\n                                            : ''}\n                                    </strong>\n                                    (${humanFileSize(\n                                        this.currentFile.file !== undefined\n                                            ? this.currentFile.file.size\n                                            : 0\n                                    )})\n                                </div>\n                                <button\n                                    class=\"is-cancel annotation\"\n                                    @click=\"${this.hideAnnotationView}\">\n                                    <dbp-icon name=\"close\" id=\"close-icon\"></dbp-icon>\n                                </button>\n                            </div>\n                            <dbp-pdf-annotation-view\n                                lang=\"${this.lang}\"\n                                @dbp-pdf-annotations-save=\"${this.processAnnotationEvent}\"\n                                @dbp-pdf-annotations-cancel=\"${this\n                                    .processAnnotationCancelEvent}\"></dbp-pdf-annotation-view>\n                        </div>\n                        <!-- File upload progress -->\n                        <div\n                            id=\"upload-progress\"\n                            class=\"field notification is-info ${classMap({\n                                hidden: !this.uploadInProgress,\n                            })}\">\n                            <dbp-mini-spinner></dbp-mini-spinner>\n                            <strong>${this.uploadStatusFileName}</strong>\n                            ${this.uploadStatusText}\n                        </div>\n                        <!-- External auth -->\n                        <div\n                            id=\"external-auth\"\n                            class=\"files-block field ${classMap({\n                                hidden: !this.externalAuthInProgress,\n                            })}\">\n                            <h3>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h3>\n                            <div class=\"box\">\n                                <div class=\"box-header\">\n                                    <div class=\"filename\">\n                                        <strong>${this.currentFileName}</strong>\n                                        (${humanFileSize(\n                                            this.currentFile.file !== undefined\n                                                ? this.currentFile.file.size\n                                                : 0\n                                        )})\n                                    </div>\n                                    <button\n                                        class=\"is-cancel\"\n                                        title=\"${i18n.t(\n                                            'qualified-pdf-upload.stop-signing-process-button'\n                                        )}\"\n                                        @click=\"${this.stopSigningProcess}\">\n                                        <dbp-icon name=\"close\"></dbp-icon>\n                                    </button>\n                                </div>\n                                <external-sign-iframe\n                                    id=\"iframe\"\n                                    @signature-error=\"${this._onIFrameError}\"\n                                    @signature-done=\"${this._onIFrameDone}\"></external-sign-iframe>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"notification is-warning ${classMap({\n                    hidden: this.isLoggedIn() || this.isLoading(),\n                })}\">\n                ${i18n.t('error-login-message')}\n            </div>\n            <div\n                class=\"notification is-danger ${classMap({\n                    hidden:\n                        this.hasSignaturePermissions() || !this.isLoggedIn() || this.isLoading(),\n                })}\">\n                ${i18n.t('error-permission-message')}\n            </div>\n            <div class=\"${classMap({hidden: !this.isLoading()})}\">\n                <dbp-mini-spinner></dbp-mini-spinner>\n            </div>\n            <dbp-file-sink\n                id=\"file-sink\"\n                context=\"${i18n.t('qualified-pdf-upload.save-field-label', {\n                    count: this.signedFilesToDownload,\n                })}\"\n                filename=\"signed-documents.zip\"\n                subscribe=\"initial-file-handling-state:initial-file-handling-state,nextcloud-store-session:nextcloud-store-session\"\n                enabled-targets=\"${this.fileHandlingEnabledTargets}\"\n                nextcloud-auth-url=\"${this.nextcloudWebAppPasswordURL}\"\n                nextcloud-web-dav-url=\"${this.nextcloudWebDavURL}\"\n                nextcloud-name=\"${this.nextcloudName}\"\n                nextcloud-file-url=\"${this.nextcloudFileURL}\"\n                lang=\"${this.lang}\"></dbp-file-sink>\n        `;\n    }\n}\n\ncommonUtils.defineCustomElement('dbp-qualified-signature-pdf-upload', QualifiedSignaturePdfUpload);\n"],"names":["ExternalSignIFrame","ScopedElementsMixin","LitElement","constructor","super","this","_loading","locationCount","loginPageLoaded","_onReceiveIframeMessage","bind","scopedElements","MiniSpinner","properties","type","Boolean","attribute","Number","reflect","connectedCallback","window","addEventListener","disconnectedCallback","removeEventListener","event","data","error","cause","dispatchEvent","CustomEvent","detail","message","id","sessionId","setUrl","url","iframe","renderRoot","querySelector","src","reset","styles","css","_t","_","update","changedProperties","forEach","oldValue","propName","render","html","_t2","_t3","_t