Elixir phoenix Logout link does not work

5
votes

I have the following Logout link in my app, but when i click on it, it does not do anything. 

<li class="nav-item">
  <%= link "Logout", to: session_path(@conn, :delete), method: :delete, class: "nav-link" %>
</li>

The html element the above code generates is

<li class="nav-item">
  <form action="/logout" class="link" method="post">
    <input name="_method" type="hidden" value="delete">
    <input name="_csrf_token" type="hidden" value="GiA4JANYN10+JQhfUgIEARxZCRIEAAAUijC25v5Kj8j7KI6qrOtv==">
    <a data-submit="parent" href="#">Logout</a>
  </form>
</li>

Does anyone see anything obviously wrong here that the logout link would not do anything when clicked?

brunch-config.js

javascripts: {
 joinTo: {
   "js/app.js": /^(web\/static\/js)/,
   "js/jquery-ujs.js.js": ["web/static/vendor/js/jquery-ujs.js.js"],
   "js/jquery.js": ["web/static/vendor/js/jquery.js"]
 },
 ...
3
elixirphoenix-framework
stackoverflow.com/questions/34272706/… – AbM

3 Answers

5
votes

I believe that the code that is responsible for handling such cases is in the phoenix_html package's js file so you need to make sure you have added this package to mix and have the following line in your app.js file uncommented:

import "deps/phoenix_html/web/static/js/phoenix_html"

0
votes

In my case it happened due to missing npm dependencies.

In phoenix.server logs I've noticed that app.js wasn't built due to absence of babel-preset-2015 and then babel-preset-2016.

npm i --save-dev babel-preset-2015 babel-preset-2016
-1
votes

One possible workaround is to do a GET request instead of a DELETE request:

Your html.eex code:

<li class="nav-item">
  <%= link "Logout", to: session_path(@conn, :delete), class: "nav-link" %>
</li>

An example router.ex:

resources "/sessions", SessionController, only: [:new, :create]
get "/sessions", SessionController, :delete