feat(enable js) html and js routes

src/app/api/captcha/route.ts

@@ -64,6 +64,7 @@ export async function POST(req: NextRequest) {
   let iv = '';
   let encrypted = '';
   let confirmCode = '';
+  let hasJs = false;
   const sendError = (_message = '') => {
     let allowedOrigins = '*';
     if (isProd) {
@@ -104,6 +105,9 @@ export async function POST(req: NextRequest) {
   // console.log("captcha api", req);
   try {
     const formData = await req.formData();
+    const hasJavascript = formData.get('js') as string;
+    hasJs = hasJavascript === 'true';
+
     iv = formData.get('encryptedi') as string;
     if (isEmpty(iv)) return sendError();
 
@@ -141,12 +145,14 @@ export async function POST(req: NextRequest) {
     cookieStore.set('refresh', 'true', { expires: in3Secs });
     // cookieStore.set("message", "Successfully verified code", { expires: in3Secs });
     // cookieStore.set("success", "true", { expires: in3Secs });
+    cookieStore.set('js', `${hasJs}`, { expires: in1hr });
     cookieStore.set('endgamex', endgameCypher, { expires: in1hr });
     cookieStore.set('endgamei', endgameCypherIv, { expires: in1hr });
 
+    const resUrl = !hasJs ? '/html' : '/';
     return new Response(null, {
       headers: {
-        Refresh: `0; url=/html`,
+        Refresh: `0; url=${resUrl}`,
         // 'Refresh': `0; url=/`,
       },
     });

src/app/html/layout.tsx

@@ -11,7 +11,7 @@ import { getMyWallets, getRates } from '@/lib/hooksServer/wallet';
 import { HtmlPageWrapper } from './html.wrapper';
 
 const publicRoutes = ['/html/login', '/html/signup', '/html/forgot-password'];
-export default async function RootLayout({
+export default async function HtmlLayout({
   children,
 }: {
   children: React.ReactNode;

src/app/js.layout.tsx

@@ -0,0 +1,29 @@
+import { awaitTo } from '@stoqey/client-graphql';
+import { headers } from 'next/headers';
+import React from 'react';
+
+import { getMe } from '@/lib/hooksServer/user';
+
+import { JsPageWrapper } from './js.wrapper';
+
+const publicRoutes = ['/login', '/signup', '/forgot-password'];
+export default async function JsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const user = await getMe();
+  const headersList = headers();
+  const fullUrl = headersList.get('x-url') || '';
+  const [, currentUrl] = await awaitTo(Promise.resolve(new URL(fullUrl)));
+  if (
+    !user &&
+    !publicRoutes.some((route) =>
+      (currentUrl?.pathname || '').startsWith(route),
+    )
+  ) {
+    return <meta httpEquiv="refresh" content="0; url=/login" />;
+  }
+
+  return <JsPageWrapper user={user as any}>{children}</JsPageWrapper>;
+}

src/app/js.wrapper.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import {
+  AccentRegion,
+  Background,
+  CoreUIRoot,
+  Display,
+  FlexDirection,
+  FlexWrap,
+  Layout,
+  Overflow,
+  SVGAsset,
+} from '@uuixjs/uuixweb';
+import { isEmpty } from 'lodash';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+import { PageNotFound } from '@/components/404s/NotFound';
+import Nav from '@/components/nav';
+import VerticalSideBar from '@/components/sidebar/SideBar';
+
+import { BodyContent } from './coreui';
+// TODO NEXT_PUBLIC_JS_ONLY
+const isJsOnly = !isEmpty(process.env.NEXT_PUBLIC_JS_ONLY);
+const isProduction = process.env.NODE_ENV === 'production';
+
+export const JsPageWrapper = ({ children, ...otherProps }: any) => {
+  const { user } = otherProps;
+  const pathname = usePathname();
+  const [hasJs, setHasJs] = React.useState(false);
+
+  React.useEffect(() => {
+    setHasJs(true);
+  }, []);
+
+  // if(isJsOnly){
+  //   // return should only use no-js
+  // }
+
+  return (
+    <CoreUIRoot cssVars theme={otherProps.theme}>
+      {/* @ts-ignore */}
+      <AccentRegion
+      // {...generateAccentRegionProps("#28ff00")}
+      >
+        <Layout
+          id="layout-main"
+          background={Background.Base}
+          display={Display.Flex}
+          overflow={Overflow.Hidden}
+          fullWidth
+          fullHeight
+        >
+          {!hasJs && isProduction ? (
+            <PageNotFound
+              icon={SVGAsset.Lock}
+              message="Please enable javascript, and refresh"
+              title="NO JavaScript detected"
+            />
+          ) : (
+            <Layout
+              display={Display.Flex}
+              flexWrap={FlexWrap.NoWrap}
+              flexDirection={FlexDirection.Column}
+              overflow={Overflow.Hidden}
+              fullWidth
+              fullHeight
+              {...otherProps}
+            >
+              <Nav {...otherProps} />
+
+              {/* TODO no global sidebar? */}
+
+              {/* <BodyContent>{children}</BodyContent> */}
+              <BodyContent>
+                <Layout display={Display.Flex} fullWidth>
+                  {user && <VerticalSideBar client {...otherProps} />}
+
+                  <Layout fullWidth>
+                    {/* RootMessageHtml */}
+                    {children}
+                  </Layout>
+                </Layout>
+              </BodyContent>
+            </Layout>
+          )}
+        </Layout>
+      </AccentRegion>
+    </CoreUIRoot>
+  );
+};

src/app/layout.tsx

@@ -1,5 +1,5 @@
-import './globals.css';
-import './base.css';
+import '@/styles/globals.css';
+import '@/styles/base.css';
 import 'react-image-gallery/styles/css/image-gallery.css';
 
 import { isEmpty } from 'lodash';

src/app/page.tsx

@@ -3,29 +3,36 @@ import { cookies } from 'next/headers';
 import React from 'react';
 
 import { PageNotFound } from '@/components/404s/NotFound';
+import { AuthWall } from '@/components/AuthWall/authwall';
 import {
   encryptCaptchaCode,
   getCaptchaFromLocalhost,
   saveCaptchaToRedis,
 } from '@/lib/hooksServer/captcha';
 import { validateEndgameSession } from '@/middlewares/endgame.utils';
 
-import RootIndex from './homepage';
+import JsLayout from './js.layout';
+import SearchPage from './search/page';
 
 // PUBLIC PAGE
-export default async function Home() {
+export default async function RootPage() {
   let iv;
   let ciphertext;
   let captcha;
   const cookieStore = cookies();
   const message = cookieStore.get('message')?.value;
   const success = cookieStore.get('success')?.value === 'true';
+  const hasJs = cookieStore.get('js')?.value === 'true';
 
   const endgamex = cookieStore.get('endgamex')?.value || '';
   const endgamei = cookieStore.get('endgamei')?.value || '';
   const [, validEndgame] = await awaitTo(
     validateEndgameSession(endgamex, endgamei),
   );
+
+  if (hasJs && validEndgame) {
+    return JsLayout({ children: <SearchPage /> });
+  }
   if (validEndgame) {
     return <meta httpEquiv="refresh" content="0; url=/html" />;
   }
@@ -54,7 +61,7 @@ export default async function Home() {
   }
 
   return (
-    <RootIndex
+    <AuthWall
       message={message}
       success={success}
       iv={iv}

src/components/AuthWall/authwall.tsx

@@ -15,10 +15,9 @@ import {
 import { styled } from '@uuixjs/uuixweb-lib';
 import React from 'react';
 
+import { SslattIcon } from '@/components/logo/icon';
 import { MessageSuccessHtml } from '@/containers/actions.html';
 
-import { SslattIcon } from '../logo/icon';
-
 const SnakeBg = styled(Layout)`
   .cls-snake-1,
   .cls-snake-2 {
@@ -43,6 +42,13 @@ export interface AuthWallProps {
 
 export const AuthWall = (props: AuthWallProps) => {
   const { captcha = '', iv, encrypted, message = '', success = false } = props;
+
+  const [hasJs, setHasJs] = React.useState(false);
+
+  React.useEffect(() => {
+    setHasJs(true);
+  }, []);
+
   return (
     <AccentRegion inputColorIsDark>
       <Layout
@@ -107,6 +113,7 @@ export const AuthWall = (props: AuthWallProps) => {
                 )}
 
                 <form action="/api/captcha" method="POST">
+                  <input type="hidden" name="js" value={hasJs} />
                   <input type="hidden" name="encryptedi" value={iv} />
                   <input type="hidden" name="encryptedx" value={encrypted} />
                   {/* image render */}