Some improvements to registration and error reporting

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/;

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)

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,50 +38,96 @@ 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 && (
+        <Box sx={{ height: 1, width: 1, top: 0, left: 0, position: 'absolute', backgroundColor: 'rgba(255, 255, 255, 0.8)', zIndex: 1000 }}>
+          <Box sx={{ height: 1, width: 1, top: '100%', left: '100%', position: 'relative', transform: 'translate(-50%, -50%)' }}>
+            <CircularProgress />
+          </Box>
+        </Box>
+      )}
       <Box className="authArea">
         <Paper className="authPaper" sx={{ p: 5, maxWidth: 760, flexGrow: 1 }}>
-          <Link variant="text" to={"/login"} className="authLink">
+          <Link variant="text" to={"/"} className="authLink">
             <ArrowBack />
             Return to page
           </Link>
@@ -167,4 +216,4 @@ const Register = () => {
   );
 };
 
-export default Register;
+export default Register;

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])
 

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,