Use tabs, add jmap-client-ts, use it a bit

src/App.tsx

@@ -1,6 +1,8 @@
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import * as base64 from "base-64";
+import { Client } from "jmap-client-ts";
+import { FetchTransport } from "jmap-client-ts/lib/utils/fetch-transport";
 
 //import MailboxList from "./Mailbox";
 import AuthModal from "./AuthModal";
@@ -11,31 +13,53 @@ interface IAuth {
 	password: string;
 }
 
+interface IAppState {
+	auth: IAuth;
+}
+
 const App = () => {
-	const [state, setInternalState] = useState<IAuth | null>(null);
+	const [state, setInternalState] = useState<IAppState | null>(null);
 
 	// When the user provides credentials
 	const onLogin = (email: string, password: string) => {
 		// Store the provided credentials for now
-		const auth = {email: email, password: password}
-		setInternalState(auth);
-		localStorage.setItem("auth", JSON.stringify(auth));
-		doLogin(auth);
+		const state = { auth: { email: email, password: password } };
+		setInternalState(state);
+		localStorage.setItem("auth", JSON.stringify(state.auth));
+		doLogin(state.auth);
 	};
 
 	// Make the request to get system metadata
 	const doLogin = (auth: IAuth) => {
 		const domain = auth.email.split("@")[1];
-		const well_known_url = "https://" + domain + "/.well-known/jmap"
+		const well_known_url = "https://" + domain + "/.well-known/jmap";
+		const basic_auth =
+			"Basic " + base64.encode(auth.email + ":" + auth.password);
+
+		let client = new Client({
+			accessToken: "fake token",
+			httpHeaders: { Authorization: basic_auth },
+			sessionUrl: well_known_url,
+			transport: new FetchTransport(fetch.bind(window)),
+		});
+		client
+			.fetchSession()
+			.then((response) => console.log(response))
+			.catch((error) => console.error(error));
+
+		return;
+		/*
 		let headers = new Headers();
-		headers.append("Authorization", "Basic " + base64.encode(auth.email + ":" + auth.password));
+		headers.append("Authorization", basic_auth);
 		fetch(well_known_url, {
 			method: "GET",
 			headers: headers,
 		})
 			.then(response => response.json())
-			.then(data => console.log(data))
-			.catch(error => console.error(error));
+			.then(data => {
+				console.log(data);
+			})
+			.catch(error => console.error(error));*/
 	};
 
 	const loadAuth = () => {
@@ -52,7 +76,11 @@ const App = () => {
 
 	return (
 		<div className="App">
-			{state ? <p>{state.email}</p> : <AuthModal onLogin={onLogin}></AuthModal>}
+			{state && state.auth ? (
+				<p>{state.auth.email}</p>
+			) : (
+				<AuthModal onLogin={onLogin}></AuthModal>
+			)}
 		</div>
 	);
 };