28/02
===
Since the cube of every team is implemented, the team can now start working on Part II and part III of the assignment.

## Meeting

Assign priority to wanted features
:::spoiler [Priority: 0: highest - 10: lowest]
- [0] Website will consist of 3 parts: current chat, active users tab and input box with functionality buttons
- [1] Functionality buttons: Send, Emojis, Switch
- [1] keyboard shortcuts
- [2] Connection to server will be encrypted by use of `wss`
- [3] The server will only accept predefined json objects to prevent code injection (needs extensive testing)
- [3] Update web-client so that server client interaction works
- [3] Top-left hamburger menu with links to different pages: settings {Change name, Change color palette, Change font}, logout and terms and services
- [4] New accounts follow a tutorial and have a decent chat with a bot to determine their keystroke typing, the system will tell them that keystrokes are stored.
- [4] Personal profile and status (banned, blocked, typing, online, away...)
- [4] Keystroking expansion
- [4] Update channels implementation server side
- [4] Messages will have end-to-end encryption
- [6] Users will have the ability to talk with the bot again to refresh their keystroke when they dont get verified often. Password wil be needed for this.
- [8] Special characters will create **bold**, _italic_, <u>underlined</u>, ...light/dark, Create channel, Leave channel
- [9] Channels represented as cubes in space, switching by zooming in and out
- [10] Sound notifications when receiving new messages and TTS messages
- [10] embeds/file sharing
:::

---

