Migrated a bunch of pages

backend/go-app/go.mod

@@ -18,7 +18,7 @@ require (
 	github.com/gorilla/mux v1.8.1
 	github.com/h2non/filetype v1.1.3
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.8.4
+	github.com/shuffle/shuffle-shared v0.8.5
 	golang.org/x/crypto v0.32.0
 	google.golang.org/api v0.176.1
 	google.golang.org/grpc v1.68.1

backend/go-app/go.sum

@@ -350,6 +350,10 @@ github.com/sendgrid/sendgrid-go v3.14.0+incompatible/go.mod h1:QRQt+LX/NmgVEvmdR
 github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
 github.com/sergi/go-diff v1.3.2-0.20230802210424-5b0b94c5c0d3 h1:n661drycOFuPLCN3Uc8sB6B/s6Z4t2xvBgU1htSHuq8=
 github.com/sergi/go-diff v1.3.2-0.20230802210424-5b0b94c5c0d3/go.mod h1:A0bzQcvG0E7Rwjx0REVgAGH58e96+X0MeOfepqsbeW4=
+github.com/shuffle/shuffle-shared v0.8.4 h1:R/A62IzHJXnhVNG1PqFXN1YtRgdiiSIL5q4YJEef5P8=
+github.com/shuffle/shuffle-shared v0.8.4/go.mod h1:bBXhEsPKjxln0mFnSeri7gIJ3tL/636Sh5NyTyNrvIQ=
+github.com/shuffle/shuffle-shared v0.8.5 h1:c98AMOzIrDXmgQrKyf1HJ9wZwAwB02LPRvf9+yy05OQ=
+github.com/shuffle/shuffle-shared v0.8.5/go.mod h1:bBXhEsPKjxln0mFnSeri7gIJ3tL/636Sh5NyTyNrvIQ=
 github.com/sirupsen/logrus v1.7.0/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0=
 github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
 github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=

backend/go-app/main.go

@@ -3295,6 +3295,8 @@ func buildSwaggerApp(resp http.ResponseWriter, body []byte, user shuffle.User, s
 		api.Contributors = append(api.Contributors, user.Id)
 	}
 
+	shuffle.SetAppRevision(ctx, api)
+
 	log.Printf("[INFO] API LENGTH FOR %s: %d, ID: %s", api.Name, len(parsed.Body), newmd5)
 	// FIXME: Might cause versioning issues if we re-use the same!!
 	// FIXME: Need a way to track different versions of the same app properly.
@@ -3365,11 +3367,27 @@ func buildSwaggerApp(resp http.ResponseWriter, body []byte, user shuffle.User, s
 		}
 	}
 
+
 	log.Printf("[DEBUG] Successfully built app %s (%s)", api.Name, api.ID)
 	if len(user.Id) > 0 {
 		resp.WriteHeader(200)
 		resp.Write([]byte(fmt.Sprintf(`{"success": true, "id": "%s"}`, api.ID)))
 	}
+
+	org, err := shuffle.GetOrg(ctx, user.ActiveOrg.Id)
+	if err != nil {
+		log.Printf("[ERROR] Failed getting org during image build (%s): %s", user.ActiveOrg.Id, err)
+	} else {
+		imagenames := []string{
+			fmt.Sprintf("%s_%s", api.Name, api.AppVersion),
+			fmt.Sprintf("%s_%s", api.Name, api.ID),
+		}
+
+		err = shuffle.DistributeAppToEnvironments(ctx, *org, imagenames)
+		if err != nil {
+			log.Printf("[ERROR] Failed distributing app to environments: %s", err)
+		}
+	}
 }
 
 // Creates an app from the app builder
