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

sync misc fmt changes

Browse source
This commit is contained in:
Zhongheng Liu 2024-01-24 22:49:50 +02:00
commit 4df2355001
No known key found for this signature in database
11 changed files with 216 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/App.tsx
View file

@ -67,29 +67,10 @@ const App = ({
}: {
changeLang: (value: string) => void;
}): React.ReactElement => {
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
const setNamePrompt = () => {
var newName = prompt(home.userNamePrompt) as string;
while (!validateName(newName)) {
console.log(newName);
prompt("Username invalid! Please enter again.") as string;
}
setNameOnServer(newName).then((value) => {
if (!value.success) {
alert(value.reason);
return true;
} else {
setUsername(newName);
return false;
}
});
};
if (!login) {
return <></>;
} else
@ -116,7 +97,7 @@ const App = ({
})
.then((responseBody: { success: boolean }) => {
if (responseBody.success) {
setUsername(newUsername as string);
// TODO Put new username response true handler method stub
} else {
console.error(
"Server POST message failed."

4
src/Chat/Chat.css
View file

@ -1,14 +1,16 @@
.chat-inner-wrapper {
height: 50vh;
overflow-y:scroll;
overflow-y: scroll;
/* overflow-wrap: normal; */
display: flex;
flex-direction: column;
}
.entry-box {
margin-top: 5px;
}
.chat {
/* min-height: 80vh; */
position: relative;

5
src/Chat/Chat.tsx
View file

@ -125,7 +125,10 @@ const Chat = ({ user }: { user: string }): React.ReactElement => {
return (
<fieldset className="chat">
<legend>
Logged in as <b>{user}</b>
{chatPage.window.title.replaceAll(
"$userName",
user
)}
</legend>
<div className="chat-inner-wrapper">{messages}</div>
<span className="entry-box">

72
src/Intl/strings.json
View file

@ -11,9 +11,27 @@
"newLangPrompt": "Input your ISO-639_ISO-3166 language-contry code below - for example: \"en_US\": "
},
"chat": {
"window": {
"title": "Logged in as $userName"
},
"sendButtonPrompt": "Send",
"serverMessage": "Message from $userName: $content",
"joinMessage": "$userName joined the server"
},
"login": {
"error": {
"unameTakenOrInvalid": "Username is taken or invalid!",
"unameNotExists": "Username does not exist!",
"passwdInvalid": "Password incorrect!"
},
"window": {
"title": "Login window",
"uname": "Username: ",
"login": "Login",
"passwd": "Password: ",
"register": "Register",
"logout": "Logout"
}
}
},
"zh_TW": {
@ -26,9 +44,27 @@
"newLangPrompt": "在下方輸入您想使用的語言的ISO-639_ISO-3166組合語言代碼 - 例如：\"en_US\"："
},
"chat": {
"window": {
"title": "當前以 $userName 登入"
},
"sendButtonPrompt": "發送",
"serverMessage": "來自 $userName 的訊息：$content",
"joinMessage": "$userName 加入了伺服器！"
},
"login": {
"error": {
"unameTakenOrInvalid": "用戶名已存在或不合規！",
"unameNotExists": "該用戶不存在！",
"passwdInvalid": "密碼不正確！"
},
"window": {
"title": "登入窗口",
"uname": "用戶名：",
"login": "登入",
"passwd": "密碼：",
"register": "註冊",
"logout": "登出"
}
}
},
"el_GR": {
@ -41,9 +77,27 @@
"newLangPrompt": "Εισαγάγετε τον κωδικό γλώσσας-χώρας ISO-639 ISO-3166 παρακάτω - για παράδειγμα: \"en_US\":"
},
"chat": {
"window": {
"title": "Συνδεδεμένος ως $userName"
},
"sendButtonPrompt": "Στείλετε",
"joinMessage": "$userName έγινε μέλος του διακομιστή",
"serverMessage": "μήνυμα από $userName: $content"
},
"login": {
"error": {
"unameTakenOrInvalid": "Το όνομα χρήστη έχει ληφθεί ή δεν είναι έγκυρο!",
"unameNotExists": "Το όνομα χρήστη δεν υπάρχει!",
"passwdInvalid": "Λάθος κωδικός!"
},
"window": {
"title": "Παράθυρο σύνδεσης",
"uname": "Όνομα χρήστη: ",
"login": "Σύνδεση",
"passwd": "Κωδικός πρόσβασης: ",
"register": "Εγγραφή",
"logout": "Αποσύνδεση"
}
}
},
"ar_SA": {
@ -56,9 +110,27 @@
"newLangPrompt": "أدخل رمز اللغة ISO-639_ISO-3166 أدناه - على سبيل المثال: \"en_US\":"
},
"chat": {
"window": {
"title": "Logged in as $userName"
},
"sendButtonPrompt": "يرسل",
"joinMessage": "$userName انضم إلى الخادم",
"serverMessage": "رسالة من $userName: $content"
},
"login": {
"error": {
"unameTakenOrInvalid": "Username is taken or invalid!",
"unameNotExists": "Username does not exist!",
"passwdInvalid": "Password incorrect!"
},
"window": {
"title": "Login window",
"uname": "Username: ",
"login": "Login",
"passwd": "Password: ",
"register": "Register",
"logout": "Logout"
}
}
}
}

64
src/Login/Login.tsx
View file

@ -1,8 +1,9 @@
import { useState } from "react";
import { useContext, useState } from "react";
import { contentTypes, domain, endpoints, port } from "../consts";
import { LoginType } from "../context";
import { LangContext, LoginType } from "../context";
import { User } from "../type/userTypes";
import "./Login.css";
import strings from "../Intl/strings.json";
const encrypt = (rawPasswordString: string) => {
// TODO Encryption method stub
return rawPasswordString;
@ -12,8 +13,10 @@ export const Login = ({
}: {
setLogin: (newLogin: LoginType | undefined) => void;
}): React.ReactElement => {
const [valid, setValid] = useState<boolean | undefined>(true);
const [valid, setValid] = useState<boolean | undefined>(undefined);
const [validText, setValidText] = useState<string | undefined>();
const lang = useContext(LangContext);
const loginPage = strings[lang].login;
const registrationHandler = () => {
const uname = (
document.getElementById("username") as HTMLInputElement
@ -36,7 +39,9 @@ export const Login = ({
// 400 Bad request
console.log("Username is taken or invalid!");
setValid(false);
setValidText("Username is taken or invalid!");
setValidText(
loginPage.error.unameTakenOrInvalid
);
} else if (response.status === 200) {
// 200 OK
const futureDate = new Date();
@ -73,7 +78,7 @@ export const Login = ({
"404 not found encountered"
);
throw new Error(
"Username does not exist"
loginPage.error.unameNotExists
);
} else if (res.status === 200) {
console.log("200 OK");
@ -88,9 +93,12 @@ export const Login = ({
const validLogin = passwd === user.passwordHash;
if (!validLogin) {
// login invalid
throw new Error("Password incorrect!");
throw new Error(
loginPage.error.passwdInvalid
);
} else {
// login valid
setValid(true);
const validUntilDate: Date = new Date();
validUntilDate.setHours(
validUntilDate.getHours() + 2
@ -111,47 +119,51 @@ export const Login = ({
return (
<div className="login">
<fieldset>
<legend>Login window</legend>
<legend>{loginPage.window.title}</legend>
<p className="uname-error-text">
{valid && valid !== undefined
? ""
: validText}
{!valid && valid !== undefined
? validText
: ""}
</p>
<label htmlFor="username">Username: </label>
<label htmlFor="username">
{loginPage.window.uname}
</label>
<br />
<input id="username" type="text"></input>
<br />
<label htmlFor="passwd">Password: </label>
<label htmlFor="passwd">
{loginPage.window.passwd}
</label>
<br />
<input id="passwd" type="password"></input>
<br />
<button
disabled={!valid}
disabled={valid}
type="submit"
onClick={() => {
loginHandler();
}}
>
Login
</button>
<button
disabled={!valid}
type="submit"
onClick={() => {
registrationHandler();
}}
>
Register
{loginPage.window.login}
</button>
<button
disabled={valid}
type="submit"
onClick={() => {
setLogin(undefined);
setValid(false);
registrationHandler();
}}
>
Logout
{loginPage.window.register}
</button>
<button
disabled={!valid}
type="submit"
onClick={() => {
setLogin(undefined);
setValid(undefined);
}}
>
{loginPage.window.logout}
</button>
</fieldset>
</div>

1
src/MessageDisplay/MessageDisplay.tsx
View file

@ -3,6 +3,7 @@ import { Message, MessageType } from "../type/messageTypes";
import { LangContext } from "../context";
import strings from "../Intl/strings.json";
import "./MessageDisplay.css";
import { queryByRole } from "@testing-library/react";
export const MessageDisplay = ({
type,
fromUserId,

5
src/MessageDisplay/messageHandler.tsx Normal file
View file

@ -0,0 +1,5 @@
import {Message, MessageType } from "../type/messageTypes"
export const dataMsgHandler = (msg: Message) => {
if (msg.type !== MessageType.DATA) {return <></>}
}
export const chnameMsgHandler = () => {}

6
src/type/userTypes.ts
View file

@ -1,7 +1,13 @@
import { URL } from "url";
export type UserAvatar = {
iconUrls: URL[];
};
export type User = {
id: number;
userName: string;
dateJoined: number;
lastSeen: number;
passwordHash: string;
// avatar: UserAvatar;
};