Assign workers to feature
:::spoiler {state="open"}
- [ ] UI Design
[name= Kevin Vandeneede]
- [ ] encrypt communication via wss
[name= Arne Putzeys]
[name= Andries Macken]
[name= Reinhout Hellinx]
- starting sources:
- [npm page](https://www.npmjs.com/package/ws#protocol-support)
- [Official docs](https://github.com/websockets/ws/blob/HEAD/doc/ws.md)
- create branch + merge request
- request ssl certificate & sign it ourselves
- change websocketserver to https with the new certificate
- new variable: const server = createServer({cert:... key:...}).listen([port])
- resolving of failing connection because of self-signed certificate via `process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0'` (works when setting up connection between consoles). However, after implementing this line, the browser itself complains about safety. Problem remains unsolved. After consulting with an assistant, a post on Zulip was made.
- push changes + key + certificate to gitlab (we know this is a bad practice, but we don't want to get the certificate on each pc seperately) (It's just for development, setting up a local testserver via https requires the private key)
-
-
- [ ] Keystroke uitbreiding
[name=Wout Seynaeve]
[name=Josse Heylen]
- [ ] Block messages containing code
[name= Jonas Buts]
- 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
- Take care of the special characters responsible for the code injection.
- [ ] Database for persistence of server
[name= Robin Halford]
[name= Siebe Schroeders]
:::

---

Keystroke uitbereiding specificaties
:::spoiler {state="open"}
- Feedback:
- gebruik info van laatste n berichten
- wat te doen met 0 karakters/1 karakter?
- Nieuwe taken:
- While text is received from some party: keep on building up fingerprinting statistics using a moving average
- visualize this in your user interface. E.g. have a colored circle or gauge behind each user name which indicates the current level of trust you have.
- Doel: rekening kunnen houden met het evoluerend typ-gedrag van de user
- EN rekening houden met het feit dat een imposter kan overnemen
- Via of te wel: windowed gegevens gebruiken, of exponentieel dalend naar verleden toe
- Bij update van database: oude-"op" vervangen door nieuwe "op" dus niet random laatste uit lijst wegdoen
- Binnen 1 bericht gaan we er van uit dat de typer dezelfde persoon blijft en dat er geen typ-evolutie optreed van de user -> dus we zetten geen window binnen 1 bericht
- binnen 1 bericht kan er ook eliminatie van anomalies gedaan worden, bv als er meer dan 5 keer een ngram getypt is, neem je het gemiddelde van de middelste 3 elementen, en dan bereken je verschil/z-score met andere elementen om ze eventueel te verwijderen
- Als er een bericht wordt getypt met te weinig characters, dan gebruiken we de berichten ervoor tot er n
- window van json database, hangt af van hoeveel een persoon chat in zijn dagelijks leven...
- Wat als: we gebruiken alle getypte n-grams in 1 bericht voor authentication
- DUS: bericht wordt getypt:
- Aantal characters groter dan n ? is niet erg (want zie hierboven), authenticatie enkel met dat bericht
- Aantal character kleiner dan n? Gebruik dan characters van berichten ervoor tot je aan n zit.
- Slaagt de authenticatie?
- Update nu de json database met de nieuwe deltas en houdt rekening met de window
- Dus voor imposter window, bij berichten:
Enkel totaal aantal characters is belangrijk
Dus
Je bericht is groot genoeg ?
Ja? : Authenticatie op bericht
Nee?: Is dit het eerste bericht ?
Ja? Authenticatie of minder informatie
Nee?
Gebruik info van eerdere berichten
DUS voor elk bericht zal er een unknownuser+rnummer json file aangemaakt moeten worden
En die JSON files mogen pas verwijderd worden wanneer die info zwz niet meer nodig kan zijn
- Voor authentication? Gewoon maps normaliseren (neem middelste waarde, of gemiddelde van 3 middelste) en dan werken functies van semester 1

Als "re" 10 keer zoveel wordt getypt als "mo" dan zou "re" 10 keer zoveel bijgehouden moeten worden in JSON database als "mo"
Kunnen we dit wel doen??
- Taak:
- [ ] Create functie die een map met lijst als deltas omzet naar gemiddelde representatieve delta (want deze map is nodig voor authenticatie functie)
- [ ] Create-ngrammap en database moet nu als value lijst hebben met alle deltas apart en aantal deltas mag niet groter zijn dan cutoff
- [ ] Zorg ervoor dat berichten bijgehouden kunnen worden omdat je je authenticatie telkens op de laatste 100 caracters wilt baseren
- bse
- [ ] Updaten van database door oudste data te verwijderen van de recent getypte n-grams
- [ ] Als bij een bericht de authentication value hoog genoeg is, zal de json database van de user geupdate worden
- [ ] ` if (inputNgramLength > cutoff) {
const newinputNgram = inputNgram.splice(0, cutoff - inputNgramLength);
database.set(ngram, newinputNgram);
} else {
if (databaseNgramLength + inputNgramLength > cutoff) {
database.get(ngram)?.splice(0, ngramDeltas.get(ngram)?.length);
}
}`
:::

---

Specificaties database for persistent server
:::spoiler {state="open"}
- JSON for every property in chat-server class
- the name of the json file is the name of the property
- stored in the directory src/chat-server/serverDatabase/
- the types of the keys and values of the map object are unknown
- channel history
- json file per channel
- houdt laatste X berichten bij in geheugen
- function for interaction with json files
- [x] readFromJson(name): read map from json file
- [x] writeToJson(name, map): write map to json file
- [x] addToJson(name, map): add a map to the json file (maps are merged, if same key in both maps the value of the new map will be used)
- [x] removeFromJson(name, key): remove the key/value pair from the json file
- insert these functions in the server's code

:::

---

:::spoiler {state="open"} Specifications for UI Design
- [x] Define elements used in webpage
- Div's: message-area, active-users-area, input-area, input-area.button-area
- Inputs: input-area.text-input, input-area.search-input
- Buttons: Send, Create-channel, Join-channel, Menu
- [x] Define onclick() functions and parameters
- Send-button: `send(text)` with `text = text-inputbox.value` the current value written in the input box. The function sends a Message object with the necessary values to the server.
- Create-channel: `openChannelCreation()` opens a pop-up form in which the user defines channel-name and other settings. The form contains a `Create` button.
- Create (in create-channel form): `closeForm()` and `requestChannelCreation(channelname, options?)` with `channelname` the chosen channelname in string format. Second function sends a CreateChannel object (with the channelname, creator and options) to the server.
- Join-channel: `joinChannel(channelname)` with `channelname = search-inputbox.value` the current value written in the search box. Sends a JoinChannel object (with current-channel, user, new-channel) to the server.
- Menu: `openMenu()` shows a menu with settings.
- [x] Create design on paper
- [x] Research and install `Tailwind` framework for styling the UI
- [x] Rename div ids to more understandable and specific names:
- `"messages"` -> `"message-area"`
- `"status-bar"` -> `"active-users-area"`
- [x] Add input fields and buttons:
- add `<input id="search-input"></input>` to `<div id="button-area"></div>`
- add `<button id="create-channel"></button>` to `<div id="button-area"></div>`
- add `<button id="join-channel"></button>` to `<div id="button-area"></div>`
- add `<button id="menu"></button>` to `<body></body>`
- [ ] Create first draft for the design of the web-client
- [ ] Add onclick functions to html elements with id: "send", "create-channel", "join-channel" and "menu"
:::