Educator version

Makefile

@@ -68,8 +68,8 @@ release-version: .env
 
 docker-compose.yml: base.yml $(DEPLOY_ENVIRONMENT).yml config.mk $(DB_DATA_PATH) $(DATA_DUMP_PATH) $(LOG_DATA_PATH) $(DYNAMIC_SETTINGS_PATH) secrets $(PGPASS_PATH) release-version
 	case "$(DEPLOY_ENVIRONMENT)" in \
-	  dev|staging|prod) docker compose -f base.yml -f "$(DEPLOY_ENVIRONMENT).yml" config > docker-compose.yml;; \
-	  *) echo "invalid environment. must be either dev, staging or prod" 1>&2; exit 1;; \
+	  dev|staging|prod|learn) docker compose -f base.yml -f "$(DEPLOY_ENVIRONMENT).yml" config > docker-compose.yml;; \
+	  *) echo "invalid environment. must be either dev, staging, prod, or learn" 1>&2; exit 1;; \
 	esac
 
 .PHONY: build

client/package.json

@@ -24,6 +24,7 @@
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.21.2",
     "calendar-link": "^2.0.8",
+    "chart.js": "^4.4.4",
     "colyseus.js": "^0.14.12",
     "howler": "^2.2.3",
     "jquery": "^3.5.1",
@@ -32,6 +33,7 @@
     "popper.js": "^1.16.0",
     "vue": "2.7",
     "vue-carousel-3d": "^1.0.1",
+    "vue-chartjs": "^5.3.1",
     "vue-class-component": "^7.2.6",
     "vue-gtag": "^1.16.1",
     "vue-meta": "^2.4.0",

client/src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <b-container class="h-100 p-0 m-0 bg" fluid>
     <b-row no-gutters class="h-100 w-100">
-      <Navbar v-if="!isGamePage"></Navbar>
+      <span v-if="!isGamePage">
+        <EducatorNavbar v-if="isEducatorMode"></EducatorNavbar>
+        <Navbar v-else></Navbar>
+      </span>
       <router-view :class="bodyClass" :key="topLevelPath"></router-view>
     </b-row>
   </b-container>
@@ -11,6 +14,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import BootstrapVue from "bootstrap-vue";
 import Navbar from "@port-of-mars/client/components/global/Navbar.vue";
+import EducatorNavbar from "@port-of-mars/client/components/global/EducatorNavbar.vue";
 import Footer from "@port-of-mars/client/components/global/Footer.vue";
 import {
   GAME_PAGE,
@@ -20,12 +24,14 @@ import {
   ABOUT_PAGE,
   PRIVACY_PAGE,
 } from "@port-of-mars/shared/routes";
+import { isEducatorMode } from "@port-of-mars/client/util";
 import _ from "lodash";
 Vue.use(BootstrapVue);
 
 @Component({
   components: {
     Navbar,
+    EducatorNavbar,
     Footer,
   },
 })
@@ -41,6 +47,10 @@ export default class App extends Vue {
     return this.$route.path.split("/")[1];
   }
 
+  get isEducatorMode() {
+    return isEducatorMode();
+  }
+
   get isGamePage() {
     if (_.isNil(this.$route.name)) {
       return false;

client/src/api/auth/request.ts

@@ -0,0 +1,110 @@
+import { url } from "@port-of-mars/client/util";
+import { TStore } from "@port-of-mars/client/plugins/tstore";
+import { AjaxRequest } from "@port-of-mars/client/plugins/ajax";
+import {
+  CLASSROOM_LOBBY_PAGE,
+  CONSENT_PAGE,
+  FREE_PLAY_LOBBY_PAGE,
+  STUDENT_CONFIRM_PAGE,
+  TEACHER_DASHBOARD_PAGE,
+} from "@port-of-mars/shared/routes";
+import VueRouter from "vue-router";
+
+export class AuthAPI {
+  constructor(public store: TStore, public ajax: AjaxRequest, public router: VueRouter) {}
+
+  async devLogin(formData: { username: string; password: string }, shouldSkipVerification = true) {
+    try {
+      const devLoginUrl = url(`/auth/dev-login?shouldSkipVerification=${shouldSkipVerification}`);
+      await this.ajax.post(
+        devLoginUrl,
+        ({ data, status }) => {
+          if (status === 200) {
+            this.store.commit("SET_USER", data.user);
+            // FIXME: not terribly important but we might want to move to the tournament dashboard if isTournamentEnabled
+            if (data.user.isVerified) this.router.push({ name: FREE_PLAY_LOBBY_PAGE });
+            else this.router.push({ name: CONSENT_PAGE });
+          } else {
+            return data;
+          }
+        },
+        formData
+      );
+    } catch (e) {
+      console.log("Unable to login");
+      console.log(e);
+      throw e;
+    }
+  }
+
+  async studentLogin(classroomAuthToken: string) {
+    try {
+      const loginUrl = url("/auth/student-login");
+      await this.ajax.post(
+        loginUrl,
+        ({ data, status }) => {
+          if (status === 200) {
+            this.store.commit("SET_USER", data.user);
+            this.router.push({ name: STUDENT_CONFIRM_PAGE });
+          } else {
+            throw new Error(data.message || "Login failed");
+          }
+        },
+        { classroomAuthToken, password: "unused" }
+      );
+    } catch (e) {
+      console.log("Unable to login");
+      console.log(e);
+      throw e;
+    }
+  }
+
+  async studentRejoin(rejoinCode: string) {
+    try {
+      const rejoinUrl = url("/auth/student-rejoin");
+      await this.ajax.post(
+        rejoinUrl,
+        ({ data, status }) => {
+          if (status === 200) {
+            console.log(data);
+            this.store.commit("SET_USER", data.user);
+            if (data.user.isVerified) {
+              console.log("Student verified");
+              this.router.push({ name: CLASSROOM_LOBBY_PAGE });
+            } else {
+              console.log("Student not verified");
+              this.router.push({ name: STUDENT_CONFIRM_PAGE });
+            }
+          } else {
+            throw new Error(data.message || "Rejoin failed");
+          }
+        },
+        { rejoinCode, password: "unused" }
+      );
+    } catch (e) {
+      console.log("Unable to rejoin", e);
+      throw new Error("Invalid rejoin code");
+    }
+  }
+
+  async teacherLogin(formData: { username: string; password: string }) {
+    try {
+      const loginUrl = url("/auth/teacher-login");
+      await this.ajax.post(
+        loginUrl,
+        ({ data, status }) => {
+          if (status === 200) {
+            this.store.commit("SET_USER", data.user);
+            this.router.push({ name: TEACHER_DASHBOARD_PAGE });
+          } else {
+            throw new Error(data.message || "Login failed");
+          }
+        },
+        formData
+      );
+    } catch (e) {
+      console.log("Unable to login", e);
+      throw new Error("Invalid username or password");
+    }
+  }
+}