No DOM update with HTMX and GoLang

  Kiến thức lập trình

I’m trying to learn HTMX with Go and GoFiber.

Here is my HTML page :

<script src="https://unpkg.com/[email protected]" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
<main>
    <div class="grid h-screen place-items-center">
        <div class="flex flex-col items-center space-y-4">
            <h1 class="text-5xl font-bold mb-16">Connexion</h1>
            <form hx-post="/auth" hx-target="#error-message" hx-swap="innerHTML" class="flex flex-col items-center space-y-4">
                <input
                    type="password"
                    placeholder="Mot de passe"
                    class="input input-bordered input-primary w-full max-w-xs"
                    id="password"
                    name="password"
                />
                <button type="submit" class="btn btn-primary">Connexion</button>
            </form>
            <div id="error-message" class="text-red-500"></div>
        </div>
    </div>
</main>

and here is the /auth route of my API in GoFiber

func Auth(c *fiber.Ctx) error {
    // get the password on the body
    clientPassword := c.FormValue("password")

    // check if the password is correct
    password, err := database.GetPassword()
    if err != nil {
        log.Fatalf("Failed to get the password: %v", err)
        return c.Status(fiber.StatusInternalServerError).SendString("Internal Server Error : cannot get the password in db")
    }

    if clientPassword != password {
        log.Println("Incorrect password")
        return c.Status(fiber.StatusUnauthorized).SendString("<p class='text-red-500'>Incorrect password. Please try again.</p>")
    }

    log.Println("Correct password")

    // redirect the client on the home page
    return c.Redirect("/videos")
}

My problem is that when I send an incorrect password, the API correctly receives the request and my browser correctly receives the response with a status code of 401 and the HTML string. However, the message sent by the API does not appear in the error-message div. Why didn’t it work, and how can I fix this?

(I tried swapping the outerHTML, targeting a class insted of an id but nothing seem to work.)

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT