A kliens (frontend) felület dokumentációja

A felhasználói felület segítségével a felhasználónak lehetősége van a weboldalon a következő műveletek végrehajtására:

• Regisztráció
• Bejelentkezés
• CAFF fájl feltöltése
• Böngészés a feltöltött CAFF fájlok között
  • Keresés funkció
• Megjegyzés írása a kiválasztott CAFF fájlhoz
• CAFF fájl letöltése
• Adminisztrátori jogosultsággal járó kiegészítő funkciók
  • Képfájl törlése
  • Felhasználói profil módosítása
  • Felhasználói profil törlése

A frontend felépítése

A frontend szerkezetét az alábbi mappastruktúrára bontottuk szét, az egyes funkcionalitások alapján:

• A bejelentkezéshez, authentikációhoz és backendhez csatlakozó szolgáltatásokat különszerveztük a services mappa alá.
• A frontend különböző oldalait külön fájlokba valósítottuk meg, amiket a pages mappa alá helyeztünk.
• Az oldalakon megjelenő, stílushoz kapcsolódó komponenseket és vizuális elemeket pedig a components mappa tartalmazza.

Pages - Oldalak

A felhasználó számára elérhető funkcionalitások különböző oldalakon találhatóak. Az oldalak közötti navigálást az oldalsávban és a fejlécben található navigációs sávok segítik a felhasználó számára.

Navigációt segítő menük

A weboldal tetején egy navigációs sáv, míg az alkalmazás bal szélén egy oldalsó menüsáv található. Navigációs sáv Amennyiben a felhasználó még nem rendelkezik fiókkal, tehát nincs regisztrálva vagy bejelentkezve az alkalmazásba, úgy számára ezek a funkciók a navigációs sávon található Register és Login funkciógombok segítségével érhetőek el. A bejelentkezést követően a navigációs sávon megjelenik a bejelentkezett felhasználó neve, valamint a Logout funkciógomb és a Register és Login funkciógombok elrejtésre kerülnek.

Oldalsó menü Az menüben található menüelemek segítségével a felhasználónak lehetősége van a különböző oldalak közötti navigálásra. A menüben szerepel a Home (Kezdőlap) és az Upload (Feltöltés) menüelem is. A Home funkciógombra való kattintással a felhasználót a rendszer a kezdőlap felületre, az Upload funkciógombra való kattintás hatására pedig a Feltöltést felületre.

A navigációs komponensek (TopAppBar, LeftSiteDrawer) forráskódja a components mappában találhatóak.

Oldalak

Az alkalmazáshoz a következő oldalak tartoznak:

• Regisztrációs oldal
• Bejelentkező oldal
• Kezdőlap, (feltöltő oldal, szerkesztési oldal, kommentelési oldal)
• Felhasználók, felhasználói adatok szerkesztése oldal

A oldalak forráskódját tartalmazó fájlok a pages mappában találhatóak.

Regisztráció

A regisztráció oldalon a felhasználónak lehetősége van regisztrálni az alkalmazásba. Az email cím, jelszó és jelszó megerősítő mezők helyes kitöltését követően, a Submit funkciógombra kattintva a felhasználó regisztrációja létrejön. A kötelezően kitöltendő mezők és azok validációjával kapcsolatban az oldal tájékoztatja a felhasználót.

A regisztráció forráskódja a RegisterPage.js fájlban található.

Bejelentkezés

A bejelentkezés oldalon a felhasználónak lehetősége van bejelentkezni a korábban megadott regisztrációs adataival. Az email cím és jelszó mezők adatainak meg kell felelnie a mezők validációjának. Az adatok kitöltésének helyességéről az oldal a Bejelentkezés gombra való kattintás hatására tájékoztatja a felhasználót. Sikeres adatok esetén a felhasználó bejelentkezik a rendszerbe.

A bejelentkezés forráskódja a LoginPage.js fájlban található.

Kezdőlap

Sikeres bejelentkezést követően a felhasználót a rendszer a kezdőlap képernyőre navigálja. A kezdőlapon a korábban feltöltött képfájlok külön kártyákon kerülnek megjelenítésre, egy négyzetes elosztású listában. Az egyes kártyákon megjelennek a képfájlokhoz tartozó alapinformációk, mint a kép címe, tulajdonosa/szerkesztője, valamint feltöltője. A kártyákon megtalálható a képfájllal kapcsolatos műveletek listája, ami lehetőséget ad a felhasználónak megjegyzés hozzáfűzésére, valamint annak letöltésére. Az adminisztrátor jogosultsággal rendelkező felhasználóknak lehetősége van az adott feltöltések szerkesztésére és törlésére is.

A kezdőlap forráskódja a HomePage.js fájlban található.

Keresés funkció A Kezdőlapon a felhasználónak lehetősége van leszűkíteni a megjelenítendő képek listáját a keresés funkció használatával. A keyword mezőbe való írást követően a Search funkciógombra kattintva a rendszer csak a keresési találatoknak megfelelő képeket jeleníti meg. A Reset funkciógombbal a felhasználónak lehetősége van alaphelyzetbe állítani a Kezdőlapot, így ismételten az összes elérhető képfájl megjelenítésre kerül.

Letöltés A kártyán található Letöltés ikon segítségével a felhasználónak lehetősége van képfájlok letöltésére.

