wintermeyer

wintermeyer

How to override the default layout for AshAuthentication

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.17.1 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:

Marked As Solved

BryanJBryce

BryanJBryce

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

Where Next?

Popular in Questions Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

We're in Beta

About us Mission Statement