feeds-fun 1.21.5 → 1.22.0

package/src/logic/settings.ts

@@ -1,22 +1,11 @@
 declare const __APP_VERSION__: string;
 
-export enum AuthMode {
-  SingleUser = "single_user",
-  Supertokens = "supertokens"
-}
-
-export const appName = import.meta.env.VITE_FFUN_APP_NAME || "Feeds Fun";
-export const appDomain = import.meta.env.VITE_FFUN_APP_DOMAIN || "localhost";
-export const appPort = import.meta.env.VITE_FFUN_APP_PORT || "5173";
-
-export const environment = import.meta.env.VITE_FFUN_ENVIRONMENT || "local";
 export const version = __APP_VERSION__;
 
-export const authMode = import.meta.env.VITE_FFUN_AUTH_MODE || AuthMode.SingleUser;
-export const authSupertokensApiBasePath = import.meta.env.VITE_FFUN_AUTH_SUPERTOKENS_API_BASE_PATH || "/supertokens";
-export const authSupertokensResendAfter = import.meta.env.VITE_FFUN_AUTH_SUPERTOKENS_RESEND_AFTER || 60 * 1000;
+export const authRefreshInterval = import.meta.env.VITE_FFUN_AUTH_REFRESH_INTERVAL || 10 * 60 * 1000;
 
 export const blog = import.meta.env.VITE_FFUN_BLOG || "https://blog.feeds.fun";
+export const roadmap = import.meta.env.VITE_FFUN_ROADMAP || "https://github.com/users/Tiendil/projects/1";
 export const githubRepo = import.meta.env.VITE_FFUN_GITHUB_REPO || "https://github.com/Tiendil/feeds.fun";
 export const discordInvite = import.meta.env.VITE_FFUN_DISCORD_INVITE || "https://discord.gg/C5RVusHQXy";
 export const redditSubreddit = import.meta.env.VITE_FFUN_REDDIT_SUBREDDIT || "https://www.reddit.com/r/feedsfun/";
@@ -34,18 +23,12 @@ export const crmPrivacy = import.meta.env.VITE_FFUN_CRM_PRIVACY || null;
 
 export const hasCollections = import.meta.env.VITE_FFUN_HAS_COLLECTIONS == "true" || false;
 
-console.log("settings.appName", appName);
-console.log("settings.appDomain", appDomain);
-console.log("settings.appPort", appPort);
-
-console.log("settings.environment", environment);
 console.log("settings.version", version);
 
-console.log("settings.authMode", authMode);
-console.log("settings.authSupertokensApiBasePath", authSupertokensApiBasePath);
-console.log("settings.authSupertokensResendAfter", authSupertokensResendAfter);
+console.log("settings.authRefreshInterval", authRefreshInterval);
 
 console.log("settings.blog", blog);
+console.log("settings.roadmap", roadmap);
 console.log("settings.githubRepo", githubRepo);
 console.log("settings.discordInvite", discordInvite);
 console.log("settings.redditSubreddit", redditSubreddit);
@@ -62,5 +45,3 @@ console.log("settings.crmTerms", crmTerms ? "set" : "not set");
 console.log("settings.crmPrivacy", crmPrivacy ? "set" : "not set");
 
 console.log("settings.hasCollections", hasCollections);
-
-export const isSingleUserMode = authMode === AuthMode.SingleUser;

package/src/logic/types.ts

