I have a simple AshAuthentication setup which I need to translate into German. And I want to change other HTML too. How can I access the form? Is there a tutorial for that?
I found AshAuthentication.Phoenix.Overrides — ash_authentication_phoenix v2.0.0 but that only tells me how to change the logo. I want to change a lot more HTML on the login and register page.
I mean the following two forms:
So it can still be a bit difficult to discover, but the overrides for each individual component are documented in the module for that component: AshAuthentication.Phoenix.Components.Banner — ash_authentication_phoenix v1.9.0
The idea is that you can use the builtin UIs to get off the ground, but at a certain point of customization you’ll need to roll your own and call the relevant actions. Here is a guide from Alembic’s blog about customizing ash authentication more thoroughly. Customising Ash Authentication with Phoenix LiveView
That was my first point of reference. But it falls short in the very last section:
Where do I have to add this code? No file name is given.
I think it’s just pointing out an important bit from the first file listed above.
I override in the router
sign_in_route(
register_path: "/register",
reset_path: "/reset",
overrides: [
App.Auth.Overrides,
AshAuthentication.Phoenix.Overrides.Default
],
on_mount: [{AppWeb.LiveUserAuth, :live_no_user}]
)
App.Auth.Overrides contains my overrides, if the definition isn’t there it falls back to Default
This is what Overrides looks like:
defmodule App.Auth.Overrides do
use AshAuthentication.Phoenix.Overrides
alias AshAuthentication.Phoenix.{Components, ResetLive, SignInLive}
override SignInLive do
set :root_class, "grid h-screen place-items-center bg-brand dark:bg-brand"
end
override ResetLive do
set :root_class, "grid h-screen place-items-center dark:bg-gray-900"
end
override Components.Reset do
set :root_class, """
flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none
lg:px-20 xl:px-24
"""
set :strategy_class, "mx-auth w-full max-w-sm lg:w-96"
end
override Components.Reset.Form do
set :root_class, nil
set :label_class,
"mt-2 mb-4 text-2xl tracking-tight font-bold text-gray-900 dark:text-gray-900"
set :form_class, nil
set :spacer_class, "py-1"
set :disable_button_text, "Changing password ..."
end
override Components.SignIn do
set :root_class, """
flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none
lg:px-20 xl:px-24
"""
set :strategy_class, "mx-auth w-full max-w-sm lg:w-96"
set :authentication_error_container_class, "text-black dark:text-black text-center"
set :authentication_error_text_class, ""
end
override Components.Banner do
set :root_class, "w-full flex justify-center py-2"
set :href_class, nil
set :href_url, "/"
set :image_class, "block dark:hidden h-12 w-auto sm:h-14"
set :dark_image_class, "hidden dark:block h-12 w-auto sm:h-14"
set :image_url,
"https://static.wixstatic.com/media/62aad1_b2a9245d61f34d33b0228a94fdac9b8d~mv2.png/v1/fill/w_114,h_114,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/white.png"
set :dark_image_url,
"https://static.wixstatic.com/media/62aad1_b2a9245d61f34d33b0228a94fdac9b8d~mv2.png/v1/fill/w_114,h_114,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/white.png"
set :text_class, nil
set :text, nil
end
override Components.HorizontalRule do
set :root_class, "relative my-2"
set :hr_outer_class, "absolute inset-0 flex items-center"
set :hr_inner_class, "w-full border-t border-gray-300 dark:border-gray-700"
set :text_outer_class, "relative flex justify-center text-sm"
set :text_inner_class,
"px-2 bg-white text-gray-400 font-medium dark:bg-gray-900 dark:text-gray-500"
set :text, "or"
end
override Components.MagicLink do
set :root_class, "mt-4 mb-4"
set :label_class,
"mt-2 mb-4 text-2xl tracking-tight font-bold text-gray-900 dark:text-gray-900"
set :form_class, nil
set :request_flash_text,
"If this user exists in our database you will contacted with a sign-in link shortly."
set :disable_button_text, "Requesting ..."
end
override Components.Password do
set :root_class, "mt-4 mb-4"
set :interstitial_class, "flex flex-row justify-between content-between text-sm font-medium"
set :toggler_class, "flex-none text-zinc-100 hover:text-zinc-200 px-2 first:pl-0 last:pr-0"
set :sign_in_toggle_text, "Already have an account?"
set :register_toggle_text, "Need an account?"
set :reset_toggle_text, "Forgot your password?"
set :show_first, :sign_in
set :hide_class, "hidden"
end
override Components.Password.SignInForm do
set :root_class, nil
set :label_class, "mt-2 mb-4 text-2xl tracking-tight font-bold text-gray-900 dark:text-white"
set :form_class, nil
set :slot_class, "my-4"
set :disable_button_text, "Signing in ..."
end
override Components.Password.RegisterForm do
set :root_class, nil
set :label_class, "mt-2 mb-4 text-2xl tracking-tight font-bold text-gray-900 dark:text-white"
set :form_class, nil
set :slot_class, "my-4"
set :disable_button_text, "Registering ..."
end
override Components.Password.ResetForm do
set :root_class, nil
set :label_class, "mt-2 mb-4 text-2xl tracking-tight font-bold text-gray-900 dark:text-white"
set :form_class, nil
set :slot_class, "my-4"
set :reset_flash_text,
"If this user exists in our system, you will be contacted with reset instructions shortly."
set :disable_button_text, "Requesting ..."
end
override Components.Password.Input do
set :field_class, "mt-2 mb-2 dark:text-white"
set :label_class, "block text-sm font-medium text-white mb-1 dark:text-white"
set :input_class, """
appearance-none block w-full px-3 py-4 border border-gray-300 rounded-md
shadow-sm placeholder-gray-400 focus:outline-none focus:ring-slate-pale-500
focus:border-slate-pale-500 text-lg font-medium
text-slate-950
dark:text-slate-950
"""
set :input_class_with_error, """
appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md
shadow-sm placeholder-gray-400 focus:outline-none border-red-400 sm:text-sm
dark:text-black
"""
set :submit_class, """
w-full flex justify-center py-2 px-4 border border-transparent rounded-md
shadow-sm text-md font-semibold text-white bg-slate-600 hover:bg-slate-700
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-300
mt-4 mb-4
"""
set :error_ul, "text-red-400 font-light my-3 italic text-sm"
set :error_li, nil
set :input_debounce, 350
end
override Components.OAuth2 do
set :root_class, "w-full mt-2 mb-4"
set :link_class, """
w-full flex justify-center py-2 px-4 border border-transparent rounded-md
shadow-sm text-sm font-medium text-black bg-gray-200 hover:bg-gray-300
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-600
inline-flex items-center
"""
set :icon_class, "-ml-0.4 mr-2 h-4 w-4"
end
end
I think I just copied the defaults file found here and started editing in my override file: ash_authentication_phoenix/lib/ash_authentication_phoenix/overrides/default.ex at main · team-alembic/ash_authentication_phoenix · GitHub
© Copyright Elixir Forum | Terms | Privacy & Cookies
