feat: add educator privacy page

client/src/components/global/EducatorNavbar.vue

@@ -29,6 +29,15 @@
         >
           Manual
         </b-nav-item>
+        <b-nav-item
+          class="mx-2"
+          :to="educatorPrivacy"
+          target="_blank"
+          exact-active-class="active"
+          title="Educator Privacy Page"
+        >
+          Privacy Policy
+        </b-nav-item>
         <b-nav-item
           v-if="isStudent && isVerified"
           class="mx-2"
@@ -83,6 +92,7 @@ import {
   STUDENT_LOGIN_PAGE,
   CLASSROOM_LOBBY_PAGE,
   TEACHER_DASHBOARD_PAGE,
+  EDUCATOR_PRIVACY_PAGE,
 } from "@port-of-mars/shared/routes";
 
 @Component({})
@@ -108,6 +118,7 @@ export default class Navbar extends Vue {
   studentLogin = { name: STUDENT_LOGIN_PAGE };
   classroomLobby = { name: CLASSROOM_LOBBY_PAGE };
   teacherDashboard = { name: TEACHER_DASHBOARD_PAGE };
+  educatorPrivacy = { name: EDUCATOR_PRIVACY_PAGE };
 
   get username() {
     return this.$tstore.state.user.username;

client/src/router.ts

@@ -26,6 +26,7 @@ import StudentLogin from "@port-of-mars/client/views/StudentLogin.vue";
 import StudentConfirm from "@port-of-mars/client/views/StudentConfirm.vue";
 import ClassroomLobby from "@port-of-mars/client/views/ClassroomLobby.vue";
 import TeacherDashboard from "@port-of-mars/client/views/TeacherDashboard.vue";
+import EducatorPrivacy from "@port-of-mars/client/views/EducatorPrivacy.vue";
 import store from "@port-of-mars/client/store";
 import { isEducatorMode } from "@port-of-mars/client/util";
 import {
@@ -50,6 +51,7 @@ import {
   STUDENT_CONFIRM_PAGE,
   CLASSROOM_LOBBY_PAGE,
   TEACHER_DASHBOARD_PAGE,
+  EDUCATOR_PRIVACY_PAGE,
 } from "@port-of-mars/shared/routes";
 
 Vue.use(VueRouter);
@@ -186,6 +188,7 @@ function getEducatorRouter() {
       { ...PAGE_META[STUDENT_CONFIRM_PAGE], component: StudentConfirm },
       { ...PAGE_META[CLASSROOM_LOBBY_PAGE], component: ClassroomLobby },
       { ...PAGE_META[TEACHER_DASHBOARD_PAGE], component: TeacherDashboard },
+      { ...PAGE_META[EDUCATOR_PRIVACY_PAGE], component: EducatorPrivacy },
     ],
   });
 

client/src/views/EducatorPrivacy.vue

@@ -0,0 +1,68 @@
+<template>
+  <b-container fluid class="h-100 m-0 p-0 bg-content">
+    <div id="privacy-policy" class="p-5">
+      <h1>Privacy Policy</h1>
+      <hr />
+      <!-- FIXME: update links for eduator version -->
+      <p>
+        This Privacy Policy explains how we collect, use, and share personal information when you
+        visit our website,
+        <a href="https://portofmars.asu.edu/">portofmars.asu.edu/ educator ??</a>.
+      </p>
+      <p>
+        By using our website, you agree to the collection, use, and sharing of your personal
+        information as described in this Privacy Policy. If you do not agree with our policies and
+        practices, do not use our website.
+      </p>
+
+      <h4>Information We Collect</h4>
+      <p></p>
+
+      <h4>How We Use Your Information</h4>
+      <p></p>
+
+      <h4>Sharing Your Information</h4>
+      <p></p>
+
+      <h4>Your Rights</h4>
+      <p></p>
+
+      <h4>Data Retention</h4>
+      <p></p>
+      <h4>Changes to our Privacy Policy</h4>
+      <p></p>
+      <h4>Contact Us</h4>
+      <p>
+        If you have any questions or concerns about our Privacy Policy or the collection, use, or
+        sharing of your personal information, please contact us at
+        <a :href="`mailto:${$settings.CONTACT_EMAIL}`">{{ $settings.CONTACT_EMAIL }}</a
+        >.
+      </p>
+    </div>
+    <Footer></Footer>
+  </b-container>
+</template>
+
+<script lang="ts">
+import { Component, Inject, Vue, Provide } from "vue-property-decorator";
+import { Client } from "colyseus.js";
+
+export default class educatorPrivacy extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+#privacy-policy {
+  max-width: 1200px;
+  margin: auto;
+}
+
+h4,
+ul,
+p {
+  color: #fff;
+}
+
+ul {
+  padding-left: 2rem;
+}
+</style>