no longer force signing out user when offline

frontend/src/ts/controllers/account-controller.ts

@@ -49,7 +49,6 @@ import {
 } from "../test/test-config";
 import { navigate } from "../observables/navigate-event";
 import { update as updateTagsCommands } from "../commandline/lists/tags";
-import * as ConnectionEvent from "../observables/connection-event";
 import * as ConnectionState from "../states/connection";
 
 export const gmailProvider = new GoogleAuthProvider();
@@ -358,6 +357,10 @@ export function signIn(): void {
     Notifications.add("Authentication uninitialized", -1, 3);
     return;
   }
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
 
   UpdateConfig.setChangedBeforeDb(false);
   authListener();
@@ -431,6 +434,10 @@ export async function signInWithGoogle(): Promise<void> {
     Notifications.add("Authentication uninitialized", -1, 3);
     return;
   }
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
 
   UpdateConfig.setChangedBeforeDb(false);
   LoginPage.showPreloader();
@@ -561,6 +568,10 @@ async function signUp(): Promise<void> {
     Notifications.add("Authentication uninitialized", -1, 3);
     return;
   }
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   RegisterCaptchaPopup.show();
   const captcha = await RegisterCaptchaPopup.promise;
   if (!captcha) {
@@ -756,18 +767,17 @@ $(".pageLogin .register .button").on("click", () => {
 });
 
 $(".pageSettings #addGoogleAuth").on("click", async () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   addGoogleAuth();
 });
 
 $(document).on("click", ".pageAccount .sendVerificationEmail", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   sendVerificationEmail();
 });
-
-ConnectionEvent.subscribe((state) => {
-  if (state) {
-    $("#menu .signInOut").removeClass("hidden");
-  } else {
-    $("#menu .signInOut").addClass("hidden");
-    signOut();
-  }
-});

frontend/src/ts/controllers/route-controller.ts

@@ -12,7 +12,6 @@ import * as TestUI from "../test/test-ui";
 import * as PageTransition from "../states/page-transition";
 import * as NavigateEvent from "../observables/navigate-event";
 import { Auth } from "../firebase";
