Merge pull request #523 from openclimatefix/staging

Quartz Energy v0.1.1 – Auth + Forecast Horizon Select

Author: braddf

apps/nowcasting-app/components/map/deltaMap.tsx

@@ -6,7 +6,6 @@ import mapboxgl, { Expression } from "mapbox-gl";
 import { FailedStateMap, LoadStateMap, Map, MeasuringUnit } from "./";
 import { ActiveUnit, SelectedData } from "./types";
 import { DELTA_BUCKET, VIEWS } from "../../constant";
-import ButtonGroup from "../../components/button-group";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import useGlobalState from "../helpers/globalState";
 import { formatISODateString, formatISODateStringHuman } from "../helpers/utils";
@@ -28,7 +27,9 @@ import DeltaColorGuideBar from "./delta-color-guide-bar";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
 import { generateGeoJsonForecastData } from "../helpers/data";
 import { components } from "../../types/quartz-api";
+import dynamic from "next/dynamic";
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
+const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
 
 const getRoundedPv = (pv: number, round: boolean = true) => {
   if (!round) return Math.round(pv);

apps/nowcasting-app/components/map/pvLatestMap.tsx

@@ -6,7 +6,6 @@ import mapboxgl, { Expression } from "mapbox-gl";
 import { FailedStateMap, LoadStateMap, Map, MeasuringUnit } from "./";
 import { ActiveUnit, SelectedData } from "./types";
 import { MAX_POWER_GENERATED, VIEWS } from "../../constant";
-import ButtonGroup from "../../components/button-group";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import useGlobalState from "../helpers/globalState";
 import { formatISODateString, formatISODateStringHuman } from "../helpers/utils";
@@ -17,8 +16,11 @@ import { FeatureCollection } from "geojson";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
 import { components } from "../../types/quartz-api";
 import { generateGeoJsonForecastData } from "../helpers/data";
+import dynamic from "next/dynamic";
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
 
+const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
+
 type PvLatestMapProps = {
   className?: string;
   combinedData: CombinedData;

apps/nowcasting-app/components/map/sitesMap.tsx

@@ -10,7 +10,6 @@ import {
   MAX_POWER_GENERATED,
   VIEWS
 } from "../../constant";
-import ButtonGroup from "../../components/button-group";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import dnoShapeData from "../../data/dno_regions_lat_long_converted.json";
 import useGlobalState from "../helpers/globalState";
@@ -26,8 +25,10 @@ import { Feature, FeatureCollection } from "geojson";
 import Slider from "./sitesMapFeatures/sitesZoomSlider";
 import SitesLegend from "./sitesMapFeatures/sitesLegend";
 import { safelyUpdateMapData } from "../helpers/mapUtils";
+import dynamic from "next/dynamic";
 
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
+const ButtonGroup = dynamic(() => import("../../components/button-group"), { ssr: false });
 
 const getRoundedPv = (pv: number, round: boolean = true) => {
   if (!round) return Math.round(pv);

apps/quartz-app/.env.preview

@@ -0,0 +1 @@
+AUTH0_BASE_URL=https://$VERCEL_URL

apps/quartz-app/.env.production

@@ -0,0 +1 @@
+AUTH0_BASE_URL=https://$VERCEL_URL

apps/quartz-app/app/api/auth/[auth0]/route.ts

@@ -0,0 +1,14 @@
+import { handleAuth, handleLogout, HandleAuth } from "@auth0/nextjs-auth0";
+
+/**
+ * This is a GET endpoint that automatically handles authentication using Auth0.
+ * We're using a logout option override to redirect to "/logout" after logout.
+ *
+ * @function GET
+ * @returns {HandleAuth} A function that handles authentication.
+ */
+export const GET = handleAuth({
+  logout: handleLogout({
+    returnTo: "/logout",
+  }),
+});

apps/quartz-app/app/api/token/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
+
+/**
+ * This is a secured GET endpoint that requires API authentication.
+ * It retrieves the access token for the authenticated user.
+ *
+ * @async
+ * @function GET
+ * @param {NextRequest} req - The Next.js API request object.
+ * @returns {NextResponse} A JSON response containing the access token.
+ */
+const GET = withApiAuthRequired(async function GET(req: NextRequest) {
+  const res = new NextResponse();
+  const { accessToken } = await getAccessToken(req, res);
+  return NextResponse.json({ accessToken }, res);
+});
+
+export { GET };

apps/quartz-app/app/globals.css

@@ -18,16 +18,24 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+.fade-out {
+  opacity: 1;
+  animation: fade-out 2s ease-in-out forwards;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

apps/quartz-app/app/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Header from "../src/components/layout/Header";
-import Providers from "@/app/providers";
 import { ReactNode } from "react";
+import { UserProvider } from "@auth0/nextjs-auth0/client";
+import LayoutWrapper from "@/src/components/layout/LayoutWrapper";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,12 +19,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <Providers>
-          <Header />
-          {children}
-        </Providers>
-      </body>
+      <UserProvider>
+        <body className={inter.className}>
+          <LayoutWrapper>{children}</LayoutWrapper>
+        </body>
+      </UserProvider>
     </html>
   );
 }

apps/quartz-app/app/logout/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ChevronRightIcon } from "@heroicons/react/solid";
+import { SupportIcon, ViewListIcon } from "@heroicons/react/outline";
+
+const MyPage = () => {
+  const router = useRouter();
+  const links = [
+    // {
+    //   title: "Documentation",
+    //   description: "Learn how to integrate our tools with your app",
+    //   icon: BookOpenIcon,
+    //   url: "https://openclimatefix.notion.site/Quartz-Solar-Documentation-0d718915650e4f098470d695aa3494bf",
+    // },
+    {
+      title: "API Reference",
+      description: "A complete API reference for our library",
+      icon: ViewListIcon,
+      url:
+        process.env.NEXT_PUBLIC_API_URL + "docs" ||
+        "https://api.quartz.energy/docs",
+    },
+    {
+      title: "Support",
+      description: "Get help with any problems you encounter",
+      icon: SupportIcon,
+      url: "mailto:[email protected]?subject=Quartz%20Energy%20Support%20Request",
+    },
+  ];
+  return (
+    <div className="container flex-1 flex flex-col gap-6 py-24 items-center">
+      <div className="flex-1 flex flex-col gap-6 justify-center text-center md:text-left items-center">
+        <h1 className="text-4xl text-white">See you next time.</h1>
+        <h2 className="text-xl text-white px-3">
+          You have been successfully logged out.
+        </h2>
+        <button
+          className="bg-ocf-yellow py-2 px-3 rounded-md"
+          onClick={() => router.push("/api/auth/login")}
+        >
+          Log back in &rarr;
+        </button>
+      </div>
+      <div className="max-w-3xl w-full flex flex-1 flex-col gap-6 justify-center items-center">
+        <div className="mt-16">
+          <h2 className="text-sm font-semibold tracking-wide text-gray-300 uppercase">
+            More from Quartz
+          </h2>
+          <ul
+            role="list"
+            className="mt-4 border-t border-b border-gray-200 divide-y divide-gray-200"
+          >
+            {links.map((link, linkIdx) => (
+              <li
+                key={`LogoutLink${linkIdx}`}
+                className="relative flex items-start py-6 space-x-4"
+              >
+                <div className="flex-shrink-0">
+                  <span className="flex items-center justify-center w-12 h-12 rounded-lg">
+                    <link.icon
+                      className="w-6 h-6 text-gray-300"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-base font-medium text-gray-100">
+                    <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                      <a href={link.url} className="focus:outline-none">
+                        <span className="absolute inset-0" aria-hidden="true" />
+                        {link.title}
+                      </a>
+                    </span>
+                  </h3>
+                  <p className="text-base text-gray-400">{link.description}</p>
+                </div>
+                <div className="self-center flex-shrink-0">
+                  <ChevronRightIcon
+                    className="w-5 h-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;