using modular sdk

.eslintrc.json

@@ -5,7 +5,6 @@
     "node": true
   },
   "globals": {
-    "firebase": "readonly",
     "$": "readonly",
     "jQuery": "readonly",
     "html2canvas": "readonly",

frontend/package.json

@@ -55,7 +55,7 @@
     "crypto-browserify": "^3.12.0",
     "damerau-levenshtein": "1.0.8",
     "date-fns": "2.28.0",
-    "firebase": "^8.4.2",
+    "firebase": "9.6.0",
     "howler": "^2.2.1",
     "html2canvas": "1.4.1",
     "node-object-hash": "2.3.10",

frontend/src/scripts/config.ts

@@ -8,6 +8,8 @@ import {
 } from "./config-validation";
 import * as ConfigEvent from "./observables/config-event";
 import DefaultConfig from "./constants/default-config";
+import { Auth } from "./firebase";
+import * as AnalyticsController from "./controllers/analytics-controller";
 
 export let localStorageConfig: MonkeyTypes.Config;
 export let dbConfigLoaded = false;
@@ -370,7 +372,7 @@ export function setPaceCaret(
   }
 
   if (document.readyState === "complete") {
-    if (val == "pb" && firebase.auth().currentUser === null) {
+    if (val == "pb" && Auth.currentUser === null) {
       Notifications.add("PB pace caret is unavailable without an account", 0);
       return false;
     }
@@ -1295,7 +1297,7 @@ export function setRandomTheme(
   }
 
   if (val === "custom") {
-    if (firebase.auth().currentUser === null) {
+    if (Auth.currentUser === null) {
       config.randomTheme = val;
       return false;
     }
@@ -1363,13 +1365,7 @@ export function setLanguage(language: string, nosave?: boolean): boolean {
   if (!isConfigValueValid("language", language, ["string"])) return false;
 
   config.language = language;
-  try {
-    firebase.analytics().logEvent("changedLanguage", {
-      language: language,
-    });
-  } catch (e) {
-    console.log("Analytics unavailable");
-  }
+  AnalyticsController.log("changedLanguage", { language });
   saveToLocalStorage("language", nosave);
   ConfigEvent.dispatch("language", config.language);
 

frontend/src/scripts/controllers/account-controller.js

@@ -23,14 +23,22 @@ import * as CommandlineLists from "../elements/commandline-lists";
 import * as TagController from "./tag-controller";
 import * as ResultTagsPopup from "../popups/result-tags-popup";
 import * as URLHandler from "../utils/url-handler";
-
-export const gmailProvider = new firebase.auth.GoogleAuthProvider();
+import {
+  EmailAuthCredential,
+  GoogleAuthProvider,
+  browserSessionPersistence,
+  browserLocalPersistence,
+  createUserWithEmailAndPassword,
+  sendEmailVerification,
+} from "firebase/auth";
+import { Auth } from "../firebase";
+export const gmailProvider = new GoogleAuthProvider();
 // const githubProvider = new firebase.auth.GithubAuthProvider();
 
 export function sendVerificationEmail() {
   Loader.show();
-  let cu = firebase.auth().currentUser;
-  cu.sendEmailVerification()
+  let cu = Auth.currentUser;
+  sendEmailVerification()
     .then(() => {
       Loader.hide();
       Notifications.add("Email sent to " + cu.email, 4000);
@@ -98,7 +106,7 @@ export async function getDataAndInit() {
     ResultFilters.load();
   });
 
-  let user = firebase.auth().currentUser;
+  let user = Auth.currentUser;
   if (!snapshot.name) {
     //verify username
     if (Misc.isUsernameValid(user.name)) {
@@ -251,7 +259,7 @@ async function loadUser(user) {
   }
 }
 
-const authListener = firebase.auth().onAuthStateChanged(async function (user) {
+const authListener = Auth.onAuthStateChanged(async function (user) {
   // await UpdateConfig.loadPromise;
   console.log(`auth state changed, user ${user ? true : false}`);
   if (user) {
@@ -307,50 +315,45 @@ export function signIn() {
   let password = $(".pageLogin .login input")[1].value;
 
   const persistence = $(".pageLogin .login #rememberMe input").prop("checked")
-    ? firebase.auth.Auth.Persistence.LOCAL
-    : firebase.auth.Auth.Persistence.SESSION;
+    ? browserLocalPersistence
+    : browserSessionPersistence;
 
-  firebase
-    .auth()
-    .setPersistence(persistence)
-    .then(function () {
-      return firebase
-        .auth()
-        .signInWithEmailAndPassword(email, password)
-        .then(async (e) => {
-          await loadUser(e.user);
-          PageController.change("account");
-          if (TestLogic.notSignedInLastResult !== null) {
-            TestLogic.setNotSignedInUid(e.user.uid);
+  Auth.setPersistence(persistence).then(function () {
+    return Auth.signInWithEmailAndPassword(email, password)
+      .then(async (e) => {
+        await loadUser(e.user);
+        PageController.change("account");
+        if (TestLogic.notSignedInLastResult !== null) {
+          TestLogic.setNotSignedInUid(e.user.uid);
 
-            const response = await Ape.results.save(
-              TestLogic.notSignedInLastResult
+          const response = await Ape.results.save(
+            TestLogic.notSignedInLastResult
+          );
+
+          if (response.status !== 200) {
+            return Notifications.add(
+              "Failed to save last result: " + response.message,
+              -1
             );
-
-            if (response.status !== 200) {
-              return Notifications.add(
-                "Failed to save last result: " + response.message,
-                -1
-              );
-            }
-
-            TestLogic.clearNotSignedInResult();
-            Notifications.add("Last test result saved", 1);
           }
-          //TODO: redirect user to relevant page
-        })
-        .catch(function (error) {
-          let message = error.message;
-          if (error.code === "auth/wrong-password") {
-            message = "Incorrect password.";
-          } else if (error.code === "auth/user-not-found") {
-            message = "User not found.";
-          }
-          Notifications.add(message, -1);
-          $(".pageLogin .preloader").addClass("hidden");
-          $(".pageLogin .button").removeClass("disabled");
-        });
-    });
+
+          TestLogic.clearNotSignedInResult();
+          Notifications.add("Last test result saved", 1);
+        }
+        //TODO: redirect user to relevant page
+      })
+      .catch(function (error) {
+        let message = error.message;
+        if (error.code === "auth/wrong-password") {
+          message = "Incorrect password.";
+        } else if (error.code === "auth/user-not-found") {
+          message = "User not found.";
+        }
+        Notifications.add(message, -1);
+        $(".pageLogin .preloader").addClass("hidden");
+        $(".pageLogin .button").removeClass("disabled");
+      });
+  });
 }
 
 export async function signInWithGoogle() {
@@ -361,11 +364,11 @@ export async function signInWithGoogle() {
   let signedInUser;
   try {
     const persistence = $(".pageLogin .login #rememberMe input").prop("checked")
-      ? firebase.auth.Auth.Persistence.LOCAL
-      : firebase.auth.Auth.Persistence.SESSION;
+      ? browserLocalPersistence
+      : browserSessionPersistence;
 
-    await firebase.auth().setPersistence(persistence);
-    signedInUser = await firebase.auth().signInWithPopup(gmailProvider);
+    await Auth.setPersistence(persistence);
+    signedInUser = await Auth.signInWithPopup(gmailProvider);
 
     if (signedInUser.additionalUserInfo.isNewUser) {
       //ask for username
@@ -459,13 +462,13 @@ export async function signInWithGoogle() {
 //   try{
 //     if ($(".pageLogin .login #rememberMe input").prop("checked")) {
 //       //remember me
-//       await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
-//       let signedInUser = await firebase.auth().signInWithPopup(githubProvider);
+//       await Auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL);
+//       let signedInUser = await Auth.signInWithPopup(githubProvider);
 //       console.log(signedInUser);
 //     } else {
 //       //dont remember
-//       await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
-//       let signedInUser = await firebase.auth().signInWithPopup(githubProvider);
+//       await Auth.setPersistence(firebase.auth.Auth.Persistence.SESSION);
+//       let signedInUser = await Auth.signInWithPopup(githubProvider);
 //       console.log(signedInUser);
 //     }
 //   }catch(e){
@@ -476,9 +479,8 @@ export async function signInWithGoogle() {
 
 export function addGoogleAuth() {
   Loader.show();
-  firebase
-    .auth()
-    .currentUser.linkWithPopup(gmailProvider)
+  Auth.currentUser
+    .linkWithPopup(gmailProvider)
     .then(function () {
       Loader.hide();
       Notifications.add("Google authentication added", 1);
@@ -494,7 +496,7 @@ export function addGoogleAuth() {
 }
 
 export async function removeGoogleAuth() {
-  let user = firebase.auth().currentUser;
+  let user = Auth.currentUser;
   if (
     user.providerData.find((provider) => provider.providerId === "password")
   ) {
@@ -505,9 +507,8 @@ export async function removeGoogleAuth() {
       Loader.hide();
       return Notifications.add(e.message, -1);
     }
-    firebase
-      .auth()
-      .currentUser.unlink("google.com")
+    Auth.currentUser
+      .unlink("google.com")
       .then(() => {
         Notifications.add("Google authentication removed", 1);
         Loader.hide();
@@ -530,21 +531,21 @@ export async function removeGoogleAuth() {
 
 export async function addPasswordAuth(email, password) {
   Loader.show();
-  let user = firebase.auth().currentUser;
+  let user = Auth.currentUser;
   if (
     user.providerData.find((provider) => provider.providerId === "google.com")
   ) {
     try {
-      await firebase.auth().currentUser.reauthenticateWithPopup(gmailProvider);
+      await Auth.currentUser.reauthenticateWithPopup(gmailProvider);
     } catch (e) {
       Loader.hide();
       return Notifications.add("Could not reauthenticate: " + e.message, -1);
     }
   }
-  let credential = firebase.auth.EmailAuthProvider.credential(email, password);
-  firebase
-    .auth()
-    .currentUser.linkWithCredential(credential)
+
+  let credential = new EmailAuthCredential(email, password);
+  Auth.currentUser
+    .linkWithCredential(credential)
     .then(function () {
       Loader.hide();
       Notifications.add("Password authenication added", 1);
@@ -560,9 +561,7 @@ export async function addPasswordAuth(email, password) {
 }
 
 export function signOut() {
-  firebase
-    .auth()
-    .signOut()
+  Auth.signOut()
     .then(function () {
       Notifications.add("Signed out", 0, 2);
       AllTimeStats.clear();
@@ -613,9 +612,7 @@ async function signUp() {
 
   let createdAuthUser;
   try {
-    createdAuthUser = await firebase
-      .auth()
-      .createUserWithEmailAndPassword(email, password);
+    createdAuthUser = await createUserWithEmailAndPassword(email, password);
 
     const signInResponse = await Ape.users.create(
       nname,
@@ -677,9 +674,7 @@ async function signUp() {
 $(".pageLogin #forgotPasswordButton").on("click", (e) => {
   let email = prompt("Email address");
   if (email) {
-    firebase
-      .auth()
-      .sendPasswordResetEmail(email)
+    Auth.sendPasswordResetEmail(email)
       .then(function () {
         // Email sent.
         Notifications.add("Email sent", 1, 2);

frontend/src/scripts/controllers/analytics-controller.ts

@@ -0,0 +1,13 @@
+import { Analytics } from "../firebase";
+import { logEvent } from "firebase/analytics";
+
+export function log(
+  eventName: string,
+  params: { [key: string]: string }
+): void {
+  try {
+    logEvent(Analytics, eventName, params);
+  } catch (e) {
+    console.log("Analytics unavailable");
+  }
+}

frontend/src/scripts/firebase.ts

@@ -0,0 +1,24 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyB5m_AnO575kvWriahcF1SFIWp8Fj3gQno",
+  authDomain: "monkey-type.firebaseapp.com",
+  databaseURL: "https://monkey-type.firebaseio.com",
+  projectId: "monkey-type",
+  storageBucket: "monkey-type.appspot.com",
+  messagingSenderId: "789788471140",
+  appId: "1:789788471140:web:7e31b15959d68ac0a51471",
+  measurementId: "G-PFV65WPEWF",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const Auth = getAuth(app);
+export const Analytics = getAnalytics(app);

frontend/src/scripts/index.ts

@@ -1,5 +1,7 @@
 // this file should be concatenated at the top of the legacy js files
 
+import "./firebase";
+
 // @ts-ignore
 import Chart from "chart.js";
 // @ts-ignore

frontend/src/scripts/modules.d.ts

@@ -1,3 +1,2 @@
-declare let firebase: any; // typeof import("firebase").default;
 declare let grecaptcha: ReCaptchaV2.ReCaptcha;
 declare let html2canvas: typeof import("html2canvas").default;

frontend/static/index.html

@@ -4963,11 +4963,11 @@
   </script>
 
   <!-- The core Firebase JS SDK is always required and must be listed first -->
-  <script src="/__/firebase/8.4.2/firebase-app.js"></script>
+  <!-- <script src="/__/firebase/8.4.2/firebase-app.js"></script> -->
   <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#available-libraries -->
-  <script src="/__/firebase/8.4.2/firebase-analytics.js"></script>
-  <script src="/__/firebase/8.4.2/firebase-auth.js"></script>
+  <!-- <script src="/__/firebase/8.4.2/firebase-analytics.js"></script> -->
+  <!-- <script src="/__/firebase/8.4.2/firebase-auth.js"></script> -->
   <!-- <script src="/__/firebase/8.4.2/firebase-firestore.js"></script> -->
   <!-- <script src="/__/firebase/8.4.2/firebase-functions.js"></script> -->
 

frontend/tsconfig.json

@@ -10,7 +10,6 @@
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     "types": [
       "jquery",
-      "firebase",
       "select2"
     ] /* Specify type package names to be included without being referenced in a source file. */,
     "allowUmdGlobalAccess": true /* Allow accessing UMD globals from modules. */,

old_js.eslintrc.json

@@ -5,7 +5,6 @@
     "node": true
   },
   "globals": {
-    "firebase": "readonly",
     "$": "readonly",
     "jQuery": "readonly",
     "html2canvas": "readonly",