Merge pull request #40 from TeskaLabs/refactor/penrose-bg-refresh

Refactor/penrose-background
TeskaLabs · Aug 28, 2023 · b0a248c · b0a248c
2 parents 6fb44da + 9b99f63
commit b0a248c
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 
 - Change visibility of username to readonly and focus on password input field after wrong password. (INDIGO Sprint 230623, [!35](https://github.com/TeskaLabs/seacat-auth-webui/pull/35))
 
+- Add penrose background to be used in all screens. (INDIGO Sprint 230804, [!40](https://github.com/TeskaLabs/seacat-auth-webui/pull/40))
+
 ## v23.29-alpha
 
 ### Breaking change

diff --git a/src/modules/auth/containers/LoginScreen.js b/src/modules/auth/containers/LoginScreen.js
@@ -6,11 +6,11 @@ import { Container, Row, Col } from 'reactstrap';
 import LoginCard from './LoginCard.js';
 import RegistrationCard from './RegistrationCard.js';
 import { getParams } from '../utils/paramsActions';
+import generatePenrose from '../utils/generatePenrose.js';
 
 function LoginScreen(props) {
 	const { t } = useTranslation();
 	const [features, setFeatures] = useState({ "login": {} });
-	const [width, height] = useWindowSize();
 	const [stateCode, setStateCode] = useState("");
 	const SeaCatAuthAPI = props.app.axiosCreate('seacat-auth');
 
@@ -29,13 +29,7 @@ function LoginScreen(props) {
 		}
 	}, [features])
 
-	// upon screen size change, removes current background and generates new one
-	useEffect(() => {
-		const bgScript = document.getElementById("bg-script");
-		if (bgScript) bgScript.remove();
-
-		generatePenrose()
-	}, [height, width])
+	generatePenrose()
 
 	const checkExternalLoginStatus = () => {
 		const err = getParams("error");
@@ -59,31 +53,6 @@ function LoginScreen(props) {
 		}
 	}
 
-	function useWindowSize() {
-		const [size, setSize] = useState([0, 0]);
-		useLayoutEffect(() => {
-		  function updateSize() {
-			setSize([window.innerWidth, window.innerHeight]);
-		  }
-		  window.addEventListener('resize', updateSize);
-		  updateSize();
-		  return () => window.removeEventListener('resize', updateSize);
-		}, []);
-		return size;
-	}
-
-	// generates new background
-	const generatePenrose = () => {
-		const script = document.createElement('script');
-		script.id = "bg-script"
-		script.src = "./media/login-bg.js"
-		script.async = true;
-		document.body.appendChild(script);
-		return () => {
-			document.body.removeChild(script);
-		}
-	}
-
 	const fetchFeatures = async () => {
 		try {
 			const response = await SeaCatAuthAPI.get("/public/features");

diff --git a/src/modules/auth/containers/RegisterScreen.js b/src/modules/auth/containers/RegisterScreen.js
@@ -8,13 +8,13 @@ import LoginCard from './LoginCard.js';
 import RegistrationCard from './RegistrationCard.js';
 import AcceptInvitationCard from './AcceptInvitationCard.js';
 import { getParams } from '../utils/paramsActions';
+import generatePenrose from '../utils/generatePenrose.js';
 
 function RegisterScreen(props) {
 	const { t } = useTranslation();
 	const [features, setFeatures] = useState({ "login": {} });
 	const [registerFeatures, setRegisterFeatures] = useState({});
 	const [registerToken, setRegisterToken] = useState(undefined);
-	const [width, height] = useWindowSize();
 	const [stateCode, setStateCode] = useState("");
 	const [credentials, setCredentials] = useState("");
 	const [isSubmitting, setIsSubmitting] = useState(false);
@@ -25,6 +25,8 @@ function RegisterScreen(props) {
 	const SeaCatAuthAPI = props.app.axiosCreate('seacat-auth');
 	const userinfo = useSelector(state => state.auth.userinfo);
 
+	generatePenrose();
+
 	useEffect(() => {
 		// Fetch register features from the server
 		fetchRegisterFeatures();
@@ -43,14 +45,6 @@ function RegisterScreen(props) {
 		}
 	}, [features])
 
-	// upon screen size change, removes current background and generates new one
-	useEffect(() => {
-		const bgScript = document.getElementById("bg-script");
-		if (bgScript) bgScript.remove();
-
-		generatePenrose()
-	}, [height, width])
-
 	useEffect(() => {
 		if (registrationSuccessful == true) {
 			setTimeout(() => {
@@ -83,31 +77,6 @@ function RegisterScreen(props) {
 		}
 	}
 
-	function useWindowSize() {
-		const [size, setSize] = useState([0, 0]);
-		useLayoutEffect(() => {
-		  function updateSize() {
-			setSize([window.innerWidth, window.innerHeight]);
-		  }
-		  window.addEventListener('resize', updateSize);
-		  updateSize();
-		  return () => window.removeEventListener('resize', updateSize);
-		}, []);
-		return size;
-	}
-
-	// generates new background
-	const generatePenrose = () => {
-		const script = document.createElement('script');
-		script.id = "bg-script"
-		script.src = "./media/login-bg.js"
-		script.async = true;
-		document.body.appendChild(script);
-		return () => {
-			document.body.removeChild(script);
-		}
-	}
-
 	const fetchFeatures = async () => {
 		try {
 			const response = await SeaCatAuthAPI.get("/public/features");

diff --git a/src/modules/auth/email/EmailScreen.js b/src/modules/auth/email/EmailScreen.js
@@ -11,8 +11,11 @@ import {
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
+import generatePenrose from '../utils/generatePenrose';
 
 function EmailScreen(props) {
+	generatePenrose();
+
 	return (
 		<Container>
 			<Row className="justify-content-center">

diff --git a/src/modules/auth/home/HomeScreen.js b/src/modules/auth/home/HomeScreen.js
@@ -15,6 +15,8 @@ import { DateTime } from 'asab-webui';
 import { factorChaining } from "../utils/factorChaining";
 import { getParams, removeParams } from "../utils/paramsActions";
 
+import generatePenrose from '../utils/generatePenrose';
+
 function HomeScreen(props) {
 	const [features, setFeatures] = useState({ });
 	const [updateFeatures, setUpdateFeatures] = useState({ });
@@ -27,6 +29,8 @@ function HomeScreen(props) {
 	const history = useHistory();
 	const SeaCatAuthAPI = props.app.axiosCreate('seacat-auth');
 
+	generatePenrose();
+
 	useEffect(() => {
 		if (getParams("result") == "external_login_activated") {
 			// Remove result param from URL if result with external_login_added is present in query params

diff --git a/src/modules/auth/number/PhoneNumberScreen.js b/src/modules/auth/number/PhoneNumberScreen.js
@@ -11,8 +11,12 @@ import {
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
+import generatePenrose from '../utils/generatePenrose';
 
 function PhoneNumberScreen(props) {
+
+	generatePenrose();
+
 	return (
 		<Container>
 			<Row className="justify-content-center">

diff --git a/src/modules/auth/otp/TOTPScreen.js b/src/modules/auth/otp/TOTPScreen.js
@@ -12,8 +12,12 @@ import {
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
+import generatePenrose from '../utils/generatePenrose';
 
 function TOTPScreen(props) {
+
+	generatePenrose();
+
 	return (
 		<Container>
 			<Row className="justify-content-center">

diff --git a/src/modules/auth/passwd/ChangePwdScreen.js b/src/modules/auth/passwd/ChangePwdScreen.js
@@ -10,9 +10,12 @@ import {
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
+import generatePenrose from '../utils/generatePenrose';
 
 function ChangePwdScreen(props) {
 
+	generatePenrose();
+
 	return (
 		<Container>
 			<Row className="justify-content-center">

diff --git a/src/modules/auth/passwd/ForgetPwdScreen.js b/src/modules/auth/passwd/ForgetPwdScreen.js
@@ -10,6 +10,7 @@ import {
 } from 'reactstrap';
 
 import { getParams } from '../utils/paramsActions';
+import generatePenrose from '../utils/generatePenrose';
 
 function ForgetPwdScreen(props) {
 
@@ -39,6 +40,8 @@ function ForgetPwdCard(props) {
 
 	const usernameRegister = register('username');
 
+	generatePenrose();
+
 	const onSubmit = async (values) => {
 		/* 
 			'username' to 'ident' conversion is necessary here as the put request expects identity information key labeled 

diff --git a/src/modules/auth/passwd/ResetPwdScreen.js b/src/modules/auth/passwd/ResetPwdScreen.js
@@ -8,6 +8,7 @@ import {
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
 	Form, FormGroup, FormText, Label, Input, Button, FormFeedback
 } from 'reactstrap';
+import generatePenrose from '../utils/generatePenrose';
 
 function ResetPwdScreen(props) {
 
@@ -28,6 +29,9 @@ export default ResetPwdScreen;
 function ResetPwdCard(props) {
 	const { t, i18n } = useTranslation();
 	const { handleSubmit, register, getValues, formState: { errors, isSubmitting } } = useForm();
+
+	generatePenrose();
+
 	let history = useHistory();
 
 	const [ completed, setCompleted ] = useState(false);

diff --git a/src/modules/auth/utils/generatePenrose.js b/src/modules/auth/utils/generatePenrose.js
@@ -0,0 +1,39 @@
+import { useEffect, useState, useLayoutEffect } from "react";
+
+export default function generatePenrose() {
+	const [size, setSize] = useState([0,0])
+
+	const generateBackground = () =>{
+		const script = document.createElement('script');
+		script.id = "bg-script";
+		script.src = "./media/login-bg.js";
+		script.async = true;
+		document.body.appendChild(script);
+
+		return () => {
+			document.body.removeChild(script);
+		};
+	}
+
+	useLayoutEffect(()=> {
+		function updateSize() {
+			setSize([window.innerWidth, window.innerHeight]);
+		}
+		window.addEventListener('resize', updateSize);
+		updateSize();
+
+		return () => window.removeEventListener('resize', updateSize);
+	}, [])
+	//when screen size changes, remove background and create new
+	useEffect(() => {
+		const bgScript = document.getElementById("bg-script");
+			if (bgScript) bgScript.remove();
+				const removeBackground = generateBackground();
+			return () => {
+				removeBackground();
+		};
+
+	}, [size])
+
+	return null; 
+}
diff --git a/src/modules/auth/webauthn/WebAuthnScreen.js b/src/modules/auth/webauthn/WebAuthnScreen.js
@@ -15,6 +15,7 @@ import {
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
+import generatePenrose from '../utils/generatePenrose';
 
 export default function WebAuthnScreen(props) {
 	return (
@@ -44,6 +45,8 @@ function WebAuthnCard(props) {
 
 	const { handleSubmit, register, formState: { errors }, setValue, resetField, getValues } = useForm();
 
+	generatePenrose();
+
 	// Register input for authenticator name
 	const regName = register(
 		"name",