steven/epq-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UNTESTED integration between Login component and the main application wrapper

Browse source
This commit is contained in:
Zhongheng Liu 2024-01-18 09:33:10 +02:00
commit 5e455455cb
No known key found for this signature in database
2 changed files with 78 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/App.tsx
View file

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

15
src/Login/Login.tsx
View file

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