datenanfragen / website

The Datenanfragen.de website including the request PDF generator and company information database

The Datenanfragen.de website

This repository contains the source code for the Datenanfragen.de website.

Datenanfragen.de is an open source project by Datenanfragen.de e. V., a registered non-profit from Germany. We have made it our mission to help you exercise your right to privacy.
Through our website, we offer a generator for GDPR requests as well as access to our company and supervisory authority database (see this repository for the source behind this data) and comprehensive articles on the GDPR and privacy in general.

Live versions of the website are currently available in German, English, French, Spanish, Croatian, Dutch, Portuguese, and Czech.

Development

Datenanfragen.de is designed as a static website, running on Hugo and Preact.

To build the project locally for development, follow these steps:

1. Install Yarn 1 (Classic) and the extended(!) version of Hugo (v0.88.1).
2. Clone the repo and run yarn in the root directory of the repo to fetch all required dependencies.
3. Run the deploy script (./deploy.sh) to fetch and prepare the required resources from our data repository.
4. Open two terminal windows. In the first, run yarn dev to start the Webpack file watcher, which will automatically build the JS files. In the second one, run hugo server to have Hugo continuously build the actual website and the SCSS.
5. Now the website should be served by Hugo on multiple ports, starting from 1313, for the different language versions.

We recommend building and developing on Linux or macOS. If you are on Windows, use WSL.

Windows development tips

Developing on Windows inside WSL

• Install ripgrep to speed up the merge conflict commit hook.
• Developing tests with Cypress requires a GUI, which might not work with WSL.

Developing on Windows outside of WSL

