Chat
A következő feladatban egy csevegő alkalmazást kell megvalósítanod, amely egy "rendkívül biztonságos" jelszóval hitelesíti a felhasználót.
Amennyiben a feladat egy osztályt kér azt külön fájlban az osztály nevével valósítsuk meg.
A Fetch megvalósítása során használjuk az osztályokat az adatok konvertálásához
A feladatmegoldáshoz használandó link: https://frontend.njit.ut-idb.com
Szükséges ismeretek
FetchHelper osztály
Készítsen osztályt FetchHelper néven, amely statikusként tárolja a kezdő url-t, amely a feladat elején szerepel.
Az osztály valósítsa meg az összes CRUD (Create - Read - Update - Delete) műveletet, úgy, hogy minden függvény visszatérési értéke egy olyan Promise lesz, amely a már konvertált adatot küldi vissza. A függvények vegyék át a path-t ahova az url-en belül a kérést kell küldeni, valamint, ha szükséges, akkor kiegészítő információkat is.
Auth osztály
Készítsünk egy osztályt amely az Authentikációt fogja végrehajtani.
Legyen egy statikus login() függvényunk amely a felhasználónevet és jelszót paraméterül kapva megvizsgálja a /users címen, hogy van-e felhasználó ezzel a párossal. Amennyiben van, állítsunk be a helyi tárban egy auth kulcsot melynek értéke legyen true, valamint a user értékét a stringesített objektumra és térjünk vissza igaz értékkel, ha nincs automatikusan false-al térjünk vissza.
Legyen egy statikus register() függvényünk, amely bekéri a felhasználónevet (username) és a jelszót(password), valamit egy profilképet(profileImg) amely alapértelmezetten a következő értéket kapja, ha nem ad meg a felhasználó: https://via.placeholder.com/200. A regisztráció elvégzését köetően, a login()-hoz hasonlóan mentse az adatokat helyileg és térjen vissza logikai értékkel.
Legyen egy statikus változónk user néven amely kiolvassa a user-t a tárból és visszaadja objektumként, ha nincs bejelntkezve a felhasználó, akkor null-t adjunk vissza.
Legyen egy statikus függvényünk amely visszaadja, hogy a felhasználó be van-e lépve, ehhez a helyi tárolóban kell megvizsgálni, hogy van-e auth kulcsunk és ennek az értéke igaz-e, valamint a user kulcsban van-e objektumunk.
Legyen egy statikus logout() eljárásunk, amely a megfelelő kulcsokat (auth,user) törli a helyi tárolóból.
Chat osztály
A szobáknak készítsük osztályt, a következő adatokkal:
id(Number)userId(Number)name(String)privateRoom(Boolean)members(Array)
Minden adattagunk legyen privát. A konstruktorban destrukció segítségével vegyük át az objektumot. Készítsünk függvényt toJson() néven amely egy stringesítet objektumot ad vissza az osztály adataiból. Figyeljünk oda, hogy szoba létrehozásakor az id null, lesz, ilyenkor ezt hagyjuk ki az objectből. Készítsünk egy toCard függvényt, amely egy BS kártyát állít elő az adatok alapján. Ezt használja fel a kártyák megjelenítésekor.
A kártyákon szerepeljen:
- Szoba neve
- Hányan vannak a szobában
- Badge-el és megfelelő színnel jelezze, hogy privát vagy publikus a szoba
- Link amely átirányít a
room.html?room_id=+idoldalra.
Message osztály
Készítsünk osztályt az üzenetek számára, amely a következő adatokból áll:
idchatIduserIdtypecontentsent
Készítsünk függvényt toJson() néven amely egy stringesítet objektumot ad vissza az osztály adataiból. Figyeljünk oda, hogy üzenet küldésekor az id null, lesz, ilyenkor ezt hagyjuk ki az objectből.
Készítsen egy show() függvényt amely az üzenet típusa alapján (text vagy image lehet) vagy bekezdés vagy képként fogja kirajzolni a az üzenetet.
A kirajzoláskor a küldő nevét is ki kell írni, így ügyeljünk arra, hogy ezt le is kérjük.
index.html
Vizsgáljuk meg, hogy a felhasználó be van jelentkezve az Auth osztályszintű metódusával.
Ha nincs bejelentkezve felhasználó, akkor irányítsuk át a login.html oldalra.
A bejelentkezett felhasználót üdvözöljük (pl: <h1>Helló Zsombor!</h1>) ls jelenítsük meg a számára elérhető szobákat. Ezt a /users/:id/chats&_embed=members linkről tudjuk lekérni, ha tagja. Emelett listázzuk ki a publikusan elérhető szobákat is a következő linkről: chats?private=false&_embed=members. Ügyeljünk rá, hogy egy szoba csak egyszer szerepeljen. A megjelenítést az osztály segítségével végezze el.
Helyezzen el egy kijelentkezés gombot az üdvözlés mellé, amely a logout() függvényt hívja meg az Auth osztályból, és ezután átvisz minket a login.html-re
Készítsünk egy gombot az üdvözlés mellé, ahol egy felugró ablakban új szobát tud létrehozni a felhasználó. Figyeljen, hogy a felhasználó automatikusan tagja lesz a szobának, ezért a /members címre el kell küldenink a visszaérkező szoba id-ját valamint a felhasználó id-ját
login.html
Vizsgáljuk meg, hogy a felhasználó be van-e jelentkezve és ha igen, akkor irányítsuk át a főoldalra.
Készítsünk egy bejelentkező formot és végezzük el a bejelentkezést az Auth osztály segítségével.
Legyen egy olyan linkünk amely a regisztrációs oldalra visz át.
Bejelentkezés után, automatikusan irányítsuk át a felhasználót a főoldalra.
register.html
Vizsgáljuk meg, hogy a felhasználó be van-e jelentkezve és ha igen, akkor irányítsuk át a főoldalra.
Készítsünk egy űrlapot amelyen a felhasználó megdja a felhasznűlónevét és a jelszavát kötelezően, valamit, ha szeretne akkor egy linken megadhat profilképet is.
Regisztráció után, automatikusan irányítsuk át a felhasználót a főoldalra.
room.html
Alakítsuk ki az oldalunkat a discord egy channeljéhez hasonlóan, a baloldali sáv kivételével. A jobboldali sáv tablet és mobil nézetben ne jelenjen meg.
A jobboldali sávon jelenítsük meg a szoba tagjait profilképeikkel és felhasználónevekkiek.
A baloldali részen, alul egy üzenetküldő felületünk legyen, ahol a sor elején egy képküldő gombunk van. A gomb megnyomására egy felugró ablakban adhatja meg a linket a felhasználó, hogy milyen képet szeretne küldeni.
Az üzenet megjelenítő panelünk másodpercenként kérje le az üzeneteket és írja ki azokat.
\pagebreak