feat: create pages for red tape (#156) (#158)

frontend/src/components/HeaderDefault.vue

@@ -19,9 +19,27 @@ import UserProfileButton from '@/components/UserProfileButton.vue'
     </v-toolbar-title>
     <v-spacer></v-spacer>
     <v-toolbar-items class="topbar-links">
-      <v-btn id="about" to="/about"> About </v-btn>
-      <v-btn id="contact" to="/contact"> Contact </v-btn>
       <UserProfileButton />
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
+        </template>
+
+        <v-list>
+          <v-list-item to="/about">
+            <v-list-item-title> About </v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/contact">
+            <v-list-item-title> Contact </v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/privacy">
+            <v-list-item-title> Privacy Policy </v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/terms">
+            <v-list-item-title> Terms of Use </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-toolbar-items>
   </v-app-bar>
 </template>

frontend/src/router/index.ts

@@ -10,8 +10,10 @@ import GenesListView from '@/views/GenesListView.vue'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import PathNotFound from '@/views/PathNotFound.vue'
+import PrivacyView from '@/views/PrivacyView.vue'
 import ProfileView from '@/views/ProfileView.vue'
 import SvDetailView from '@/views/SvDetailView.vue'
+import TermsView from '@/views/TermsView.vue'
 import VariantDetailView from '@/views/VariantDetailView.vue'
 
 const routes = [
@@ -30,6 +32,16 @@ const routes = [
     name: 'login',
     component: LoginView
   },
+  {
+    path: '/privacy',
+    name: 'privacy',
+    component: PrivacyView
+  },
+  {
+    path: '/terms',
+    name: 'terms',
+    component: TermsView
+  },
   {
     path: '/profile',
     name: 'profile',

frontend/src/views/PrivacyView.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import HeaderDefault from '@/components/HeaderDefault.vue'
+</script>
+
+<template>
+  <HeaderDefault />
+  <v-container class="privacy-view">
+    <v-row>
+      <v-col cols="12">
+        <h2 class="title">Privacy Policy</h2>
+        <p class="description">
+          See
+          <a href="https://www.bihealth.org/en/privacy" target="_blank">
+            privacy policy of the Berlin Institute of Health
+          </a>
+        </p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.privacy-view {
+  padding: 40px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+p {
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+</style>

frontend/src/views/TermsView.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import HeaderDefault from '@/components/HeaderDefault.vue'
+</script>
+
+<template>
+  <HeaderDefault />
+  <v-container class="terms-view">
+    <v-row>
+      <v-col cols="12">
+        <h2 class="title">Terms of Use</h2>
+        <p class="description">REEV is for research use only software</p>
+        <p class="description">
+          The software is provided "as is," without warranty of any kind, express or implied,
+          including but not limited to the warranties of merchantability, fitness for a particular
+          purpose, and noninfringement. In no event shall the authors or copyright holders be liable
+          for any claim, damages, or other liability, whether in an action of contract, tort, or
+          otherwise, arising from, out of, or in connection with the software or the use or other
+          dealings in the software.
+        </p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.terms-view {
+  padding: 40px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+p {
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+</style>