Add layout for authenticated pages

public/nextjs_migration/client/js/userMenu.js

@@ -0,0 +1,50 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const userMenuButton = document.querySelector('.user-menu-button')
+const userMenuPopover = document.querySelector('.user-menu-popover')
+const userMenuWrapper = document.querySelector('.user-menu-wrapper')
+
+function handleBlur (event, onBlur) {
+  const currentTarget = event.currentTarget
+
+  requestAnimationFrame(() => {
+    const isChildElement = currentTarget.contains(document.activeElement)
+
+    if (!isChildElement) {
+      onBlur()
+    }
+  })
+}
+
+function handleMenuButton () {
+  if (!userMenuPopover || !userMenuWrapper) {
+    return
+  }
+
+  if (userMenuPopover.hasAttribute('hidden')) {
+    // Show popover
+    userMenuPopover.setAttribute('aria-expanded', true)
+    userMenuPopover.removeAttribute('hidden')
+
+    // Handle onblur
+    userMenuWrapper.addEventListener('blur', (event) => handleBlur(event, handleMenuButton))
+    userMenuWrapper.focus()
+
+    // TODO: Re-enable event gtag events
+    // window.gtag('event', 'opened_closed_user_menu', { action: 'open' })
+  } else {
+    // Hide popover
+    userMenuPopover.setAttribute('aria-expanded', false)
+    userMenuPopover.setAttribute('hidden', '')
+
+    userMenuButton.focus()
+
+    // window.gtag('event', 'opened_closed_user_menu', { action: 'close' })
+  }
+}
+
+if (userMenuButton) {
+  userMenuButton.addEventListener('click', handleMenuButton)
+}

src/app/(nextjs_migration)/(authenticated)/user/breaches/page.tsx

@@ -0,0 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export default async function UserBreaches() {
+  return <div>Dashboard</div>;
+}

src/app/(nextjs_migration)/(authenticated)/user/layout.tsx

@@ -0,0 +1,109 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { ReactNode } from "react";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import Image from "next/image";
+
+import "../../../../client/css/index.css";
+import AppConstants from "../../../../appConstants.js";
+import MonitorLogo from "../../../../client/images/monitor-logo-transparent@2x.webp";
+import MozillaLogo from "../../../../client/images/moz-logo-1color-white-rgb-01.svg";
+import { UserMenu } from "../../../components/client/UserMenu";
+import { SiteNavigation } from "../../../components/client/SiteNavigation";
+import { getL10n } from "../../../functions/server/l10n";
+import { authOptions } from "../../../api/auth/[...nextauth]/route";
+export type Props = {
+  children: ReactNode;
+};
+
+const MainLayout = async (props: Props) => {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    redirect("/");
+  }
+
+  const l10n = getL10n();
+
+  return (
+    <>
+      <header>
+        <a href="/user/breaches">
+          <Image
+            className="monitor-logo"
+            src={MonitorLogo}
+            width="213"
+            height="33"
+            alt={l10n.getString("brand-fx-monitor")}
+          />
+        </a>
+        <div className="nav-wrapper">
+          <button className="nav-toggle">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 10 8"
+              width="20"
+            >
+              <path
+                d="M1 1h8M1 4h8M1 7h8"
+                stroke="#000"
+                strokeWidth="1"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+          <UserMenu
+            session={session}
+            fxaSettingsUrl={AppConstants.FXA_SETTINGS_URL}
+          />
+        </div>
+      </header>
+
+      <SiteNavigation />
+
+      <main>{props.children}</main>
+
+      <footer className="site-footer">
+        <a href="https://www.mozilla.org" target="_blank">
+          <Image
+            src={MozillaLogo}
+            width="100"
+            height="29"
+            loading="lazy"
+            alt={l10n.getString("mozilla")}
+          />
+        </a>
+        <menu>
+          <li>
+            <a href="/breaches">{l10n.getString("footer-nav-all-breaches")}</a>
+          </li>
+          <li>
+            <a
+              href="https://support.mozilla.org/kb/firefox-monitor-faq"
+              target="_blank"
+            >
+              FAQ
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.mozilla.org/privacy/firefox-monitor"
+              target="_blank"
+            >
+              {l10n.getString("terms-and-privacy")}
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/mozilla/blurts-server" target="_blank">
+              {l10n.getString("github")}
+            </a>
+          </li>
+        </menu>
+      </footer>
+    </>
+  );
+};
+
+export default MainLayout;

