Add env-aware styling and warnings (#130)

* Add env-aware styling and warnings

* Formatting

.env.sample

@@ -1,3 +1,5 @@
+MESHFORMS_ENVIRONMENT=local
+
 MESHDB_URL=http://127.0.0.1:8000
 
 JOIN_RECORD_BUCKET_NAME=meshdb-join-form-log

.github/workflows/deploy-to-k8s.yaml

@@ -41,6 +41,7 @@ jobs:
 
         # Install the chart with helm
         helm upgrade --install --kubeconfig ./config --kube-apiserver https://${{ secrets.SSH_TARGET_IP }}:6443 -n ${{ vars.APP_NAMESPACE }} --create-namespace meshforms infra/helm/meshforms/ \
+        --set meshforms.environment="${{ vars.MESHFORMS_ENVIRONMENT }}" \
         --set meshforms.meshdb_url="${{ vars.MESHDB_URL }}" \
         --set meshforms_app_namespace="${{ vars.APP_NAMESPACE }}" \
         --set aws.access_key="${{ secrets.S3_ACCESS_KEY }}" \

infra/helm/meshforms/templates/configmap.yaml

@@ -3,6 +3,7 @@ kind: ConfigMap
 metadata:
   name: meshforms-config
 data:
+  MESHFORMS_ENVIRONMENT: {{ .Values.meshforms.environment }}
   JOIN_RECORD_BUCKET_NAME: {{ .Values.meshforms.s3_bucket_name }}
   JOIN_RECORD_PREFIX: {{ .Values.meshforms.s3_base_name }}
   AWS_REGION: {{ .Values.aws.region }}

messages/en.json

@@ -6,6 +6,9 @@
     "label": "Language",
     "locale": "{locale, select, en {🇺🇸 English} es {🇪🇸 Español} fr {🇫🇷 Français} ht {🇭🇹 Kreyòl ayisyen} zh {🇨🇳 中文} other {Unknown}}"
   },
+  "Header": {
+    "developersOnlyWarning": "This site is for developers only. <strong>Do not submit these forms</strong> unless you are a developer. <link>Click here</link> instead to go to the correct version"
+  },
   "Landing": {
     "welcome": "Welcome to MeshForms!"
   },
@@ -64,5 +67,11 @@
     "pleaseConfirmBody": "We needed to re-format some of your information. Please ensure that the below fields are accurate.",
     "originalInformationColumnHeader": "Original",
     "newInformationColumnHeader": "New"
+  },
+  "DeveloperMode": {
+    "devlopersOnlyDialogHeader": "Warning: This form is for developers only",
+    "devlopersOnlyDialogContent": "This site is <strong>only</strong> for developers to test their code changes. <strong>Any changes you make here will not be kept. Any data you access via this form is likely fake</strong> and should not be trusted. If you are not a developer, please click below to proceed to the non-development copy of this website.",
+    "iAmADeveloperButton": "I am a developer. Do not ask again",
+    "iAmNotADeveloperButton": " I am not a developer. Take me to safety"
   }
 }

src/app/[locale]/layout.tsx

@@ -4,6 +4,15 @@ import { routing } from "@/i18n/routing";
 import { getMessages } from "next-intl/server";
 import { NextIntlClientProvider } from "next-intl";
 import deepmerge from "deepmerge";