@@ -4359,8 +4377,8 @@ func runInitEs(ctx context.Context) {
 	}
 
 	if os.Getenv("SHUFFLE_HEALTHCHECK_DISABLED") != "true" {
-		healthcheckInterval := 30
+		healthcheckInterval := 60 
-		log.Printf("[INFO] Starting healthcheck job every %d minute. Stats available on /api/v1/health/stats. Disable with SHUFFLE_HEALTHCHECK_DISABLED=true", healthcheckInterval)
+		log.Printf("[INFO] Starting healthcheck job every %d minute. Stats available on /api/v1/health/stats, and dashboard on /health. Disable with SHUFFLE_HEALTHCHECK_DISABLED=true", healthcheckInterval)
 		job := func() {
 			// Prepare a fake http.responsewriter
 			resp := httptest.NewRecorder()

frontend/src/App.jsx

@@ -34,9 +34,10 @@ import RunWorkflow from "./views/RunWorkflow.jsx";
 import Admin2 from "./views/Admin2.jsx";
 
 import LoginPage from "./views/LoginPage.jsx";
+//import LoginPage from "./views/LoginPage.jsx";
+
 import SettingsPage from "./views/SettingsPage.jsx";
 import KeepAlive from "./views/KeepAlive.jsx";
-
 import { ThemeProvider } from "@mui/material/styles";
 import CssBaseline from '@mui/material/CssBaseline';
 
@@ -236,6 +237,7 @@ const App = (message, props) => {
         <div style={{ height: 60 }} />
 				*/}
 				<Routes>
+
         	<Route
         	  exact
         	  path="/login"
@@ -243,7 +245,8 @@ const App = (message, props) => {
         	    <LoginPage
         	      isLoggedIn={isLoggedIn}
         	      setIsLoggedIn={setIsLoggedIn}
-        	      register={true}
+        	      register={false}
+        	      inregister={false}
         	      isLoaded={isLoaded}
         	      globalUrl={globalUrl}
         	      setCookie={setCookie}
@@ -253,6 +256,25 @@ const App = (message, props) => {
         	    />
         	  }
         	/>
+
+        	<Route
+        	  exact
+        	  path="/register"
+        	  element={
+        	    <LoginPage
+        	      isLoggedIn={isLoggedIn}
+        	      setIsLoggedIn={setIsLoggedIn}
+        	      inregister={true}
+        	      isLoaded={isLoaded}
+        	      globalUrl={globalUrl}
+        	      setCookie={setCookie}
+        	      cookies={cookies}
+        	      checkLogin={checkLogin}
+        	      {...props}
+        	    />
+        	  }
+        	/>
+
         	<Route
         	  exact
         	  path="/admin2"

frontend/src/components/AppAuthTab.jsx

@@ -874,15 +874,18 @@ const AppAuthTab = memo((props) => {
                       </a>
                    </div>
                 </div>
-                <Button
+
-                    style={{ color: '#1a1a1a', textTransform: 'none', backgroundColor: "#FF8444", marginLeft:"auto", borderRadius: 4,fontSize: 16, minWidth: 162, height: 40, boxShadow:'none', }}
+				{isCloud ? 
-                    variant="contained"
+					<Button
-                    color="primary"
+						style={{ color: '#1a1a1a', textTransform: 'none', backgroundColor: "#FF8444", marginLeft:"auto", borderRadius: 4,fontSize: 16, minWidth: 162, height: 40, boxShadow:'none', }}
-					disabled={!isCloud}
+						variant="contained"
-                    onClick={() => setShowAppModal(true)}
+						color="primary"
-                >
+						disabled={!isCloud}
-                    Add App Auth
+						onClick={() => setShowAppModal(true)}
-                </Button>
+					>
+						Add App Auth
+					</Button>
+				: null}
             </div>
             {/* <Divider
                 style={{
@@ -1217,6 +1220,8 @@ const AppAuthTab = memo((props) => {
             {editAuthenticationModal}
             {authenticationView}
             <div style={{marginTop: 50, }}>
+
+		{/*
         <div style={{ marginTop: 150, marginBottom: 20 }}>
           <h2 style={{ color: "#FFFFFF" }}>App Authentication Groups</h2>
           <span style={{ marginLeft: 0 }}>
@@ -1415,13 +1420,14 @@ const AppAuthTab = memo((props) => {
               );
             }
           )}
-          </List>
+          		</List>
-          </div>
+			  </div>
-        
+			
-        </div>
+			</div>
-      </div> 
+			*/}
-            </div>
+		  </div> 
-        </div>
+		</div>
+	  </div>
     );
 });
 

frontend/src/components/AppCreationModal.jsx

@@ -59,6 +59,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                     : "1px solid rgba(255,255,255,0.3)",
             borderImage: makeFancy ? "linear-gradient(to right, #ff8544 0%, #ec517c 50%, #9c5af2 100%) 1" : "none",
             transition: 'all 0.2s ease-in-out',
+			paddingBottom: isCloud ? 0 : 175, 
         }
 
         return (
@@ -416,7 +417,7 @@ const AppCreationModal = ({ open, onClose, theme, globalUrl, isCloud }) => {
                     </IconButton>
                 </DialogTitle>
                 <DialogContent sx={{ p: 3 }}>
-                    <div style={{ display: "flex", gap: '16px' }}>
+                    <div style={{ display: "flex", gap: 16, }}>
                         <AppCreateButton
                             text="Upload OpenAPI or Swagger"
                             func={() => {

frontend/src/components/EnvironmentTab.jsx

@@ -1420,7 +1420,7 @@ const EnvironmentTab = memo((props) => {
           <Collapse in={listItemExpanded === index} timeout="auto" unmountOnExit>
           	<Grid container justifyContent="center" style={{minWidth: 850, maxWidth: 850, }}>
     			<Grid item xs={12} sm={8} md={6}>
-                    <div style={{minWidth: 700, maxWidth: 700, minHeight: 350, display: 'flex', justifyContent: "center", backgroundColor: "transparent", }}>
+                    <div style={{minWidth: 750, maxWidth: 750, minHeight: 350, display: 'flex', justifyContent: "center", backgroundColor: "transparent", }}>
                         <div style={{ paddingTop: 50, paddingBottom: 100, }}>
                           <Typography variant="h6">
                             Self-Hosted Orborus instance

frontend/src/components/TenantsTab.jsx

@@ -497,7 +497,9 @@ const TenantsTab = memo((props) => {
                 response.json().then((responseJson) => {
                     if (responseJson["success"] === false) {
                         if (responseJson.reason !== undefined) {
-                            toast(responseJson.reason);
+                            toast.error(responseJson.reason, {
+								autoClose: 5000,
+							})
                         } else {
                             toast("Failed creating suborg. Please try again");
                         }
@@ -781,7 +783,7 @@ const TenantsTab = memo((props) => {
             <div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
                 <div style={{ height: "100%", width: "calc(100% - 20px)",  scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>   
                 <div style={{ marginBottom: 20 }}>
-                    <h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Organizations</h2>
+                    <h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Tenants</h2>
                     <span style={{ color: textColor }}>
                         Control sub organizations (tenants)! {" "}
                         {isCloud

frontend/src/components/UserManagmentTab.jsx

@@ -1557,10 +1557,12 @@ const UserManagmentTab = memo((props) => {
                                     style={{ display:'table-cell', verticalAlign: 'middle' }}
                                 />
 
+								{/*
                                 <ListItemText
                                     primary={data.active ? "True" : "False"}
                                     style={{display:'table-cell',verticalAlign: 'middle' , padding: "8px", textAlign: "center", color: data.active ? "#02CB70" : "#F53434" }}
                                 />
+								*/}
 
                                 <ListItemText
                                     primary={
@@ -1573,7 +1575,6 @@ const UserManagmentTab = memo((props) => {
                                     style={{  display:'table-cell',verticalAlign: 'middle', padding: "8px",  }}
                                 />
 
-								{/*
                                 <ListItemText
                                     primary={
                                         data?.mfa_info !== undefined &&
@@ -1584,7 +1585,6 @@ const UserManagmentTab = memo((props) => {
                                     }
                                     style={{ display:'table-cell', verticalAlign: 'middle',padding: "8px", color: data.mfa_info.active ? "#02CB70" : "#F53434" }}
                                 />
-								*/} 
 
                                 {selectedOrganization?.child_orgs !== undefined &&
                                     selectedOrganization?.child_orgs !== null &&

frontend/src/views/AngularWorkflow.jsx

@@ -11446,7 +11446,7 @@ const AngularWorkflow = (defaultprops) => {
       var type = "app"
       const baseImage = <LibraryBooksIcon />
       return (
-        <div style={{ position: "relative", marginTop: 15, marginLeft: 0, marginRight: 10, position: "absolute", color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, minWidth: leftBarSize - 10, maxWidth: leftBarSize - 10, boxShadows: "none", overflowX: "hidden", }}>
+        <div style={{ position: "relative", marginTop: 15, marginLeft: 0, marginRight: 10, position: "absolute", color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, minWidth: leftBarSize+30, maxWidth: 340, boxShadows: "none", overflowX: "hidden", }}>
           <List style={{ backgroundColor: theme.palette.inputColor, }}>
             {hits.length === 0 ?
               <ListItem style={outerlistitemStyle}>
@@ -11736,7 +11736,7 @@ const AngularWorkflow = (defaultprops) => {
                   }}
                 >
                   <Typography variant="body1" color="textSecondary">
-                    Click one of the relevant public apps below to Activate it for your organization.
+                    Click one of the public apps below to Activate it for your organization.
                   </Typography>
                   <InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
                     console.log("CLICKED")

frontend/src/views/AppCreator.jsx

@@ -2657,12 +2657,12 @@ const AppCreator = (defaultprops) => {
           if (responseJson.reason !== undefined) {
             setErrorCode(responseJson.reason);
 
-			if (responseJson.extra === undefined && responseJson.extra === null) {
+			toast.error("Failed to build: " + responseJson.reason, {
-            	toast("Failed to verify: " + responseJson.reason);
+				autoClose: 10000
-			}
+			})
           }
         } else {
-          toast("Successfully uploaded openapi");
+          toast.success("Successfully built openapi app! Added job to rebuild it in your hybrid runtime locations (Orborus).");
           if (window.location.pathname.includes("/new")) {
             if (responseJson.id !== undefined && responseJson.id !== null) {
               window.location = `/apps/edit/${responseJson.id}`;

frontend/src/views/AppExplorer.jsx

@@ -3866,13 +3866,13 @@ const AppExplorer = (props) => {
         }
       }}
     >
-      <DialogTitle style={{ marginBottom: 0 }}>
+      <DialogTitle style={{ marginBottom: 0, padding: 50,  paddingBottom: 0, }}>
         <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
           Are you sure you want to PUBLISH this app?
         </div>
       </DialogTitle>
       <DialogContent
-        style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
+        style={{ color: "rgba(255,255,255,0.65)", textAlign: "center", padding: 50, }}
       >
         <div>
           <Typography variant="body1" style={{ marginBottom: 20 }}>
@@ -4120,7 +4120,7 @@ const AppExplorer = (props) => {
             </Button>
           )}
 			{appType === 1 ? null : 
-				creatorProfile.self === true || userdata.support === true ? 
+  				userdata?.support || userdata?.id === app?.owner || (userdata?.admin === "true" && userdata?.active_org?.id === app?.reference_org) || app?.contributors?.includes(userdata?.id) || creatorProfile?.self === true ?
 				<Tooltip title="Edit App" placement="top">
 					<Button
 						variant="outlined"
@@ -4167,9 +4167,9 @@ const AppExplorer = (props) => {
 					Explore API
 				  </Button>
 				</a>
-        {(appdata?.owner === userdata?.id) ? (
                 <Select
                   value={sharingConfiguration}
+			  	  disabled={!isCloud}
                   onChange={(event) => {
                     if ((appdata.owner !== userdata.id) && (!userdata.support)) {
                       toast("You're not the owner of this app. You can't update it.");
@@ -4222,7 +4222,6 @@ const AppExplorer = (props) => {
                     );
                   })}
                 </Select>
-        ): null }
 			</div>
           ) : (
             <a

frontend/src/views/Apps2.jsx

@@ -590,7 +590,7 @@ const Hits = ({
                                 <div style={{
                                   flex: 1
                                 }}>
-                                  {hoverEffect === index && isCloud ? (
+                                  {hoverEffect === index ? (
                                     <div>
                                       {data.tags && (
                                         <Tooltip
@@ -764,7 +764,7 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
     <TextField
       fullWidth
       variant="outlined"
-      placeholder="Search for apps"
+      placeholder="Search from 2500+ public apps"
       value={localQuery}
       id="shuffle_search_field"
       inputRef={inputRef}
@@ -2009,7 +2009,7 @@ const Apps2 = (props) => {
                 }}
               />
               <Tab
-                label="Discover Apps"
+                label="Discover Public Apps"
                 style={{
                   ...tabStyle,
                   marginRight: 0,
@@ -2028,7 +2028,7 @@ const Apps2 = (props) => {
                 <TextField
                   fullWidth
                   variant="outlined"
-                  placeholder="Search for apps"
+                  placeholder={currTab === 1 ? "Search your apps" : "Search org apps"}
                   disabled={!isLoggedIn}
                   value={searchQuery}
                   id="shuffle_search_field"

frontend/src/views/LoginPageOld.jsx

@@ -0,0 +1,546 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@mui/styles";
+import { useInterval } from "react-powerhooks";
+import theme from '../theme.jsx';
+
+import {
+  CircularProgress,
+  TextField,
+  Button,
+  Paper,
+  Typography,
+} from "@mui/material";
+
+import { useNavigate } from "react-router-dom";
+
+const hrefStyle = {
+  color: "white",
+  textDecoration: "none",
+};
+
+const bodyDivStyle = {
+  margin: "auto",
+  marginTop: 150,
+  width: "500px",
+};
+
+const useStyles = makeStyles({
+  notchedOutline: {
+    borderColor: "#f85a3e !important",
+  },
+});
+
+const LoginDialog = (props) => {
+  const {
+    globalUrl,
+    isLoaded,
+    isLoggedIn,
+    setIsLoggedIn,
+    setCookie,
+    register,
+    checkLogin,
+  } = props;
+
+	let navigate = useNavigate();
+  const classes = useStyles();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [firstRequest, setFirstRequest] = useState(true);
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [loginViewLoading, setLoginViewLoading] = useState(false);
+  const [ssoUrl, setSSOUrl] = useState("");
+
+  const [MFAField, setMFAField] = useState(false);
+  const [MFAValue, setMFAValue] = useState("");
+
+
+  // Used to swap from login to register. True = login, false = register
+
+	useEffect(() => {
+		checkAdmin() 
+	}, [loginViewLoading])
+
+  // Error messages etc
+  const [loginInfo, setLoginInfo] = useState("");
+
+  const handleValidateForm = () => {
+    return username.length > 1 && password.length > 1;
+  };
+
+  if (isLoggedIn === true) {
+    //window.location.pathname = "/workflows";
+    navigate("/workflows")
+  }
+
+  const checkAdmin = () => {
+    const url = globalUrl + "/api/v1/checkusers";
+    fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) =>
+        response.json().then((responseJson) => {
+          if (responseJson["success"] === false) {
+            setLoginInfo(responseJson["reason"]);
+          } else {
+
+            if (responseJson.sso_url !== undefined && responseJson.sso_url !== null) {
+              setSSOUrl(responseJson.sso_url);
+            }
+
+            if (loginViewLoading) {
+              setLoginViewLoading(false);
+              checkLogin();
+              stop();
+
+              if (
+                responseJson.reason !== undefined &&
+                responseJson.reason !== null
+              ) {
+                setLoginInfo(responseJson.reason);
+              }
+            }
+
+            if (responseJson.reason === "stay") {
+              navigate("/adminsetup")
+            }
+          }
+        })
+      )
+      .catch((error) => {
+        if (!loginViewLoading) {
+          setLoginViewLoading(true);
+          start();
+        }
+      });
+  };
+
+  const { start, stop } = useInterval({
+    duration: 3000,
+    startImmediate: false,
+    callback: () => {
+      checkAdmin();
+    },
+  });
+
+  if (firstRequest) {
+    setFirstRequest(false);
+    checkAdmin();
+  }
+
+  const onSubmit = (e) => {
+    setLoginLoading(true);
+    e.preventDefault();
+    setLoginInfo("");
+    // FIXME - add some check here ROFL
+
+    // Just use this one?
+    var data = { username: username, password: password };
+    if (MFAValue !== undefined && MFAValue !== null && MFAValue.length > 0) {
+      data["mfa_code"] = MFAValue;
+    }
+
+    var baseurl = globalUrl;
+    if (register) {
+      var url = baseurl + "/api/v1/login";
+      fetch(url, {
+        mode: "cors",
+        method: "POST",
+        body: JSON.stringify(data),
+        credentials: "include",
+        crossDomain: true,
+        withCredentials: true,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+      })
+        .then((response) =>
+          response.json().then((responseJson) => {
+            setLoginLoading(false);
+            if (responseJson["success"] === false) {
+              setLoginInfo(responseJson["reason"]);
+            } else {
+              if (responseJson["reason"] === "MFA_REDIRECT") {
+                setLoginInfo(
+                  "MFA required. Please enter the 6-digit code from your authenticator"
+                );
+                setMFAField(true);
+                return;
+              }  else if (responseJson["reason"] === "MFA_SETUP") {
+                window.location.href = `/login/${responseJson.url}/mfa-setup`;
+                return;
+              }
+
+              setLoginInfo("Successful login, rerouting");
+              for (var key in responseJson["cookies"]) {
+                setCookie(
+                  responseJson["cookies"][key].key,
+                  responseJson["cookies"][key].value,
+                  { path: "/" }
+                );
+              }
+
+			  if (responseJson.tutorials === undefined || responseJson.tutorials === null || !responseJson.tutorials.includes("welcome")) {
+			  	console.log("RUN Welcome!!")
+			    setTimeout(() => {
+			      navigate("/welcome?tab=2")
+			    },200)
+			  	// window.location.pathname = "" 
+			  	return
+			  }
+
+			  const tmpView = new URLSearchParams(window.location.search).get("view")
+			  if (tmpView !== undefined && tmpView !== null) {
+			  	//const newUrl = `/${tmpView}${decodeURIComponent(window.location.search)}`
+			  	const newUrl = `/${tmpView}`
+			  	window.location.pathname = newUrl
+			  } else {
+			  	window.location.pathname = "/workflows"		
+			  }
+
+              setIsLoggedIn(true);
+            }
+          })
+        )
+        .catch((error) => {
+          setLoginLoading(false);
+          setLoginInfo("Error logging in: " + error);
+        });
+    } else {
+      url = baseurl + "/api/v1/users/register";
+      fetch(url, {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((response) =>
+          response.json().then((responseJson) => {
+            if (responseJson["success"] === false) {
+              setLoginInfo(responseJson["reason"]);
+            } else {
+              setLoginInfo("Successful register!");
+            }
+          })
+        )
+        .catch((error) => {
+          setLoginInfo("Error in from backend: ", error);
+        });
+    }
+  };
+
+  const onChangeUser = (e) => {
+    setUsername(e.target.value);
+  };
+
+  const onChangePass = (e) => {
+    setPassword(e.target.value);
+  };
+
+  //const onClickRegister = () => {
+  //	if (props.location.pathname === "/login") {
+  //		window.location.pathname = "/register"
+  //	} else {
+  //		window.location.pathname = "/login"
+  //	}
+
+  //	setLoginCheck(!register)
+  //}
+
+  //var loginChange = register ? (<div><p onClick={setLoginCheck(false)}>Want to register? Click here.</p></div>) : (<div><p onClick={setLoginCheck(true)}>Go back to login? Click here.</p></div>);
+  var formtitle = register ? <div>Login</div> : <div>Register</div>;
+  const imgsize = 100;
+  const basedata = (
+    <div style={bodyDivStyle}>
+      <Paper
+        style={{
+          paddingLeft: "30px",
+          paddingRight: "30px",
+          paddingBottom: "30px",
+          paddingTop: "30px",
+          position: "relative",
+          backgroundColor: theme.palette.surfaceColor,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: -imgsize / 2 - 10,
+            left: 250 - imgsize / 2,
+            height: imgsize,
+            width: imgsize,
+          }}
+        >
+          <img
+            src="images/Shuffle_logo.png"
+            style={{
+              height: imgsize + 10,
+              width: imgsize + 10,
+              border: "2px solid rgba(255,255,255,0.6)",
+              borderRadius: imgsize,
+            }}
+          />
+        </div>
+
+        {loginViewLoading ? (
+          <div style={{ textAlign: "center", marginTop: 50 }}>
+            <Typography
+              variant="body2"
+              style={{ marginBottom: 20, color: "white" }}
+            >
+              Waiting for the Shuffle database to become available. This may
+              take up to a minute.
+            </Typography>
+
+            {loginInfo === undefined ||
+            loginInfo === null ||
+            loginInfo.length === 0 ? null : (
+              <div style={{ marginTop: "10px" }}>Database Response: {loginInfo}</div>
+            )}
+            <CircularProgress color="secondary" style={{ color: "white" }} />
+
+            <Paper
+              style={{
+                paddingLeft: "30px",
+                paddingRight: "30px",
+                paddingBottom: "30px",
+                paddingTop: "30px",
+                position: "relative",
+                textAlign: "left",
+                marginTop: 15,
+              }}
+            >
+              <Typography
+                variant="body2"
+                style={{ marginBottom: 20, color: "white" }}
+              >
+                <b>
+                  Are you sure Shuffle is{" "}
+                  <a
+                    rel="norefferer"
+                    target="_blank"
+                    href="https://github.com/frikky/Shuffle/blob/master/.github/install-guide.md"
+                    style={{ textDecoration: "none", color: "#f86a3e" }}
+                  >
+                    installed correctly
+                  </a>
+                  ?
+                </b>
+              </Typography>
+              <Typography
+                variant="body2"
+                style={{ marginBottom: 20, color: "white" }}
+              >
+                <b>1.</b> Make sure shuffle-database folder has correct access, and that you have a minimum of <b>2Gb of RAM available</b>:{" "}
+                <br />
+                <br />
+                sudo chown -R 1000:1000 shuffle-database
+              </Typography>
+              <Typography
+                variant="body2"
+                style={{ marginBottom: 20, color: "white" }}
+              >
+                <b>2.</b> Disable memory swap on the host:
+                <br />
+                <br />
+				sudo swapoff -a
+              </Typography>
+              <Typography
+                variant="body2"
+                style={{ marginBottom: 20, color: "white" }}
+              >
+                <b>3</b>. Restart the database:
+                <br />
+                <br />
+                sudo docker restart shuffle-opensearch
+              </Typography>
+            </Paper>
+            <Typography
+              variant="body2"
+              style={{ marginBottom: 10, color: "white", marginTop: 20 }}
+            >
+              Need help?{" "}
+              <a
+                rel="norefferer"
+                target="_blank"
+                href="https://discord.gg/B2CBzUm"
+                style={{ textDecoration: "none", color: "#f86a3e" }}
+              >
+                Join the Discord!
+              </a>
+            </Typography>
+          </div>
+        ) : (
+          <form
+            onSubmit={onSubmit}
+            style={{ margin: "15px 15px 15px 15px", color: "white" }}
+          >
+            <h2>{formtitle}</h2>
+            Username
+            <div>
+              <TextField
+                color="primary"
+                style={{
+                  backgroundColor: theme.palette.inputColor,
+                  marginTop: 5,
+                }}
+                autoFocus
+                InputProps={{
+                  classes: {
+                    notchedOutline: classes.notchedOutline,
+                  },
+                  style: {
+                    height: "50px",
+                    color: "white",
+                    fontSize: "1em",
+                  },
+                }}
+                required
+                fullWidth={true}
+                autoComplete="username"
+                placeholder="username@example.com"
+                id="emailfield"
+                margin="normal"
+                variant="outlined"
+                onChange={onChangeUser}
+              />
+            </div>
+            Password
+            <div>
+              <TextField
+                color="primary"
+                style={{
+                  backgroundColor: theme.palette.inputColor,
+                  marginTop: 5,
+                }}
+                InputProps={{
+                  classes: {
+                    notchedOutline: classes.notchedOutline,
+                  },
+                  style: {
+                    height: "50px",
+                    color: "white",
+                    fontSize: "1em",
+                  },
+                }}
+                required
+                id="outlined-password-input"
+                fullWidth={true}
+                type="password"
+                autoComplete="current-password"
+                placeholder="**********"
+                margin="normal"
+                variant="outlined"
+                onChange={onChangePass}
+              />
+            </div>
+            {MFAField === true ? (
+              <div style={{ marginTop: 15 }}>
+                2-factor code
+                <TextField
+                  color="primary"
+                  style={{
+                    backgroundColor: theme.palette.inputColor,
+                    marginTop: 5,
+                  }}
+                  InputProps={{
+                    classes: {
+                      notchedOutline: classes.notchedOutline,
+                    },
+                    style: {
+                      height: "50px",
+                      color: "white",
+                      fontSize: "1em",
+                    },
+                  }}
+                  required
+                  id="outlined-password-input"
+                  fullWidth={true}
+                  type="text"
+                  placeholder="6-digit code"
+                  margin="normal"
+                  variant="outlined"
+                  onChange={(event) => {
+                    setMFAValue(event.target.value);
+                  }}
+                />
+              </div>
+            ) : null}
+            <div style={{ display: "flex", marginTop: "15px" }}>
+              <Button
+                color="primary"
+                variant="contained"
+                type="submit"
+                style={{ flex: "1" }}
+                disabled={!handleValidateForm() || loginLoading}
+              >
+                {loginLoading ? (
+                  <CircularProgress
+                    color="secondary"
+                    style={{ color: "white" }}
+                  />
+                ) : (
+                  "SUBMIT"
+                )}
+              </Button>
+            </div>
+            <div style={{ marginTop: "10px" }}>{loginInfo}</div>
+            {ssoUrl !== undefined && ssoUrl !== null && ssoUrl.length > 0 ? (
+              <div>
+                <Typography style={{ textAlign: "center" }}>Or</Typography>
+                <div style={{ textAlign: "center", margin: 10 }}>
+                  <Button
+                    fullWidth
+										id="sso_button"
+                    color="secondary"
+                    variant="outlined"
+                    type="button"
+                    style={{ flex: "1", marginTop: 5 }}
+                    onClick={() => {
+                      //console.log("CLICK SSO");
+											window.location.href = ssoUrl
+                      //navigate(ssoUrl)
+                    }}
+                  >
+                    Use SSO
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+          </form>
+        )}
+      </Paper>
+    </div>
+  );
+
+  const loadedCheck = isLoaded ? <div>{basedata}</div> : <div></div>;
+
+	useEffect(() => {
+		setTimeout(() => {
+			if (ssoUrl !== undefined && ssoUrl !== null && ssoUrl.length > 0) {
+				//id="sso_button"
+    		const ssoBtn = document.getElementById("sso_button");
+				if (ssoBtn !== undefined && ssoBtn !== null) {
+					//console.log("SSO BTN: ", ssoBtn)
+					const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+					var tmpView = new URLSearchParams(cursearch).get("autologin");
+					if (tmpView !== undefined && tmpView !== null) {
+						if (tmpView === "true") {
+							console.log("Tmp: ", tmpView)
+							ssoBtn.click()
+						}
+					}
+				}
+			}
+		}, 200);
+	}, [ssoUrl])
+
+  return <div style={{paddingBottom: 150, }}>{loadedCheck}</div>;
+};
+
+export default LoginDialog;