Phoenix phx-click only possible in LiveView?

Phoenix Forum Questions / Help
,
1 
<button phx-click="handle_login">
  Login
</button>

I have the following button that handles “handle_login”, its in my testweb/templates/admin/admin.html.heex, where do I have to create a elixir file with the following function to actually handle it:

def handle_click("handle_login"), do: ...

I tried to put it into the same folder as the html file (admin.ex), but when I clicked the button, nothing happened (I added a IO.puts to log something but nothing happend

1 Like
2

Hi @spizzy yes phx-click is liveview only. For a login form, I would consider just doing a normal HTML form and having a route that handles the POST when the form is submitted.

1 Like
3

Alright okay, a normal HTML form? Wdym? Or should I handle that with JS?

4

Yup, login forms in particular are best done with a traditional HTML form because this way it allows the server to set cookies easily.

5

What im trying to do is the following:

I have a page where a user has to enter a generated password that is saved in a database.
When the user enters his password, I wanted to call a .ex file that runs through several functions for Ecto etc. and returns an error message or success message …

Im not sure how to do that with html only xD

6

What resources are you using to learn Phoenix?

7

The official docs and a method called “trial-and-error”

8

OK. If you use the generators like mix phx.gen.html it will generate some common templates, controllers and forms. There is also mix phx.gen.auth which will generate a login form. If you aren’t sure how to hook up a form to a controller I’d also consider one of the more detailed guides or books that walks you through it step by step.

9

yea I know that one, but I wanted to do some small buttons clicks xD, but gen.html generates database stuff too, I dont need that :confused:

10

I meant as a way to learn how it works. Make a new git branch on your project, generate some stuff, play with it, and then delete the branch if you like.

EDIT: There is also Phoenix Framework: Supporting new forms and create actions and CSRF and a variety of other resources if you google “Phoenix form and controller actions”.

11

Quick Q by the way, would you recommend liveview for the project im doing? with the password etc

12

No, login forms in particular are best done with a traditional HTML form because this way it allows the server to set cookies easily.

For other forms you may want to look at live view, but for login forms I would not.

13

its not a traditional login form with like email and password etc.

but when I do it with HTML only, where do I send the HTTP request to? :thinking:

14

To a controller. I’m happy to keep helping but this would be a lot more productive if you’d read the link I sent, try to write the code out, and then come back with specific questions about what you tried and what went wrong. I don’t think I’m going to be able to give you a tutorial on HTML and Phoenix that is better than the Phoenix book or better than the link I sent.

15

yea I was doing that rn, and I got a question

<form class="phx-hero" action="{admin_path(@conn, :create)}" method="post">
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="Submit">
</form>

def create(conn, _params) do
    if conn.params["password"] == "something" do
      conn
      |> put_flash(:info, "You are now logged in")
      |> redirect(to: "/kek")
    else
      conn
      |> put_flash(:error, "Wrong password")
      |> redirect(to: "/parents")
    end
  end

why is this saying (when I enter something in the form)
no route found for POST /%7Badmin_path(@conn,%20:create)%7D (AdminWeb.Router)

16

I only want to handle the password god damn,

<div class="phx-hero">
    <p>
      <form action="/admin" method="get">
        <label for="password">Please enter your Password:</label>
        <input name="password" type="password" />
        <input type="submit" value="submit" />
      </form>
    </p>
</div>

when I change it to that, its just asking me if I want to save my password, after that nothing happens :confused:

17

anyone? I wasnt able to figure it out till now :confused:

18

Looks like you’re going the Controllers route. Take a look at the documentation.

You pretty much need this in your router:

 scope "/", HelloWeb do
    pipe_through :browser

    get "/admin/login", SessionController, :new # This renders the form, you should have something similar working
    post "/admin/login", SessionController, :create # This handles the submit
  end

And then a controller that handles the new/create actions. Whatever you use in your post route is the action you need in your form. I used “/admin/login”, you used only “/admin”, change as needed.

Also reading your posts above, this piece of code is wrong (you can confirm by inspecting element in your page and cheking the generated HTML code):

<form class="phx-hero" action="{admin_path(@conn, :create)}" method="post">
# This renders action="{admin_path(@conn, :create)}" in the HTML

It should be:

<form class="phx-hero" action={Routes.admin_path(@conn, :create)} method="post">
# This renders action="/admin/login" or whatever is in your router config in the HTML

The difference is that you have the {} within the "" and it is evaluated as a string.

1 Like
19

oh okay, i see, my router looked like this

get "/", PageController, :index
get "/admin", AdminController, :index
20

ok I still dont get it. what is Routes.admin_path, its saying thats its undefined, and I have no idea how to or where to add that function