RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(web): replace setinterval with broadcast channel (#3857) 

* refactor(web): replaced setinterval by broadcastchannel

* refactor: fix lint issues, cleanup and remove page visibility hook

Co-authored-by: Amir Zarrinkafsh <nightah@me.com>
pull/3861/head
Manuel Nuñez 2022-08-18 21:27:25 -03:00 committed by GitHub
parent 1a866f206a
commit 453d7164fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/hooks/PageVisibility.ts
View File

@ -1,43 +0,0 @@
import { useEffect, useState } from "react";
function getBrowserVisibilityProp() {
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
return "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
return "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
return "webkitvisibilitychange";
}
}
function getBrowserDocumentHiddenProp() {
if (typeof document.hidden !== "undefined") {
return "hidden";
} else if (typeof document.msHidden !== "undefined") {
return "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
return "webkitHidden";
}
}
function getIsDocumentHidden() {
return !document[getBrowserDocumentHiddenProp()];
}
export function usePageVisibility() {
const [isVisible, setIsVisible] = useState(getIsDocumentHidden());
const onVisibilityChange = () => setIsVisible(getIsDocumentHidden());
useEffect(() => {
const visibilityChange = getBrowserVisibilityProp();
document.addEventListener(visibilityChange, onVisibilityChange, false);
return () => {
document.removeEventListener(visibilityChange, onVisibilityChange);
};
});
return isVisible;
}

27
web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
View File

@ -1,4 +1,4 @@
import React, { MutableRefObject, useEffect, useRef, useState } from "react";
import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
import { Button, Checkbox, FormControlLabel, Grid, Link, Theme } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
@ -9,14 +9,11 @@ import { useNavigate } from "react-router-dom";
import FixedTextField from "@components/FixedTextField";
import { ResetPasswordStep1Route } from "@constants/Routes";
import { useNotifications } from "@hooks/NotificationsContext";
import { usePageVisibility } from "@hooks/PageVisibility";
import { useRedirectionURL } from "@hooks/RedirectionURL";
import { useRequestMethod } from "@hooks/RequestMethod";
import { useAutheliaState } from "@hooks/State";
import { useWorkflow } from "@hooks/Workflow";
import LoginLayout from "@layouts/LoginLayout";
import { postFirstFactor } from "@services/FirstFactor";
import { AuthenticationLevel } from "@services/State";
export interface Props {
disabled: boolean;
@ -37,7 +34,7 @@ const FirstFactorForm = function (props: Props) {
const requestMethod = useRequestMethod();
const workflow = useWorkflow();
const [state, fetchState, ,] = useAutheliaState();
const loginChannel = useMemo(() => new BroadcastChannel("login"), []);
const [rememberMe, setRememberMe] = useState(false);
const [username, setUsername] = useState("");
const [usernameError, setUsernameError] = useState(false);
@ -47,7 +44,6 @@ const FirstFactorForm = function (props: Props) {
// TODO (PR: #806, Issue: #511) potentially refactor
const usernameRef = useRef() as MutableRefObject<HTMLInputElement>;
const passwordRef = useRef() as MutableRefObject<HTMLInputElement>;
const visible = usePageVisibility();
const { t: translate } = useTranslation();
useEffect(() => {
@ -56,18 +52,12 @@ const FirstFactorForm = function (props: Props) {
}, [usernameRef]);
useEffect(() => {
if (visible) {
fetchState();
}
const timer = setInterval(() => fetchState(), 1000);
return () => clearInterval(timer);
}, [visible, fetchState]);
useEffect(() => {
if (state && state.authentication_level >= AuthenticationLevel.OneFactor) {
props.onAuthenticationSuccess(redirectionURL);
}
}, [state, redirectionURL, props]);
loginChannel.addEventListener("message", (ev) => {
if (ev.data) {
props.onAuthenticationSuccess(redirectionURL);
}
});
}, [loginChannel, redirectionURL, props]);
const disabled = props.disabled;
@ -90,6 +80,7 @@ const FirstFactorForm = function (props: Props) {
props.onAuthenticationStart();
try {
const res = await postFirstFactor(username, password, rememberMe, redirectionURL, requestMethod, workflow);
loginChannel.postMessage(true);
props.onAuthenticationSuccess(res ? res.redirect : undefined);
} catch (err) {
console.error(err);