Beginner - user form as modal window instead of static site

Phoenix Forum Questions / Help
1

Hi, I am new to Elixir ecosystem and after 2 weeks of reading, doing some exercices from exercism I decided that I should be doing small app to keep motivation on higher level. I have small previous experience in JS (which I do not like at all) and .Net.

In my app I implemented authentication using Pow. It generated for me form which I styled with tailwind. What I do not like is that for such small register/login form I need to open plain new html. I would like to keep index site in the background but using my styled forms just open small modal window.

As I read some articles and check YT - there is not too much informations about that. Of course I can use JS to this what is absolutely simple (vanilla JS, alpineJS) but as much as I hate front end stuff I still feel that I need to know basics of Phoenix/LiveView (I implemented HamburgerMenu and write JS for it and I feel like a cheater that I used what I knew instead of keep digging for Phoenix solution xD).

My questions are:

  • is there any possibility to do it very simple/quickly without rewriting most of auth stuff, having everything styled, buttons doing their stuff (like in JS EventListener and just adding hidden class on click)

  • is it possible to do it without LiveView?

  • is it possible using Pow package or I must rely on it no matter what and keep using what they provide?

  • if its possible, how to do it? I’m getting sick trying to find something relevant for my problem. Most of cases are just some counter modal with score where or something without higher logic that showing simple result or text.

Greetings!

2

I am no expert by any means (that’s a warning).

With respect to authentication, while you can use community solutions like POW – phoenix has a baked-in authentication system. It generates all the auth you need, including password resets, etc.

> mix phx.gen.auth User users

You can turn this into a live_view auth — but it takes a bit of work, however you can authenticate live_view routes.

The better news is in the soon to be release Phoenix 1.7 – that same generator gives you the choice of controller based or live_view authentication. All the forms are tailwind formatted and look great.

To get Phoenix 1.7 now, you have to use the master branch off of github. but instructions are right there in the read me and it is straight forward. Phoenix 1.7, which includes live_view 0.18.1 and tailwind by default, is fantastic.

Hope this helps.
DJ

2 Likes
3

Thanks for answer!

So better for me to keep going with project and leave “modal window” topic for some time later. It works, it looks good, but doesnt work as ‘pop up’ :smiley: Maybe after Phx upgrade It will be easier to do that simple trick, because now after spending a lot of time watching and reading about it I am more confused than I’ve been before.

I will try Phx’s auth system also next time, maybe I’m gonna like it more than Pow’s :smiley: I hope its going to be just better than .Net identity which I hated the most :slight_smile:

Greetings

4

To do a modal you always have to have some amount of javascript; and with popular js frameworks that part is packaged for you. Phoenix does not ship 3rd party javascript so this functionality is not included. However, you are free to use whatever javascript package you like to implement modal.

1 Like
5

So I’ll need to write a little JS. I check documentation again and refactor code a bit. Thank you for the answer :slight_smile: