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}>
-			<App
+			<LoginContext.Provider value={login}>
-				changeLang={(value: string) => {
+				<Login
-					setLang(value as LangType);
+					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,49 +86,54 @@ const App = ({
 		}
 		setUsername(newName);
 	}
-	return (
+	if (!login) {
-		<div className="App">
+		return <></>;
-			<h1>{home.title}</h1>
+	} else
-			<pre>{home.description}</pre>
+		return (
-			<h3>Your name is: {username}</h3>
+			<div className="App">
-			<button
+				<h1>{home.title}</h1>
-				onClick={(ev) => {
+				<pre>{home.description}</pre>
-					const selection = prompt(home.newLangPrompt);
+				<h3>Your name is: {username}</h3>
-					changeLang(selection ? (selection as LangType) : lang);
+				<button
-				}}
+					onClick={(ev) => {
-			>
+						const selection = prompt(home.newLangPrompt);
-				{home.switchLang}
+						changeLang(selection ? (selection as LangType) : lang);
-			</button>
+					}}
-			<button
+				>
-				onClick={(ev) => {
+					{home.switchLang}
-					// For passing new username to the backend
+				</button>
-					// In the future, this could be done with the async/await JS/TS syntax
+				<button
-					const newUsername = prompt("New username: ");
+					onClick={(ev) => {
-					fetch(`${endpoints.user}?name=${newUsername}`, {
+						// For passing new username to the backend
-						method: "POST",
+						// In the future, this could be done with the async/await JS/TS syntax
-					})
+						const newUsername = prompt("New username: ");
-						.then((response) => {
+						fetch(`${endpoints.user}?name=${newUsername}`, {
-							return response.json();
+							method: "POST",
 						})
-						.then((responseBody: { success: boolean }) => {
+							.then((response) => {
-							if (responseBody.success) {
+								return response.json();
-								setUsername(newUsername as string);
+							})
-							} else {
+							.then((responseBody: { success: boolean }) => {
-								console.error("Server POST message failed.");
+								if (responseBody.success) {
-								alert(
+									setUsername(newUsername as string);
-									"The server encountered an internal error."
+								} else {
-								);
+									console.error(
-							}
+										"Server POST message failed."
-						});
+									);
-				}}
+									alert(
-			>
+										"The server encountered an internal error."
-				Change Username
+									);
-			</button>
+								}
-			{messages.map((message) => {
+							});
-				return <MessageContainer {...message} />;
+					}}
-			})}
+				>
-			{<Chat user={username as string} />}
+					Change Username
-		</div>
+				</button>
-	);
+				{messages.map((message) => {
+					return <MessageContainer {...message} />;
+				})}
+				{<Chat user={username as string} />}
+			</div>
+		);
 };
 export default Wrapper;

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(),
+					});
 				}
 			});
 	};