src/app/(nextjs_migration)/(guest)/breaches/layout.tsx

@@ -0,0 +1,130 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import {
+  getBreachIcons,
+  getBreaches,
+} from "../../../functions/server/getBreaches";
+import Script from "next/script";
+import "../../../../client/css/partials/allBreaches.css";
+import { getL10n, getLocale } from "../../../functions/server/l10n";
+import { BreachLogo } from "../../../components/server/BreachLogo";
+
+export default async function PublicScan() {
+  const allBreaches = await getBreaches();
+  const breachLogos = await getBreachIcons(allBreaches);
+  const l10n = getL10n();
+
+  return (
+    <div data-partial="allBreaches">
+      <Script src="/nextjs_migration/client/js/allBreaches.js" />
+      <div id="breaches-loader" className="ab-bg breaches-loader"></div>
+      <main>
+        <div className="all-breaches-front-matter">
+          <header className="all-breaches-header">
+            <div>
+              <h1>{l10n.getString("all-breaches-headline-2")}</h1>
+              <p>{l10n.getString("all-breaches-lead")}</p>
+            </div>
+          </header>
+          <form className="all-breaches-filter" autoComplete="off">
+            <label htmlFor="breach-search">
+              <svg
+                role="img"
+                aria-label={l10n.getString("search-breaches")}
+                className="search-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+              >
+                <title>{l10n.getString("search-breaches")}</title>
+                <path
+                  fill="#5b5b66"
+                  d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"
+                ></path>
+              </svg>
+            </label>
+            <input id="breach-search" type="search" autoFocus></input>
+          </form>
+        </div>
+        <section>
+          <div>
+            <div className="card-container">
+              {allBreaches
+                .filter((a) => !a.IsSensitive)
+                .sort((a, b) =>
+                  new Date(a.AddedDate).getTime() <
+                  new Date(b.AddedDate).getTime()
+                    ? 1
+                    : -1
+                )
+                .map((breach) => (
+                  <BreachCard
+                    key={breach.Name + breach.Domain}
+                    breach={breach}
+                    logos={breachLogos}
+                  />
+                ))}
+            </div>
+          </div>
+          <div className="row flx-col">
+            {/* TODO span id="no-results-blurb" className="no-results-blurb">{l10n.getString('no-results-blurb')}</span> */}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+function BreachCard(props: { breach: any; logos: any }) {
+  const l10n = getL10n();
+
+  return (
+    <a href={`/breach-details/${props.breach.Name}`} className="breach-card">
+      <h3>
+        <span className="logo-wrapper">
+          <BreachLogo breach={props.breach} logos={props.logos} />
+        </span>
+        <span>{props.breach.Title}</span>
+      </h3>
+      <div className="breach-main">
+        <dl>
+          <div>
+            <dt>{l10n.getString("breach-added-label")}</dt>
+            <dd>
+              {new Date(props.breach.AddedDate).toLocaleString(getLocale(), {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </dd>
+          </div>
+          <div>
+            <dt>{l10n.getString("exposed-data")}</dt>
+            <dd>
+              {formatList(
+                props.breach.DataClasses.map((a: string) => l10n.getString(a))
+              )}
+            </dd>
+          </div>
+        </dl>
+        <span className="breach-detail-link">
+          {l10n.getString("more-about-this-breach")}
+        </span>
+      </div>
+    </a>
+  );
+}
+
+function formatList(list: string[]) {
+  if (typeof Intl.ListFormat === "undefined") {
+    return list.join(", ");
+  }
+
+  return new Intl.ListFormat(getLocale(), {
+    type: "unit",
+    style: "short",
+  }).format(list);
+}