Added necessary changes to client-side code for HTTPS transport

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "epq-web-project",
-  "version": "0.1.0",
+	"version": "0.2.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "epq-web-project",
-      "version": "0.1.0",
+			"version": "0.2.1",
 			"dependencies": {
 				"@stomp/stompjs": "^7.0.0",
 				"@testing-library/jest-dom": "^5.17.0",
@@ -16,12 +16,16 @@
 				"@types/node": "^16.18.68",
 				"@types/react": "^18.2.45",
 				"@types/react-dom": "^18.2.18",
+				"ed25519": "^0.0.5",
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
 				"react-scripts": "5.0.1",
 				"react-use-websocket": "^4.5.0",
 				"typescript": "^4.9.5",
 				"web-vitals": "^2.1.4"
+			},
+			"devDependencies": {
+				"@types/ed25519": "^0.0.3"
 			}
 		},
 		"node_modules/@aashutoshrathi/word-wrap": {
@@ -3968,6 +3972,15 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/ed25519": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/@types/ed25519/-/ed25519-0.0.3.tgz",
+			"integrity": "sha512-IaKIKabzDCteZ0e6y884BpGMn0ZNDHRT90Vob+Kq8o2sKYFaxkEfth8FCM9iPtk/cRr6HKq/+UectHKgbUP6rw==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/@types/eslint": {
 			"version": "8.44.9",
 			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.9.tgz",
@@ -5416,6 +5429,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/bindings": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+			"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+			"dependencies": {
+				"file-uri-to-path": "1.0.0"
+			}
+		},
 		"node_modules/bluebird": {
 			"version": "3.7.2",
 			"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6820,6 +6841,16 @@
 			"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
 			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
 		},
+		"node_modules/ed25519": {
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/ed25519/-/ed25519-0.0.5.tgz",
+			"integrity": "sha512-bg8uNetUVrkTyAVsnCUUmC/we1CFB7DYa59rwEUHut26SISXN2o319HzIt0r7ncqbtjVi0hn9r/A0epUmMNulQ==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"bindings": "^1.5.0",
+				"nan": "^2.14.1"
+			}
+		},
 		"node_modules/ee-first": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7982,6 +8013,11 @@
 				"webpack": "^4.0.0 || ^5.0.0"
 			}
 		},
+		"node_modules/file-uri-to-path": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+			"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
+		},
 		"node_modules/filelist": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -12253,6 +12289,11 @@
 				"thenify-all": "^1.0.0"
 			}
 		},
+		"node_modules/nan": {
+			"version": "2.18.0",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
+			"integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w=="
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",

package.json

@@ -11,6 +11,7 @@
 		"@types/node": "^16.18.68",
 		"@types/react": "^18.2.45",
 		"@types/react-dom": "^18.2.18",
+		"ed25519": "^0.0.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-scripts": "5.0.1",
@@ -41,5 +42,8 @@
 			"last 1 firefox version",
 			"last 1 safari version"
 		]
+	},
+	"devDependencies": {
+		"@types/ed25519": "^0.0.3"
 	}
 }

src/App.tsx

@@ -52,7 +52,7 @@ const Wrapper = (): React.ReactElement => {
 };
 const setNameOnServer = async (name: string) => {
 	const responseRaw = await fetch(
-		`http://${domain}:${port}${endpoints.user}`,
+		`https://${domain}:${port}${endpoints.user}`,
 		{
 			method: "POST",
 			mode: "cors",

src/Login/Login.tsx

@@ -4,6 +4,7 @@ import { LangContext, LoginType } from "../context";
 import { User } from "../type/userTypes";
 import "./Login.css";
 import strings from "../Intl/strings.json";
+import { ECDH } from "crypto";
 const encrypt = (rawPasswordString: string) => {
 	// TODO Encryption method stub
 	return rawPasswordString;
@@ -18,14 +19,12 @@ export const Login = ({
 	const lang = useContext(LangContext);
 	const loginPage = strings[lang].login;
 	const registrationHandler = () => {
-                const uname = (
+		const uname = (document.getElementById("username") as HTMLInputElement)
-                        document.getElementById("username") as HTMLInputElement
+			.value;
-                ).value;
 		const passwd = encrypt(
-                        (document.getElementById("passwd") as HTMLInputElement)
+			(document.getElementById("passwd") as HTMLInputElement).value
-                                .value
 		);
-                fetch(`http://${domain}:${port}${endpoints.user}`, {
+		fetch(`https://${domain}:${port}${endpoints.user}`, {
 			method: "POST",
 			mode: "cors",
 			headers: contentTypes.json,
@@ -39,9 +38,7 @@ export const Login = ({
 				// 400 Bad request
 				console.log("Username is taken or invalid!");
 				setValid(false);
-                                setValidText(
+				setValidText(loginPage.error.unameTakenOrInvalid);
-                                        loginPage.error.unameTakenOrInvalid
-                                );
 			} else if (response.status === 200) {
 				// 200 OK
 				const futureDate = new Date();
@@ -57,29 +54,20 @@ export const Login = ({
 	};
 	// login button press handler
 	const loginHandler = () => {
-                const uname = (
+		const uname = (document.getElementById("username") as HTMLInputElement)
-                        document.getElementById("username") as HTMLInputElement
+			.value;
-                ).value;
 		const passwd = encrypt(
-                        (document.getElementById("passwd") as HTMLInputElement)
+			(document.getElementById("passwd") as HTMLInputElement).value
-                                .value
 		);
 		// async invocation of Fetch API
-                fetch(
+		fetch(`https://${domain}:${port}${endpoints.user}?name=${uname}`, {
-                        `http://${domain}:${port}${endpoints.user}?name=${uname}`,
-                        {
 			method: "GET",
 			mode: "cors",
-                        }
+		})
-                )
 			.then((res) => {
 				if (res.status === 404) {
-                                        console.log(
+					console.log("404 not found encountered");
-                                                "404 not found encountered"
+					throw new Error(loginPage.error.unameNotExists);
-                                        );
-                                        throw new Error(
-                                                loginPage.error.unameNotExists
-                                        );
 				} else if (res.status === 200) {
 					console.log("200 OK");
 				}
@@ -93,16 +81,12 @@ export const Login = ({
 				const validLogin = passwd === user.passwordHash;
 				if (!validLogin) {
 					// login invalid
-                                        throw new Error(
+					throw new Error(loginPage.error.passwdInvalid);
-                                                loginPage.error.passwdInvalid
-                                        );
 				} else {
 					// login valid
 					setValid(true);
 					const validUntilDate: Date = new Date();
-                                        validUntilDate.setHours(
+					validUntilDate.setHours(validUntilDate.getHours() + 2);
-                                                validUntilDate.getHours() + 2
-                                        );
 					setLogin({
 						username: user.userName,
 						lastSeen: user.lastSeen,
@@ -121,19 +105,13 @@ export const Login = ({
 			<fieldset>
 				<legend>{loginPage.window.title}</legend>
 				<p className="uname-error-text">
-                                        {!valid && valid !== undefined
+					{!valid && valid !== undefined ? validText : ""}
-                                                ? validText
-                                                : ""}
 				</p>
-                                <label htmlFor="username">
+				<label htmlFor="username">{loginPage.window.uname}</label>
-                                        {loginPage.window.uname}
-                                </label>
 				<br />
 				<input id="username" type="text"></input>
 				<br />
-                                <label htmlFor="passwd">
+				<label htmlFor="passwd">{loginPage.window.passwd}</label>
-                                        {loginPage.window.passwd}
-                                </label>
 				<br />
 				<input id="passwd" type="password"></input>
 				<br />

src/consts.ts

@@ -1,6 +1,6 @@
 export const domain = window.location.hostname;
 export const port = "8080";
-export const connectionAddress = `ws://${domain}:${port}/ws`;
+export const connectionAddress = `wss://${domain}:${port}/ws`;
 export const endpoints = {
 	destination: "/app/chat",
 	subscription: "/sub/chat",