customize login screen and mmbers as landing page closes #68 and #137 #138

Merged
carla merged 5 commits from feature/68_log_in_screen into main 2025-08-21 13:49:43 +02:00
13 changed files with 309 additions and 40 deletions

View file

@ -23,7 +23,7 @@ ci-dev: lint audit test
gettext:
mix gettext.extract
mix gettext.merge priv/gettext
mix gettext.merge priv/gettext --on-obsolete=mark_as_obsolete
lint:
mix format --check-formatted

View file

@ -1,7 +1,7 @@
/* See the Tailwind configuration guide for advanced usage
https://tailwindcss.com/docs/configuration */
@import "tailwindcss" source(none);
rafael marked this conversation as resolved Outdated

I'm trying to understand what this line did before 🤔 Looking at the tailwind docs here it seems like it disabled the scanning for tailwind classes completely? I have no idea why the phoenix generators would enable this by default. Do you know why this was in here?

I'm trying to understand what this line did before 🤔 Looking at [the tailwind docs here](https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection) it seems like it disabled the scanning for tailwind classes completely? I have no idea why the phoenix generators would enable this by default. Do you know why this was in here?

It came with the Phoenix upgrade to 1.8 but I have not found any information why...

It came with the Phoenix upgrade to 1.8 but I have not found any information why...

Ah, maybe it's because these lines below:

@source "../css";
@source "../js";
@source "../../lib/mv_web";

that explicitly register the sources tailwind should scan. So without this setting, tailwind will scan all files in the repository, I guess? Did the source(none) cause any problems for you?

Ah, maybe it's because these lines below: ``` @source "../css"; @source "../js"; @source "../../lib/mv_web"; ``` that explicitly register the sources tailwind should scan. So without this setting, tailwind will scan *all* files in the repository, I guess? Did the `source(none)` cause any problems for you?

Yes, the classes were not applied to the ash-authentication part of the loginscreen.

Yes, the classes were not applied to the ash-authentication part of the loginscreen.
@import "tailwindcss";
@source "../css";
@source "../js";
@source "../../lib/mv_web";

View file

@ -1,5 +1,6 @@
defmodule MvWeb.AuthOverrides do
use AshAuthentication.Phoenix.Overrides
use Gettext, backend: MvWeb.Gettext
# configure your UI overrides here
@ -14,7 +15,22 @@ defmodule MvWeb.AuthOverrides do
# set :text_class, "bg-red-500"
# end
# override AshAuthentication.Phoenix.Components.SignIn do
# set :show_banner, false
# end
# Avoid full-width for the Sign In Form
override AshAuthentication.Phoenix.Components.SignIn do
set :root_class, "md:min-w-md"
rafael marked this conversation as resolved Outdated

It seems like this makes the login form too wide on mobile screens. Maybe it should be max-w-md?

It seems like this makes the login form too wide on mobile screens. Maybe it should be `max-w-md`?
end
# Replace banner logo with text
override AshAuthentication.Phoenix.Components.Banner do
set :text, "Mitgliederverwaltung"
set :image_url, nil
end
# Translate the or in the horizontal rule to German
override AshAuthentication.Phoenix.Components.HorizontalRule do
set :text,
Gettext.with_locale(MvWeb.Gettext, "de", fn ->
rafael marked this conversation as resolved Outdated

It seems like this would always make the text on the horizontal rule german, even when the user chooses an english locale 🤔

It seems like this would always make the text on the horizontal rule german, even when the user chooses an english locale 🤔

Yes, I would actually take care of that later because I already spent too much time on it. It should not be complicated but we would need to acces the locale here jut for translating or. I would create another issue for that, is that fine?

Yes, I would actually take care of that later because I already spent too much time on it. It should not be complicated but we would need to acces the locale here jut for translating or. I would create another issue for that, is that fine?

Yes, let's do that!

Yes, let's do that!
https://git.local-it.org/local-it/mitgliederverwaltung/issues/146
Gettext.gettext(MvWeb.Gettext, "or")
end)
end
end

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang={Gettext.get_locale()}>
<head>
{Application.get_env(:live_debugger, :live_debugger_tags)}

View file

@ -1,6 +1,6 @@
defmodule MvWeb.LiveHelpers do
def on_mount(:default, _params, session, socket) do
locale = session["locale"] || "en"
locale = session["locale"] || "de"
Gettext.put_locale(locale)
{:cont, socket}
end

View file

