Design fixes, agreement in md file

.gitignore

@@ -11,6 +11,7 @@ composer.phar
 
 # do not commit environment vars
 config/env
+config/legal.md
 
 # only keep folder
 cache/*

README.md

@@ -32,6 +32,7 @@ as dependencies.
 * Install composer
 * Change directory to project home
 * Copy `config/env.example` to `config/env` and adjust to your needs
+* Copy `config/legal.example.md` to `config/legal.md` and adjust to your needs
 * `composer install`
 * `php bin/phpmig migrate`
 
@@ -78,6 +79,9 @@ as dependencies.
 This app uses Symfony Translator. It's bootstraped in `Util\BootstrapHelper` and locales are placed under `data/locale/`. Adjust to your needs or help translating.
 
 ## Changelog ##
+- 0.2.0.1
+    - Design fixes
+    - GDPR adjustments (specify agreement in a `.md` file)
 - 0.1.3.3 to 0.2.0.0
     - update to latest yaml
     - Force to lower on email and username

composer.json

@@ -3,6 +3,7 @@
     "slim/slim": "^3.0",
     "monolog/monolog": "^1.18",
     "slim/twig-view": "^2.1",
+    "jralph/twig-markdown": "^2.0",
     "slim/flash": "^0.1.0",
     "wixel/gump": "^1.3",
     "curl/curl": "^1.4",

config/legal.example.md

@@ -0,0 +1,21 @@
+# Accountable
+
+```
+Contact data
+```
+
+# Preliminary
+
+- I agree that accepting the policies mentioned below are required in order to use the service.
+- I agree to not sue the operator of this (free) service for any misconfiguration concering any data protection laws.
+
+# Website
+
+- Cookies: This website uses small files called cookies to help the operator customise your experience. Cookies are small text files that are stored by the browser on your device. They allow websites to store things like user preferences. Functionality might be affected if you disable cookies for this website.
+- Registration: An email is stored (maximal: 7 days, typical: deleted after verification process is completed) and credentials (minimal: stored as long as the account exists, typical: check user JID against well-known spammer patterns) are stored.
+- Log: Access logs are not stored except for fixing bugs in case of an error or an attack on this service. Logs will be removed once the [log rotates](https://en.wikipedia.org/wiki/Log_rotation).
+
+# Using the service
+
+- [What data is processed?](https://wiki.xmpp.org/web/GDPR#Q1.1b_List_what_data_is_processed)
+- [How is data processing done?](https://wiki.xmpp.org/web/GDPR#Q1.1c_List_what_processing_is_done)

data/locale/messages.en.yml

@@ -20,26 +20,14 @@ sign.up.form.email.help: Only used for one time email verification, not persiste
 sign.up.form.email.placeholder: xyz@domain.tld
 sign.up.form.password: Password
 sign.up.form.password.placeholder: password
-sign.up.form.legalmodal.open: I've read the privacy policy and I agree to it.
-sign.up.form.legalmodal.header: Privacy Policy
-sign.up.form.legalmodal.text: |
-  <h5>Signing up process</h5>
-  <ul>
-    <li>Email (maximal: 7 days, typical: deleted after verification process is completed)</li>
-    <li>Credentials (minimal: stored as long as the account exists, typical: check user JID against well-known spammer patterns)</li>
-  </ul>
 
-  <h5>Using the service</h5>
+# Legal modal
-  <ul>
+legalmodal.open: I've read the agreement and I agree to it.
-    <li><a href="https://wiki.xmpp.org/web/GDPR#Q1.1b_List_what_data_is_processed">What data is processed?</a></li>
+legalmodal.title: Agreement
-    <li><a href="https://wiki.xmpp.org/web/GDPR#Q1.1c_List_what_processing_is_done">How is data processing done?</a></li>
-  </ul>
 
-  <h5>General</h5>
+# Cookie modal
-  <ul>
+cookiemodal.dismiss: "OK"
-    <li>I agree that accepting the privacy policy is required in order to use the service.</li>
+cookiemodal.message: "This website uses cookies to ensure you get the best experience."
-    <li>I agree to not sue the operator of this (free) service for any misconfiguration concering any data protection laws (e.g. the General Data Protection Regulation).</li>
-  </ul>
 
 # Verification
 verification.mail.subject: "%server%: jabber account verification"

public/css/cookieconsent.min.css

@@ -0,0 +1,6 @@
+.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
+.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
+.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
+@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
+.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
+.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

public/index.php

@@ -2,6 +2,8 @@
 
 use Auth\XmppAdapter;
 use Auth\XmppValidator;
+use Jralph\Twig\Markdown\Extension;
+use Jralph\Twig\Markdown\Parsedown\ParsedownExtraMarkdown;
 use Slim\Http\Request;
 use Slim\Http\Response;
 
@@ -83,6 +85,9 @@ $container['view'] = function ($container) use ($translator) {
     $view['flash'] = $container['flash'];
     $view['config'] = $container['config'];
     $view['currentUser'] = ($container['authenticator']->hasIdentity() ? $container['authenticator']->getIdentity() : NULL); // currentUser in Twig
+    $view->addExtension(new Extension( // markdown
+        new ParsedownExtraMarkdown
+    ));
     return $view;
 };
 

src/Control/Actions/SignUpAction.php

@@ -121,9 +121,19 @@ final class SignUpAction
             return $response->withRedirect('signup');
         }
 
+        // legal information
+        $legalFilePath = __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'config' . DIRECTORY_SEPARATOR;
+
+        if ($legalFile = file_exists($legalFilePath . 'legal.md')) {
+            $legalFileContent = file_get_contents($legalFilePath . 'legal.md');
+        } else {
+            $legalFileContent = file_get_contents($legalFilePath . 'legal.example.md');
+        }
+
         // render GET
         $this->view->render($response, 'signup.twig', [
             'title'     => $this->translator->trans('sign.up.title'),
+            'legal' => $legalFileContent
         ]);
 
         return $response;

src/View/base.twig

@@ -9,6 +9,7 @@
         <!-- CSS & fonts -->
         <link rel="stylesheet" href="{{ base_url() }}/css/bootstrap.min.css">
         <link rel="stylesheet" href="{{ base_url() }}/css/font-awesome.css">
+        <link rel="stylesheet" href="{{ base_url() }}/css/cookieconsent.min.css" />
 
         <!-- Custom styles for this template -->
         <style>
@@ -23,8 +24,7 @@
 
         #container {
             margin-top: 56px;
-            margin-left: 10px;
+            overflow-x: hidden;
-            margin-right: 10px;
         }
         </style>
     </head>
@@ -84,9 +84,8 @@
 
         <!-- Main content -->
         <div id="container">
-
             <div class="row">
-                <div class="col-md-7 mx-auto">
+                <div class="col-md-6 mx-auto">
                     {% if flash is not empty %}
                         <div id="flashMessage">
                             {% if flash.getMessage('info').0 %}
@@ -114,7 +113,7 @@
             </div>
 
             <div class="row">
-                <div class="col-md-7 mx-auto">
+                <div class="col-md-6 mx-auto">
                     {% block content %}
                     {% endblock %}
                 </div>
@@ -131,5 +130,25 @@
             $(".alert-info" ).delay(10000).fadeOut(300);
         </script>
 
+    <script src="{{ base_url() }}/js/cookieconsent.min.js"></script>
+    <script>
+        window.addEventListener("load", function(){
+            window.cookieconsent.initialise({
+                "palette": {
+                    "popup": {
+                        "background": "#252e39"
+                    },
+                    "button": {
+                        "background": "#14a7d0"
+                    }
+                },
+                "content": {
+                    "message": "{{ 'cookiemodal.message'|trans }}",
+                    "dismiss": "{{ 'cookiemodal.dismiss'|trans }}",
+                    "href": "/signup"
+                }
+            })});
+    </script>
+
     </body>
 </html>

src/View/signup.twig

@@ -35,7 +35,7 @@
 
             <div class="form-check">
                 <input type="checkbox" id="legal" name="legal" class="form-check-input" />
-                <label class="form-check-label" for="legal"><a href="#" data-target="#legalModal" data-toggle="modal">{% trans %}sign.up.form.legalmodal.open{% endtrans %}</a></label>
+                <label class="form-check-label" for="legal"><a href="#" data-target="#legalModal" data-toggle="modal">{% trans %}legalmodal.open{% endtrans %}</a></label>
             </div>
             <br />
             <input class="btn btn-primary" type="submit" name="signup_button" value="{% trans %}sign.up.form.button{% endtrans %}"/>
@@ -47,13 +47,13 @@
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">{% trans %}sign.up.form.legalmodal.header{% endtrans %}</h5>
+                    <h5 class="modal-title">{% trans %}legalmodal.title{% endtrans %}</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div class="modal-body">
-                    <p>{{ 'sign.up.form.legalmodal.text'|trans|raw }}</p>
+                    <p>{{ legal|markdown }}</p>
                 </div>
             </div>
         </div>