fix(BlFetcher): correct login required behaviour

boklisten · Jul 8, 2024 · 6a854db · 6a854db
1 parent 4972610
commit 6a854db
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/src/api/blFetcher.ts b/src/api/blFetcher.ts
@@ -1,9 +1,9 @@
-import { BlapiErrorResponse } from "@boklisten/bl-model";
+import { BlapiErrorResponse, BlError } from "@boklisten/bl-model";
 import { HTTP_METHOD } from "next/dist/server/web/http";
 
 import { fetchNewTokens, getAccessToken, haveAccessToken } from "@/api/token";
 import BL_CONFIG from "@/utils/bl-config";
-import { verifyBlApiError } from "@/utils/types";
+import { assertBlApiError, verifyBlApiError } from "@/utils/types";
 
 const createHeaders = (): Headers => {
   const headers = new Headers({ "Content-Type": "application/json" });
@@ -33,7 +33,14 @@ async function blFetch<T>(
   } catch (error: unknown) {
     if (verifyBlApiError(error)) {
       if (error.httpStatus === 401 && !isRetry) {
-        await fetchNewTokens();
+        try {
+          await fetchNewTokens();
+        } catch (tokenError) {
+          // TODO: login required error boundary
+          if (!(tokenError instanceof BlError)) {
+            assertBlApiError(tokenError);
+          }
+        }
         return await blFetch(path, method, body, true);
       }
       throw new BlapiErrorResponse(

diff --git a/src/api/token.ts b/src/api/token.ts
@@ -1,3 +1,4 @@
+import { BlError } from "@boklisten/bl-model";
 import { decodeToken } from "react-jwt";
 
 import BlFetcher from "@/api/blFetcher";
@@ -116,7 +117,7 @@ export const parseTokensFromResponseDataAndStore = (
 
 export const fetchNewTokens = async () => {
   if (!haveRefreshToken()) {
-    throw new Error("Login required");
+    throw new BlError("Login required");
   }
   const tokens = await BlFetcher.post<
     [

diff --git a/src/components/user/SignIn.tsx b/src/components/user/SignIn.tsx
@@ -11,6 +11,7 @@ import Typography from "@mui/material/Typography";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
+import isEmail from "validator/lib/isEmail";
 
 import { login } from "@/api/user";
 import { attachTokensToHref } from "@/components/AuthLinker";
@@ -34,7 +35,7 @@ export default function SignIn() {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<SignInFields>({ mode: "onTouched" });
+  } = useForm<SignInFields>({ mode: "onBlur" });
   const onSubmit: SubmitHandler<SignInFields> = async (data) => {
     setApiError("");
     try {
@@ -43,11 +44,11 @@ export default function SignIn() {
       if (assertBlApiError(error)) {
         if (error.code === 908) {
           setApiError("Feil brukernavn eller passord");
-        } else {
-          setApiError(
-            "Noe gikk galt! Prøv igjen eller ta kontakt dersom problemet vedvarer.",
-          );
+          return;
         }
+        setApiError(
+          "Noe gikk galt! Prøv igjen eller ta kontakt dersom problemet vedvarer.",
+        );
       }
       return;
     }
@@ -110,7 +111,10 @@ export default function SignIn() {
             id="email"
             label="E-post"
             autoComplete="email"
-            {...register("email")}
+            {...register("email", {
+              validate: (v) =>
+                !v || isEmail(v) ? true : "Du må fylle inn en gyldig e-post",
+            })}
           />
           <TextField
             data-testid="password-field"
@@ -150,7 +154,6 @@ export default function SignIn() {
             fullWidth
             variant="contained"
             sx={{ mt: 3, mb: 2 }}
-            disabled={Object.entries(errors).length > 0}
           >
             Logg inn
           </Button>

diff --git a/src/components/user/user-detail-editor/field-validators.ts b/src/components/user/user-detail-editor/field-validators.ts
@@ -25,8 +25,8 @@ export const fieldValidators: {
   [K in keyof UserEditorFields]: RegisterOptions<UserEditorFields>;
 } = {
   email: {
-    required: "Du må fylle inn epost",
-    validate: (v) => (isEmail(v) ? true : "Du må fylle inn en gyldig epost"),
+    required: "Du må fylle inn e-post",
+    validate: (v) => (isEmail(v) ? true : "Du må fylle inn en gyldig e-post"),
   },
   password: {
     required: "Du må fylle inn passord",