Is there a quick way to let Ash Authentication (Phoenix) inherit my custom daisyUI theme?
With Phoenix 1.18 (rc), daisy UI is now a thing.
The thing I love about it is this theme builder, put into my css file, and tadah!, my app is fully customized.
But
ash_authentication ships with its own styles, which is fine on its own, but won't work well with phoenix from now on (imho).
I've just learned about overrides, but that's a quite long process (if I am understanding this right): you have to override every single class from this list. I know it's well documented but it still feels like a guessing game (which-class-goes-where?)
What's the idiomatic choice to make, here?20 Replies
honestly, the easiest thing to do would probably be to ask an LLM to do it, after giving it the DaisyUI docs and the AshAuthenticationPhoenix override docs.
otherwise, you'd be looking at doing it manually - this is what I did when building the Tunez app (before I removed DaisyUI)
Mhhh... I'll give it a shot, but ngl, it doesn't feel right.
We have a
ash_auth_phoenix module, but it doesn't pick up on phoenix default styles. It's weird.
Or at least that's my biasbecause you can rewrite your core components however you see fit - and AshAuthenticationPhoenix needs to work all the time
so it uses its own components
Mhhhhh I don't think I understand. But that's probably because of lack of experience on the ecosystem. I'm not sure what "you can rewrite your core components" vs "and ash auth needs to work all the time"
when you create a phoenix app, it generates a CoreComponents file with all your components like inputs, etc. right? we could make AshAuthenticationPhoenix work with those default components - but then if you update your CoreComponents (because that's part of your app, you can use it however you want), you could break the integration with AshAuthenticationPhoenix
riiiiight, I didn't realize this
but what if ash auth generates its own components I can just tamper with and add my daisy ui classes?
I'm wondering: why the DSL, even for components? I'm genuinely asking
I don't have a good answer for that one, because how to build UIs in a way that they can be customizable, but not breakable is a Really Hard Question
I think we'd like to rework the approach one day, but it would be a big deal if/when it happens
Mhhhh yeah right. Well the good news is: we can customize it. It's time consuming, but there's the DSL we can exploit and that's it. That's fine
I have one final curiosity - say I have one custom component / page I want to write, and I just want to exploit ash's logic.
How can I replace ash auth components with mine?
You'd write your own live views and use the underlying actions yourself
There is a blog post that talks about it with some examples https://alembic.com.au/blog/customising-ash-authentication-with-phoenix-liveview
Alembic
Customising Ash Authentication with Phoenix LiveView
Learn how to implement and customise Ash Authentication in Elixir applications using simple DSL on Ash resources with Phoenix LiveView integration.
Wonder if it'd be cool to include an optional daisyui override module as part of ash_authentication_phoenix
Sounds like a neat idea to me
Nice, this is super clear!
Still, this would be 110% extra cool.
In the end, it would be a matter of changing a few css variables and tadah, your auth page is customized!
Solution
There is a PR up for this now 🙂
No way 😍 I tried to tackle this on my own this night, but I was only able to write a couple overrides and be up and running with an LLM
I wanted to first try it on my own before opening an issue / PR
But it's honestly harder than it looks, because it quickly gets too much opinionated
I hope it's ok to ask here for help on this -- I haven't seen it before and can find nothing anywhere to help me get this compile working.
== Compilation error in file lib/your_app_web/components/core_components.ex ==
** (CompileError) lib/your_app_web/components/core_components.ex:100 invalid option :description for attr :id. The supported options are: [:required, :default, :values, :examples, :include]
(phoenix_live_view 1.1.3) lib/phoenix_component/declarative.ex:558: Phoenix.Component.Declarative.compile_error!/3
(elixir 1.18.3) lib/enum.ex:2546: Enum."-reduce/3-lists^foldl/2-0-"/3
(phoenix_live_view 1.1.3) lib/phoenix_component/declarative.ex:528: Phoenix.Component.Declarative.validate_attr_opts!/5
(phoenix_live_view 1.1.3) lib/phoenix_component/declarative.ex:356: Phoenix.Component.Declarative.attr!/6
lib/your_app_web/components/core_components.ex:100(module)
line 100 in core_components.ex
attr :id, :string, description: "the optional id of flash container"
Was compiling fine earlier, and after finishing most of the initial domains/resource setup and fixing compile issues for those, this has left me stuck, thanks.
at some point it looks like you changed
doc: to description:Thanks!!!
Oh, darn, I only have a few git archives going several days -- so without picking my way through git... stupid question -- how easy is it to reinstall just phoenix in my setup to fix this? Or is there a better way -- clone a phoenix git repo and copy that over -- as I suspect I have done this silly find and replace across a few directories I shouldn't have. I honestly find zed editor's find and replace quite clumsy to use compare to others -- I often make mistakes with it compared to other IDEs, but I probably was just half-asleep when I did this.
uh.... not easy
yeah, and worse -- I have a pretty automated flake.nix for my dev setup, sigh. Perhaps it will be easier to start the project fresh, thanks.
Fixed -- lazygit to the rescue -- turns out was just core_components.ex that i accidentally replaced doc with. But has reminded me to get my flake up to date with recent changes and set up a cronjob with git archive. Many thanks for spotting that change... compiling fine now.