• We do not recommend this, but it's possible.
• You need to run the deploy.sh script once via some bash-like tool. Use WSL or Git Bash.
• Use Node LTS and not the latest Node release (otherwise you might get Python errors).
• To get around file name limitations (#581), run $env:HUGO_DISABLEALIASES="true" in the terminal that will run hugo.
• Please make sure to only commit LF line endings. Configure your IDE or Git accordingly, or use some conversion tool.
• Some commit hooks might not work on Windows. You can use git commit --no-verify carefully to get around this.

macOS development tips

Increase the maximum file limit for processes

Because hugo server registers a file watcher for every file in our repo and the number of files can get very large, you might get file watcher related errors. To fix, increase the file limit for processes on your computer (this change is temporary until you restart):

sudo sysctl -w kern.maxfiles=65536

The production builds are done automatically by CircleCI using the deploy.sh script and deployed using dattel, our own static hosting solution (split into a server and client).

For testing, we use CircleCI in combination with Cypress (see more on our browser tests here). We previously used BrowserStack who kindly let us use their services.

Contributing

First of all, thank you very much for taking the time to contribute! Contributions are incredibly valuable for a project like ours.

We warmly welcome issues and pull requests through GitHub. You can also chat with us through our Matrix space. Feel free to ask questions, pitch your ideas, or just talk with the community.

Please be aware that by contributing, you agree for your work to be released under the MIT license, as specified in the LICENSE file.

If you are interested in contributing in other ways besides coding, we can also really use your help. Have a look at our contribute page for more details.

Translations

While you can just contribute translations through this repository, an easier way is through the localisation platform Weblate. We manage our translations through them. There, you can easily help us translate—be it a couple of strings or whole components.

If you're interested in chatting about our translation efforts, join our i18n room on Matrix.

website's Issues

Allow deleting individual saved requests

On the "My requests" page (/my-requests), there is currently only the option of deleting all saved requests.

There should be a delete button next to each request (in a new column), allowing the user to delete individual requests.
We already have a delete button design (in the wizard, for example). This should be used here, as well.

In addition, the user should be able to delete multiple requests at once (the selected ones), just like they can export the selected requests.

French translation

Hi! I recently translated the whole website into French on Weblate, but I haven't the rights to validate my own translation. Could you check please?

I left a few comments too. Can you please have a look on it?

Otherwise I'm glad to contribute to this project. I think it can be a very useful tool. If there is anything I can do to help more let me know. You may be interested in adding data for France, as the French translation will be available.

Right to object

I think it would be a valuable addition to the site to generate "Right to object" letters.

Often we interact with companies that for various reasons we want to have and process our data, however by default these companies also process our data for the purpose of things like direct marketing etc.

According to the GDPR we are able to object to the processing of this data, but how to do so isn't always clear.

For example, the Austrian bank Sparkasse, has a detailed section on how they process our data and they state that we can object, but as a lay-person I'm not sure how to effectively formulate a letter that states I object to their use of my data for particular purposes.

Create "Contributors" page

Would be great to have somewhere to credits contributors on the website and maybe in this repo too.
It could be separated between "Developers", "Translators" etc.

Indicate when we consider a request done

When working with the wizard, it is sometimes easy to forget if you have sent the request that is currently open already (especially when pausing for a while).

Since we already have a point at which we consider a request 'done', we should simply indicate that to the user (by changing the color of the button or something similar).

Translate Hugo menus through the translation files

Is there a way to still add the necessary translations to the files nevertheless? I mean, for French it might be possible to do it ourselves but for any other language we need those strings translated as well.

Originally posted by @zner0L in #161

"Your GDPR Rights" link broken on German site

Clicking "Weiterlesen..." button on front page of German site redirects to 404 as it links to "https://www.datenanfragen.de/blog/your-gdpr-rights" instead of "https://www.datenanfragen.de/blog/deine-dsgvo-rechte/"

Remove the .txt replacer

Before datenanfragen/data#244 was fixed, we had .txt file extensions for custom templates in the database that we removed in the generator again. All occurrences of this can now be removed. They are all marked with TODO comments and should look something like this: .replace(/\.txt$/, '')

More inutitive use of the language chooser

This is, however, a little counter intuitive because now you have to select the language and then click anywhere to blur the select. Still better than two popups, though. Smarter solutions are very welcome!

Originally posted by @zner0L in #162 (comment)

For this to work I guess we have to reimplement onChange and do something smart to prevent the modal on opening twice if onBlur is triggered.

Bug: Saved signature is overridden on reset

In the generator, if the signature for the request is reset the blank signature is also save as the saved signature. This behavior is counter intuitive IMO. The expected behavior would be for the current request to have a blank signature field and the saved signature should be kept, if the reset button is clicked in the generator, but the saved signature is overridden, if the reset button is clicked on the saved id data page.

Make dropdown into a component

Also add aria-expanded to the content <div>.

Move the request storing to UserRequests

Currently, requests are just stored by calling Request::store() which directly accesses the storage. I would like only one class to make direct access to the storage: UserRequests, which acts like a wrapper for all request storing related stuff – apparently except the storing itself. So todos from this issue include:

• Create a method to store requests in UserRequests, e.g. UserRequests::storeRequest(). The logic for this is mostly already done in Request::store().
• Replace the code inside of Request::store() with a one- or twoliner that references the new method of UserRequests, similar to this line.

'Send email' button is disabled when trying to send new request after PDF request

Steps to reproduce:

• Open generator and select 'Fax' as transport medium
• Download PDF
• Click 'New request'
• Try to send email

The 'Send email' button is disabled but should be enabled.

On selecting an alphabet from the list of companies, the previous alphabet is highlighted

I've attached a screenshot of this behaviour, on clicking an an alphabet, say R, I am taken to the position with companies starting with R but Q is highlighted.

Bug: Changing the language

The confirmation box appears two times when user tries to switch the language

Tutorial at generator page step 1/4

At the generator page when it's showing the tutorial

It says on the right but the box is on the left.
I found the file to facilitate the fix. (good first issue for someone)

website/src/i18n/en.json
Line 319: "request-parameters": "<p>Alright, let’s start generating your requests. We will try our best to make this as easy as possible for you.</p><p>On the right, we have already prefilled the contact details for the first company.</p>"

I think it should have a class to show different strings
One for On the Left (Desktop) and one for On the Top (Mobile / Tablet)
Something like

<p class="desktop">On the left, we have already prefilled the contact details for the first company.</p><p class="mobile">On top, we have already prefilled the contact details for the first company.</p>

Add filter to company page

I suggest to add more filter to the company page (https://www.datenanfragen.de/company/)

Current

• Search for company name
• Jump to letter

Future

• filter by category
• filter by country

Generator: More logical order for the request parameters

The transport medium should really come before the recipient address input.

In addition, the address input should be changed to an email address input if 'email' is selected. We might also want to consider still showing the address in the company widget.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Rename the IdData class

Currently, a lot of things in our code are called "id data". As this is confusing we would like to have the name of the src/Utilities/IdData class refactored to SavedIdData. Please look thoroughly through the code and test it to check if the old name is still used anywhere.

Add "blog" link in French version

The blog entry is missing in the top menu

Clicking the description of a privacy control should toggle the checkbox

On the privacy controls page (/privacy-controls), clicking the description of a control should also the checkbox.

The relevant code is here.

Broken redirection after credit card donation

After donating via credit card the JS redirects to the wrong thanks page.

SavedIdData::mergeFields() does not merge fields with the same description

Automatically crop the signature

It would be great if we could crop the signature.

Whenever I tested the signature input, I found it quite hard to judge how much space was needed for my signature and often ended up with quite large margins (especially at the top and bottom) which look fairly ugly in the PDF.

Make the privacy controls use our custom checkbox styles

The checkboxes for the privacy controls (/privacy-controls) are currently using the default checkbox styles. We have our own checkbox styles, though. These should also be used here.

Essentially, this should boil down to adding the form-element class and maybe some minor layout tweaking to make sure things align nicely.

---

This is what they currently look like:

This is what they should look like:

(This is part of the "My saved data" page (/id-data-controls), relevant code is here).

"Direct Marketing Objection" generator generates "null" as subject

In the "Direct Marketing Objection" generator, when trying to generate an objection, the subject is set to null.
(In the case of email, the mailto: link begins with mailto:?subject=null (My reference: 2019-xxxxxx)&body=xxxxxxxxxxxxxxxxxx, where x is a placeholder.)

It apparently doesn't matter if English or German is used to generate the objection.
It apparently also doesn't matter what company/organisation the objection is generated for.
All other generators seem to work as intended.

Footer is missing on 404 page

I think it would be nice to keep it for more consistency and to guide the user if he is lost on the site.

Match format of generated JSON on suggestion page and company-json-generator

This is a nice-to-have proposal. Feel free to put it deep down the backlog.

When a user adds a suggestion on https://www.datenanfragen.de/suggest, the generated JSON differs from the generated JSON of https://github.com/datenanfragen/company-json-generator.
Specifically, on the former, the slug is at the end, while on the latter it's at the beginning.

I would suggest to move the slug of the generated JSON of https://www.datenanfragen.de/suggest to the beginning, as order of the company-json-generator form items is mostly aligned with the generated JSON.

Restructure content dir

We could structure our content more sensibly.

Suggestions:

• Use folders for i18n instead of filenames.
• Include images for a blog post in the corresponding content folder instead of in the static dir.

Edit Transparency page

The following sentence should modified after #209

We publish the complete constitution of our association on [this website]({{< ref "verein/constitution" >}}) and on GitHub.

website should be replaced by page (already done in French translation)

Blog post(s): Automatic data export features

Many services now offer automatic data download features. We should have blogs posts describing how to use them. These posts could maybe also include screencasts or at least screenshots of the process.

A list of services I can think of (although there are more of them):

• Twitter
• Facebook
• Apple
• Google
• Duolingo
• Spotify

These posts can be in English or German.

Honor request_language for warnings

When generating warnings with the generator, all messages are in the user's language, regardless of the request_language set in the company record. This needs to be corrected.

Suche funktioniert nicht

Unternehmen werden nicht gefunden (z.B. Amazon), obwohl sie offensichtlich in der Datenbank enthalten sind.

Kann Land nicht festlegen

Im Auswahlfenster wird mir kein Land angezeigt und unten auf der Seite kann ich das Land auch nicht ändern.

Format the dates in the "My requests" table

On the "My requests" page, the dates are currently formatted as an ISO 8601 string. While I personally absolutely prefer that date format, many users probably won't be used to it. Instead, we should format the date.

The way to go here is probably the toLocaleDateString function.

Some notes:

• Don't use the browser's locale but instead our internal one. You can access it using the global variables globals.country for the country and LOCALE (wrongly named) for the language.
• Pass the following options: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }

Add possibility to add several phone numbers to a company

It would be great to have the possibility to add several numbers for a company depending of the country. Sometimes some companies have a different number to call depending of the user country.

French translation (demandetesdonnees.fr)

Now that the French version is online I made a few translation adjustments via Weblate. Please update the French translation.

I had a few comments to make.

First there are some pages that seem not to be fully translatable:

• https://www.demandetesdonnees.fr/suggest
• https://www.demandetesdonnees.fr/contact

The "Blog" page redirects to a 404 error in the French version (https://www.demandetesdonnees.fr/blog).

This page too (https://www.demandetesdonnees.fr/blog/your-gdpr-rights).

The "Datenafragen.de" name is displayed instead of "demandetesdonnees.fr" on the 404 page.

When editing a company, the description that appears when hovering elements seems not to be translatable too.

Don't hesitate to mention me for further info.

Highlight non-default fields

When working with the wizard, one easily starts sending one request after another without really checking anything. That usually works well thanks to the ID data saving. It is an issue though when there is a non-default field. Those can be easily missed and just left blank. We should therefore highlight these somehow.

Blog post: Essential browser extensions for more privacy

This should include extensions like HTTPS Everywhere, Privacy Badger etc.

We should also strongly recommend using Firefox.

The post can be in English or German.

Translate GDPR cheat sheet blog post from German to English

We have a GDPR cheat sheet blog post (this file) that is essentially just a short explanation of important GDPR terms and topics.

That blog post is currently only available in German. We should translate it to English.

Write short introduction into the constitution

Since it is now not completely clear what the constitution is for for every user, I think we need some kind of introduction here.

Originally posted by @zner0L in #209

noindex the Netlify builds

The branch builds are also indexed by Google. Probably not a good idea.

id-data heading padding

The formatting on the Rectification request input field on the right handside for "My data" heading seems a little off. Seems like the correct padding is needed after the input field?

It is more prevelant in non-mobile resolutions.

Fix RSS support for Datenanfragen.de blog

Currently, https://www.datenanfragen.de/blog/ has no RSS support (afaik).
A rss/atom feed is an easy way to stay updated using a feed reader.

Create an act page for the Ada Health app

According to this article, an act page to delete your data from the Ada could prove useful to a lot of people: https://www.datenschutz-notizen.de/wer-diese-app-nutzt-hat-die-datenschutzbestimmungen-wohl-nicht-gelesen-1323636/

Only prompt for removal confirmation when a dynamic input actually contains user-entered data

company submission form claims successful submission even when it wasn't successful

Hi,
if the request to submit a new company fails in the background the site is still claiming it was submitted successfully:

Your contribution has been sent successfully. Thank you once again! We will now review it as soon as possible

This can easily be reproduced by installing uMatrix, which in default configuration doesn't allow requests to third party domains.

Don't add empty fields to the letter

If a user leaves an input empty, that field should not be added to the generated letter.

Investigate (and fix) Netlify build errors

Recently, our branch builds on Netlify have started failing sometimes with Hugo complaining about parser errors.

Example of the errors:

6:35:01 PM: Building sites …
6:35:02 PM: WARNING: make non-relative ref/relref page reference(s) in page "/blog/hacktoberfest-2019.de.md" absolute, e.g. {{< ref "/blog/my-post.md" >}}
6:35:05 PM: ERROR 2019/10/04 18:35:05 parse error:4:19: expected comma character or an array or object ending
6:35:05 PM:     4:   "name": Bundesinstitut für Berufsbildung (BIBB),
6:35:05 PM:                          ^
6:35:05 PM: ERROR 2019/10/04 18:35:05 parse error:24:4: expected comma character or an array or object ending
6:35:05 PM:    24: <script type="application/ld+json">
6:35:05 PM:           ^
6:35:05 PM: ERROR 2019/10/04 18:35:05 parse error:6:12: expected comma character or an array or object ending
6:35:05 PM:     6:   "name": 1&amp;1 Internet SE,
6:35:05 PM:                   ^
6:35:05 PM: ERROR 2019/10/04 18:35:05 parse error:19:5: expected comma character or an array or object ending
6:35:05 PM:    19:
6:35:05 PM:            ^
6:35:05 PM: Total in 3533 ms
6:35:05 PM: Error: Error building site: failed to render pages: parse error:3:55: expected comma character or an array or object ending
6:35:05 PM:     3:     const SUPPORTED_LANGUAGES = {"en": "https:\/\/deploy-preview-94--datenanfragen.netlify.com\/en\/company\/comvel\/",};
6:35:05 PM:                                                              ^

I have not been able to reproduce this issue locally and it also doesn't seem to affect the production builds (yet?).

From looking at the error messages, this might be related to commits cefbce6 and aa60b4d. Not sure though.

Examples of failing build logs:

• https://app.netlify.com/sites/datenanfragen/deploys/5d978ff38058a2b3da26f653
• https://app.netlify.com/sites/datenanfragen/deploys/5d942e9d04225d00088a0d0d
• https://app.netlify.com/sites/datenanfragen/deploys/5d92dd9287b4680008bed367
• https://app.netlify.com/sites/datenanfragen/deploys/5d918a4400b31f0008ef6001
• https://app.netlify.com/sites/datenanfragen/deploys/5d845a0d3ef38c000a128524

List of all build logs: https://app.netlify.com/sites/datenanfragen/deploys