UNTESTED integration between Login component and the main application wrapper

src/App.tsx

@@ -4,18 +4,27 @@ import "./App.css";
 import { LangType, Message } from "./Chat/messageTypes";
 import { MessageContainer } from "./Chat/MessageContainer";
 import strings from "./Intl/strings.json";
-import { LangContext, LoginType } from "./context";
+import { LangContext, LoginContext, LoginType } from "./context";
 import { contentTypes, domain, endpoints, port } from "./consts";
+import { Login } from "./Login/Login";
 // what we "in the business" call type gymnastics
 const Wrapper = (): React.ReactElement => {
 	const [lang, setLang] = useState<LangType>("en_US");
+	const [login, setLogin] = useState<LoginType | undefined>(undefined);
 	return (
 		<LangContext.Provider value={lang}>
+			<LoginContext.Provider value={login}>
+				<Login
+					setLogin={(value) => {
+						setLogin(value);
+					}}
+				></Login>
 				<App
 					changeLang={(value: string) => {
 						setLang(value as LangType);
 					}}
 				/>
+			</LoginContext.Provider>
 		</LangContext.Provider>
 	);
 };
@@ -45,9 +54,9 @@ const App = ({
 }: {
 	changeLang: (value: string) => void;
 }): React.ReactElement => {
-	const [login, setLogin] = useState<LoginType | undefined>(undefined);
 	const [username, setUsername] = useState<string>();
 	const [messages, setMessages] = useState<Message[]>([]);
+	const login = useContext(LoginContext);
 	const lang = useContext(LangContext);
 	const home = strings[lang].homepage;
 	// TODO refine setName logic -- move to Login handler
@@ -77,6 +86,9 @@ const App = ({
 		}
 		setUsername(newName);
 	}
+	if (!login) {
+		return <></>;
+	} else
 		return (
 			<div className="App">
 				<h1>{home.title}</h1>
@@ -105,7 +117,9 @@ const App = ({
 								if (responseBody.success) {
 									setUsername(newUsername as string);
 								} else {
-								console.error("Server POST message failed.");
+									console.error(
+										"Server POST message failed."
+									);
 									alert(
 										"The server encountered an internal error."
 									);

src/Login/Login.tsx

@@ -6,7 +6,7 @@ const encrypt = (rawPasswordString: string) => {
 	// TODO Encryption method stub
 	return rawPasswordString;
 };
-const Login = ({
+export const Login = ({
 	setLogin,
 }: {
 	setLogin: (newLogin: LoginType) => void;
@@ -40,12 +40,14 @@ const Login = ({
 			}
 		});
 	};
+	// login button press handler
 	const loginHandler = () => {
 		const uname = (document.getElementById("username") as HTMLInputElement)
 			.value;
 		const passwd = encrypt(
 			(document.getElementById("passwd") as HTMLInputElement).value
 		);
+		// async invocation of Fetch API
 		fetch(`http://${domain}:${port}${endpoints.user}?user=${uname}`, {
 			method: "GET",
 		})
@@ -54,6 +56,17 @@ const Login = ({
 				const user = userObject as User;
 				const validLogin = passwd === user.passwordHash;
 				if (!validLogin) {
+					// login invalid
+					setValid(false); // triggers page re-render -- should refresh the page
+				} else {
+					// login valid
+					const validUntilDate: Date = new Date();
+					validUntilDate.setHours(validUntilDate.getHours() + 2);
+					setLogin({
+						username: user.userName,
+						lastSeen: user.lastSeen,
+						validUntil: validUntilDate.getUTCMilliseconds(),
+					});
 				}
 			});
 	};