@ -36,7 +36,13 @@ defmodule MvWeb.LiveUserAuth do
end
end
def on_mount(:live_no_user, _params, _session, socket) do
def on_mount(:live_no_user, _params, session, socket) do
# Set the locale for not logged in user to set the language in the Log-In Screen
rafael marked this conversation as resolved Outdated

Is there a way to detect the language of the user automatically? Maybe phoenix has a feature for that. This would make sure that folks who don't speak german will get the english login page. I think it makes sense to display the login page in german as a fallback, if the browser doesn't send a preferred language. Maybe we can open an issue for that? :)

Is there a way to detect the language of the user automatically? Maybe phoenix has a feature for that. This would make sure that folks who don't speak german will get the english login page. I think it makes sense to display the login page in german as a fallback, if the browser doesn't send a preferred language. Maybe we can open an issue for that? :)

I think adding a language switch to the login screen needs more customization than the overrides AshAuthentication provides. As I think it's not that high priority right now I added another issue, but to not spend time on it right now. Is that fine?

I think adding a language switch to the login screen needs more customization than the overrides AshAuthentication provides. As I think it's not that high priority right now I added another issue, but to not spend time on it right now. Is that fine?

Yes, totally fine!

Yes, totally fine!
# otherwise the locale is not taken for the Log-In Screen
locale = session["locale"] || "en"
rafael marked this conversation as resolved Outdated

Do we also need to set the locale here when the router already does it?

Do we also need to set the locale here when the router already does it?

Yes, otherwise the login scren is not translated. At least I found no other way.

Yes, otherwise the login scren is not translated. At least I found no other way.

Okay, could you add a comment saying that this is the reason? This will make it easier to understand if somebody stumbles upon this in the future :)

Okay, could you add a comment saying that this is the reason? This will make it easier to understand if somebody stumbles upon this in the future :)
Gettext.put_locale(MvWeb.Gettext, locale)
{:cont, assign(socket, :locale, locale)}
if socket.assigns[:current_user] do
{:halt, Phoenix.LiveView.redirect(socket, to: ~p"/")}
else

View file

