{
    "path": "/home/krm/dev/mimer-academia/server/web/Tutorial/using-mimer-access.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "Skapa webbmapp för statiskt innehåll"
    ],
    "author": [
        "krm"
    ],
    "created": {
        "year": 2025,
        "month": 5,
        "day": 18
    },
    "status": "alpha",
    "description": [],
    "statments": [],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "title": [
                "# 👁️‍🗨️ Om detta avsnitt"
            ],
            "description": [
                "mimer-loggin är ett enkelt middelware för Hono skapat för att göra det väldigt enkelt att göra ett \"logga in\" ramverk. Du behöver först ha skapat ett webbprojekt med \nhono. I detta projekt måste du också ha en webbmapp."
            ],
            "statments": [
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./create-a-project-for-webserver.sv.html"
                            },
                            "Skapa ett projekt för en webbserver"
                        ]
                    ]
                },
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./web-map-for-static-content.sv.md"
                            },
                            "Skapa webbmapp för statiskt innehåll"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 1,
            "title": [
                "Hämta koden"
            ],
            "description": [
                "Ladda ned koden som du hittar i ",
                [
                    {
                        "link": "https://htsit.se/f/mimer-access.ts"
                    },
                    "https://htsit.se/f/mimer-access.ts"
                ],
                "."
            ],
            "lang": "sh",
            "code": "curl -LOk https://htsit.se/f/mimer-access.ts",
            "statments": [],
            "comment": [
                "Du kan också hitta senaste versionen av koden i projektet ",
                [
                    {
                        "link": "git@gitlab.com:krmit/ada.git"
                    },
                    "ada"
                ],
                "."
            ]
        },
        {
            "level": 1,
            "index": 2,
            "title": [
                "Lägg den på rätt ställe"
            ],
            "description": [
                "Lägg koden i din \"src\" map där du har all annan kod till ditt projekt."
            ],
            "lang": "sh",
            "code": "mv mimer-access.ts MITT_PROJEKT/src",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 3,
            "title": [
                "Importera den i din kod"
            ],
            "description": [
                "Gå till filen där du har din Hono app och lägg till följande kod."
            ],
            "lang": "js",
            "code": "import { Access, LoginException, RegisterException, User } from \"./mimer-access.ts\";",
            "statments": [],
            "comment": [
                "Du behöver inte importera \"LoginException\" och \"RegisterException\" om du inte ska använda exeptions."
            ]
        },
        {
            "level": 1,
            "index": 4,
            "title": [
                "Uppdatera Honons template variabel"
            ],
            "description": [
                "För att få Hono att fungera med rätt typer måste ha rätt template variabler."
            ],
            "lang": "js",
            "code": "type Variables = {\nname: string;\nuser: User;\nrole: Role;\n};\nconst app = new Hono<{ Variables: Variables }>();",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 5,
            "title": [
                "Skappa ett access object"
            ],
            "description": [
                "Vi behöver nu skappa ett access projekt som vi ska använda i koden."
            ],
            "lang": "js",
            "code": "const access = await Access.initialize(app, \"./data/user_kv.db\");",
            "statments": [],
            "comment": [
                "Sökvägen \"./data/user_kv.db\" är till databasen för anvädnare som ska användas."
            ]
        },
        {
            "level": 1,
            "index": 6,
            "title": [
                "Bestäm vad som ska hända om registrering är bra."
            ],
            "description": [
                "Du behöver anropa ett par set funktoiner för att konfiguera access objektet."
            ],
            "lang": "js",
            "code": "access.setRegisterSucces((user)=>\"/\");",
            "statments": [],
            "comment": [
                "I samband registeringen kanske olika objekt i andra databaser behöver skapas. Callback funktionen returnerar en sökväg till sidan som \nska besökas."
            ]
        },
        {
            "level": 1,
            "index": 7,
            "title": [
                "Bestäm vad som ska hända om login är bra."
            ],
            "description": [
                "Framför allt blir frågan till vilken sida en inloggad användare ska skickas."
            ],
            "lang": "js",
            "code": "access.setLoginSuccess(()=>\"/\");",
            "statments": [],
            "comment": [
                "Callback funktionen returnerar en sökväg till sidan som ska besökas."
            ]
        },
        {
            "level": 1,
            "index": 8,
            "title": [
                "Lägg till register sida."
            ],
            "description": [
                "I din webbmapp lägg till en sida likande denna."
            ],
            "lang": "html",
            "code": "<!DOCTYPE html>\n<html lang=\"sv\">\n<head>\n<meta charset=\"utf-8\" />\n<title>Register</title>\n<link rel=\"stylesheet\" href=\"/css/style.css\" />\n</head>\n<body>\n<div id=\"container\" class=\"login\">\n<div class=\"dialog\">\n<h1>Register</h1>\n<form action=\"/register\" method=\"get\">\n<label for=\"user\">User name: </label>\n<input type=\"text\" id=\"user\" name=\"user\" />\n<label for=\"password\">Password: </label>\n<input type=\"password\" id=\"password\" name=\"password\" />\n<input type=\"submit\" value=\"Submit\" />\n</form>\n</div>\n</div>\n</body>\n</html>",
            "statments": [],
            "comment": [
                "Med denna sida kan du registrera dig på."
            ]
        },
        {
            "level": 1,
            "index": 9,
            "title": [
                "Lägg till register sida."
            ],
            "description": [
                "I din webbmapp lägg till en sida likande denna."
            ],
            "lang": "html",
            "code": "<!DOCTYPE html>\n<html lang=\"sv\">\n<head>\n<meta charset=\"utf-8\" />\n<title>Login</title>\n<link rel=\"stylesheet\" href=\"/css/style.css\" />\n</head>\n<body>\n<dev id=\"container\" class=\"login\">\n<div class=\"dialog\">\n<h1>Login</h1>\n<form action=\"/login\">\n<label for=\"user\">User name: </label>\n<input type=\"text\" id=\"user\" name=\"user\" />\n<label for=\"password\">Password: </label>\n<input type=\"password\" id=\"password\" name=\"password\" />\n<input type=\"submit\" value=\"Submit\" />\n</form>\n</div>\n</dev>\n</body>\n</html>",
            "statments": [],
            "comment": [
                "Detta är en sida för att logga in på."
            ]
        },
        {
            "level": 1,
            "index": 10,
            "title": [
                "Lägg till en check för en sökväg"
            ],
            "description": [
                "Denna middelware gör att alla anrop till sökvägen kommer checkas och det kommer kontrolleras att användaren har rollen \"user\"."
            ],
            "lang": "js",
            "code": "app.get(\"/test/\", (c) => {\nreturn c.text(\"Hello World!\")\n});",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 11,
            "title": [
                "Använd data för \"user\"."
            ],
            "description": [
                "Middelwaren ger också data om anvädaren som kan användas."
            ],
            "lang": "js",
            "code": "app.get(\"/test/hello\", (c) => {\nreturn c.text(\"Hello \"+ c.get(\"user\").name+\"!\")\n});",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 12,
            "title": [
                "✔️ Starta om servern och testa anropet"
            ],
            "description": [
                "Starta om server och gå in på sidan:"
            ],
            "statments": [
                {
                    "link": "http://localhost:8000",
                    "description": [
                        "http://localhost:8000"
                    ]
                }
            ],
            "comment": [
                "Testa att registrera en användare och sedan logga in för att slutligen gå till test sidan."
            ]
        }
    ]
}