# 07/03 ## Recap Last Week Secure websockets by using HTTPS with self-signed ssl-certificates is not accepted by the browser due to security concerns. Question about a possible solution was asked in the Zulipchat last week. No answers yet. (For the linux users among us it is possible to add the certificate to trusted sources, but everyone has to do this seperately + still no solution for windows users) The team decides to shift the focus temporarily on other to-be-implemented features. --- Assign workers to feature (new tasks) :::spoiler {state="open"} - [ ] Capture keyboard shortcuts entered on the browser - [name= Arne Putzeys] - [ ] Block messages containing code (temp closed) [name= Jonas Buts] - [ ] Functionality buttons [name= Jonas Buts] ::: --- ## Keystroke new tasks - [X] adjust old authentication functions to support new version (the ones that take data from database) - [ ] Taak voor 15/03: RANDGEVALLEN: bv zeer korte berichten behandelen - [ ] UI met betrouwbaarheidsmeter, en info button waarbij als je erover gaat met muis, er staat op basis van hoeveel vorige berichten het is - [ ] Testen schrijven!!! - [x] update database? take representative value of list and update only with that value - [X] Fix normalizemap (still errors) - [X] implementeer de volgende pseudocode, deze zorgt ervoor dat als de berichten kort zijn, er nog info van vorige berichten gebruikt wordt voor authenticatie: :::spoiler `Code wordt opgeroepen als message getypt is: If messegestyped JSON exists Update database met increment value +1 Else Create JSON database messegestyped met value 1 Createjson(bericht+messegestyped+rnummer) if Characters > 100 authentication op bericht Slaagt authentication? Update JSON database Else: I= 1 While (totale characters(map) < 100 || messegestyped-i === 0) Getdata(bericht+messegestyped-i+rnummer) I -=1 map = join maps() Authentication op map Slaagt authentication? Update JSON database` ## Persistent server - [name=Robin Halford] and [name=Siebe Schroeders] - [ ] the information is stored in src/chat-server/serverDatabase/ - a json file for each property in chatServer class - [ ] extra tests for databaseFunctions - first test read, so write can be tested using read - extra test for read with numbers as well - tests for add and remove - [ ] testing persistence of the server in the terminal - [ ] are accounts correctly stored, even if server crashes - make account, close server and restart server - [ ] are messages correctly stored, even if server crashes - send some messages in a channel, close and restart server - [ ] channels, channel history - send messages in a channel, close server and restart ## Block messages containing code - Is there a way to escape and inject code with process.stdin? -> No - Is there a way to escape and inject code with JSON.parse -> no - Is there a way to inject javascript code into the HTML page? -> I will look into this when there is a first working version of the HTML file. ## Functionality buttons - [x] Send Button - [ ] Create channel -> The server must hold a database of all the servers, and must be able to update them, for now this functionality isn't implemented yet. - [x] Join channel - [ ] Menu - for specifications see "specifications for UI design -> define onClick() functions and parameters" (previous week) ## Save account status - [name= Andries Macken] - [name= Reinhout Hellinx] - [x] Making new branch - [x] creating new file `user-accounts` to support initiate user settings for each account. - [x] Define options in user settings: username, status, status preferences, darkmode, home channel, Maybe later add following to user settings: blocklist, language - [x] Implement new function `createAccountSettings`. - [x] Call function `createAccountSettings` when creating new user. - [x] tested creation of user settings json file when creating new user. - [x] merge branch - [x] create new branch for making changes to account settings - [x] allow changes to account settings via function`changeAccountSettings` in file `user-accounts`. This function is for all sorts of changes to the account. - [x] parse a string to a json-file by parsing `as Data`. Make interface `AccountSettings` extending `Data`. (view `proto.ts`). - [x] create `user-accounts.spec.ts` file to test exported functions in `user-accounts.ts`. - [x] debug `user-accounts.ts`, push changes, merge branch ## UI Modeling - [x] Rearrange objects to fit the chosen design - [x] Find nice color palette - [x] Add dark mode colors (code for changing \\/) ```javascript var root = document.getElementsByTagName('html')[0] if (root.classList.contains("dark")) { root.classList.remove("dark"); } else { root.classList.add("dark"); } ``` ## Capture keyboard shortcuts Goal: Capture keyboard shortcuts so advanced users can use our app more easily. It is not the goal just yet to process them fully (Processing can be finished once the frontend is more clear) - [name=Arne Putzeys] - [x] Make branch + create draft merge request - [x] Make keyboardshortcuts.ts in chatter-app - [x] Reseach information - Sources: - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent - https://developer.mozilla.org/en-US/docs/Web/API/Window - https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event (Deprecated) - https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event - [x] Figure out how to prevent default browser shortcuts (if possible at all) -> internet suggests using "event.preventDefault()": This seems to prevent some shortcuts like "ctrl+p" but "ctrl+w/ctrl+t" still defaults ## Extra channel functionality - [name= Siebe Schroeders] - [x] Add function `createChannel` to create a new channel - Usage: `/create [channelId]` - This command doesn't join the new channel after creation, unlike using `/join` on a non-existent channel. - [x] Add function `deleteChannel` to delete an existing channel - Usage: `/delete [channelId]` - Also works when there are users in the deleted channel, they will be moved to 'general'. - [x] Return error message if command arguments are invalid - e.g. deleting a channel that doesn't exist or trying to create a channel that already exists - [x] Write tests to test functionality - [ ] Possibly later: add permissions to use these commands ## Server-WebClient interaction [Kevin] - [x] Create prompt that asks the user to log in with `ws.on('open', ... prompt ...)`. Closing alert or wrong login must trigger the alert again - [x] Send Logindata to server as a `Login` object with values `userId` and `password` with `ws.send(loginData)` - [x] Parse received messages. On received message create a new `div`-element. Add all available data to `div`-element. The element will look like this: `<div class='border-2 border-black'><p>senderUsername</p><p>message</p></div>` ## WSS - [name=Robin, Arne] - At first we tried adding a domain name to our 'local dns' (/etc/hosts), this didn't really work since we tried "testwebsite.dev" and apparantly the .dev domain is from google and by default requires a higher level of security. So for now we just use 127.0.0.1. - We also tried adding the certificate to our local trust store, this didn't end up working since the browser still sees it as self-signed, the solution is to use chrome and click "Continue anyway" (not possible on firefox apparantly) - We eventually got the wss connection setup by also using https for the connection between the web-server and the browser, in wss guidelines are the changed commands to startup the https web-server ## WSS Guidelines - How to add certificate to trust store locally (browser side) - Chrome: Setting/Privacy and security/Advanced/Manage Certificates - Firefox: Don't since it will scream about "self-signed-cert" -> Use chrome - How to run: 1) npm run clean and npm run build 2) DEBUG=* npx ts-node-esm ./src/chat-server/chat-server-script.ts 3) npx http-server -c-1 build/chatter-app -S --cert ./certs/MyCertificate.crt --key ./certs/MyKey.key 4) open Chrome and go to https://127.0.0.1:8081