+import { EnvThemeProvider } from "@/lib/EnvThemeProvider";
+import { IsDeveloperProvider } from "@/lib/AckDevProvider";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Header } from "@/components/Header/Header";
+import { Box } from "@mui/system";
+import Container from "@mui/material/Container";
+import { Footer } from "@/components/Footer/Footer";
+import { EnvProvider } from "@/lib/EnvProvider";
+import * as React from "react";
 
 export default async function RootLayout({
   children,
@@ -24,7 +33,20 @@ export default async function RootLayout({
 
   return (
     <NextIntlClientProvider messages={messages}>
-      {children}
+      <EnvProvider>
+        <EnvThemeProvider>
+          <IsDeveloperProvider>
+            <CssBaseline />
+            <Header />
+            <Box sx={{ width: "100%", backgroundColor: "background.default" }}>
+              <Container maxWidth="lg" sx={{ py: { md: "3rem", sm: "1rem" } }}>
+                {children}
+              </Container>
+            </Box>
+            <Footer />
+          </IsDeveloperProvider>
+        </EnvThemeProvider>
+      </EnvProvider>
     </NextIntlClientProvider>
   );
 }

src/app/[locale]/nn-assign/page.tsx

@@ -0,0 +1,18 @@
+import { Footer } from "@/components/Footer/Footer";
+import { Header } from "@/components/Header/Header";
+import { NNAssignForm } from "@/components/NNAssignForm/NNAssignForm";
+
+export const metadata = {
+  title: "Assign a Network Number",
+  description: "Assign a Network Number to an existing Install",
+};
+
+export default async function NNAssign() {
+  return (
+    <>
+      <main>
+        <NNAssignForm />
+      </main>
+    </>
+  );
+}

src/app/[locale]/page.tsx

@@ -1,5 +1,17 @@
-import { redirect } from "next/navigation";
+import Landing from "@/components/Landing/Landing";
+import { setRequestLocale } from "next-intl/server";
 
-export default function RootPage() {
-  redirect("/");
+type Props = {
+  params: { locale: string };
+};
+
+export default function Home({ params: { locale } }: Props) {
+  setRequestLocale(locale);
+  return (
+    <>
+      <main>
+        <Landing />
+      </main>
+    </>
+  );
 }

src/app/[locale]/query/page.tsx

@@ -0,0 +1,11 @@
+import { QueryForm } from "@/components/QueryForm/QueryForm";
+
+export default async function Join() {
+  return (
+    <>
+      <main>
+        <QueryForm />
+      </main>
+    </>
+  );
+}

src/app/layout.tsx

@@ -1,14 +1,6 @@
 import "@/app/global.css";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
-import { ThemeProvider } from "@mui/material/styles";
-import { Header } from "@/components/Header/Header";
-import { Footer } from "@/components/Footer/Footer";
-import { Box } from "@mui/system";
-import Container from "@mui/material/Container";
-import { notFound } from "next/navigation";
-import { routing } from "@/i18n/routing";
-import { getMessages } from "next-intl/server";
-import theme from "../../theme";
+import * as React from "react";
 
 export const metadata = {
   title: "meshdb-forms by NYC Mesh",
@@ -22,18 +14,8 @@ export default async function RootLayout({
 }) {
   return (
     <html>
-      <body style={{ backgroundColor: "#f4f4f4" }}>
-        <AppRouterCacheProvider>
-          <ThemeProvider theme={theme}>
-            <Header />
-            <Box sx={{ width: "100%", backgroundColor: "white" }}>
-              <Container maxWidth="lg" sx={{ py: { md: "3rem", sm: "1rem" } }}>
-                {children}
-              </Container>
-            </Box>
-            <Footer />
-          </ThemeProvider>
-        </AppRouterCacheProvider>
+      <body>
+        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
       </body>
     </html>
   );

src/app/nn-assign/page.tsx

@@ -1,18 +1,5 @@
-import { Footer } from "@/components/Footer/Footer";
-import { Header } from "@/components/Header/Header";
-import { NNAssignForm } from "@/components/NNAssignForm/NNAssignForm";
+import { redirect } from "next/navigation";
 
-export const metadata = {
-  title: "Assign a Network Number",
-  description: "Assign a Network Number to an existing Install",
-};
-
-export default async function NNAssign() {
-  return (
-    <>
-      <main>
-        <NNAssignForm />
-      </main>
-    </>
-  );
+export default function RootPage() {
+  redirect("/en/nn-assign");
 }

src/app/page.tsx

@@ -1,17 +1,5 @@
-import Landing from "@/components/Landing/Landing";
-import { setRequestLocale } from "next-intl/server";
+import { redirect } from "next/navigation";
 
-type Props = {
-  params: { locale: string };
-};
-
-export default function Home({ params: { locale } }: Props) {
-  setRequestLocale(locale);
-  return (
-    <>
-      <main>
-        <Landing />
-      </main>
-    </>
-  );
+export default function RootPage() {
+  redirect("/en/");
 }

src/app/query/page.tsx

@@ -1,17 +1,5 @@
-import { Footer } from "@/components/Footer/Footer";
-import { Header } from "@/components/Header/Header";
-import { QueryForm } from "@/components/QueryForm/QueryForm";
+import { redirect } from "next/navigation";
 
-// TODO:
-// https://www.npmjs.com/package/react-phone-number-input
-// https://www.npmjs.com/package/react-error-boundary
-
-export default async function Join() {
-  return (
-    <>
-      <main>
-        <QueryForm />
-      </main>
-    </>
-  );
+export default function RootPage() {
+  redirect("/en/query");
 }

src/components/Footer/Footer.tsx

@@ -121,7 +121,7 @@ export function Footer() {
       <footer>
         <Box
           sx={{
-            backgroundColor: "#f4f4f4",
+            backgroundColor: "secondary.main",
             color: "black",
             padding: "none",
             width: "100%",