diff --git a/.prettierrc b/.prettierrc index 0967ef4..54d5b18 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,3 @@ -{} +{ + useTabs: true +} diff --git a/package-lock.json b/package-lock.json index 02441e2..89f11c5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 90ca2f7..9247a49 100644 --- a/package.json +++ b/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", diff --git a/src/App.test.tsx b/src/App.test.tsx index d76787e..86da92e 100644 --- a/src/App.test.tsx +++ b/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(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); }); diff --git a/src/App.tsx b/src/App.tsx index 6f70c48..1904255 100644 --- a/src/App.tsx +++ b/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(null); + const [state, setInternalState] = useState(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 (
- {state ?

{state.email}

: } + {state && state.auth ? ( +

{state.auth.email}

+ ) : ( + + )}
); }; diff --git a/src/AuthModal.tsx b/src/AuthModal.tsx index 999cea3..4e13da7 100644 --- a/src/AuthModal.tsx +++ b/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 = ({ onLogin }) => { const [email, setEmail] = useState(""); @@ -23,10 +23,19 @@ const AuthModal: React.FC = ({ onLogin }) => { -
{e.preventDefault(); onLogin(email, password)}}> + { + e.preventDefault(); + onLogin(email, password); + }} + > Email address - setEmail(e.target.value)}/> + setEmail(e.target.value)} + /> We'll never share your email with anyone else. @@ -34,16 +43,21 @@ const AuthModal: React.FC = ({ onLogin }) => { Password - setPassword(e.target.value)}/> + setPassword(e.target.value)} + /> - +
- - + ); -} +}; export default AuthModal; diff --git a/src/Mailbox.tsx b/src/Mailbox.tsx index 80ff5a8..5a34f51 100644 --- a/src/Mailbox.tsx +++ b/src/Mailbox.tsx @@ -1,12 +1,12 @@ import ListGroup from "react-bootstrap/ListGroup"; function Mailbox() { - return ( - - Inbox - Spam - - ); + return ( + + Inbox + Spam + + ); } export default Mailbox; diff --git a/src/index.tsx b/src/index.tsx index 4fa2a47..a5462b2 100644 --- a/src/index.tsx +++ b/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( - - - , + + + , ); // If you want to start measuring performance in your app, pass a function