Lecture login: Show loader, Stop polling after navigating off-page

src/components/Player.tsx

@@ -322,8 +322,16 @@ function AuthorizeHelper({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasUserInfo]);
 
+    useEffect(() => {
+        return () => {
+            setIsLoggingIn(false); // this will prevent the interval from running after the component is unmounted
+        };
+    }, []);
+
     const startOauth = (method: authentication_method) => {
         if (method !== "moodle" && method !== "rwth") return;
+        if (isLoggingIn) return;
+        setIsLoggingIn(true);
         api.startAuthentication({ type: method })
             .then((res) => {
                 const pop = window.open(res.verification_url, "_blank");
@@ -333,8 +341,8 @@ function AuthorizeHelper({
                     let tries = 0;
                     const testAuth = () => {
                         tries++;
-                        if (pop.closed || triggerReload || tries > 120) {
-                            return; // this will be handled by the other interval
+                        if (pop.closed || triggerReload || tries > 120 || isLoggingIn === false) {
+                            return; // stop trying
                         }
                         api.getAuthenticationStatus({ lecture_id: lecture.id })
                             .then((res) => {
@@ -358,13 +366,17 @@ function AuthorizeHelper({
                         if (pop.closed || triggerReload) {
                             triggerReload = true;
                             clearInterval(popInterval);
+                            setIsLoggingIn(false);
                             reloadFunc();
+                        } else if (isLoggingIn === false) {
+                            clearInterval(popInterval);
                         }
                     }, 100);
                 }
             })
             .catch((e) => {
                 showError(e, "Cannot start OAuth");
+                setIsLoggingIn(false);
             });
     };
 
@@ -472,9 +484,13 @@ function AuthorizeHelper({
                                 type="button"
                                 onClick={() => startOauth("rwth")}
                                 className="btn btn-secondary"
+                                disabled={isLoggingIn}
                             >
                                 {language.get("ui.video_player.login")}
                             </button>
+                            {isLoggingIn && (
+                                <div className="ms-2 spinner-border text-primary" role="status" />
+                            )}
                         </div>
                     )}
                     {lecture.authentication_methods.includes("moodle") && (
@@ -493,6 +509,7 @@ function AuthorizeHelper({
                                         type="button"
                                         onClick={() => startOauth("moodle")}
                                         className="btn btn-secondary"
+                                        disabled={isLoggingIn}
                                     >
                                         {language.get(
                                             "ui.video_player.login_moodle.refresh_course",
@@ -504,10 +521,14 @@ function AuthorizeHelper({
                                     type="button"
                                     onClick={() => startOauth("moodle")}
                                     className="btn btn-secondary"
+                                    disabled={isLoggingIn}
                                 >
                                     {language.get("ui.video_player.login")}
                                 </button>
                             )}
+                            {isLoggingIn && (
+                                <div className="ms-2 spinner-border text-primary" role="status" />
+                            )}
                         </div>
                     )}
                 </div>