-import * as ConnectionState from "../states/connection";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -85,7 +84,7 @@ const routes: Route[] = [
   {
     path: "/login",
     load: (): void => {
-      if (!Auth || !ConnectionState.get()) {
+      if (!Auth) {
         nav("/");
         return;
       }
@@ -95,7 +94,7 @@ const routes: Route[] = [
   {
     path: "/account",
     load: (_params, options): void => {
-      if (!Auth || !ConnectionState.get()) {
+      if (!Auth) {
         nav("/");
         return;
       }

frontend/src/ts/db.ts

@@ -4,6 +4,7 @@ import * as LoadingPage from "./pages/loading";
 import DefaultConfig from "./constants/default-config";
 import { Auth } from "./firebase";
 import { defaultSnap } from "./constants/default-snapshot";
+import * as ConnectionState from "./states/connection";
 
 let dbSnapshot: MonkeyTypes.Snapshot;
 
@@ -191,6 +192,11 @@ export async function getUserResults(): Promise<boolean> {
   const user = Auth?.currentUser;
   if (!user) return false;
   if (dbSnapshot === null) return false;
+
+  if (!ConnectionState.get()) {
+    return false;
+  }
+
   if (dbSnapshot.results !== undefined) {
     return true;
   } else {

frontend/src/ts/elements/alerts.ts

@@ -6,6 +6,7 @@ import * as DB from "../db";
 import * as NotificationEvent from "../observables/notification-event";
 import * as BadgeController from "../controllers/badge-controller";
 import * as Notifications from "../elements/notifications";
+import * as ConnectionState from "../states/connection";
 
 let accountAlerts: MonkeyTypes.MonkeyMail[] = [];
 let maxMail = 0;
@@ -143,21 +144,30 @@ export async function show(): Promise<void> {
 }
 
 async function getAccountAlerts(): Promise<void> {
-  const inboxResponse = await Ape.users.getInbox();
-
   $("#alertsPopup .accountAlerts .list").empty();
 
+  if (!ConnectionState.get()) {
+    $("#alertsPopup .accountAlerts .list").html(`
+    <div class="nothing">
+    You are offline
+    </div>
+    `);
+    return;
+  }
+
+  const inboxResponse = await Ape.users.getInbox();
+
   if (inboxResponse.status === 503) {
     $("#alertsPopup .accountAlerts .list").html(`
     <div class="nothing">
-    Account inboxes are temporarily unavailable.
+    Account inboxes are temporarily unavailable
     </div>
     `);
     return;
   } else if (inboxResponse.status !== 200) {
     $("#alertsPopup .accountAlerts .list").html(`
     <div class="nothing">
-    Error getting inbox: ${inboxResponse.message} Please try again later.
+    Error getting inbox: ${inboxResponse.message} Please try again later
     </div>
     `);
     return;

frontend/src/ts/pages/account.ts

@@ -14,6 +14,7 @@ import Page from "./page";
 import * as Misc from "../utils/misc";
 import * as Profile from "../elements/profile";
 import format from "date-fns/format";
+import * as ConnectionState from "../states/connection";
 
 import type { ScaleChartOptions } from "chart.js";
 
@@ -30,7 +31,7 @@ let filteredResults: MonkeyTypes.Result<MonkeyTypes.Mode>[] = [];
 let visibleTableLines = 0;
 
 function loadMoreLines(lineIndex?: number): void {
-  if (filteredResults == [] || filteredResults.length == 0) return;
+  if (!filteredResults || filteredResults.length == 0) return;
   let newVisibleLines;
   if (lineIndex && lineIndex > visibleTableLines) {
     newVisibleLines = Math.ceil(lineIndex / 10) * 10;
@@ -903,6 +904,10 @@ function fillContent(): void {
 export async function downloadResults(): Promise<void> {
   if (DB.getSnapshot().results !== undefined) return;
   const results = await DB.getUserResults();
+  if (results === false && !ConnectionState.get()) {
+    Notifications.add("Could not get results - you are offline", -1, 5);
+    return;
+  }
   TodayTracker.addAllFromToday();
   if (results) {
     ResultFilters.updateActive();

frontend/src/ts/popups/ape-keys-popup.ts

@@ -2,6 +2,7 @@ import Ape from "../ape";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
 import format from "date-fns/format";
+import * as ConnectionState from "../states/connection";
 
 let apeKeys: MonkeyTypes.ApeKeys = {};
 
@@ -85,6 +86,10 @@ export function hide(): void {
 
 //show the popup
 export async function show(): Promise<void> {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   if ($("#apeKeysPopupWrapper").hasClass("hidden")) {
     await getData();
     refreshList();

frontend/src/ts/popups/edit-preset-popup.ts

@@ -4,8 +4,14 @@ import * as Config from "../config";
 import * as Loader from "../elements/loader";
 import * as Settings from "../pages/settings";
 import * as Notifications from "../elements/notifications";
+import * as ConnectionState from "../states/connection";
 
 export function show(action: string, id?: string, name?: string): void {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
+
   if (action === "add") {
     $("#presetWrapper #presetEdit").attr("action", "add");
     $("#presetWrapper #presetEdit .title").html("Add new preset");

frontend/src/ts/popups/edit-profile-popup.ts

@@ -3,10 +3,15 @@ import { getHTMLById } from "../controllers/badge-controller";
 import * as DB from "../db";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
+import * as ConnectionState from "../states/connection";
 
 let callbackFuncOnHide: (() => void) | null = null;
 
 export function show(callbackOnHide: () => void): void {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   if ($("#editProfilePopupWrapper").hasClass("hidden")) {
     callbackFuncOnHide = callbackOnHide;
 

frontend/src/ts/popups/edit-tags-popup.ts

@@ -5,8 +5,14 @@ import * as Notifications from "../elements/notifications";
 import * as Loader from "../elements/loader";
 import * as Settings from "../pages/settings";
 import * as ResultTagsPopup from "./result-tags-popup";
+import * as ConnectionState from "../states/connection";
 
 export function show(action: string, id?: string, name?: string): void {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
+
   if (action === "add") {
     $("#tagsWrapper #tagsEdit").attr("action", "add");
     $("#tagsWrapper #tagsEdit .title").html("Add new tag");

frontend/src/ts/popups/result-tags-popup.ts

@@ -2,8 +2,13 @@ import Ape from "../ape";
 import * as DB from "../db";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
+import * as ConnectionState from "../states/connection";
 
 function show(): void {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   if ($("#resultEditTagsPanelWrapper").hasClass("hidden")) {
     $("#resultEditTagsPanelWrapper")
       .stop(true, true)

frontend/src/ts/popups/simple-popups.ts

@@ -12,6 +12,7 @@ import * as SavedTextsPopup from "./saved-texts-popup";
 import * as AccountButton from "../elements/account-button";
 import { FirebaseError } from "firebase/app";
 import { Auth } from "../firebase";
+import * as ConnectionState from "../states/connection";
 import {
   EmailAuthProvider,
   reauthenticateWithCredential,
@@ -1230,51 +1231,99 @@ list["deleteCustomTheme"] = new SimplePopup(
 $(".pageSettings .section.discordIntegration #unlinkDiscordButton").on(
   "click",
   () => {
+    if (!ConnectionState.get()) {
+      Notifications.add("You are offline", 0, 2);
+      return;
+    }
     list["unlinkDiscord"].show();
   }
 );
 
 $(".pageSettings #removeGoogleAuth").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["removeGoogleAuth"].show();
 });
 
 $("#resetSettingsButton").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["resetSettings"].show();
 });
 
 $(".pageSettings #resetPersonalBestsButton").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["resetPersonalBests"].show();
 });
 
 $(".pageSettings #updateAccountName").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["updateName"].show();
 });
 
 $(document).on("click", "#bannerCenter .banner .text .openNameChange", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["updateName"].show();
 });
 
 $(".pageSettings #addPasswordAuth").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["addPasswordAuth"].show();
 });
 
 $(".pageSettings #emailPasswordAuth").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["updateEmail"].show();
 });
 
 $(".pageSettings #passPasswordAuth").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["updatePassword"].show();
 });
 
 $(".pageSettings #deleteAccount").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["deleteAccount"].show();
 });
 
 $(".pageSettings #resetAccount").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["resetAccount"].show();
 });
 
 $("#apeKeysPopup .generateApeKey").on("click", () => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   list["generateApeKey"].show();
 });
 
@@ -1282,6 +1331,10 @@ $(document).on(
   "click",
   ".pageSettings .section.themes .customTheme .delButton",
   (e) => {
+    if (!ConnectionState.get()) {
+      Notifications.add("You are offline", 0, 2);
+      return;
+    }
     const $parentElement = $(e.currentTarget).parent(".customTheme.button");
     const customThemeId = $parentElement.attr("customThemeId") as string;
     list["deleteCustomTheme"].show([customThemeId]);
@@ -1292,6 +1345,10 @@ $(document).on(
   "click",
   ".pageSettings .section.themes .customTheme .editButton",
   (e) => {
+    if (!ConnectionState.get()) {
+      Notifications.add("You are offline", 0, 2);
+      return;
+    }
     const $parentElement = $(e.currentTarget).parent(".customTheme.button");
     const customThemeId = $parentElement.attr("customThemeId") as string;
     list["updateCustomTheme"].show([customThemeId]);
@@ -1326,11 +1383,19 @@ $(document).on(
 );
 
 $(document).on("click", "#apeKeysPopup table tbody tr .button.delete", (e) => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   const keyId = $(e.target).closest("tr").attr("keyId") as string;
   list["deleteApeKey"].show([keyId]);
 });
 
 $(document).on("click", "#apeKeysPopup table tbody tr .button.edit", (e) => {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, 2);
+    return;
+  }
   const keyId = $(e.target).closest("tr").attr("keyId") as string;
   list["editApeKey"].show([keyId]);
 });

frontend/src/ts/ready.ts

@@ -72,7 +72,7 @@ if ("serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     // disabling service workers on localhost - they dont really work well with local development
     // and cause issues with hot reloading
-    if (window.location.hostname === "localhost") {
+    if (window.location.hostname === "localhos") {
       navigator.serviceWorker.getRegistrations().then(function (registrations) {
         for (const registration of registrations) {
           // if (registration.scope !== "https://monkeytype.com/")

frontend/src/ts/test/test-logic.ts

@@ -56,6 +56,7 @@ import * as AnalyticsController from "../controllers/analytics-controller";
 import { Auth } from "../firebase";
 import * as AdController from "../controllers/ad-controller";
 import * as TestConfig from "./test-config";
+import * as ConnectionState from "../states/connection";
 
 let failReason = "";
 const koInputVisual = document.getElementById("koInputVisual") as HTMLElement;
@@ -1728,6 +1729,17 @@ async function saveResult(
     return;
   }
 
+  if (!ConnectionState.get()) {
+    Notifications.add("Result not saved: offline", -1, 2, "Notice");
+    AccountButton.loading(false);
+    retrySaving.canRetry = true;
+    $("#retrySavingResultButton").removeClass("hidden");
+    if (!isRetrying) {
+      retrySaving.completedEvent = completedEvent;
+    }
+    return;
+  }
+
   const response = await Ape.results.save(completedEvent);
 
   AccountButton.loading(false);