restore the login page

lib/metadata/getPageOgType.ts

@@ -53,6 +53,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/mud-worlds': 'Root page',
 
   // service routes, added only to make typescript happy
+  '/login': 'Regular page',
   '/sprite': 'Regular page',
   '/api/metrics': 'Regular page',
   '/api/monitoring/invalid-api-schema': 'Regular page',

lib/metadata/templates/description.ts

@@ -57,6 +57,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/mud-worlds': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
+  '/login': DEFAULT_TEMPLATE,
   '/sprite': DEFAULT_TEMPLATE,
   '/api/metrics': DEFAULT_TEMPLATE,
   '/api/monitoring/invalid-api-schema': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -53,6 +53,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/mud-worlds': '%network_name% MUD worlds list',
 
   // service routes, added only to make typescript happy
+  '/login': '%network_name% login',
   '/sprite': '%network_name% SVG sprite',
   '/api/metrics': '%network_name% node API prometheus metrics',
   '/api/monitoring/invalid-api-schema': '%network_name% node API prometheus metrics',

lib/mixpanel/getPageType.ts

@@ -51,6 +51,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/mud-worlds': 'MUD worlds',
 
   // service routes, added only to make typescript happy
+  '/login': 'Login',
   '/sprite': 'Sprite',
   '/api/metrics': 'Node API: Prometheus metrics',
   '/api/monitoring/invalid-api-schema': 'Node API: Prometheus metrics',

nextjs/getServerSideProps.ts

@@ -8,6 +8,7 @@ import type { Route } from 'nextjs-routes';
 import config from 'configs/app';
 const rollupFeature = config.features.rollup;
 const adBannerFeature = config.features.adsBanner;
+import isNeedProxy from 'lib/api/isNeedProxy';
 import type * as metadata from 'lib/metadata';
 
 export interface Props<Pathname extends Route['pathname'] = never> {
@@ -253,6 +254,17 @@ export const dataAvailability: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const login: GetServerSideProps<Props> = async(context) => {
+
+  if (!isNeedProxy()) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const dev: GetServerSideProps<Props> = async(context) => {
   if (!config.app.isDev) {
     return {

nextjs/nextjs-routes.d.ts

@@ -43,6 +43,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/gas-tracker">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
+    | StaticRoute<"/login">
     | StaticRoute<"/mud-worlds">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>
     | StaticRoute<"/name-domains">

pages/login.tsx

+import type { NextPage } from 'next';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+import Login from 'ui/pages/Login';
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/login">
+      <Login/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { login as getServerSideProps } from 'nextjs/getServerSideProps';

ui/pages/Login.pw.tsx

+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import Login from './Login';
+
+test.fixme('has feature text', async({ render, mockFeatures }) => {
+  await mockFeatures([
+    [ 'test_value', 'kitty' ],
+  ]);
+  const component = await render(<Login/>);
+  const featureText = component.getByText('kitty');
+  await expect(featureText).toBeVisible();
+});

ui/pages/Login.tsx

+import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Code, Flex, Box } from '@chakra-ui/react';
+import * as Sentry from '@sentry/react';
+import mixpanel from 'mixpanel-browser';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as cookies from 'lib/cookies';
+import useFeatureValue from 'lib/growthbook/useFeatureValue';
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
+import useToast from 'lib/hooks/useToast';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+const Login = () => {
+  const toast = useToast();
+  const [ num, setNum ] = useGradualIncrement(0);
+
+  const testFeature = useFeatureValue('test_value', 'fallback');
+
+  const [ isFormVisible, setFormVisibility ] = React.useState(false);
+  const [ token, setToken ] = React.useState('');
+
+  React.useEffect(() => {
+    const token = cookies.get(cookies.NAMES.API_TOKEN);
+    setFormVisibility(Boolean(!token && config.features.account.isEnabled));
+    // throw new Error('Test error');
+  }, []);
+
+  const checkSentry = React.useCallback(() => {
+    Sentry.captureException(new Error('Test error'), { tags: { source: 'test' } });
+  }, []);
+
+  const checkMixpanel = React.useCallback(() => {
+    mixpanel.track('Test event', { my_prop: 'foo bar' });
+  }, []);
+
+  const handleTokenChange = React.useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
+    setToken(event.target.value);
+  }, []);
+
+  const handleSetTokenClick = React.useCallback(() => {
+    cookies.set(cookies.NAMES.API_TOKEN, token);
+    setToken('');
+    toast({
+      position: 'top-right',
+      title: 'Success 🥳',
+      description: 'Successfully set cookie',
+      status: 'success',
+      variant: 'subtle',
+      isClosable: true,
+      onCloseComplete: () => {
+        setFormVisibility(false);
+      },
+    });
+  }, [ toast, token ]);
+
+  const handleNumIncrement = React.useCallback(() => {
+    for (let index = 0; index < 5; index++) {
+      setNum(5);
+    }
+  }, [ setNum ]);
+
+  return (
+    <VStack gap={ 4 } alignItems="flex-start" maxW="1000px">
+      <PageTitle title="Login page 😂"/>
+      { isFormVisible && (
+        <>
+          <Alert status="error" flexDirection="column" alignItems="flex-start">
+            <AlertTitle fontSize="md">
+                 !!! Temporary solution for authentication on localhost !!!
+            </AlertTitle>
+            <AlertDescription mt={ 3 }>
+                     To Sign in go to production instance first, sign in there, copy obtained API token from cookie
+              <Code ml={ 1 }>{ cookies.NAMES.API_TOKEN }</Code> and paste it in the form below. After submitting the form you should be successfully
+                     authenticated in current environment
+            </AlertDescription>
+          </Alert>
+          <Textarea value={ token } onChange={ handleTokenChange } placeholder="API token"/>
+          <Button onClick={ handleSetTokenClick }>Set cookie</Button>
+        </>
+      ) }
+      <Flex columnGap={ 2 }>
+        <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
+        <Button colorScheme="teal" onClick={ checkMixpanel }>Check Mixpanel</Button>
+      </Flex>
+      <Flex columnGap={ 2 } alignItems="center">
+        <Box w="50px" textAlign="center">{ num }</Box>
+        <Button onClick={ handleNumIncrement } size="sm">add</Button>
+      </Flex>
+      <Box>Test feature value: <b>{ testFeature.isLoading ? 'loading...' : JSON.stringify(testFeature.value) }</b></Box>
+    </VStack>
+  );
+
+};
+
+export default Login;