shuffle-cracked/frontend/src/views/AdminSetup.jsx

/* eslint-disable react/no-multi-comp */
import React, {useState} from 'react';
import { makeStyles } from '@material-ui/styles';

import {CircularProgress, TextField, Button, Paper, Typography} from '@material-ui/core'

const bodyDivStyle = {
	margin: "auto",
	marginTop: "100px",
	width: "500px",
}

const surfaceColor = "#27292D"
const inputColor = "#383B40"

const boxStyle = {
	paddingLeft: "30px",
	paddingRight: "30px",
	paddingBottom: "30px",
	paddingTop: "30px",
	backgroundColor: surfaceColor,
}

const useStyles = makeStyles({
	notchedOutline: {
		borderColor: "#f85a3e !important"
	},
});

const AdminAccount = props => {
  const { globalUrl, isLoaded, isLoggedIn, } = props;

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [firstRequest, setFirstRequest] = useState(true);
  const [loginLoading, setLoginLoading] = useState(false);

  	// Used to swap from login to register. True = login, false = register
	const register = true

	const classes = useStyles();
	// Error messages etc
	const [loginInfo, setLoginInfo] = useState("");

	const handleValidateForm = () => {
		return (username.length > 1 && password.length > 1);
	}

	if (isLoggedIn === true) {
		window.location.pathname = "/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.reason === "redirect") {
						window.location.pathname = "/login"		
					}
				}
			}),
		)
		.catch(error => {
			setLoginInfo("Error in userdata: ", error)
		})
	}

	if (firstRequest) {
		setFirstRequest(false)
		checkAdmin()
	}

	const onSubmit = (e) => {
  	setLoginLoading(true)
		e.preventDefault()
		// FIXME - add some check here ROFL

		// Just use this one?
		var data = {"username": username, "password": password}
		var baseurl = globalUrl
		const url = baseurl+'/api/v1/register';
		fetch(url, {
			method: 'POST',
			body: JSON.stringify(data),
			headers: {
				'Content-Type': 'application/json',
			},
		})
		.then(response =>
			response.json().then(responseJson => {
  			setLoginLoading(false)
				if (responseJson["success"] === false) {
					setLoginInfo(responseJson["reason"])
				} else {
					setLoginInfo("Successful register :)")
					window.location.pathname = "/login"		
				}
			}),
		)
		.catch(error => {
  		setLoginLoading(false)
			setLoginInfo("Error in userdata: ", 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>

	formtitle = "Create administrator account"
		
	const basedata = 
		<div style={bodyDivStyle}>
			<Paper style={boxStyle}>
      	<form onSubmit={onSubmit} style={{color: "white", margin: "15px 15px 15px 15px"}}>
					<h2>{formtitle}</h2>
					Username
					<div>
						<TextField
							color="primary"
							style={{backgroundColor: inputColor}}
							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: inputColor,}}
							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>
					<div style={{display: "flex", marginTop: "15px"}}>
						<Button color="primary" variant="contained" type="submit" style={{flex: "1", marginRight: "5px"}} disabled={!handleValidateForm() || loginLoading}>
  						{loginLoading ? <CircularProgress color="secondary" style={{color: "white",}} /> : "SUBMIT"}
						</Button> 				
						
					</div>
					<div style={{marginTop: "10px"}}>
						{loginInfo}
					</div>
				</form>
			</Paper>
		</div>

	const loadedCheck = isLoaded ? 
		<div>
      		{basedata}
		</div>
		:
		<div>
		</div>

	return (
		<div>
			{loadedCheck}
		</div>
	)
}

export default AdminAccount;