set basic layout, error boundary, add QR code for 2FA

Kemkas.Web/frontend/src/first-edition/components/CharacterListItem.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import {Osztaly, OsztalyLabel} from "../domain-models/osztaly";
+import {Faj, FajLabel} from "../domain-models/faj";
+
+export interface CharacterListItemDto {
+    id: string,
+    name: string,
+    szint: number,
+    faj: Faj,
+    osztaly: Osztaly,
+}
+
+function CharacterListItem(props: {
+    character: CharacterListItemDto,
+}) {
+    const {character:c} = props
+    return <>
+        <td><a href={`/${c.id}`}>{c.name}</a></td>
+        <td>{c.szint}. szintű</td>
+        <td>{FajLabel(c.faj)}</td>
+        <td>{OsztalyLabel(c.osztaly)}</td>
+    </>
+}
+
+export default CharacterListItem;

Kemkas.Web/frontend/src/first-edition/pages/CharacterList.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import {useLoaderData} from "react-router-dom";
+import CharacterListItem, {CharacterListItemDto} from "../components/CharacterListItem";
+import {Faro} from "@grafana/faro-web-sdk";
+
+function CharacterList(props: {faro?: Faro}) {
+    const {faro} = props
+    const characters = useLoaderData() as CharacterListItemDto[];
+
+    return <div className="container">
+        <div className="container-fluid p-5 bg-black text-white text-center">
+            <h1>Karakterek</h1>
+        </div>
+        <div className="d-grid gap-2 m-5">
+            <a className="btn btn-dark btn-lg" href="/" type="button">Új karakter létrehozása</a>
+        </div>
+        <table className="table mt-3">
+            <thead>
+            <tr>
+                <th scope="col">Név</th>
+                <th scope="col">Szint</th>
+                <th scope="col">Faj</th>
+                <th scope="col">Osztály</th>
+            </tr>
+            </thead>
+            <tbody>
+            {characters.map(c => (
+                <tr>
+                    <CharacterListItem character={c} key={c.id}/>
+                </tr>
+            ))}
+            </tbody>
+        </table>
+    </div>
+}
+
+export default CharacterList;

Kemkas.Web/frontend/src/first-edition/pages/CreateCharacter.tsx

@@ -59,7 +59,7 @@ function CreateCharacterPage(props: {
     return (
         <div>
             <div className='container-fluid p-5 bg-black text-white text-center'>
-                <h1>Karakter létrehozása</h1>
+                <h1>Karakter {initialKarakterInputs ? "szerkesztése*" : "létrehozása"}</h1>
             </div>
             <div className='p-3'>
                 <form onSubmit={async (event) => event.preventDefault()}>
@@ -179,7 +179,8 @@ function CreateCharacterPage(props: {
                                 <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
                                     faro?.api.pushEvent('public_character_stored', {
                                         osztaly: karakter.osztaly,
-                                        szint: karakter.szint.toString()
+                                        szint: karakter.szint.toString(),
+                                        faj: karakter.faj.toString(),
                                     })
                                     let newId = await StoreNewCharacter(karakter)
                                     const win = window.open(`/${newId}`, '_blank');
@@ -196,7 +197,8 @@ function CreateCharacterPage(props: {
                                 <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
                                     faro?.api.pushEvent('character_created', {
                                         osztaly: karakter.osztaly,
-                                        szint: karakter.szint.toString()
+                                        szint: karakter.szint.toString(),
+                                        faj: karakter.faj.toString(),
                                     })
                                     await CreatePDF(KarakterInputToPdfView(karakter))
                                 }}>PDF

Kemkas.Web/frontend/src/first-edition/pages/ErrorBoundary.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+function ErrorBoundary(props: {}) {
+    
+    return <div>
+        <div className="container-fluid p-5 bg-danger text-white text-center">
+            <h1>Valami hiba történt :(</h1>
+        </div>
+        <div className="p-5 text-center">
+            <p>Töltsd újra az oldalt, és ha az sem segít lépj kapcsolatba a fejlesztővel a <a href="mailto:developer@kemkas.hu">developer@kemkas.hu</a> email címen!</p>
+            <p>Kérlek vedd figyelembe, hogy ez egy hobby projekt limitált erőforrásokkal.</p>
+        </div>
+    </div>
+}
+
+export default ErrorBoundary;