www: add feature to enforce login on transcripts record/past/browse

www/app/lib/utils.ts

@@ -9,3 +9,7 @@ export function featPrivacy() {
 export function featBrowse() {
   return process.env.NEXT_PUBLIC_FEAT_BROWSE === "1";
 }
+
+export function featRequireLogin() {
+  return process.env.NEXT_PUBLIC_FEAT_LOGIN_REQUIRED === "1";
+}

www/app/transcripts/new/page.tsx

@@ -4,18 +4,19 @@ import useAudioDevice from "../useAudioDevice";
 import "react-select-search/style.css";
 import "../../styles/button.css";
 import "../../styles/form.scss";
-import getApi from "../../lib/getApi";
 import About from "../../(aboutAndPrivacy)/about";
 import Privacy from "../../(aboutAndPrivacy)/privacy";
 import { useRouter } from "next/navigation";
 import useCreateTranscript from "../createTranscript";
 import SelectSearch from "react-select-search";
 import { supportedLatinLanguages } from "../../supportedLanguages";
+import { featRequireLogin } from "../../lib/utils";
+import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
 
 const TranscriptCreate = () => {
-  // const transcript = useTranscript(stream, api);
   const router = useRouter();
-  const api = getApi();
+  const isAuthenticated = useFiefIsAuthenticated();
+  const requireLogin = featRequireLogin();
 
   const [name, setName] = useState<string>();
   const nameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -77,8 +78,16 @@ const TranscriptCreate = () => {
           </div>
         </section>
         <section className="flex flex-col justify-center items-center w-full h-full">
+          {requireLogin && !isAuthenticated ? (
+            <button
+              className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+              onClick={() => router.push("/login")}
+            >
+              Log in
+            </button>
+          ) : (
             <div className="rounded-xl md:bg-blue-200 md:w-96 p-4 lg:p-6 flex flex-col mb-4 md:mb-10">
-            <h2 className="text-2xl font-bold mt-2 mb-2"> Try Reflector</h2>
+              <h2 className="text-2xl font-bold mt-2 mb-2">Try Reflector</h2>
               <label className="mb-3">
                 <p>Recording name</p>
                 <div className="select-search-container">
@@ -108,8 +117,8 @@ const TranscriptCreate = () => {
                 <p className=""> Microphone permission granted </p>
               ) : permissionDenied ? (
                 <p className="">
-                Permission to use your microphone was denied, please change the
+                  Permission to use your microphone was denied, please change
-                permission setting in your browser and refresh this page.
+                  the permission setting in your browser and refresh this page.
                 </p>
               ) : (
                 <button
@@ -128,6 +137,7 @@ const TranscriptCreate = () => {
                 {loadingSend ? "Loading..." : "Confirm"}
               </button>
             </div>
+          )}
         </section>
       </div>
     </>

www/middleware.ts

@@ -2,19 +2,21 @@ import type { NextRequest } from "next/server";
 
 import { fiefAuth } from "./app/lib/fief";
 
-const authMiddleware = fiefAuth.middleware([
+let protectedPath: any = [];
+if (process.env.NEXT_PUBLIC_FEAT_LOGIN_REQUIRED === "1") {
+  protectedPath = [
     {
-    matcher: "/private",
+      matcher: "/transcripts/((?!new).*)",
       parameters: {},
     },
     {
-    matcher: "/castles/:path*",
+      matcher: "/browse",
-    parameters: {
+      parameters: {},
-      permissions: ["castles:read"],
     },
-  },
+  ];
-]);
+}
 
+const authMiddleware = fiefAuth.middleware(protectedPath);
 export async function middleware(request: NextRequest) {
   return authMiddleware(request);
 }