@@ -531,3 +531,29 @@ export class ApiMessage {
 export function apiMessageFromJSON({type, code, message}: {type: string; code: string; message: string}): ApiMessage {
   return new ApiMessage({type, code, message});
 }
+
+export class stateInfo {
+  readonly version: string;
+  readonly singleUserMode: boolean;
+
+  constructor({version, singleUserMode}: {version: string; singleUserMode: boolean}) {
+    this.version = version;
+    this.singleUserMode = singleUserMode;
+  }
+}
+
+export function stateInfoFromJSON({version, singleUserMode}: {version: string; singleUserMode: boolean}): stateInfo {
+  return new stateInfo({version, singleUserMode});
+}
+
+export class userInfo {
+  readonly userId: string;
+
+  constructor({userId}: {userId: string}) {
+    this.userId = userId;
+  }
+}
+
+export function userInfoFromJSON({userId}: {userId: string}): userInfo {
+  return new userInfo({userId});
+}

package/src/main.ts

@@ -19,7 +19,6 @@ import DiscoveryForm from "./components/DiscoveryForm.vue";
 import FeedInfo from "./components/FeedInfo.vue";
 import OpmlUpload from "./components/OPMLUpload.vue";
 import FeedForList from "./components/FeedForList.vue";
-import SupertokensLogin from "./components/SupertokensLogin.vue";
 import SimplePagination from "./components/SimplePagination.vue";
 import UserSetting from "./components/UserSetting.vue";
 import TokensCost from "./components/TokensCost.vue";
@@ -78,8 +77,6 @@ import SidePanelCollapseButton from "./components/side_pannel/CollapseButton.vue
 import WideLayout from "./layouts/WideLayout.vue";
 import SidePanelLayout from "./layouts/SidePanelLayout.vue";
 
-import {useSupertokens} from "@/stores/supertokens";
-
 import VueCountdown from "@chenfengyuan/vue-countdown";
 
 const app = createApp(App);
@@ -95,7 +92,6 @@ app.component("DiscoveryForm", DiscoveryForm);
 app.component("FeedInfo", FeedInfo);
 app.component("OpmlUpload", OpmlUpload);
 app.component("FeedForList", FeedForList);
-app.component("SupertokensLogin", SupertokensLogin);
 app.component("SimplePagination", SimplePagination);
 app.component("UserSetting", UserSetting);
 app.component("TokensCost", TokensCost);
@@ -158,55 +154,6 @@ app.component("vue-countdown", VueCountdown);
 
 app.use(createPinia());
 app.use(router);
-
-if (!settings.isSingleUserMode) {
-  app.use(CookieConsent.plugin, CookieConsent.defaultConfig);
-}
+app.use(CookieConsent.plugin, CookieConsent.defaultConfig);
 
 app.mount("#app");
-
-import * as api from "@/logic/api";
-import * as settings from "@/logic/settings";
-
-/////////////////////
-// supertokens
-/////////////////////
-
-// must be copy of smart_url from backend
-function smartUrl(domain: string, port: number) {
-  if (port == 80) {
-    return `http://${domain}`;
-  }
-
-  if (port == 443) {
-    return `https://${domain}`;
-  }
-
-  return `http://${domain}:${port}`;
-}
-
-let supertokens: ReturnType<typeof useSupertokens> | null = null;
-
-if (settings.authMode === settings.AuthMode.Supertokens) {
-  supertokens = useSupertokens();
-
-  supertokens.init({
-    apiDomain: smartUrl(settings.appDomain, settings.appPort),
-    apiBasePath: settings.authSupertokensApiBasePath,
-    appName: settings.appName,
-    resendAfter: settings.authSupertokensResendAfter
-  });
-} else if (settings.authMode === settings.AuthMode.SingleUser) {
-} else {
-  throw `Unknown auth mode: ${settings.authMode}`;
-}
-
-async function onSessionLost() {
-  if (supertokens !== null) {
-    await supertokens.logout();
-  }
-
-  router.push({name: "main", params: {}});
-}
-
-api.init({onSessionLost: onSessionLost});

package/src/router/index.ts

@@ -1,6 +1,5 @@
 import {createRouter, createWebHistory} from "vue-router";
 import MainView from "../views/MainView.vue";
-import AuthView from "../views/AuthView.vue";
 import FeedsView from "../views/FeedsView.vue";
 import NewsView from "../views/NewsView.vue";
 import RulesView from "../views/RulesView.vue";
@@ -23,11 +22,6 @@ const router = createRouter({
       name: "main",
       component: MainView
     },
-    {
-      path: "/auth",
-      name: "auth",
-      component: AuthView
-    },
     {
       path: "/feeds",
       name: e.MainPanelMode.Feeds,

package/src/stores/entries.ts

@@ -53,7 +53,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   }
 
   const readyToLoadNews = computed(() => {
-    return (globalSettings.userSettingsPresent || !globalState.isLoggedIn) && mode.value !== null;
+    return (globalSettings.userSettingsPresent || !globalState.loginConfirmed) && mode.value !== null;
   });
 
   // Public collections uses fixed sorting order
@@ -248,7 +248,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
     // This method may be called from public access pages, like public collections
     // In such case user may be not logged in and we should not send API requests
-    if (globalState.isLoggedIn) {
+    if (globalState.loginConfirmed) {
       await api.setMarker({entryId: entryId, marker: marker});
     }
   }
@@ -267,7 +267,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
 
     // This method may be called from public access pages, like public collections
     // In such case user may be not logged in and we should not send API requests
-    if (globalState.isLoggedIn) {
+    if (globalState.loginConfirmed) {
       await api.removeMarker({entryId: entryId, marker: marker});
     }
   }
@@ -284,7 +284,7 @@ export const useEntriesStore = defineStore("entriesStore", () => {
       });
     }
 
-    await events.newsBodyOpened({entryId: entryId, view: view});
+    events.newsBodyOpened({entryId: entryId, view: view});
   }
 
   function hideEntry({entryId}: {entryId: t.EntryId}) {

package/src/stores/globalSettings.ts

@@ -19,19 +19,12 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     dataVersion.value++;
   }
 
-  // TODO: We may want to remove this API and move user_id to the user settings API
-  const info = computedAsync(async () => {
-    globalState.isLoggedIn;
-    dataVersion.value;
-    return await api.getInfo();
-  }, null);
-
   ///////////////////////////////////////////////////////////
   // Functionality for interaction with backend side settings
   ///////////////////////////////////////////////////////////
 
   const _userSettings = computedAsync(async () => {
-    if (!globalState.isLoggedIn) {
+    if (!globalState.loginConfirmed) {
       return null;
     }
 
@@ -87,7 +80,7 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   function setUserSettings(kind: string, newValue: t.UserSettingsValue) {
     settingsOverrides.value[kind] = newValue;
 
-    if (globalState.isLoggedIn) {
+    if (globalState.loginConfirmed) {
       _backgroundSetUserSetting(kind, newValue);
     }
 
@@ -108,7 +101,7 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
           return settingsOverrides.value[kind];
         }
 
-        if (!globalState.isLoggedIn) {
+        if (!globalState.loginConfirmed) {
           return defaultValue;
         }
 
@@ -223,7 +216,6 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     updateDataVersion,
     showFeedsDescriptions,
     userSettingsPresent,
-    info,
     feedsOrder,
     failedFeedsFirst,
     rulesOrder,

package/src/stores/globalState.ts

@@ -1,23 +1,121 @@
 import {ref, watch, computed} from "vue";
-import {useRouter} from "vue-router";
+import {useRouter, useRoute} from "vue-router";
 import {defineStore} from "pinia";
-import {useSupertokens} from "@/stores/supertokens";
-import * as settings from "@/logic/settings";
+import {computedAsync, useBroadcastChannel} from "@vueuse/core";
 
+import {Timer} from "@/logic/timer";
+import * as settings from "@/logic/settings";
+import * as api from "@/logic/api";
 import * as e from "@/logic/enums";
 
+const GLOBAL_BROADCAST_CHANNEL_ID = "ffun-global-event-channel";
+const GLOBAL_BROADCAST_EVENT_LOGOUT_COMPLETED = "logoutCompleted";
+
+const LOGGED_OUT_QUERY_MARKER = "logged-out";
+
 export const useGlobalState = defineStore("globalState", () => {
-  const supertokens = useSupertokens();
+  const router = useRouter();
+  const route = useRoute();
+
+  const infoRefreshMarker = ref(0);
 
-  const isLoggedIn = computed(() => {
-    if (settings.isSingleUserMode) {
-      return true;
+  function refreshAuthState() {
+    infoRefreshMarker.value++;
+  }
+
+  ////////////////////////////////
+  // sync login state between tabs
+  ////////////////////////////////
+  const globalChannel = useBroadcastChannel<any, any>({name: GLOBAL_BROADCAST_CHANNEL_ID});
+
+  watch(globalChannel.data, (event) => {
+    if (event.type === GLOBAL_BROADCAST_EVENT_LOGOUT_COMPLETED) {
+      refreshAuthState();
     }
+  });
 
-    return supertokens.isLoggedIn;
+  // check if the marker is in the URL (means that user has just redirected after logout)
+  watch(route, (r) => {
+    if (!(LOGGED_OUT_QUERY_MARKER in r.query)) {
+      return;
+    }
+
+    globalChannel.post({type: GLOBAL_BROADCAST_EVENT_LOGOUT_COMPLETED});
+
+    // remove the marker from the URL
+    const query = {...r.query};
+    delete query[LOGGED_OUT_QUERY_MARKER];
+    router.replace({query});
+  });
+  ////////////////////////////////
+
+  // Periodic check auth state by timer
+  const authStateRefresher = new Timer(refreshAuthState, settings.authRefreshInterval);
+
+  // Check auth state on the particular events
+  // do not check "focus" and "visibilitychange" — they are too noisy
+  window.addEventListener("online", refreshAuthState);
+  window.addEventListener("pageshow", (event) => {
+    if (event.persisted) {
+      // BFCache restore (the user goes Back/Forward and the browser instantly revives a frozen snapshot).
+      refreshAuthState();
+    }
   });
 
+  const info = computedAsync(async () => {
+    infoRefreshMarker.value;
+    return await api.getInfo();
+  }, null);
+
+  const userId = computedAsync(async () => {
+    infoRefreshMarker.value;
+    let userData = await api.getUser();
+    return userData ? userData.userId : null;
+  }, "unknown");
+
+  const isSingleUserMode = computed(() => {
+    return info.value ? info.value.singleUserMode : false;
+  });
+
+  const loginState = computed(() => {
+    if (userId.value === "unknown") {
+      return e.LoginState.Unknown;
+    }
+
+    return userId.value ? e.LoginState.LoggedIn : e.LoginState.LoggedOut;
+  });
+
+  const loginUnknown = computed(() => {
+    return loginState.value === e.LoginState.Unknown;
+  });
+
+  const loginConfirmed = computed(() => {
+    return loginState.value === e.LoginState.LoggedIn;
+  });
+
+  const logoutConfirmed = computed(() => {
+    return loginState.value === e.LoginState.LoggedOut;
+  });
+
+  function logout() {
+    if (isSingleUserMode.value) {
+      // In single user mode the user is always "logged in"
+      return;
+    }
+
+    api.logoutRedirect();
+
+    // TODO: we may want to notify other tabs about logout event
+  }
+
   return {
-    isLoggedIn
+    userId,
+    isSingleUserMode,
+    loginState,
+    loginUnknown,
+    loginConfirmed,
+    logoutConfirmed,
+    refreshAuthState,
+    logout
   };
 });

package/src/values/SocialLink.vue

@@ -25,13 +25,17 @@
   import * as settings from "@/logic/settings";
   import * as asserts from "@/logic/asserts";
 
+  import {useGlobalState} from "@/stores/globalState";
+
+  const globalState = useGlobalState();
+
   const links = {
-    api: {
+    roadmap: {
       enabled: true,
-      url: "/api/docs",
-      text: "API",
+      url: settings.roadmap,
+      text: "Roadmap",
       icon: null,
-      eventType: "api"
+      eventType: "roadmap"
     },
     blog: {
       enabled: settings.blog !== null,

package/src/views/CRMView.vue

@@ -3,7 +3,7 @@
     <div class="ffun-page-header">
       <div class="ffun-page-header-center-block">
         <page-header-home-button />
-        <page-header-external-links :show-api="false" />
+        <page-header-external-links />
       </div>
     </div>
 

package/src/views/MainView.vue

@@ -2,7 +2,7 @@
   <wide-layout>
     <div class="ffun-page-header">
       <div class="ffun-page-header-center-block">
-        <page-header-external-links :show-api="false" />
+        <page-header-external-links />
       </div>
     </div>
 
@@ -10,18 +10,32 @@
 
     <main-block>
       <h1 class="m-0 text-5xl">Feeds Fun</h1>
-      <p class="mt-2 text-2xl">Transparent Personalized News</p>
-    </main-block>
-
-    <main-header-line>
-      <!-- TODO: uncomment this claim after we have some statistics on long-term users -->
-      <!-- Save over <strong class="text-green-700">80%</strong> of news-browsing time by focusing on what truly matters to you -->
-      Save news-browsing time by focusing on what truly matters
-    </main-header-line>
-
-    <main-block>
-      <div class="max-w-xl md:mx-auto ffun-info-good text-center mx-2">
-        <supertokens-login />
+      <p class="mt-2 text-2xl">Transparent & Personalized News</p>
+
+      <div class="h-12 grid grid-flow-col auto-cols-fr gap-3 w-max mx-auto">
+        <a
+          v-if="globalState.loginConfirmed"
+          class="ffun-main-auth-button ffun-go-to-feeds"
+          href="#"
+          @click.prevent="goToFeeds()">
+          Read your feed
+        </a>
+
+        <a
+          v-if="globalState.logoutConfirmed"
+          class="ffun-main-auth-button ffun-login"
+          href="#"
+          @click.prevent="goToLogin()"
+          >Sign in</a
+        >
+
+        <a
+          v-if="globalState.logoutConfirmed"
+          class="ffun-main-auth-button ffun-register"
+          href="#"
+          @click.prevent="goToJoin()"
+          >Join now</a
+        >
       </div>
     </main-block>
 
@@ -163,7 +177,7 @@
 
             <main-news-title
               class="opacity-75"
-              title="Sci-fi novel about UFO in New Yourk"
+              title="Sci-fi novel about UFO in New York"
               :score="13" />
 
             <div class="opacity-65 block justify-self-center">
@@ -222,16 +236,38 @@
   import {computed, ref, onUnmounted, watch, provide} from "vue";
   import exampleImage from "@/assets/news-filtering-example.png";
   import * as settings from "@/logic/settings";
+  import * as api from "@/logic/api";
+  import * as e from "@/logic/enums";
+  import * as events from "@/logic/events";
   import {useRouter, RouterLink, RouterView} from "vue-router";
   import {useCollectionsStore} from "@/stores/collections";
+  import {useGlobalState} from "@/stores/globalState";
   import * as t from "@/logic/types";
 
   const router = useRouter();
+  const globalState = useGlobalState();
   const collections = useCollectionsStore();
 
-  provide("eventsViewName", "main");
+  const eventsView = "main";
+
+  provide("eventsViewName", eventsView);
 
   function publicCollectionHref(collectionSlug: t.CollectionSlug) {
     return router.resolve({name: "public-collection", params: {collectionSlug: collectionSlug}}).href;
   }
+
+  function goToFeeds() {
+    events.authButtonClicked({buttonType: "go_to_feeds", view: eventsView});
+    router.push({name: e.MainPanelMode.Entries, params: {}});
+  }
+
+  function goToLogin() {
+    events.authButtonClicked({buttonType: "login", view: eventsView});
+    api.redirectToLogin("/news");
+  }
+
+  function goToJoin() {
+    events.authButtonClicked({buttonType: "join", view: eventsView});
+    api.redirectToJoin("/news");
+  }
 </script>

package/src/views/PublicCollectionView.vue

@@ -51,7 +51,7 @@
       <tags-filter
         :tags="tagsCount"
         :show-create-rule="false"
-        :show-registration-invitation="true" />
+        :show-registration-invitation="showRegistrationInvitation" />
     </template>
 
     <template #main-header>
@@ -67,7 +67,7 @@
     <!-- because the user previously selected tags that have no common news with the tags in the block -->
     <!-- That effect is possible only if the user has already interacted with the ags filter => should not be a problem -->
     <collections-public-intro
-      v-if="collection && !globalState.isLoggedIn"
+      v-if="collection && !globalState.loginConfirmed"
       :collectionId="collection.id"
       :tag1Uid="medianTag1"
       :tag1Count="tagsCount[medianTag1] || 0"
@@ -75,7 +75,7 @@
       :tag2Count="tagsCount[medianTag2] || 0" />
 
     <div
-      v-if="collection && globalState.isLoggedIn"
+      v-if="collection && globalState.loginConfirmed"
       class="ffun-info-good">
       <p
         >Welcome to curated <strong>{{ collection.name }}</strong> news collection!</p
@@ -126,6 +126,10 @@
 
   const collectionSlug = computed(() => route.params.collectionSlug as t.CollectionSlug);
 
+  const showRegistrationInvitation = computed(() => {
+    return globalState.logoutConfirmed;
+  });
+
   const collection = computed(() => {
     if (!collectionSlug.value) {
       return null;
@@ -183,6 +187,7 @@
     let report = entriesStore.visibleEntries.slice();
 
     report = tagsStates.value.filterByTags(report, (entryId) => entriesStore.entries[entryId].tags);
+
     return report;
   });
 

package/src/views/SettingsView.vue

@@ -126,7 +126,7 @@
     </div>
 
     <div
-      v-if="!settings.isSingleUserMode"
+      v-if="!globalState.isSingleUserMode"
       class="ffun-info-bad">
       <button
         @click.prevent="removeAccount()"
@@ -154,7 +154,9 @@
   import * as settings from "@/logic/settings";
   import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useGlobalState} from "@/stores/globalState";
 
+  const globalState = useGlobalState();
   const globalSettings = useGlobalSettingsStore();
 
   provide("eventsViewName", "settings");
@@ -166,11 +168,7 @@
   }, null);
 
   const userId = computed(() => {
-    if (globalSettings.info == null) {
-      return "—";
-    }
-
-    return globalSettings.info.userId;
+    return globalState.userId == null ? "—" : globalState.userId;
   });
 
   const messagesSettings = [
@@ -188,6 +186,7 @@
   function removeAccount() {
     if (confirm("Are you sure you want to remove your account? THIS OPERATION IS NOT REVERSIBLE!")) {
       api.removeUser();
+      globalState.logout();
     }
   }
 

package/vite.config.ts

@@ -16,17 +16,4 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
-
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://backend:8000/',
-        changeOrigin: true,
-      },
-      '/supertokens': {
-        target: 'http://backend:8000/',
-        changeOrigin: true,
-      }
-    }
-  }
 })