feat(login): handle auth for bl-web

cypress/e2e/login.spec.js

@@ -6,9 +6,8 @@ describe("Login", () => {
   });
 
   it("displays all important elements", () => {
-    // TODO: when FB and Google is enabled, change these two
-    cy.getBySel("facebook-button").should("not.exist");
-    cy.getBySel("google-button").should("not.exist");
+    cy.getBySel("facebook-button").should("be.visible");
+    cy.getBySel("google-button").should("be.visible");
     cy.getBySel("error-message").should("not.exist");
     cy.getBySel("email-field").should("be.visible");
     cy.getBySel("password-field").should("be.visible");

cypress/e2e/register.spec.js

@@ -6,9 +6,8 @@ describe("Register", () => {
   });
 
   it("displays correct initial elements", () => {
-    // TODO: fix me when fb is enabled
-    cy.getBySel("facebook-button").should("not.exist");
-    cy.getBySel("google-button").should("not.exist");
+    cy.getBySel("facebook-button").should("be.visible");
+    cy.getBySel("google-button").should("be.visible");
     cy.getBySel("email-field").should("be.visible");
     cy.getBySel("password-field").should("be.visible");
     cy.getBySel("submit-button").should("be.visible");

next.config.js

@@ -4,4 +4,44 @@ module.exports = {
   eslint: {
     dirs: ["src", "cypress"],
   },
+  // TODO: temporary redirects required while in tandem with bl-web / bl-admin
+  async redirects() {
+    return [
+      {
+        source: "/overleveringer",
+        destination: "/matches",
+        permanent: false,
+      },
+      {
+        source: "/auth/login/forgot",
+        destination: "/auth/forgot",
+        permanent: false,
+      },
+      {
+        source: "/auth/menu",
+        destination: "/auth/login",
+        permanent: false,
+      },
+      {
+        source: "/auth/success",
+        destination: "/",
+        permanent: false,
+      },
+      {
+        source: "/auth/social/failure",
+        destination: "/auth/failure",
+        permanent: false,
+      },
+      {
+        source: "/auth/register/detail",
+        destination: "/settings",
+        permanent: false,
+      },
+      {
+        source: "/u/edit",
+        destination: "/settings",
+        permanent: false,
+      },
+    ];
+  },
 };

src/api/api.ts

@@ -4,6 +4,8 @@ import { apiPath, getHeaders } from "@/api/apiRequest";
 import { fetchNewTokens } from "@/api/token";
 import { BlError } from "@/utils/types";
 
+// TODO before merge: rewrite to properly handle errors (especially accessToken not valid) and abandon Axios
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const get = async <T = any>(
   url: string,

src/api/user.ts

@@ -36,3 +36,17 @@ export const updateUserDetails = async (
     userDetails,
   );
 };
+
+export const resetPassword = async (
+  userId: string,
+  resetToken: string,
+  newPassword: string,
+) => {
+  return await patch(
+    `${BL_CONFIG.collection.pendingPasswordReset}/${userId}/${BL_CONFIG.pendingPasswordReset.confirm.operation}`,
+    {
+      resetToken,
+      newPassword,
+    },
+  );
+};

src/app/auth/email/confirm/[confirmationId]/page.tsx

@@ -0,0 +1,41 @@
+import { Card, Container } from "@mui/material";
+import { Box } from "@mui/system";
+import { Metadata } from "next";
+import Image from "next/image";
+
+import EmailConfirmer from "@/components/EmailConfirmer";
+
+export const metadata: Metadata = {
+  title: "Bekreft e-post | Boklisten.no",
+  description:
+    "Bekreft din e-post-adresse, slik at du får viktig informasjon fra oss.",
+};
+
+export default function TokenPage({
+  params,
+}: {
+  params: { confirmationId: string };
+}) {
+  return (
+    <Card sx={{ paddingBottom: "2rem" }}>
+      <Container component="main" maxWidth="xs">
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Image
+            src="/boklisten_logo_v2_icon_blue.png"
+            width={50}
+            height={50}
+            alt="logo"
+          />
+          <EmailConfirmer confirmationId={params.confirmationId} />
+        </Box>
+      </Container>
+    </Card>
+  );
+}

src/app/auth/failure/page.tsx

@@ -0,0 +1,43 @@
+import { Alert, AlertTitle, Card, Container } from "@mui/material";
+import { Box } from "@mui/system";
+import { Metadata } from "next";
+import Image from "next/image";
+
+import DynamicLink from "@/components/DynamicLink";
+
+export const metadata: Metadata = {
+  title: "Klarte ikke logge inn | Boklisten.no",
+  description:
+    "Vi klarte ikke å logge deg inn. Vennligst prøv på nytt eller ta kontakt hvis problemet vedvarer.",
+};
+
+export default function AuthFailurePage() {
+  return (
+    <Card sx={{ paddingBottom: "2rem" }}>
+      <Container component="main" maxWidth="xs">
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Image
+            src="/boklisten_logo_v2_icon_blue.png"
+            width={50}
+            height={50}
+            alt="logo"
+          />
+          <Alert severity={"error"} sx={{ my: 2 }}>
+            <AlertTitle>Vi klarte ikke å logge deg inn</AlertTitle>
+            Vennligst prøv på nytt eller ta kontakt hvis problemet vedvarer.
+          </Alert>
+          <DynamicLink href={"/auth/login"}>
+            Tilbake til innloggingssiden
+          </DynamicLink>
+        </Box>
+      </Container>
+    </Card>
+  );
+}

src/app/auth/forgot/page.tsx

@@ -89,7 +89,7 @@ const ForgotPage = () => {
                 </Alert>
               )}
               {success && (
-                <Alert severity="success">
+                <Alert severity="success" sx={{ mt: 1 }}>
                   Hvis det finnes en bruker med denne e-postaddressen har vi
                   sendt en e-post med instruksjoner for hvordan du kan endre
                   passordet ditt.

src/app/auth/logout/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { Card, Container, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import Image from "next/image";
+import { useEffect } from "react";
+
+import { logout } from "@/api/auth";
+import CountdownToRedirect from "@/components/CountdownToRedirect";
+import BL_CONFIG from "@/utils/bl-config";
+
+// TODO before merge: handle login/logout redirects to and from bl-admin as well
+// TODO before merge: handle permission lockouts for bl-admin
+
+export default function LogoutPage() {
+  useEffect(() => {
+    logout();
+  }, []);
+  return (
+    <Card sx={{ paddingBottom: "2rem" }}>
+      <Container component="main" maxWidth="xs">
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Image
+            src="/boklisten_logo_v2_icon_blue.png"
+            width={50}
+            height={50}
+            alt="logo"
+          />
+          <Typography component="h1" variant="h5" sx={{ mt: 1 }}>
+            Du er nå logget ut
+          </Typography>
+          <CountdownToRedirect
+            path={`${BL_CONFIG.blWeb.basePath}?logout=true`}
+            seconds={3}
+          />
+        </Box>
+      </Container>
+    </Card>
+  );
+}

src/app/auth/permission/denied/page.tsx

@@ -0,0 +1,44 @@
+import { Alert, AlertTitle, Card, Container } from "@mui/material";
+import { Box } from "@mui/system";
+import { Metadata } from "next";
+import Image from "next/image";
+
+import DynamicLink from "@/components/DynamicLink";
+
+export const metadata: Metadata = {
+  title: "Du har ikke tilgang til denne siden | Boklisten.no",
+  description:
+    "Vi klarte ikke å logge deg inn. Vennligst prøv på nytt eller ta kontakt hvis problemet vedvarer.",
+};
+
+export default function PermissionDeniedPage() {
+  return (
+    <Card sx={{ paddingBottom: "2rem" }}>
+      <Container component="main" maxWidth="xs">
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Image
+            src="/boklisten_logo_v2_icon_blue.png"
+            width={50}
+            height={50}
+            alt="logo"
+          />
+          <Alert severity={"error"} sx={{ my: 2 }}>
+            <AlertTitle>Du har tilgang til å se dette innholdet</AlertTitle>
+            Du forsøke å logge inn med en annen bruker eller ta kontakt med
+            administrator for spørsmål.
+          </Alert>
+          <DynamicLink href={"/auth/login"}>
+            Tilbake til innloggingssiden
+          </DynamicLink>
+        </Box>
+      </Container>
+    </Card>
+  );
+}

src/app/auth/register/page.tsx

@@ -1,5 +1,6 @@
 import { Card } from "@mui/material";
 import { Metadata } from "next";
+import { Suspense } from "react";
 
 import UserDetailEditor from "@/components/user/UserDetailEditor";
 
@@ -12,7 +13,9 @@ const RegisterPage = () => {
   return (
     <>
       <Card sx={{ paddingBottom: "2rem" }}>
-        <UserDetailEditor isSignUp />
+        <Suspense>
+          <UserDetailEditor isSignUp />
+        </Suspense>
       </Card>
     </>
   );

src/app/auth/reset/[userId]/page.tsx

@@ -0,0 +1,43 @@
+import { Card, Container, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { Metadata } from "next";
+import Image from "next/image";
+
+import PasswordReset from "@/components/user/PasswordReset";
+
+export const metadata: Metadata = {
+  title: "Lag nytt passord | Boklisten.no",
+  description: "Lag et nytt passord, slik at du får tilgang på kontoen din.",
+};
+
+export default function PasswordResetPage({
+  params,
+}: {
+  params: { userId: string };
+}) {
+  return (
+    <Card sx={{ paddingBottom: "2rem" }}>
+      <Container component="main" maxWidth="xs">
+        <Box
+          sx={{
+            marginTop: 4,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Image
+            src="/boklisten_logo_v2_icon_blue.png"
+            width={50}
+            height={50}
+            alt="logo"
+          />
+          <Typography component="h1" variant="h5" sx={{ mt: 1 }}>
+            Lag nytt passord
+          </Typography>
+          <PasswordReset userId={params.userId} />
+        </Box>
+      </Container>
+    </Card>
+  );
+}