feeds-fun 1.21.6 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.21.6",
+  "version": "1.22.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [
@@ -40,7 +40,6 @@
     "lodash": "^4.17.21",
     "pinia": "^2.2.6",
     "set-interval-async": "^3.0.3",
-    "supertokens-web-js": "^0.5.0",
     "vanilla-cookieconsent": "^3.1.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"

package/src/App.vue

@@ -21,8 +21,8 @@
   });
 
   watchEffect(async () => {
-    if (utmStorage.value && globalState.isLoggedIn && Object.keys(utmStorage.value).length > 0) {
-      await events.trackUtm(utmStorage.value);
+    if (utmStorage.value && globalState.loginConfirmed && Object.keys(utmStorage.value).length > 0) {
+      events.trackUtm(utmStorage.value);
       utmStorage.value = null;
     }
   });

package/src/components/EntryForList.vue

@@ -140,9 +140,9 @@
     return utils.purifyBody({raw: entry.value.body, default_: "No description"});
   });
 
-  async function newsLinkOpenedEvent() {
+  function newsLinkOpenedEvent() {
     asserts.defined(eventsView);
-    await events.newsLinkOpened({entryId: entry.value.id, view: eventsView});
+    events.newsLinkOpened({entryId: entry.value.id, view: eventsView});
   }
 
   async function onTitleClick(event: MouseEvent) {
@@ -172,7 +172,7 @@
         }
       }
     } else {
-      await newsLinkOpenedEvent();
+      newsLinkOpenedEvent();
     }
   }
 

package/src/components/page_footer/Footer.vue

@@ -74,7 +74,7 @@
           </a>
 
           <a
-            v-if="!settings.isSingleUserMode"
+            v-if="!globalState.isSingleUserMode"
             href="#"
             class="ffun-normal-link"
             @click.prevent="cookieConsent.showCookieConsent()">
@@ -94,6 +94,7 @@
   import * as settings from "@/logic/settings";
   import * as asserts from "@/logic/asserts";
   import * as cookieConsent from "@/plugins/CookieConsent";
+  import {useGlobalState} from "@/stores/globalState";
 
   const router = useRouter();
 
@@ -101,6 +102,8 @@
 
   asserts.defined(eventsView);
 
+  const globalState = useGlobalState();
+
   const year = computed(() => {
     const date = new Date();
     return date.getFullYear();

package/src/components/page_header/ExternalLinks.vue

@@ -1,12 +1,11 @@
 <template>
   <social-link
-    v-if="showApi"
-    kind="api"
+    kind="blog"
     mode="text"
     class="ffun-page-header-link" />
 
   <social-link
-    kind="blog"
+    kind="roadmap"
     mode="text"
     class="ffun-page-header-link" />
 
@@ -33,7 +32,7 @@
   import * as settings from "@/logic/settings";
   import * as asserts from "@/logic/asserts";
 
-  const properties = defineProps<{showApi: boolean}>();
+  const properties = defineProps<{}>();
 
   const eventsView = inject<events.EventsViewName>("eventsViewName");
 

package/src/components/side_pannel/CollapseButton.vue

@@ -24,7 +24,6 @@
   import {useRouter, RouterLink, RouterView} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useGlobalState} from "@/stores/globalState";
-  import {useSupertokens} from "@/stores/supertokens";
   import * as asserts from "@/logic/asserts";
   import * as events from "@/logic/events";
   import * as e from "@/logic/enums";

package/src/components/tags/FilterTag.vue

@@ -77,22 +77,22 @@
     return result;
   });
 