Megjegyzés hozzáadása A képhez tartozó kártyán szereplő Megjegyzés hozzáadása funkciógombra kattintva a rendszer a felhasználót a megjegyzés írása oldalra navigálja, ahol a felhasználónak lehetősége van megtekinteni a képhez tartozó korábbi megjegyzéseket, valamint a képzhez tartozó új megjegyzés hozzáadására is.

Kép szerkesztése A szerkesztés funkciógomb segítségével a felhasználónak lehetősége van képfájlhoz tartozó feltöltés szerkesztésére, annak átnevezésére.

Törlés A kártyán található törlés ikon segítségével az adminisztrátor jogosultságú felhasználónak lehetősége van képfájlok törlésére.

Feltöltés

Az Upload menüelem kiválasztását követően a rendszer a felhasználót az Upload oldalra navigálja. Az oldalon a felhasználónak lehetősége van CAFF fájlok feltöltésére. A feltöltést megelőzően a felhasználónak lehetősége van nevet adni a feltöltendő képfájlnak, a Submit gombra való kattintás hatására pedig a kiválasztott képfájl elmentésre kerül a rendszer adatbázisában.

Felhasználók oldal

A felhasználók (Users) oldal elérhető az összes felhasználó számára, azonban annak funkcionalitása kizárólag az adminisztrátor jogosultsággal használható. Az oldalon kilistázásra kerülnek a rendszerbe regisztrált felhasználók. Az egyes felhasználói fiókok szerkesztésére és törlésére a kártyán szereplő szerkesztés, valamint törlés ikonra való kattintással van lehetőség.

A módosítás funkciógombra kattintva a rendszer átnavigál a felhasználóhoz tartozó szerkesztés oldalra, ahol az adminisztrátornak lehetősége van megváltoztatni az adott felhasználói fiókhoz tartozó email címet.

A felhasználók oldal forráskódja a UsersPage.js fájlban található.

A kliens tesztelése

A kliens tesztelése során manuális teszteket hajtottunk végre az oldalakon és az azokon szereplő felületi elemeken. Az oldalakhoz tartozó helyes működést a mezővalidációk triggerelésével és kikényszerítésével, valamint a funkciógombok a kattintás hatására történő megfelelő működésével ellenőriztük.

A tesztelés során végrehajtott tesztesetek

Nem bejelentkezett felhasználó Bejelentkezés hiányában a felhasználónak nincs jogosultsága a Kezdőlap megnyitására és megtekintésére. A kezdőlap megjelenítése helyett egy tájékoztató üzenet jelenik meg a felhasználónak.

Sikeres regisztráció A regisztráció oldalon a felhasználó helyesen tölti ki a kötelező mezőket, majd a Submit gombra való kattintás hatására a rendszer egy üzenetben tájékoztatja a felhasználót a regisztráció sikerességéről. A felhasználó a regisztrációval be tud jelentkezni a rendszerbe.

Sikertelen regisztráció A regisztráció oldalon a felhasználó helytelenül tölti ki a kötelező mezőket, majd a Submit gombra való kattintás hatására a rendszer egy üzenetben tájékoztatja a felhasználót a regisztráció sikertelenségéről. A felhasználó a regisztrációval nem tud bejelentkezni a rendszerbe.

Sikeres bejelentkezés A bejelentkezés felületen a felhasználó helyesen tölti ki a kötelező mezőket, majd a Submit gombra való kattintás hatására a rendszer egy üzenetben tájékoztatja a felhasználót a bejelentkezés sikerességéről. A felhasználó bejelentkezése sikeres.

Sikertelen bejelentkezés A bejelentkezés felületen a felhasználó helytelenül tölti ki a kötelező mezőket, majd a Submit gombra való kattintás hatására a rendszer egy üzenetben tájékoztatja a felhasználót a bejelentkezés sikertelenségéről. A felhasználó bejelentkezése sikertelen.

Oldalakhoz tartozó jogosultságok 1 A bejelentkezést követően a felhasználó számára elérhetőek a következő oldalak: Kezdőlap, Feltöltés.

Oldalakhoz tartozó jogosultságok 2 A bejelentkezést követően a felhasználó számára nem elérhető a következő oldal: Felhasználók

Oldalakhoz tartozó jogosultságok 3 A bejelentkezést követően az adminisztrátor jogosultsággal rendelkező felhasználó számára elérhető a következő oldal: Felhasználók

CAFF feltöltése A bejelentkezést követően a felhasználó az Upload oldalon képes CAFF fájlt feltölteni.

Képek böngészése A bejelentkezést követően a felhasználó a Kezdőlap oldalon képes a rendszerben szereplő CAFF fájlok böngészésére a kereső mező segítségével.

Képek letöltése A bejelentkezést követően a felhasználó a Kezdőlap oldalon képes a rendszerben szereplő CAFF fájlok letöltésére a letöltés ikon segítségével.

Hozzászólás írása A bejelentkezést követően a felhasználó a Kezdőlap oldalon képes a rendszerben szereplő CAFF fájlokhoz megjegyzés fűzésére.

Felhasználók módosítása A bejelentkezést követően az adminisztrátor jogosultságú felhasználó képes a Felhasználók oldalon a felhasználók adatainak módosítására.

Felhasználók törlése A bejelentkezést követően az adminisztrátor jogosultságú felhasználó képes a Felhasználók oldalon a felhasználók törlésére.