user-friendly home and database connection demo

VulcanJS · Jan 8, 2021 · 677847f · 677847f
1 parent 9196482
commit 677847f
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 49 deletions.
diff --git a/.env.development b/.env.development
@@ -1,5 +1,6 @@
 NEXT_PUBLIC_GRAPHQL_URI="http://localhost:3001/graphql"
-MONGO_URI="mongodb+srv://johnDoe:[email protected]/sample_restaurants?retryWrites=true&w=majority"
 APOLLO_SERVER_CORS_WHITELIST="http://localhost:3000"
 ADMIN_EMAIL="[email protected]"
-ADMIN_INITIAL_PASSWORD="vulcan_is_cool"
+ADMIN_INITIAL_PASSWORD="vulcan_is_cool"
+MONGO_URI="mongodb+srv://johnDoe:[email protected]/sample_restaurants?retryWrites=true&w=majority"
+# MONGO_URI="mongodb://localhost:27017/vulcan-next-app"
diff --git a/cypress/integration/vns/private.spec.ts b/cypress/integration/vns/private.spec.ts
@@ -1,3 +1,9 @@
+/**
+ * NOTE: this tests cover the "withPrivateAccess" hook
+ * which can be considered as deprecated
+ *
+ * See "auth.spec.ts" for a more recent test
+ */
 describe("private pages", () => {
   describe("server side", () => {
     it("redirects when accessing private page", () => {

diff --git a/next.config.js b/next.config.js
@@ -58,9 +58,14 @@ module.exports = (phase, { defaultConfig }) => {
   let extendedConfig;
   extendedConfig = extendNextConfig(defaultConfig);
 
-  extendedConfig.env = {};
-  extendedConfig.serverRuntimeConfig = {};
-  extendedConfig.publicRuntimeConfig = {};
+  extendedConfig.env = {
+    NEXT_PUBLIC_IS_USING_DEMO_DATABASE: !!(process.env.MONGO_URI || "").match(
+      /lbke\-demo/
+    ),
+    NEXT_PUBLIC_IS_USING_LOCAL_DATABSE: !!(process.env.MONGO_URI || "").match(
+      /localhost/
+    ),
+  };
 
   // Enable Webpack analyzer
   if (process.env.ANALYZE && process.env.ANALYZE !== "false") {

diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx
@@ -4,13 +4,33 @@ import { Typography } from "@material-ui/core";
 
 export const Home = () => (
   <div>
-    <Typography>
-      <em>
-        Below, find Vulcan Next Readme loaded from an MD file using{" "}
-        <a href="https://mdxjs.com/">MDXJS</a>
-      </em>
-    </Typography>
+    <div className="welcome-message">
+      <Typography>
+        Hi there! You are running Vulcan Next! You are doing great so far.
+      </Typography>
+      <Typography>
+        Below, find Vulcan Next Readme loaded from a markdown file using{" "}
+        <a href="https://mdxjs.com/">MDXJS</a>.
+      </Typography>
+      <Typography>
+        You can also read the rest of{" "}
+        <a href="/docs">Vulcan documentation here.</a>
+      </Typography>
+      <Typography>Have fun!</Typography>
+    </div>
     <Readme />
+    <style jsx>
+      {`
+        .welcome-message {
+          padding: 32px 32px;
+          font-size: 110%;
+          background: linear-gradient(10deg, #e1009811, #3f77fa11);
+          backbround-color: #3f77fa5533;
+          border-image-slice: 1;
+          border: 8px dotted #3f77fa11;
+        }
+      `}
+    </style>
   </div>
 );
 

diff --git a/src/components/layout/MDXMuiLayout.tsx b/src/components/layout/MDXMuiLayout.tsx
@@ -47,7 +47,8 @@ const components = {
   //inlineCode: Typography,
   //hr: Typography,
   a: Link,
-  //img: Typography,
+  // TODO: didn't find a way to override image styling...
+  img: (props) => <img {...props} style={{ maxWidth: "100%" }} />,
 };
 const MDXMuiLayout = ({ children }: MDXLayoutProps) => {
   return (

diff --git a/src/components/user/form.js → src/components/user/form.tsx b/src/components/user/form.js → src/components/user/form.tsx
diff --git a/src/components/user/layout.js → src/components/user/layout.tsx b/src/components/user/layout.js → src/components/user/layout.tsx
@@ -1,14 +1,28 @@
 import Head from "next/head";
-import Footer from "~/components/layout/Footer";
 
 const Layout = (props) => (
   <>
     <Head>
-      <title>With Cookies</title>
+      <title>Auth</title>
     </Head>
 
     <main>
-      <div className="container">{props.children}</div>
+      <div className="container">
+        {process.env.NEXT_PUBLIC_IS_USING_DEMO_DATABASE ? (
+          <div>
+            <p>You are using LBKE read-only demo database.</p>
+            <p>
+              To enable authentication features, please setup your own local
+              database.
+            </p>
+            <p>
+              See <a href="/">home README </a> for relevant instructions.
+            </p>
+          </div>
+        ) : (
+          props.children
+        )}
+      </div>
     </main>
 
     {/*<Footer />*/}

diff --git a/src/pages/api/signup.ts b/src/pages/api/signup.ts
@@ -14,7 +14,7 @@ export default async function signup(
     // we need to use it to ensure that we run all callbacks associated to the user collection
     const user = req.body;
     // TODO: check if this is ok to compute the context from a NextApiRequest like this
-    const context = await contextFromReq(req as unknown as Request)
+    const context = await contextFromReq((req as unknown) as Request);
     await createMutator({ model: User, data: user, context });
     res.status(200).send({ done: true });
   } catch (error) {

diff --git a/src/pages/docs/features.md b/src/pages/docs/features.md
@@ -47,9 +47,15 @@ It will run an ephemeral Docker instance of Mongo v4. Data are stored in your pr
 
 ## Authentication
 
-### Demonstration of redirection
+### Passport authentication
 
-See `src/pages/vns/debug/private`. You can use `withPrivateAccess` HOC to make a page private and handle redirections correctly in all situations (server-side, client-side, in the context of a static export etc.).
+Access the See the home page footer to access signup, login, logout and profile page. Implementation is based on Next official example [with Passport and Next Connect](https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect)
+
+### Experimental SSR redirection
+
+*This feature is experimental and not useful in most scenarios.* We advise to stick to client-side only patterns. [See relevant issue](https://github.com/VulcanJS/vulcan-next/issues/71).
+
+See `src/pages/vns/debug/private` for a demo. You can use `withPrivateAccess` HOC to make a page private and handle redirections correctly in all situations (server-side, client-side, in the context of a static export etc.).
 
 ## Apollo Server
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,39 +1,8 @@
-import { useQuery /*, useMutation*/ } from "@apollo/client";
-import gql from "graphql-tag";
 import Home from "~/components/home";
 //import { useForm } from "react-hook-form";
 import MDXMuiLayout from "~/components/layout/MDXMuiLayout";
 
 const HomePage = () => {
-  const vulcanSiteDataQuery = gql`
-    query getSiteData {
-      siteData {
-        url
-        title
-        sourceVersion
-        logoUrl
-      }
-    }
-  `;
-
-  const { data, loading, error } = useQuery(vulcanSiteDataQuery);
-
-  let content;
-  if (loading) {
-    content = `Connecting to your graphQL backend...`; // on ${client.name}`
-  } else if (error) {
-    if (error.networkError?.message === "Failed to fetch") {
-      content = `No graphQL backend is running.`;
-    } else {
-      content = `Couldn't connect to your graphQL backend (${error}).`;
-    }
-  } else if (data) {
-    content = `Successfully connected to your graphQL backend.\n Data: ${JSON.stringify(
-      data,
-      null,
-      4
-    )}`;
-  }
   return (
     <MDXMuiLayout>
       <main>

diff --git a/src/pages/vns/debug/meteor.tsx b/src/pages/vns/debug/meteor.tsx
@@ -0,0 +1,40 @@
+/**
+ * Demo queries to a legacy Vulcan Meteor backend
+ */
+import { useQuery /*, useMutation*/ } from "@apollo/client";
+import gql from "graphql-tag";
+
+const VulcanMeteorDemo = () => {
+  const vulcanSiteDataQuery = gql`
+    query getSiteData {
+      siteData {
+        url
+        title
+        sourceVersion
+        logoUrl
+      }
+    }
+  `;
+
+  const { data, loading, error } = useQuery(vulcanSiteDataQuery);
+
+  let content;
+  if (loading) {
+    content = `Connecting to your graphQL backend...`; // on ${client.name}`
+  } else if (error) {
+    if (error.networkError?.message === "Failed to fetch") {
+      content = `No graphQL backend is running.`;
+    } else {
+      content = `Couldn't connect to your graphQL backend (${error}).`;
+    }
+  } else if (data) {
+    content = `Successfully connected to your graphQL backend.\n Data: ${JSON.stringify(
+      data,
+      null,
+      4
+    )}`;
+  }
+  return content;
+};
+
+export default VulcanMeteorDemo;