-  async function onClick() {
+  function onClick() {
     asserts.defined(tagsStates);
     asserts.defined(eventsView);
 
     let changeInfo = tagsStates.value.onTagClicked({tag: properties.uid});
 
-    await events.tagStateChanged({tag: properties.uid, view: eventsView, source: "tags_filter", ...changeInfo});
+    events.tagStateChanged({tag: properties.uid, view: eventsView, source: "tags_filter", ...changeInfo});
   }
 
-  async function onRevers() {
+  function onRevers() {
     asserts.defined(tagsStates);
     asserts.defined(eventsView);
 
     let changeInfo = tagsStates.value.onTagReversed({tag: properties.uid});
 
-    await events.tagStateChanged({tag: properties.uid, view: eventsView, source: "tags_filter", ...changeInfo});
+    events.tagStateChanged({tag: properties.uid, view: eventsView, source: "tags_filter", ...changeInfo});
   }
 
   const switchTooltip = computed(() => {

package/src/css/inputs.css

@@ -8,6 +8,27 @@
     @apply transition-colors duration-150;
   }
 
+  .ffun-main-auth-button {
+    @apply ffun-x-input-common border-0;
+    @apply text-xl;
+    @apply px-3 py-2;
+    @apply rounded-lg shadow-sm border focus:ring-0;
+
+    &.ffun-login {
+      @apply hover:border-slate-400;
+    }
+
+    &.ffun-register {
+      @apply bg-emerald-600 text-white;
+      @apply hover:border-emerald-700;
+    }
+
+    &.ffun-go-to-feeds {
+      @apply text-blue-700;
+      @apply border-blue-300 hover:border-blue-400;
+    }
+  }
+
   .ffun-form-button {
     @apply ffun-x-input-common font-semibold text-white;
     @apply px-4 py-2;

package/src/layouts/SidePanelLayout.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="ffun-side-panel-layout">
+  <div
+    v-if="showGUI"
+    class="ffun-side-panel-layout">
     <div
       v-if="showSidebar"
       class="ffun-side-panel">
@@ -57,7 +59,7 @@
 
           <page-header-home-button v-if="homeButton" />
 
-          <template v-if="globalState.isLoggedIn">
+          <template v-if="globalState.loginConfirmed">
             <template
               v-for="[mode, props] of e.MainPanelModeProperties"
               :key="mode">
@@ -79,20 +81,20 @@
             </template>
           </template>
 
-          <page-header-external-links :show-api="globalState.isLoggedIn" />
+          <page-header-external-links />
         </div>
 
         <div class="ffun-page-header-right-block">
           <a
-            v-if="globalState.isLoggedIn && !settings.isSingleUserMode"
+            v-if="globalState.loginConfirmed && !globalState.isSingleUserMode"
             href="#"
             class="ffun-page-header-link"
-            @click.prevent="logout()"
+            @click.prevent="globalState.logout()"
             >logout</a
           >
 
           <span
-            v-if="settings.isSingleUserMode"
+            v-if="globalState.isSingleUserMode"
             href="#"
             class="ffun-page-header-link-disabled"
             >single-user mode</span
@@ -112,7 +114,7 @@
     </div>
   </div>
 
-  <page-footer />
+  <page-footer v-if="showGUI" />
 </template>
 
 <script lang="ts" setup>
@@ -120,13 +122,12 @@
   import {useRouter} from "vue-router";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
   import {useGlobalState} from "@/stores/globalState";
-  import {useSupertokens} from "@/stores/supertokens";
   import * as events from "@/logic/events";
   import * as e from "@/logic/enums";
+  import * as api from "@/logic/api";
   import * as settings from "@/logic/settings";
 
   const globalSettings = useGlobalSettingsStore();
-  const supertokens = useSupertokens();
   const globalState = useGlobalState();
 
   const router = useRouter();
@@ -141,19 +142,6 @@
     }
   );
 
-  async function logout() {
-    if (settings.authMode === settings.AuthMode.SingleUser) {
-      alert("You can't logout in single user mode");
-      return;
-    }
-
-    await supertokens.logout();
-
-    if (properties.loginRequired) {
-      router.push({name: "main", params: {}});
-    }
-  }
-
   const hasSideFooter = computed(() => {
     return !!slots["side-footer"];
   });
@@ -166,17 +154,20 @@
     return globalSettings.showSidebar || !globalSettings.userSettingsPresent;
   });
 
+  const showGUI = computed(() => {
+    return globalState.loginConfirmed || !properties.loginRequired;
+  });
+
   watchEffect(() => {
     if (!properties.loginRequired) {
       return;
     }
 
-    if (globalState.isLoggedIn === null) {
-      return;
-    }
-
-    if (!globalState.isLoggedIn) {
-      router.push({name: "main", params: {}});
+    if (globalState.logoutConfirmed) {
+      // Redirect to login page in case the user is not logged in.
+      // We redirect to login instead of the main page to be consisten
+      // with default API behavior on redirection in case of getting 401 status.
+      api.redirectToLogin();
     }
   });
 </script>