feat(RL-79): login updates for web

NoodleOfDeath · Nov 13, 2023 · eedbe8a · eedbe8a
1 parent ab2cedd
commit eedbe8a
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 98 deletions.
diff --git a/src/core/src/client/contexts/storage/StorageContext.tsx b/src/core/src/client/contexts/storage/StorageContext.tsx
@@ -183,6 +183,9 @@ export function StorageContextProvider({ children }: React.PropsWithChildren) {
   }, [withHeaders]);
 
   const updateRemotePref = React.useCallback(async <K extends keyof Storage>(key: K, newState?: Storage[K]) => {
+    if (!storage.userData?.valid) {
+      return; 
+    }
     if (!SYNCABLE_SETTINGS.includes(key)) {
       return;
     }
@@ -196,7 +199,7 @@ export function StorageContextProvider({ children }: React.PropsWithChildren) {
     } catch (e) {
       console.error(e);
     }
-  }, [api]);
+  }, [api, storage]);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleBadRequest = React.useCallback(async (e?: any) => {

diff --git a/src/server/src/services/mail/templates/base.ts b/src/server/src/services/mail/templates/base.ts
@@ -33,7 +33,6 @@ export abstract class MailTemplate<Params extends MailTemplateParams> implements
     domain = [BASE_DOMAIN === 'readless://' ? '' : (ssl ? 'https://' : 'http://'), BASE_DOMAIN].filter(Boolean).join(''),
     ...rest
   }: Optional<Params, 'domain' | 'ssl'> = {} as Params) {
-    console.log('fuckkkkkk', domain);
     let html = this.body;
     Object.entries({ domain, ...rest }).forEach(([key, value]) => {
       html = html.replaceAll(`{{${key}}}`, value);

diff --git a/src/web/next.config.js b/src/web/next.config.js
@@ -5,6 +5,7 @@ const nextConfig = {
   webpack: (config, { isServer }) => {
     if (!isServer) {
       config.resolve.fallback.fs = false;
+      config.module.rules.push({ test: /\.node$/, use: 'node-loader' });
     }
     return config;
   },

diff --git a/src/web/src/pages/_app.tsx b/src/web/src/pages/_app.tsx
@@ -8,94 +8,98 @@ import {
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { ParallaxProvider } from 'react-scroll-parallax';
+
 import '../styles/app.sass';
+import { StorageContextProvider } from '~/contexts';
 
 const theme = createTheme({ components: { MuiTypography: { defaultProps: { fontFamily: 'Anek Latin, Roboto, sans-serif' } } } });
 
 function App({ Component, pageProps }: AppProps) {
   return (
-    <ThemeProvider theme={ theme }>
-      <CssBaseline />
-      <ParallaxProvider>
-        <Head>
-          <title key='title'>Read Less – News without the noise</title>
-          <meta name="description" content="Read Less is a news aggregator that uses AI to cut through the noise in the news headlines." />
-          <meta
-            key='og:title'
-            property="og:title" 
-            content="Read Less – News without the noise" />
-          <meta
-            key='og:description'
-            property="og:description"
-            content="Using AI to cut through the bullsh💩t" />
-          <meta
-            key='og:image'
-            property="og:image"
-            content="/sms-banner.png" />
-          <meta
-            key='og:url'
-            property="og:url"
-            content={ process.env.NEXT_PUBLIC_BASE_URL } />
-          <meta
-            key='og:site_name'
-            property="og:site_name"
-            content="Read Less – News without the noise" />
-          <meta
-            key='twitter:title'
-            property="twitter:title" 
-            content="Read Less – News without the noise" />
-          <meta
-            key='twitter:description'
-            property="twitter:description"
-            content="Using AI to cut through the bullsh💩t" />
-          <meta
-            key='twitter:image'
-            property="twitter:image"
-            content="/twitter-card.png" />
-          <meta 
-            key='og:type'
-            property="og:type"
-            content="Article" />
-          <meta
-            key='twitter:card'
-            content="summary" 
-            name="twitter:card" />
-          <meta
-            key='twitter:site'
-            name="twitter:site"
-            content="@readlessai" />
-          <meta
-            key='twitter:creator'
-            name="twitter:creator"
-            content="@readlessai" />
-          <meta
-            key='fb:app_id'
-            property="fb:app_id" 
-            content={ process.env.NEXT_PUBLIC_FACEBOOK_ID } />
-          <meta
-            key='robots'
-            name="robots" 
-            content="index, follow" />
-          <meta
-            key="apple-itunes-app" 
-            name="apple-itunes-app"
-            content={ `app-id=${process.env.NEXT_PUBLIC_APPLE_APP_ID}` } />
-          <meta
-            key='viewport'
-            name="viewport"
-            content="width=device-width, initial-scale=1" />
-          <meta 
-            key='msapplication-TileImage'
-            name="msapplication-TileColor"
-            content="#da532c" />
-          <meta 
-            key='theme-color'
-            name="theme-color"
-            content="#ffffff" />
-        </Head>
-        <Component { ...pageProps } />
-      </ParallaxProvider>
-    </ThemeProvider>
+    <StorageContextProvider>
+      <ThemeProvider theme={ theme }>
+        <CssBaseline />
+        <ParallaxProvider>
+          <Head>
+            <title key='title'>Read Less – News without the noise</title>
+            <meta name="description" content="Read Less is a news aggregator that uses AI to cut through the noise in the news headlines." />
+            <meta
+              key='og:title'
+              property="og:title" 
+              content="Read Less – News without the noise" />
+            <meta
+              key='og:description'
+              property="og:description"
+              content="Using AI to cut through the bullsh💩t" />
+            <meta
+              key='og:image'
+              property="og:image"
+              content="/sms-banner.png" />
+            <meta
+              key='og:url'
+              property="og:url"
+              content={ process.env.NEXT_PUBLIC_BASE_URL } />
+            <meta
+              key='og:site_name'
+              property="og:site_name"
+              content="Read Less – News without the noise" />
+            <meta
+              key='twitter:title'
+              property="twitter:title" 
+              content="Read Less – News without the noise" />
+            <meta
+              key='twitter:description'
+              property="twitter:description"
+              content="Using AI to cut through the bullsh💩t" />
+            <meta
+              key='twitter:image'
+              property="twitter:image"
+              content="/twitter-card.png" />
+            <meta 
+              key='og:type'
+              property="og:type"
+              content="Article" />
+            <meta
+              key='twitter:card'
+              content="summary" 
+              name="twitter:card" />
+            <meta
+              key='twitter:site'
+              name="twitter:site"
+              content="@readlessai" />
+            <meta
+              key='twitter:creator'
+              name="twitter:creator"
+              content="@readlessai" />
+            <meta
+              key='fb:app_id'
+              property="fb:app_id" 
+              content={ process.env.NEXT_PUBLIC_FACEBOOK_ID } />
+            <meta
+              key='robots'
+              name="robots" 
+              content="index, follow" />
+            <meta
+              key="apple-itunes-app" 
+              name="apple-itunes-app"
+              content={ `app-id=${process.env.NEXT_PUBLIC_APPLE_APP_ID}` } />
+            <meta
+              key='viewport'
+              name="viewport"
+              content="width=device-width, initial-scale=1" />
+            <meta 
+              key='msapplication-TileImage'
+              name="msapplication-TileColor"
+              content="#da532c" />
+            <meta 
+              key='theme-color'
+              name="theme-color"
+              content="#ffffff" />
+          </Head>
+          <Component { ...pageProps } />
+        </ParallaxProvider>
+      </ThemeProvider>
+    </StorageContextProvider>
   );
 }
 

diff --git a/src/web/src/pages/read/index.tsx b/src/web/src/pages/read/index.tsx
@@ -127,6 +127,10 @@ export default function AppPage({
               key="og:image"
               property="og:image"
               content={ rootSummary.media?.imageArticle || rootSummary.media?.imageAi1 || rootSummary.imageUrl } />
+            <meta
+              key='twitter:image'
+              property="twitter:image"
+              content={ rootSummary.media?.imageArticle || rootSummary.media?.imageAi1 || rootSummary.imageUrl } />
             <meta 
               key="og:title"
               property="og:title"

diff --git a/src/web/src/pages/verify/index.tsx b/src/web/src/pages/verify/index.tsx
@@ -30,6 +30,9 @@ export default function VerifyPage() {
   const [repeatPassword, setRepeatPassword] = React.useState('');
 
   const validateToken = React.useCallback(async () => {
+    if (!loading) {
+      return;
+    }
     try {
       const otp = searchParams.get('otp');
       const code = searchParams.get('code');
@@ -59,7 +62,7 @@ export default function VerifyPage() {
     } finally {
       setLoading(false);
     }
-  }, [searchParams, setStoredValue, verifyOtp, verifySubscription]);
+  }, [loading, searchParams, setStoredValue, verifyOtp, verifySubscription]);
 
   const handlePasswordReset = React.useCallback(async () => {
     try {
@@ -83,7 +86,6 @@ export default function VerifyPage() {
 
   return (
     <Layout>
-      {`fuck ${colorScheme}`}
       <Stack spacing={ 2 }>
         <div>{message}</div>
         {loading && <CircularProgress variant='indeterminate' />}

diff --git a/src/web/src/utils/useLocalStorage.ts b/src/web/src/utils/useLocalStorage.ts
@@ -3,13 +3,6 @@ export function useLocalStorage() {
   const getItem = async (name: string) => {
     return window.localStorage.getItem(name);
   };
-
-  const setItem = async (name: string, value?: string) => {
-    if (!value) {
-      return window.localStorage.removeItem(name);
-    }
-    window.localStorage.setItem(name, value);
-  };
 
   const removeItem = async (name: string) => {
     return window.localStorage.removeItem(name);
@@ -18,6 +11,13 @@ export function useLocalStorage() {
   const removeAll = async (_hard = false) => {
     return window.localStorage.clear();
   };
+
+  const setItem = async (name: string, value?: string) => {
+    if (!value) {
+      return removeItem(name);
+    }
+    window.localStorage.setItem(name, value);
+  };
 
   return {
     getItem,

diff --git a/src/web/src/utils/usePlatformTools.ts b/src/web/src/utils/usePlatformTools.ts
@@ -1,5 +1,7 @@
 import EventEmitter from 'events';
 
+import React from 'react';
+
 import {
   StorageEventName,
   StorageMutation,
@@ -8,19 +10,25 @@ import {
 
 export function usePlatformTools() {
 
-  const getUserAgent = () => {
+  const [navigator, setNavigator] = React.useState<Navigator>();
+
+  const getUserAgent = React.useCallback(() => {
     return {
       OS: 'web',
-      currentVersion: 'web1.7.10',
-      locale: window.navigator.language,
-      userAgent: window.navigator.userAgent,
+      currentVersion: 'web1.17.0',
+      locale: navigator?.language ?? 'unknown',
+      userAgent: navigator?.userAgent ?? 'unknown',
     };
-  };
+  }, [navigator]);
 
   const emitEvent = <E extends StorageEventName>(event: E, mutation?: StorageMutation<E>, state?: StorageState<E>) => {
     new EventEmitter().emit(event, mutation, state);
   };
 
+  React.useEffect(() => {
+    setNavigator(window.navigator);
+  }, []);
+
   return {
     emitEvent,
     getUserAgent,