From f3a78b374e55811c15a482dbdc807f9d59cace31 Mon Sep 17 00:00:00 2001 From: Aiga115 Date: Wed, 5 Mar 2025 12:54:15 +0100 Subject: [PATCH 1/6] ILEX-97 inital changes: avatar ui update --- src/components/Header/index.jsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 78da8ccf..7d4179bc 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -16,6 +16,7 @@ import { useContext } from "react"; import { GlobalDataContext } from "../../contexts/DataContext"; import TermDialog from '../TermEditor/TermDialog'; import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined"; +import PersonOutlineIcon from '@mui/icons-material/PersonOutline'; const { gray200, white, gray100, gray600 } = vars; @@ -82,6 +83,17 @@ const styles = { keyBoardInfo: { borderRadius: '0.25rem', pointerEvents: 'none', background: gray100, color: gray600, fontSize: '0.875rem', lineHeight: '142.857%', p: '0.125rem 0.5rem' + }, + + avatar: { + border: '0.0469rem solid rgba(0,0,0,0.08)', + width: '2.5rem', + height: '2.5rem', + '& .MuiSvgIcon-root': { + width: '1.5rem', + height: '1.5rem', + fontSize: '1.5rem' + } } } @@ -301,7 +313,9 @@ const Header = ({ isLoggedIn = true }) => { }} onClick={handleUserClick} aria-describedby={idUser} > - + + + { horizontal: 'right', }} > - + + + Date: Wed, 9 Apr 2025 14:33:24 +0200 Subject: [PATCH 2/6] Some fixes to the registration (new popup), connecting logout, some improvements in the errors given to the user --- src/components/Auth/Login.jsx | 16 ++++- src/components/Auth/Register.jsx | 101 +++++++++++++++++++++++-------- src/components/Header/index.jsx | 10 ++- 3 files changed, 97 insertions(+), 30 deletions(-) diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx index fd1b43bc..bf9645d0 100644 --- a/src/components/Auth/Login.jsx +++ b/src/components/Auth/Login.jsx @@ -77,13 +77,23 @@ const Login = () => { setErrors({}) const result = await login({ username: formData.username, password: formData.password }) - console.log("result: ", result) - navigate("/") + if (!result.data || !result.data?.orcid_meta) { + setErrors((prev) => ({ + ...prev, + auth: "Interlex API is not returning the user information, please contact the support at support@interlex.org", + })); + } else { + const { code, orcid_meta } = result.data; + if (code === 200 || code === 302) { + setUserData({ name: orcid_meta.name, id: orcid_meta.orcid }); + } + navigate("/") + } } catch (error) { console.error("Login error:", error); setErrors((prevErrors) => ({ ...prevErrors, - auth: "An unknown error occurred. Please try again", + auth: error.message + " - " + error.errors?.[0] || " - An unknown error occurred. Please try again", })); } finally { setIsLoading(false) diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx index 9567b072..4e84c75f 100644 --- a/src/components/Auth/Register.jsx +++ b/src/components/Auth/Register.jsx @@ -7,13 +7,16 @@ import { Paper, Typography, Alert, + CircularProgress, } from "@mui/material"; -import { ArrowBack } from "@mui/icons-material"; -import { Link, useNavigate } from "react-router-dom"; +import * as yup from "yup"; import FormField from "./UI/Formfield"; +import { API_CONFIG } from "../../config"; import PasswordField from "./UI/PasswordField"; -import { register } from "../../api/endpoints/apiService"; -import * as yup from "yup"; +import { ArrowBack } from "@mui/icons-material"; +import { Link, useNavigate } from "react-router-dom"; +import { GlobalDataContext } from "../../contexts/DataContext"; +// import { register } from "../../api/endpoints/apiService"; const schema = yup.object().shape({ firstName: yup.string().required("First name is a required field"), @@ -35,47 +38,93 @@ const Register = () => { }); const [errors, setErrors] = React.useState({}); + const [isLoading, setIsLoading] = React.useState(false); + const { setUserData } = React.useContext(GlobalDataContext); const navigate = useNavigate(); + React.useEffect(() => { + let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; + let eventer = window[eventMethod]; + let messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message"; + eventer(messageEvent, function (e) { + if (!e.data || !e.data.orcid_meta) return; + const { code, orcid_meta } = e.data; + + if (code === 200 || code === 302) { + setUserData({ name: orcid_meta.name, id: orcid_meta.orcid }); + navigate("/") + } else if (code === 401) { + setErrors((prev) => ({ + ...prev, + auth: "Invalid username or password. Please try again", + })); + } else { + setErrors((prev) => ({ + ...prev, + auth: "An unknown error occurred. Please try again", + })); + } + }); + + setIsLoading(false) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isLoading]); + const registerUser = async () => { try { await schema.validate(formData, { abortEarly: false }) setErrors({}) + setIsLoading(true); - const response = await register({ - firstName: formData.firstName, - lastName: formData.lastName, - username: formData.username, - email: formData.email, - password: formData.password, - organization: formData.organization - }); - - if (response.status === 200) { - navigate("/"); - } else if(response.status === 401) { - setErrors((prevErrors) => ({ - ...prevErrors, - auth: "Invalid data. Please try again", - })) + // send a POST request to the server with the form data in a popup window + const dataForm = document.createElement("form"); + dataForm.action = `${API_CONFIG.REAL_API.NEWUSER_ILX}`; + dataForm.method = "POST"; + dataForm.style.display = "none"; + dataForm.target = "postPopup"; + dataForm.enctype = "application/x-www-form-urlencoded"; + for (const key in formData) { + const input = document.createElement("input"); + input.type = "hidden"; + input.name = key; + input.value = formData[key]; + dataForm.appendChild(input); + } + document.body.appendChild(dataForm); + const popup = window.open("", "postPopup", "width=600,height=600"); + if (popup) { + dataForm.submit(); + popup.focus(); } else { - const errorData = await response.json(); - setErrors((prevErrors) => ({ - ...prevErrors, - auth: errorData.message || "An unknown error occurred. Please try again", + alert("Popup blocked. Please allow popups for this site."); + setErrors((prev) => ({ + ...prev, + auth: "Popup blocked. Please allow popups for this site.", })); + setIsLoading(false); } + + document.body.removeChild(dataForm); } catch (error) { console.error("Registration error:", error); setErrors((prevErrors) => ({ ...prevErrors, - auth: "An unknown error occurred. Please try again", + auth: error.message + " - " + error.errors?.[0] || " - An unknown error occurred. Please try again", })); + } finally { + setIsLoading(false); } }; return ( <> + {isLoading && ( + + + + + + )} @@ -167,4 +216,4 @@ const Register = () => { ); }; -export default Register; \ No newline at end of file +export default Register; diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index f9526929..32745b90 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -219,7 +219,13 @@ const Header = () => { }; const handleMenuClick = (e, menu) => { - navigate(menu.href) + if (menu.label === 'Log out') { + setUserData(null, null); + navigate('/'); + } + if (menu.href) { + navigate(menu.href) + } } React.useEffect(() => { @@ -244,6 +250,8 @@ const Header = () => { console.log("Stored user in context ", user) if(user) { setIsLoggedIn(true) + } else { + setIsLoggedIn(false) } }, [user]) From e87ab790e3c84f2f03b2cf612e9608dc4ced58ac Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Wed, 9 Apr 2025 14:33:35 +0200 Subject: [PATCH 3/6] regex for ops --- vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 911b647f..56292794 100644 --- a/vite.config.js +++ b/vite.config.js @@ -16,7 +16,7 @@ export default defineConfig({ "Content-Type": "application/json", }, }, - "/u/ops/user-login": { + "^/u/ops/.*": { target: "https://uri.olympiangods.org", changeOrigin: true, secure: false, From 9806748634ffc5f4838f1da62e4ecb9a12c65241 Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Wed, 9 Apr 2025 15:10:26 +0200 Subject: [PATCH 4/6] register go back --- src/components/Auth/Register.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx index 4e84c75f..3293b9a5 100644 --- a/src/components/Auth/Register.jsx +++ b/src/components/Auth/Register.jsx @@ -14,7 +14,7 @@ import FormField from "./UI/Formfield"; import { API_CONFIG } from "../../config"; import PasswordField from "./UI/PasswordField"; import { ArrowBack } from "@mui/icons-material"; -import { Link, useNavigate } from "react-router-dom"; +import { Link, useNavigate, useHistory } from "react-router-dom"; import { GlobalDataContext } from "../../contexts/DataContext"; // import { register } from "../../api/endpoints/apiService"; @@ -41,6 +41,7 @@ const Register = () => { const [isLoading, setIsLoading] = React.useState(false); const { setUserData } = React.useContext(GlobalDataContext); const navigate = useNavigate(); + const history = useHistory(); React.useEffect(() => { let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; @@ -127,7 +128,7 @@ const Register = () => { )} - + history.goBack()} className="authLink"> Return to page From b5a01280af6ccca65fc39438d6919f021d8013fe Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Wed, 9 Apr 2025 15:14:05 +0200 Subject: [PATCH 5/6] fixing issue with useHistory --- src/components/Auth/Register.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx index 3293b9a5..e5068b38 100644 --- a/src/components/Auth/Register.jsx +++ b/src/components/Auth/Register.jsx @@ -14,7 +14,7 @@ import FormField from "./UI/Formfield"; import { API_CONFIG } from "../../config"; import PasswordField from "./UI/PasswordField"; import { ArrowBack } from "@mui/icons-material"; -import { Link, useNavigate, useHistory } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import { GlobalDataContext } from "../../contexts/DataContext"; // import { register } from "../../api/endpoints/apiService"; @@ -41,7 +41,6 @@ const Register = () => { const [isLoading, setIsLoading] = React.useState(false); const { setUserData } = React.useContext(GlobalDataContext); const navigate = useNavigate(); - const history = useHistory(); React.useEffect(() => { let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; @@ -128,7 +127,7 @@ const Register = () => { )} - history.goBack()} className="authLink"> + Return to page From 97fe0245da914e0eca564159ef2d7d5d6e465c51 Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Wed, 9 Apr 2025 15:32:49 +0200 Subject: [PATCH 6/6] add nginx proxy for ops --- nginx/default.conf | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/nginx/default.conf b/nginx/default.conf index fa7f0ed2..77545a30 100644 --- a/nginx/default.conf +++ b/nginx/default.conf @@ -1,8 +1,6 @@ server { listen 80; - error_log /var/log/nginx/error.log debug; # todo testing remove me not for production use - location / { root /usr/share/nginx/html/; try_files $uri /index.html; @@ -19,6 +17,15 @@ server { proxy_ssl_verify off; } + location ~ ^/u/ops/.* { + proxy_pass https://uri.olympiangods.org; + proxy_set_header Host uri.olympiangods.org; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_ssl_verify off; + } + location /static/ { autoindex on; alias /usr/share/nginx/html/static/;