Make cookieconsent run #258

mukral · 2023-01-19T06:29:59Z

mukral
Jan 19, 2023

Hi, may I ask for some help of the cumminity.
And maybe the solution is a benefit we all can profit from...

In europe and several other contries you need to ask for consence of saving cookies for data privacy reasons.
Otherwise it could be quite expensive to run a public page. So I would like to integrate the cookieconsent javascripts orestbida from https://github.com/orestbida/cookieconsent
I think if we manage to integrate it in nicegui it would be a great help for the whole community to run public pages legally :-)
and also for nicegui-project is having a out-of-the-box GDPR-compliant solution a nice thing I think...

3 files are necessary cookieconsent.css, cookieconsent.js and cookieconsent-init.js

Running code for a javascript solution is:

download cookieconsent.css and cookieconsent.js from https://github.com/orestbida/cookieconsent/tree/master/src
copy&paste the code below into a text file, save and name it cookieconsent-init.js (at the and of the post)
save all 3 files to the directory where your index.html is
run index.html:

<!doctype html>
<html lang="en">
<head>
    <!-- head content -->
    <title>Cookie Seite</title>
    <link rel="stylesheet" href="cookieconsent.css" />
    <script src="cookieconsent.js" defer></script>
</head>
<body class="text-center">
    <script defer src="cookieconsent-init.js"></script>
</body>

What I managed in nicegui to get work is: an uploading an external file with injection of html into page, injection and running css-file, example:
External file: test.py, save in directory where main.py is:

    // INJECTING THE HTML
      document.querySelector('body').innerHTML += '<div id="injection">Hello World</div>'; 
      // CSS INJECTION FUNCTION
      //https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
      // INJECT THE CSS INTO FUNCTION
      // Write the css as you normally would... but treat it as strings and concatenate for multilines
      insertCss( 
        '#injection {color :red; font-size: 30px;}' +
        'body {background-color: lightblue;}'
        )
     function insertCss( code ) {
          var style = document.createElement('style');
          style.type = 'text/css';
          style.innerHTML = code;
          document.getElementsByTagName("head")[0].appendChild( style );
      }

code main.py

from pathlib import Path
from nicegui import app, ui
async def alert():
    folder = Path(__file__).resolve().parent
    test_file = open(str(folder) + "/test.py", "r")
    test = test_file.read()
    test_file.close()
    print ("test ", test)
    await ui.run_javascript(test, respond=False)
app.on_connect(alert)
ui.run()

Code for integrating cookieconsent so far is (to run cookieconsent.js without css-file you have to look for the part 'Make modal by default hidden..' and comment out //* ... */ the following 2 code lines, looks ugly at index.html but works)

main.py

from pathlib import Path
from nicegui import app, ui
async def alert():
    folder = Path(__file__).resolve().parent
    css_file = open(str(folder) + "/cookieconsent.css", "r")
    csstest = css_file.read()
    css_file.close()
#    print ("inside css ", csstest)
    js_file = open(str(folder) + "/cookieconsent.js", "r")
    jstest = js_file.read()
    js_file.close()
#    print ("inside js ", jstest)
    js_init_file = open(str(folder) + "/cookieconsent-init.js", "r")
    js_init_test = js_init_file.read()
    js_init_file.close()
#    print ("inside js_init ", js_init_test)
    await ui.run_javascript(jstest, respond=False)
    await ui.run_javascript(js_init_test, respond=False)
app.on_connect(alert)
ui.run()

It does not look that much but it was a long journey to get there. Code does not show anything but I think it's there but not visible at least browser tools shows code.

I will go on but maybe is someone here to speed up a little?
Would be so cool - thank you
Markus

cookieconsent-init.js

var cc = initCookieConsent();
var logo = '';
var cookie = 'cookie';

// run plugin with config object
cc.run({
    current_lang : 'de',
    autoclear_cookies : true,                   // default: false
    cookie_name: 'cc_cookie_demo1',             // default: 'cc_cookie'
    cookie_expiration : 365,                    // default: 182
    page_scripts: true,                         // default: false
    force_consent: true,
    gui_options: {
        consent_modal: {
            layout: 'bar',                      // box,cloud,bar
            position: 'bottom right',           // bottom,middle,top + left,right,center
            transition: 'slide'                 // zoom,slide
        },
        settings_modal: {
            layout: 'box',                      // box,bar
            // position: 'left',                // right,left (available only if bar layout selected)
            transition: 'slide'                 // zoom,slide
        }
    },
    onFirstAction: function(){
        console.log('onFirstAction fired');
    },
    onAccept: function (cookie) {
        console.log('onAccept fired ...');
    },
    onChange: function (cookie, changed_preferences) {
        console.log('onChange fired ...');
    },
    languages: {
        'de': {
            consent_modal: {
                title: cookie + ' Wir verwenden Cookies! ',
                description: 'Hallo, diese Website verwendet essentielle Cookies, um ihren ordnungsgemäßen Betrieb zu gewährleisten, und Tracking-Cookies, um zu verstehen, wie Sie mit ihr interagieren. Letztere werden nur nach Zustimmung gesetzt werden. <button type="button" data-cc="c-settings" class="cc-link">Zur Auswahl</button>',
                primary_btn: {
                    text: 'Alle akzeptieren',
                    role: 'accept_all'              // 'accept_selected' or 'accept_all'
                },
                secondary_btn: {
                    text: 'Alle ablehnen',
                    role: 'accept_necessary'        // 'settings' or 'accept_necessary'
                }
            },
            settings_modal: {
                title: logo,
                save_settings_btn: 'Einstellungen speichern',
                accept_all_btn: 'Alle akzeptieren',
                reject_all_btn: 'Alle ablehnen',
                close_btn_label: 'Schließen',
                cookie_table_headers: [
                    {col1: 'Name'},
                    {col2: 'Domain'},
                    {col3: 'Ablauf'},
                    {col4: 'Beschreibung'}
                ],
                blocks: [
                    {
                        title: 'Verwendung von Cookies',
                        description: 'Ich verwende Cookies, um die grundlegenden Funktionen der Website zu gewährleisten und um Ihr Online-Erlebnis zu verbessern. Sie können für jede Kategorie wählen, ob Sie sich ein- oder austragen möchten. Für weitere Einzelheiten zu Cookies und anderen sensiblen Daten lesen Sie bitte die vollständige <a href="#" class="cc-link">Datenschutzerklärung</a>.'
                    }, {
                        title: 'Notwendige Cookies',
                        description: 'Diese Cookies sind für das ordnungsgemäße Funktionieren meiner Website unerlässlich. Ohne diese Cookies würde die Website nicht richtig funktionieren',
                        toggle: {
                            value: 'necessary',
                            enabled: true,
                            readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                        }
                    }, {
                        title: 'Leistungs- und Analyse-Cookies',
                        description: 'Diese Cookies ermöglichen es der Website, sich an die von Ihnen in der Vergangenheit getroffenen Auswahlen zu erinnern',
                        toggle: {
                            value: 'analytics',     // there are no default categories => you specify them
                            enabled: false,
                            readonly: false
                        },
                        cookie_table: [
                            {
                                col1: '^_ga',
                                col2: '',
                                col3: '2 years',
                                col4: 'description ...',
                                is_regex: true
                            },
                       ]
                    }, {
                        title: 'Cookies für Werbung und Zielgruppenansprache',
                        description: 'Diese Cookies sammeln Informationen darüber, wie Sie die Website nutzen, welche Seiten Sie besucht und welche Links Sie angeklickt haben. Alle Daten sind anonymisiert und können nicht verwendet werden, um Sie zu identifizieren',
                        toggle: {
                            value: 'targeting',
                            enabled: false,
                            readonly: false
                        }
                    }, {
                        title: 'Weitere Informationen',
                        description: 'Haben Sie Fragen? Dann nehmen Sie mit uns Kontakt auf.',
                    }
                ]
            }
        }
    }
});

mukral · 2023-01-21T08:22:49Z

mukral
Jan 21, 2023
Author

Hi, I got a first solution that runs for me. At least the cookieconsent popup is visible and the buttons work so the cookieconsent-javascript is running. To check correct cookie-handling I have to make some more research.

It's not that difficult... I put all the scripts (css and js) together with necessary HTML and executed as internal scripts with ui.html()
For now it's not working with ui.on_connect() what is probably a problem because it's not session based (at least as far I understand all this stuff).

If someone is interested:

download the two files from https://github.com/orestbida/cookieconsent/tree/master/src
copy&paste the code at the end of the first post into a file and name it cookieconsent-init.js
save all three files into the directory where your main.py is
execute main.py
main.py

from pathlib import Path
from nicegui import app, ui
from starlette.requests import Request
@ui.page('/testpage')
def testpage(request: Request):
    folder = Path(__file__).resolve().parent
    a = """<!DOCTYPE html>
    <html>
    <head>
        <title>testindex</title>
        <style>
    """
    css_file = open(str(folder) + "/cookieconsent.css", "r")
    csstest = css_file.read()
    css_file.close()
    #    print ("inside css ", csstest)
    b = """
        </style>
    </head>
    <body>
        <!--<script defer src="test.js"></script> -->
        <script>
    """
    js_file = open(str(folder) + "/cookieconsent.js", "r")
    jstest = js_file.read()
    js_file.close()
    #    print ("inside js ", jstest)
    js_init_file = open(str(folder) + "/cookieconsent-init.js", "r")
    js_init_test = js_init_file.read()
    js_init_file.close()
    #    print ("inside js_init ", js_init_test)
    c ="""
        </script>
    </body>
    </html>

    """
    requestClientID='_' + str(request.client.host) + '_' + str(request.client.port)
    print('requestClientID', requestClientID)
    htmlTest = str(a) + str(csstest) + str(b) + str(jstest) + str(js_init_test) + str(c)
    ui.add_body_html(htmlTest)
    with ui.header().style('background-color: #3874c8').props('q-ma-none'):
            ui.label('testlabel')
ui.link('testseite', testpage)
ui.run()

0 replies

falkoschindler · 2023-01-23T09:04:39Z

falkoschindler
Jan 23, 2023
Maintainer

I converted this Q&A into an Idea because it would be nice to have support for cookieconsent built into NiceGUI.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Make cookieconsent run #258

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Make cookieconsent run #258

Uh oh!

Uh oh!

mukral Jan 19, 2023

Replies: 2 comments

Uh oh!

mukral Jan 21, 2023 Author

Uh oh!

falkoschindler Jan 23, 2023 Maintainer

mukral
Jan 19, 2023

mukral
Jan 21, 2023
Author

falkoschindler
Jan 23, 2023
Maintainer