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

.prettierrc

@@ -1 +1,3 @@
-{}
+{
+	useTabs: true
+}

package-lock.json

@@ -18,6 +18,7 @@
         "@types/react-dom": "^18.3.0",
         "base-64": "^1.0.0",
         "bootstrap": "^5.3.3",
+        "jmap-client-ts": "^1.0.0",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
         "react-dom": "^18.3.1",
@@ -11992,6 +11993,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jmap-client-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jmap-client-ts/-/jmap-client-ts-1.0.0.tgz",
+      "integrity": "sha512-qL31lYUpLAqrVFMaMsogorcAcpZRTSjWPwnxdl61mDNY9DINQvrKIkYCMstva4cxTbL1kQFG4aT8K9wOesrj7g=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@types/react-dom": "^18.3.0",
     "base-64": "^1.0.0",
     "bootstrap": "^5.3.3",
+    "jmap-client-ts": "^1.0.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",

src/App.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import App from "./App";
 
 test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+	render(<App />);
+	const linkElement = screen.getByText(/learn react/i);
+	expect(linkElement).toBeInTheDocument();
 });

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>
 	);
 };

src/AuthModal.tsx

@@ -1,12 +1,12 @@
-import Button from "react-bootstrap/Button"
-import Form from "react-bootstrap/Form"
-import Modal from "react-bootstrap/Modal"
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import Modal from "react-bootstrap/Modal";
 
-import React, {useState} from "react"
+import React, { useState } from "react";
 
 type AuthProps = {
-  onLogin: (email: string, password: string) => void;
-}
+	onLogin: (email: string, password: string) => void;
+};
 
 const AuthModal: React.FC<AuthProps> = ({ onLogin }) => {
 	const [email, setEmail] = useState("");
@@ -23,10 +23,19 @@ const AuthModal: React.FC<AuthProps> = ({ onLogin }) => {
 				</Modal.Header>
 
 				<Modal.Body>
-					<Form onSubmit={(e) => {e.preventDefault(); onLogin(email, password)}}>
+					<Form
+						onSubmit={(e) => {
+							e.preventDefault();
+							onLogin(email, password);
+						}}
+					>
 						<Form.Group className="mb-3" controlId="formBasicEmail">
 							<Form.Label>Email address</Form.Label>
-							<Form.Control type="email" placeholder="Enter email" onChange={e => setEmail(e.target.value)}/>
+							<Form.Control
+								type="email"
+								placeholder="Enter email"
+								onChange={(e) => setEmail(e.target.value)}
+							/>
 							<Form.Text className="text-muted">
 								We'll never share your email with anyone else.
 							</Form.Text>
@@ -34,16 +43,21 @@ const AuthModal: React.FC<AuthProps> = ({ onLogin }) => {
 
 						<Form.Group className="mb-3" controlId="formBasicPassword">
 							<Form.Label>Password</Form.Label>
-							<Form.Control type="password" placeholder="Password" onChange={e => setPassword(e.target.value)}/>
+							<Form.Control
+								type="password"
+								placeholder="Password"
+								onChange={(e) => setPassword(e.target.value)}
+							/>
 						</Form.Group>
-						<Button variant="primary" type="submit">Login</Button>
+						<Button variant="primary" type="submit">
+							Login
+						</Button>
 					</Form>
 				</Modal.Body>
 
-				<Modal.Footer>
-				</Modal.Footer>
+				<Modal.Footer></Modal.Footer>
 			</Modal.Dialog>
 		</div>
 	);
-}
+};
 export default AuthModal;

src/Mailbox.tsx

@@ -1,12 +1,12 @@
 import ListGroup from "react-bootstrap/ListGroup";
 
 function Mailbox() {
-  return (
-    <ListGroup>
-      <ListGroup.Item>Inbox</ListGroup.Item>
-      <ListGroup.Item>Spam</ListGroup.Item>
-    </ListGroup>
-  );
+	return (
+		<ListGroup>
+			<ListGroup.Item>Inbox</ListGroup.Item>
+			<ListGroup.Item>Spam</ListGroup.Item>
+		</ListGroup>
+	);
 }
 
 export default Mailbox;

src/index.tsx

@@ -5,12 +5,12 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
+	document.getElementById("root") as HTMLElement,
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function