@ -47,7 +47,7 @@ defmodule MvWeb.Router do
"""
ash_authentication_live_session :authentication_required,
on_mount: {MvWeb.LiveUserAuth, :live_user_required} do
get "/", PageController, :home
live "/", MemberLive.Index, :index
live "/members", MemberLive.Index, :index
live "/members/new", MemberLive.Form, :new
@ -85,19 +85,19 @@ defmodule MvWeb.Router do
reset_path: "/reset",
auth_routes_prefix: "/auth",
on_mount: [{MvWeb.LiveUserAuth, :live_no_user}],
overrides: [MvWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default],
gettext_backend: {MvWeb.Gettext, "default"}
overrides: [MvWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.DaisyUI],
gettext_backend: {MvWeb.Gettext, "auth"}
# Remove this if you do not want to use the reset password feature
reset_route auth_routes_prefix: "/auth",
overrides: [MvWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default],
gettext_backend: {MvWeb.Gettext, "default"}
overrides: [MvWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.DaisyUI],
gettext_backend: {MvWeb.Gettext, "auth"}
# Remove this if you do not use the confirmation strategy
confirm_route Mv.Accounts.User, :confirm_new_user,
auth_routes_prefix: "/auth",
overrides: [MvWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default],
gettext_backend: {MvWeb.Gettext, "default"}
overrides: [MvWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.DaisyUI],
gettext_backend: {MvWeb.Gettext, "auth"}
# Remove this if you do not use the magic link strategy.
# magic_sign_in_route(Mv.Accounts.User, :magic_link,
@ -139,8 +139,47 @@ defmodule MvWeb.Router do
end
defp set_locale(conn, _opts) do
locale = get_session(conn, :locale) || "en"
locale =
get_session(conn, :locale) ||
extract_locale_from_headers(conn.req_headers)
Gettext.put_locale(MvWeb.Gettext, locale)
conn
|> put_session(:locale, locale)
|> assign(:locale, locale)
end
# Get locale from user
defp extract_locale_from_headers(headers) do
rafael marked this conversation as resolved Outdated

This looks excellent, great that you managed to do it in such a simple way :)

This looks excellent, great that you managed to do it in such a simple way :)
headers
|> Enum.find_value(fn
{"accept-language", value} -> value
_ -> nil
end)
|> parse_accept_language()
|> Enum.find(&supported_locale?/1)
|> fallback_locale()
end
defp parse_accept_language(nil), do: []
defp parse_accept_language(header) do
header
|> String.split(",")
|> Enum.map(&String.trim/1)
|> Enum.map(fn lang ->
lang
# we only want the first part
|> String.split(";")
|> hd()
|> String.split("-")
|> hd()
end)
end
# Our supported languages for now are german and english, english as fallback language
defp supported_locale?(locale), do: locale in ["en", "de"]
defp fallback_locale(nil), do: "en"
defp fallback_locale(locale), do: locale
end

64
priv/gettext/auth.pot Normal file
View file

@ -0,0 +1,64 @@
## This file is a PO Template file.
##
## "msgid"s here are often extracted from source code.
## Add new messages manually only if they're dynamic
## messages that can't be statically extracted.
##
## Leave "msgstr"s empty as changing them here has no
## effect: edit them in PO (.po) files instead.
#
msgid ""
msgstr ""
"Language: en\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
msgid "Already have an account?"
msgstr ""
msgid "Email or password was incorrect"
msgstr ""
msgid "Email"
msgstr ""
msgid "Forgot your password?"
msgstr ""
msgid "If this user exists in our database you will contacted with a sign-in link shortly."
msgstr ""
msgid "If this user exists in our system, you will be contacted with reset instructions shortly."
msgstr ""
msgid "Need an account?"
msgstr ""
msgid "Password"
msgstr ""
msgid "Password Confirmation"
msgstr ""
msgid "Request magic link"
msgstr ""
msgid "Request password reset token"
msgstr ""
msgid "Requesting ..."
msgstr ""
msgid "Reset password with token"
msgstr ""
msgid "Sign in"
msgstr ""
msgid "Signing in ..."
msgstr ""
msgid "Your password has successfully been reset"
msgstr ""

View file

@ -0,0 +1,66 @@
## "msgid"s in this file come from POT (.pot) files.
###
### Do not add, change, or remove "msgid"s manually here as
### they're tied to the ones in the corresponding POT file
### (with the same domain).
###
### Use "mix gettext.extract --merge" or "mix gettext.merge"
### to merge POT files into PO files.
msgid ""
msgstr ""
"Language: de\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
msgid "Already have an account?"
msgstr "Bereit zum Anmelden?"
msgid "Email or password was incorrect"
msgstr "Email oder Passwort nicht korrekt"
msgid "Email"
msgstr "Email"
msgid "Forgot your password?"
msgstr "Passwort vergessen?"
msgid "If this user exists in our database you will contacted with a sign-in link shortly."
msgstr "Falls dieser Benutzer bekannt ist, wird jetzt eine Email mit Anmelde-Link versendet."
msgid "If this user exists in our system, you will be contacted with reset instructions shortly."
msgstr "Falls dieser Benutzer bekannt ist, wird jetzt eine Email mit einer Anleitung zum Zurücksetzen versendet."
msgid "Need an account?"
msgstr "Konto anlegen?"
msgid "Password"
msgstr "Passwort"
msgid "Password Confirmation"
msgstr "Passwort Wiederholung"
msgid "Request magic link"
msgstr "Magischen Link anfordern"
msgid "Request password reset token"
msgstr "Passwort zurücksetzen"
msgid "Requesting ..."
msgstr "Anfrage låuft..."
msgid "Reset password with token"
msgstr "Neues Passwort setzen"
msgid "Sign in"
msgstr "Anmelden"
msgid "Signing in ..."
msgstr "Anmelden..."
msgid "Your password has successfully been reset"
msgstr "Das Passwort wurde erfolgreich zurückgesetzt"
msgid "Sign in with Rauthy"
msgstr "Anmelden mit der Vereinscloud"

View file

@ -16,7 +16,7 @@ msgid "Actions"
msgstr "Aktionen"
#: lib/mv_web/live/member_live/index.html.heex:77
#: lib/mv_web/live/user_live/index.html.heex:69
#: lib/mv_web/live/user_live/index.html.heex:65
#, elixir-autogen, elixir-format
msgid "Are you sure?"
msgstr "Bist du sicher?"
@ -35,14 +35,14 @@ msgid "City"
msgstr "Stadt"
#: lib/mv_web/live/member_live/index.html.heex:79
#: lib/mv_web/live/user_live/index.html.heex:71
#: lib/mv_web/live/user_live/index.html.heex:67
#, elixir-autogen, elixir-format
msgid "Delete"
msgstr "Löschen"
#: lib/mv_web/live/member_live/index.html.heex:71
#: lib/mv_web/live/user_live/form.ex:109
#: lib/mv_web/live/user_live/index.html.heex:63
#: lib/mv_web/live/user_live/index.html.heex:59
#, elixir-autogen, elixir-format
msgid "Edit"
msgstr "Bearbeite"
@ -57,7 +57,7 @@ msgstr "Mitglied bearbeiten"
#: lib/mv_web/live/member_live/index.html.heex:58
#: lib/mv_web/live/member_live/show.ex:27
#: lib/mv_web/live/user_live/form.ex:14
#: lib/mv_web/live/user_live/index.html.heex:48
#: lib/mv_web/live/user_live/index.html.heex:44
#: lib/mv_web/live/user_live/show.ex:24
#, elixir-autogen, elixir-format
msgid "Email"
@ -88,7 +88,7 @@ msgid "New Member"
msgstr "Neues Mitglied"
#: lib/mv_web/live/member_live/index.html.heex:68
#: lib/mv_web/live/user_live/index.html.heex:60
#: lib/mv_web/live/user_live/index.html.heex:56
#, elixir-autogen, elixir-format
msgid "Show"
msgstr "Anzeigen"
@ -351,7 +351,7 @@ msgstr "Nicht gesetzt"
msgid "Note"
msgstr "Hinweis"
#: lib/mv_web/live/user_live/index.html.heex:56
#: lib/mv_web/live/user_live/index.html.heex:52
#: lib/mv_web/live/user_live/show.ex:25
#, elixir-autogen, elixir-format
msgid "OIDC ID"
@ -533,12 +533,12 @@ msgstr "Passwort"
msgid "Password requirements"
msgstr "Passwort-Anforderungen"
#: lib/mv_web/live/user_live/index.html.heex:25
#: lib/mv_web/live/user_live/index.html.heex:21
#, elixir-autogen, elixir-format
msgid "Select all users"
msgstr "Alle Benutzer auswählen"
#: lib/mv_web/live/user_live/index.html.heex:39
#: lib/mv_web/live/user_live/index.html.heex:35
#, elixir-autogen, elixir-format
msgid "Select user"
msgstr "Benutzer auswählen"
@ -552,3 +552,8 @@ msgstr "Passwort setzen"
#, elixir-autogen, elixir-format
msgid "User will be created without a password. Check 'Set Password' to add one."
msgstr "Benutzer wird ohne Passwort erstellt. Aktivieren Sie 'Passwort setzen', um eines hinzuzufügen."
#: lib/mv_web/auth_overrides.ex:30
#, elixir-autogen, elixir-format
msgid "or"
msgstr "oder"

View file

@ -17,7 +17,7 @@ msgid "Actions"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:77
#: lib/mv_web/live/user_live/index.html.heex:69
#: lib/mv_web/live/user_live/index.html.heex:65
#, elixir-autogen, elixir-format
msgid "Are you sure?"
msgstr ""
@ -36,14 +36,14 @@ msgid "City"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:79
#: lib/mv_web/live/user_live/index.html.heex:71
#: lib/mv_web/live/user_live/index.html.heex:67
#, elixir-autogen, elixir-format
msgid "Delete"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:71
#: lib/mv_web/live/user_live/form.ex:109
#: lib/mv_web/live/user_live/index.html.heex:63
#: lib/mv_web/live/user_live/index.html.heex:59
#, elixir-autogen, elixir-format
msgid "Edit"
msgstr ""
@ -58,7 +58,7 @@ msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:58
#: lib/mv_web/live/member_live/show.ex:27
#: lib/mv_web/live/user_live/form.ex:14
#: lib/mv_web/live/user_live/index.html.heex:48
#: lib/mv_web/live/user_live/index.html.heex:44
#: lib/mv_web/live/user_live/show.ex:24
#, elixir-autogen, elixir-format
msgid "Email"
@ -89,7 +89,7 @@ msgid "New Member"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:68
#: lib/mv_web/live/user_live/index.html.heex:60
#: lib/mv_web/live/user_live/index.html.heex:56
#, elixir-autogen, elixir-format
msgid "Show"
msgstr ""
@ -352,7 +352,7 @@ msgstr ""
msgid "Note"
msgstr ""
#: lib/mv_web/live/user_live/index.html.heex:56
#: lib/mv_web/live/user_live/index.html.heex:52
#: lib/mv_web/live/user_live/show.ex:25
#, elixir-autogen, elixir-format
msgid "OIDC ID"
@ -534,12 +534,12 @@ msgstr ""
msgid "Password requirements"
msgstr ""
#: lib/mv_web/live/user_live/index.html.heex:25
#: lib/mv_web/live/user_live/index.html.heex:21
#, elixir-autogen, elixir-format
msgid "Select all users"
msgstr ""
#: lib/mv_web/live/user_live/index.html.heex:39
#: lib/mv_web/live/user_live/index.html.heex:35
#, elixir-autogen, elixir-format
msgid "Select user"
msgstr ""
@ -553,3 +553,8 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "User will be created without a password. Check 'Set Password' to add one."
msgstr ""
#: lib/mv_web/auth_overrides.ex:30
#, elixir-autogen, elixir-format
msgid "or"
msgstr ""

View file

@ -0,0 +1,63 @@
## "msgid"s in this file come from POT (.pot) files.
###
### Do not add, change, or remove "msgid"s manually here as
### they're tied to the ones in the corresponding POT file
### (with the same domain).
###
### Use "mix gettext.extract --merge" or "mix gettext.merge"
### to merge POT files into PO files.
msgid ""
msgstr ""
"Language: en\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
msgid "Already have an account?"
msgstr ""
msgid "Email or password was incorrect"
msgstr ""
msgid "Email"
msgstr ""
msgid "Forgot your password?"
msgstr ""
msgid "If this user exists in our database you will contacted with a sign-in link shortly."
msgstr ""
msgid "If this user exists in our system, you will be contacted with reset instructions shortly."
msgstr ""
msgid "Need an account?"
msgstr ""
msgid "Password"
msgstr ""
msgid "Password Confirmation"
msgstr ""
msgid "Request magic link"
msgstr ""
msgid "Request password reset token"
msgstr ""
msgid "Requesting ..."
msgstr ""
msgid "Reset password with token"
msgstr ""
msgid "Sign in"
msgstr ""
msgid "Signing in ..."
msgstr ""
msgid "Your password has successfully been reset"
msgstr ""
msgid "Sign in with Rauthy"
msgstr "Sign in with Vereinscloud"

View file

@ -17,7 +17,7 @@ msgid "Actions"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:77
#: lib/mv_web/live/user_live/index.html.heex:69
#: lib/mv_web/live/user_live/index.html.heex:65
#, elixir-autogen, elixir-format
msgid "Are you sure?"
msgstr ""
@ -36,14 +36,14 @@ msgid "City"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:79
#: lib/mv_web/live/user_live/index.html.heex:71
#: lib/mv_web/live/user_live/index.html.heex:67
#, elixir-autogen, elixir-format
msgid "Delete"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:71
#: lib/mv_web/live/user_live/form.ex:109
#: lib/mv_web/live/user_live/index.html.heex:63
#: lib/mv_web/live/user_live/index.html.heex:59
#, elixir-autogen, elixir-format
msgid "Edit"
msgstr ""
@ -58,7 +58,7 @@ msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:58
#: lib/mv_web/live/member_live/show.ex:27
#: lib/mv_web/live/user_live/form.ex:14
#: lib/mv_web/live/user_live/index.html.heex:48
#: lib/mv_web/live/user_live/index.html.heex:44
#: lib/mv_web/live/user_live/show.ex:24
#, elixir-autogen, elixir-format
msgid "Email"
@ -89,7 +89,7 @@ msgid "New Member"
msgstr ""
#: lib/mv_web/live/member_live/index.html.heex:68
#: lib/mv_web/live/user_live/index.html.heex:60
#: lib/mv_web/live/user_live/index.html.heex:56
#, elixir-autogen, elixir-format
msgid "Show"
msgstr ""
@ -352,7 +352,7 @@ msgstr ""
msgid "Note"
msgstr ""
#: lib/mv_web/live/user_live/index.html.heex:56
#: lib/mv_web/live/user_live/index.html.heex:52
#: lib/mv_web/live/user_live/show.ex:25
#, elixir-autogen, elixir-format
msgid "OIDC ID"
@ -534,12 +534,12 @@ msgstr "Password"
msgid "Password requirements"
msgstr "Password requirements"
#: lib/mv_web/live/user_live/index.html.heex:25
#: lib/mv_web/live/user_live/index.html.heex:21
#, elixir-autogen, elixir-format, fuzzy
msgid "Select all users"
msgstr ""
#: lib/mv_web/live/user_live/index.html.heex:39
#: lib/mv_web/live/user_live/index.html.heex:35
#, elixir-autogen, elixir-format, fuzzy
msgid "Select user"
msgstr ""
@ -553,3 +553,8 @@ msgstr "Set Password"
#, elixir-autogen, elixir-format
msgid "User will be created without a password. Check 'Set Password' to add one."
msgstr "User will be created without a password. Check 'Set Password' to add one."
#: lib/mv_web/auth_overrides.ex:30
#, elixir-autogen, elixir-format
msgid "or"
msgstr ""