Finished app activation with search engine

frontend/src/AppCreator.js

@@ -81,7 +81,7 @@ const AppCreator = (props) => {
 	const [actionsModalOpen, setActionsModalOpen] = useState(false);
 	const [authenticationOption, setAuthenticationOption] = useState(authenticationOptions[0]);
 	const [parameterName, setParameterName] = useState("");
-	const [parameterLocation, setParameterLocation] = useState(apikeySelection[0]);
+	const [parameterLocation, setParameterLocation] = useState(apikeySelection.length > 0 ? apikeySelection[0] : "");
 	const [urlPath, setUrlPath] = useState("");
 	//const [urlPathQueries, setUrlPathQueries] = useState([{"name": "test", "required": false}]);
 	const [urlPathQueries, setUrlPathQueries] = useState([]);
@@ -161,7 +161,7 @@ const AppCreator = (props) => {
 		.then((responseJson) => {
   			setIsAppLoaded(true)
 			if (!responseJson.success) {
-				alert.error("Failed to verify")
+				alert.error("Failed to get the app")
 			} else {
 				const data = JSON.parse(responseJson.body)
 				console.log("LOADED IMAGE: ", data.image)
@@ -263,9 +263,12 @@ const AppCreator = (props) => {
 					break
 				} else if (value.type === "apiKey") {
 					setAuthenticationOption("API key")
-  					setParameterName(value.name)
+  				setParameterName(value.name)
+
+					value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
 					setParameterLocation(value.in)
 					if (!apikeySelection.includes(value.in)) {
+						console.log("APIKEY SELECT: ", apikeySelection)
 						alert.error("Might be error in setting up API key authentication")
 					}
 					break
@@ -593,6 +596,9 @@ const AppCreator = (props) => {
 		setActions(actions)
 	}
 
+	console.log("Option: ", authenticationOption)
+	console.log("Location: ", parameterLocation)
+  console.log("Name: ", parameterName)
 	const apiKey = authenticationOption === "API key" ? 
 		<div>
 			<h4>API key</h4>
@@ -605,6 +611,7 @@ const AppCreator = (props) => {
 				id="standard-required"
 				margin="normal"
 				variant="outlined"
+				defaultValue={parameterName}
 				helperText={<div style={{color:"white", marginBottom: "2px",}}>Can't be empty. Can't contain any of the following characters: !#$%&'^+-._~|]+$</div>}
 				onChange={e => setParameterName(e.target.value)}	
 				InputProps={{
@@ -628,13 +635,18 @@ const AppCreator = (props) => {
 					name: 'age',
 					id: 'outlined-age-simple',
 				}}
-				>
-							>
-				{apikeySelection.map(data => (
-					<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
-						{data}
-					</MenuItem>
-				))}
+			>
+				{apikeySelection.map(data => {
+					if (data === undefined) {
+						return null
+					}
+
+					return (
+						<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+							{data}
+						</MenuItem>
+					)}
+				)}
 			</Select>
 			<Divider style={{marginBottom: "10px", marginTop: "30px", height: "1px", width: "100%", backgroundColor: "grey"}}/>
 		</div>

frontend/src/Apps.js

@@ -262,7 +262,7 @@ const Apps = (props) => {
 	const dividerColor = "rgb(225, 228, 232)"
 	const uploadViewPaperStyle = {
 		minWidth: "100%",
-		maxWidth: "100%",
+		maxWidth: 662.5,
 		color: "white",
 		backgroundColor: surfaceColor,
 		display: "flex",
@@ -285,9 +285,10 @@ const Apps = (props) => {
 
 		var description = selectedApp.description
 
-		const url = "/apps/edit/"+selectedApp.id
+		const editUrl = "/apps/edit/"+selectedApp.id
+		const activateUrl = "/apps/new?id="+selectedApp.id
 		var editButton = selectedApp.activated && selectedApp.private_id !== undefined && selectedApp.private_id.length > 0 && selectedApp.generated ?
-			<Link to={url} style={{textDecoration: "none"}}>
+			<Link to={editUrl} style={{textDecoration: "none"}}>
 				<Button
 					variant="outlined"
 					component="label"
@@ -298,9 +299,9 @@ const Apps = (props) => {
 				</Button></Link> : null
 
 		var activateButton = selectedApp.generated && !selectedApp.activated ?
-			<Link to={url} style={{textDecoration: "none"}}>
+			<Link to={activateUrl} style={{textDecoration: "none"}}>
 				<Button
-					variant="outlined"
+					variant="contained"
 					component="label"
 					color="primary"
 					style={{marginTop: "10px"}}
@@ -308,8 +309,7 @@ const Apps = (props) => {
 					Activate App	
 				</Button></Link> : null
 
-
-		var deleteButton = (selectedApp.private_id !== undefined && selectedApp.private_id.length > 0 && selectedApp.generated) || (selectedApp.downloaded != undefined && selectedApp.downloaded == true) ?
+		var deleteButton = ((selectedApp.private_id !== undefined && selectedApp.private_id.length > 0 && selectedApp.generated) || (selectedApp.downloaded != undefined && selectedApp.downloaded == true)) && activateButton === null ?
 				<Button
 					variant="outlined"
 					component="label"
@@ -322,16 +322,30 @@ const Apps = (props) => {
 					Delete app	
 				</Button> : null
 
+		var imageline = selectedApp.large_image === undefined || selectedApp.large_image.length === 0 ?
+			<img alt={selectedApp.title} style={{width: 100, height: 100}} />
+			: 
+			<img alt={selectedApp.title} src={selectedApp.large_image} style={{width: 100, height: 100, maxWidth: "100%"}} />
 
 		//fetch(globalUrl+"/api/v1/get_openapi/"+urlParams.get("id"), {
 		var baseInfo = newAppname.length > 0 ?
 			<div>
-				<h2>{newAppname}</h2>
-				<p>{description}</p>
+				<div style={{display: "flex"}}>
+					<div style={{marginRight: 15, marginTop: 10}}>
+						{imageline}
+					</div>
+					<div style={{maxWidth: "75%", overflow: "hidden"}}>
+						<h2>{newAppname}</h2>
+						<p>{description}</p>
+					</div>
+				</div>
+				{activateButton}
+				{editButton}
+				{deleteButton}
 				<Divider style={{marginBottom: "10px", marginTop: "10px", backgroundColor: dividerColor}}/>
-				{selectedApp.link.length > 0 ? <p>URL: {selectedApp.link}</p> : null}
-				<p>ID: {selectedApp.id}</p>
-				{selectedApp.privateId !== undefined && selectedApp.privateId.length > 0 ? <p>PrivateID: {selectedApp.privateId}</p> : null}
+				{selectedApp.link.length > 0 ? <p><b>URL:</b> {selectedApp.link}</p> : null}
+				<p><b>ID:</b> {selectedApp.id}</p>
+				{selectedApp.privateId !== undefined && selectedApp.privateId.length > 0 ? <p><b>PrivateID:</b> {selectedApp.privateId}</p> : null}
 			
 				<div style={{marginTop: 15, marginBottom: 15}}>
 					<b>Actions</b>
@@ -387,10 +401,6 @@ const Apps = (props) => {
 							})}
 					</div>
 				: null}
-
-				{activateButton}
-				{editButton}
-				{deleteButton}
 			</div>
 			: 
 			null
@@ -490,7 +500,7 @@ const Apps = (props) => {
 								setLoadAppsModalOpen(true)
 							}}
 						>
-							Download from URL
+							Download more apps 
 						</Button>
 					</div>
 					<TextField