feat(webapp): adds donation page

webapp/src/App.vue

@@ -71,7 +71,7 @@
           </p>
         </div>
         <div>
-          <p>Please Donate! 💛</p>
+          <p>Please <router-link :to="{name: 'donate'}">donate</router-link>! 💛</p>
           <p>
             European Bank Account:<br>
             IBAN: DE91&nbsp;8306&nbsp;5408&nbsp;0004&nbsp;1580&nbsp;59<br>

webapp/src/router/index.js

@@ -33,6 +33,11 @@ const routes = [
     name: 'docs',
     beforeEnter(to) { location.href = to.path },
   },
+  {
+    path: '/donate/',
+    name: 'donate',
+    component: () => import('../views/Donate.vue')
+  },
   {
     path: '/impressum/',
     name: 'impressum',

webapp/src/views/Donate.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-container>
+    <h1>Donate to deSEC</h1>
+    <h2>You like deSEC? Donate now to support us in our mission. Your donation shows us we're on the right track.</h2>
+    <v-row>
+      <v-col col="12" lg="4">
+        <v-card>
+          <v-toolbar
+                  color="primary"
+                  dark
+                  flat
+          >
+            <v-toolbar-title>Support deSEC's quest to make the Internet more secure!</v-toolbar-title>
+          </v-toolbar>
+          <v-card-text>
+            <p>
+              deSEC is dedicated to enhance the security of data transmission via the Internet, by introducing
+              state-of-the art encryption technology. Sensitive client data is stored only in Germany, and safely
+              protected from unauthorized access by criminals or government agencies. Your donation is used to improve
+              our technical infrastructure for our free dynDNS service and ensures its smooth operation.
+            </p>
+            <p>
+              Your donation gives you a way to say "Thanks!". It also supports the future developments of our services
+              which make the Internet more secure. If you would like to contribute to this, or if you are simpliy
+              excited about our free dynDNS service, please support us with your donation and encourage others to do
+              alike!
+            </p>
+            <p>
+              deSEC e.V. is registered as charity organization, so if you pay taxes in Germany, you may be able to use
+              your donation in your tax declaration. We automatically issue donations receipts for donations over 200€;
+              for donations below that the receipt is not needed to claim the tax deduction.
+            </p>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <v-card>
+          <v-toolbar
+                  color="primary"
+                  dark
+                  flat
+          >
+            <v-toolbar-title>Donate via Bank Transfer (SEPA)</v-toolbar-title>
+          </v-toolbar>
+          <v-card-text>
+            <p>We happily accept donations via bank transfer. Please use the following account details.</p>
+            <v-simple-table>
+              <tbody>
+              <tr>
+                <td>Recipient</td>
+                <td class="fixed-width">deSEC e.V.</td>
+              </tr>
+              <tr>
+                <td>IBAN</td>
+                <td class="fixed-width">DE91 8306 5408 0004 1580 59</td>
+              </tr>
+              <tr>
+                <td>BIC</td>
+                <td class="fixed-width">GENODEF1SLR</td>
+              </tr>
+              </tbody>
+            </v-simple-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <v-card>
+          <v-toolbar
+                  color="primary"
+                  dark
+                  flat
+          >
+            <v-toolbar-title>Donate in Some Other Way</v-toolbar-title>
+          </v-toolbar>
+          <v-card-text>
+            <p></p>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style lang="scss">
+  .fixed-width {
+    font-family: monospace;
+  }
+</style>

webapp/src/views/DynSetup.vue

@@ -149,11 +149,7 @@
               If you like our service, please consider donating.
             </p>
             <p>
-              <v-btn
-                      block
-                      outlined
-                      :to="{name: 'signup'}"
-              >Donate</v-btn> <!-- TODO -->
+              <v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
             </p>
           </v-card-text>
           <v-card-actions>