Merge pull request #652 from SynBioHub/althome

Althome

frontend/components/Admin/Theme.js

@@ -10,13 +10,15 @@ import { useState } from 'react';
 import Loader from 'react-loader-spinner';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { isValidURI } from '../Viewing/Shell';
 const { publicRuntimeConfig } = getConfig();
 
 export default function Theme() {
   const dispatch = useDispatch();
   const { theme, loading } = useTheme(dispatch);
   const [instanceName, setInstanceName] = useState('');   // default to empty
   const [frontPageText, setFrontPageText] = useState(''); // default to empty
+  const [altHome, setAltHome] = useState('');
   const [baseColor, setBaseColor] = useState('');
   const [logoFile, setLogoFile] = useState(null);
   const [showModuleInteractions, setShowModuleInteractions] = useState(true);
@@ -27,6 +29,7 @@ export default function Theme() {
     if (theme) {
       setInstanceName(theme.instanceName);
       setFrontPageText(theme.frontPageText);
+      setAltHome(theme.altHome);
     }
   }, [theme]);
 
@@ -57,16 +60,20 @@ export default function Theme() {
       'X-authorization': token
     };
 
+    if (altHome !== '' && !isValidURI(altHome)) {
+      alert('Alternate Home Page must be empty or contain a valid URL.');
+      return; // Prevent form submission
+    }
+
     const formData = new FormData();
     formData.append('instanceName', instanceName);
     formData.append('frontPageText', frontPageText);
+    formData.append('altHome', altHome);
     formData.append('baseColor', baseColor);
     if (logoFile) {
       formData.append('logo', logoFile);
     }
 
-    console.log('this is a test');
-
     try {
       const response = await fetch(url, { method: 'POST', headers: headers, body: formData });
       const data = await response.text();
@@ -116,6 +123,13 @@ export default function Theme() {
         rows={10}  // Number of rows
         cols={100}  // Number of columns
       />
+      <div>Alternate Home Page</div>
+      <input
+        type="text"
+        value={altHome}
+        onChange={(e) => setAltHome(e.target.value)}
+        style={{ width: '600px' }}
+      />
 
       <div>Color Settings</div>
       <table className={styles.table}>

frontend/components/Navbar/Navbar.js

@@ -37,13 +37,19 @@ export default function Navbar() {
       );
   }, [loggedIn]);
 
+  console.log(theme);
+  let linkHref = "/";
+  if (theme && theme.altHome && theme.altHome.length > 0) {
+    linkHref = theme.altHome;
+  }
+
   return (
     <header className={styles.container}
     style={{ backgroundColor: theme?.themeParameters?.[0]?.value || '#465775' }} 
     >
 
       <div className={styles.logoAndInstanceContainer}> {/* This is your new div container */}
-        <Link href="/">
+        <Link href={linkHref}>
           <a className={styles.logo}>
             <Image alt="logo" width={80} height={80} src="/images/logo.svg" />
             {/* <Image alt="logo" width={80} height={80} src="/images/widevibe.gif" /> */}

frontend/components/Search/NavbarSearch/NavbarSearch.js

@@ -14,11 +14,16 @@ export default function NavbarSearch(properties) {
   const pageVisited = useSelector(state => state.tracking.pageVisited);
   const { theme, loading } = useTheme();
 
+  let linkHref = "/";
+  if (theme && theme.altHome && theme.altHome.length > 0) {
+    linkHref = theme.altHome;
+  }
+
   return (
     <header className={styles.container}
     style={{ backgroundColor: theme?.themeParameters?.[0]?.value || '#465775' }} 
     >
-      <Link href="/">
+      <Link href={linkHref}>
         <a className={styles.logo}>
           <Image alt="logo" width={86} height={86} src="/images/logo.svg" />
         </a>

frontend/public/commitHash.txt

@@ -1 +1 @@
-f6f9da07901a90dad77c15690464facfc1fa8e67
+50e52732439c53176be416e5f359560e01e328bd

frontend/specialAccess/setup.js

@@ -9,6 +9,7 @@ import SubmitLabel from '../components/Submit/ReusableComponents/SubmitLabel';
 import getConfig from 'next/config';
 import { useDispatch } from 'react-redux';
 import { addError } from '../redux/actions';
+import { isValidURI } from '../components/Viewing/Shell';
 import axios from 'axios';
 const { publicRuntimeConfig } = getConfig();
 
@@ -139,13 +140,14 @@ export default function Setup({ setInSetupMode }) {
               />
 
               <InputField
-                labelText="Alternate Home Page: If you would like to set your own version of the home page, set the uri here. For example, typing https://mysynbiohub.org, would make this the default page, while mysynbiohub, would make https://synbiohub.org/mysynbiohub the default page."
+                labelText="Alternate Home Page: If you would like to set your own version of the home page, set the uri here. For example, typing https://mysynbiohub.org would make this the default page, while mysynbiohub would make https://synbiohub.org/mysynbiohub the default page."
                 placeholder="Alternate Home Page"
                 value={altHome}
                 onChange={event => setAltHome(event.target.value)}
                 inputName="Alternate Home Page"
                 containerStyling={styles.inputcontainer}
               />
+
             </div>
           }
         />
@@ -221,6 +223,10 @@ export default function Setup({ setInSetupMode }) {
               'Content-Type': 'application/json',
               Accept: 'text/plain'
             };
+            if (altHome !== '' && !isValidURI(altHome)) {
+              setErrors(['Alternate Home Page must either be empty or contain a valid URL.']);
+              return; // Prevent the submission
+            }
             try {
               await axios.post(
                 `${publicRuntimeConfig.backend}/setup`,
@@ -240,18 +246,18 @@ export default function Setup({ setInSetupMode }) {
                   virtuosoINI: '/etc/virtuoso-opensource-7/virtuoso.ini',
                   virtuosoDB: '/var/lib/virtuoso-opensource-7/db',
                   allowPublicSignup,
-                  altHome
+                  altHome, // This can now be either a valid URL or an empty string
                 },
                 {
-                  headers
+                  headers,
                 }
               );
               setErrors([]);
               setInSetupMode(false);
             } catch (error) {
-              if (error.response.status === 400) {
+              if (error.response?.status === 400) {
                 const errorMessages = error.response.data.details.map(
-                  error => error.message
+                  (err) => err.message
                 );
                 setErrors(errorMessages);
                 return;