---
# System prepended metadata

title: 28/02

---

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"
:::