Creating the UI

Step 0 - App.js

import { Container, Form, Button } from "react-bootstrap";

function App() {

	return (
		<div className="App">
			<Container>
				<h2>Lets JaaS It Up</h2>
				<Form
						style={{ display: allowed ? "none" : "block" }}>
					<Form.Group>
						<Form.Label htmlFor="email">
							Email Address
						</Form.Label>
						<Form.Control 
							value={email} 
							onChange={(e) => setEmail(e.target.value)} />
					</Form.Group>
					<Button variant="primary" type="submit">Join</Button>
				</Form>
				<div style={{ display: allowed ? "block" : "none" }}>
					<div id="jaas-container" style={{height: "700px"}}></div>
				</div>
			</Container>
		</div>
	);
}

Step 1 - App.js

import React, { useState, useEffect } from "react";
import { Container, Form, Button } from "react-bootstrap";

function App() {

  // Setup our Hooks to manage state
	const [email, setEmail] = useState("");
	const [allowed, setAllowed] = useState(false);

	return (
		<div className="App">
			<Container>
				<h2>Lets JaaS It Up</h2>
				<Form
						style={{ display: allowed ? "none" : "block" }}>
					<Form.Group>
						<Form.Label htmlFor="email">
							Email Address
						</Form.Label>
						<Form.Control 
							value={email} 
							onChange={(e) => setEmail(e.target.value)} />
					</Form.Group>
					<Button variant="primary" type="submit">Join</Button>
				</Form>
				<div style={{ display: allowed ? "block" : "none" }}>
					<div id="jaas-container" style={{height: "700px"}}></div>
				</div>
			</Container>
		</div>
	);
}