new footer with privacy policy

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "privacy.sexy",
-  "version": "0.1.0",
+  "version": "0.4.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9792,6 +9792,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz",
@@ -12164,6 +12169,14 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-js-modal": {
+      "version": "2.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.0-rc.3.tgz",
+      "integrity": "sha512-Q9L9FsIUMuzCKSuB41D8LxV+Yc2q+zWHzzUdWaQ2KeHPS+78+X6AAnBztVoophbjt8UXHO7rQSRgER1MMw5qsw==",
+      "requires": {
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "vue-loader": {
       "version": "15.8.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.8.3.tgz",

package.json

@@ -25,6 +25,7 @@
     "v-tooltip": "^2.0.2",
     "vue": "^2.6.11",
     "vue-class-component": "^7.1.0",
+    "vue-js-modal": "^2.0.0-rc.3",
     "vue-property-decorator": "^8.3.0"
   },
   "devDependencies": {

src/App.vue

@@ -5,7 +5,7 @@
           <TheSearchBar class="row" />
           <TheScripts class="row"/>
           <TheCodeArea class="row" theme="xcode" />
-          <TheCodeButtons class="row" />
+          <TheCodeButtons class="row code-buttons" />
           <TheFooter />
       </div>
    </div>
@@ -67,6 +67,10 @@ body {
     .row {
       margin-bottom: 10px;
     }
+
+    .code-buttons {
+      padding-bottom: 10px;
+    }
   }
 }
 

src/presentation/Bootstrapping/ApplicationBootstrapper.ts

@@ -1,3 +1,4 @@
+import { VModalBootstrapper } from './Modules/VModalBootstrapper';
 import { TreeBootstrapper } from './Modules/TreeBootstrapper';
 import { IconBootstrapper } from './Modules/IconBootstrapper';
 import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
@@ -19,6 +20,7 @@ export class ApplicationBootstrapper implements IVueBootstrapper {
             new TreeBootstrapper(),
             new VueBootstrapper(),
             new TooltipBootstrapper(),
+            new VModalBootstrapper(),
         ];
     }
 }

src/presentation/Bootstrapping/Modules/VModalBootstrapper.ts

@@ -0,0 +1,8 @@
+import VModal from 'vue-js-modal';
+import { VueConstructor, IVueBootstrapper } from './../IVueBootstrapper';
+
+export class VModalBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        vue.use(VModal, { dynamic: true, injectModalsContainer: true });
+    }
+}

src/presentation/TheFooter.vue

@@ -1,20 +1,41 @@
 <template>
-    <div id="footer">
-        {{text}}
+  <div class="footer">
+    <div class="item">
+      <a :href="releaseUrl" target="_blank">{{ version }}</a>
+      </div>
+    <div class="item">
+      <a @click="$modal.show(modalName)">Privacy</a> <!-- href to #privacy to avoid scrolling to top -->
+    </div>
+    <modal :name="modalName" height="auto" :scrollable="true" :adaptive="true">
+      <div class="modal">
+        <ThePrivacyPolicy class="modal__content"/>
+        <div class="modal__close-button">
+          <font-awesome-icon :icon="['fas', 'times']"  @click="$modal.hide(modalName)"/>
+        </div>
+      </div>
+    </modal>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { StatefulVue } from './StatefulVue';
+import ThePrivacyPolicy from './ThePrivacyPolicy.vue';
 
-@Component
+@Component({
+  components: {
+    ThePrivacyPolicy,
+  },
+})
 export default class TheFooter extends StatefulVue {
-  private text: string = '';
+  private readonly modalName = 'privacy-policy';
+  private version: string = '';
+  private releaseUrl: string = '';
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
-    this.text = `v${state.app.version}`;
+    this.version = `v${state.app.version}`;
+    this.releaseUrl = `${state.app.repositoryUrl}/releases/tag/${state.app.version}`;
   }
 }
 </script>
@@ -22,10 +43,45 @@ export default class TheFooter extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/fonts.scss";
-#footer {
-    color: $gray;
-    font-size: 0.7em;
-    font-family: $artistic-font;
-    text-align: center;
+.footer {
+    display: flex;
+    color: $dark-gray;
+    font-size: 1rem;
+    font-family: $normal-font;
+    align-self: center;
+    
+    a {
+      color:inherit;
+      text-decoration: underline;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .item:not(:first-child)::before {
+      content: "|";
+      padding: 0 5px;
+    }
+}
+.modal {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+
+    &__content {
+      width: 100%;
+    }
+
+    &__close-button {
+      width: auto;
+      font-size: 1.5em;
+      margin-right:0.25em;
+      align-self: flex-start;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.9;
+      }
+    }
 }
 </style>

src/presentation/ThePrivacyPolicy.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="privacy-policy">
+        <div class="line">
+            <div class="line__emoji">🚫🍪</div>
+            <div>No cookies!</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">🚫👀</div>
+            <div>No user behavior / IP adress collection!</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">🤖</div>
+            <div>Website is deployed automatically from master branch
+            of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">📈</div>
+            <div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
+            are collected by AWS but they cannot be related to you or your behavior.</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">🎉</div>
+            <div>As almost no data is colected, the website gets better only with your active feedback.
+            Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+
+@Component
+export default class TheFooter extends StatefulVue {
+  private repositoryUrl: string = '';
+  private feedbackUrl: string = '';
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    this.repositoryUrl = state.app.repositoryUrl;
+    this.feedbackUrl = `${state.app.repositoryUrl}/issues`;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/fonts.scss";
+.privacy-policy {
+    display: flex;
+    flex-direction: column;
+    font-family: $normal-font;
+    text-align:center;
+
+    .line {
+        display: flex;
+        flex-direction: column;
+
+        &:not(:first-child) {
+          margin-top:0.2rem;
+        }
+    }
+
+    a {
+      color:inherit;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+}
+</style>