@coolcat-creations I've allowed myself to fix the markdown formatting of the description so the headings for actual and expected result are shown as expected in our PR template, and the check boxes for documentation are right.

@coolcat-creations I've allowed myself to fix the markdown formatting of the description so the headings for actual and expected result are shown as expected in our PR template, and the check boxes for documentation are right.

Thank you for your help, Richard!

I have tested this item 🔴 unsuccessfully on 52e7bff

Didn't see anything about passwordless login on the admin login screen.

System plugin for passwordless login was enabled.

BTW: I couldn't see the language switcher with the prebuild package because the language pack for i.e. German does not yet exist.

That's odd - for me it works. Did you test then with English? Are you sure the "Passkey" Plugin is enabled?

I used the prebuilt package. And I have verified that the plugin for the Passkey (~ passwordless) Login was enabled.

@dautrich And you have once edited your user and registered your passkey like described here? https://docs.joomla.org/WebAuthn_Passwordless_Login

Regarding other language than English for 5.3 so you have multi language: You can download a language pack for 5.1 (or 5.2 soon) and install it with the normal extensions installer.

@richard67 That hasn't been the problem. I'm on localhost and use Laragon. The issue was that I wasn't under https://. Now I've convinced Laragon to allow https:// and I can see the login:

@dautrich Yes, passkey requires https. Maybe you ran into this issue #44208 but haven't seen the error message because debug not enabled and/or error reporting not on maximum?

@richard67 Next issue: Tried to download a German language pack from joomla.org, but only see a white screen with the word "Error".

@dautrich Download from https://downloads.joomla.org/language-packs/translations-joomla5/downloads/joomla5-german/5-1-4-1 works.

@richard67 Next issue: Tried to download a German language pack from joomla.org, but only see a white screen with the word "Error".

@dautrich Works for me, https://downloads.joomla.org/language-packs/translations-joomla5/downloads/joomla5-german/5-1-4-1 .

Re-Arranging the screen is a great idea. But do we relly need the Text "login with your username and password"? What else could the user expect on a login screen?

@richard67 Has been a hickup on the joomla.org website, obviously.

Things are improving after I installed a German language pack and set German as the default language for frontend, backend, and content:

Two remarks:

1. There is an unnecessary language string (marked in red).
2. I agree with @chmst that the text is redundant (marked in green).

For 1.: There is a class "visually-hidden" missing in the legend of the fieldset. If inserted, it looks like this:

Using keyboard navigation (tab key), the language selection is barely unreachable. By default, focus is on the username field, and you have to tab through all available elements (including the browser header), before you finally reach the language selector.
Would be better to give this field the initial focus.

Using keyboard navigation (tab key), the language selection is barely unreachable. By default, focus is on the username field, and you have to tab through all available elements (including the browser header), before you finally reach the language selector. Would be better to give this field the initial focus.

thats no different to the current behaviour

Re-Arranging the screen is a great idea. But do we relly need the Text "login with your username and password"? What else could the user expect on a login screen?

The first option is username and password and the other option has the headline: Or
I think if we say be, we have to say A ? What do you think ?

About the language and the focus - I wonder if we should do a second PR where the language actually changes by changing this dropdown? Because it does not and if you don't understand "Sign in with a pass key" in Chinese the dropdown is not really helpful.

The first option is username and password and the other option has the headline: Or I think if we say be, we have to say A ? What do you think ?

I'm with @chmst : Why should we need "Log in with your username and password", when immediately below there is a form asking for username and password? We could safely omit this line (which eliminates the task to translate the sentence as well).

We would end up like this:

About the language and the focus - I wonder if we should do a second PR where the language actually changes by changing this dropdown? Because it does not and if you don't understand "Sign in with a pass key" in Chinese the dropdown is not really helpful.

Maybe you're right. If you want to avoid a second PR, you might consider using something like a horizontal ruler instead of the "OR".

But the "OR" is intentional...

Doesn't fit very well to German.

Why ? My screenshots are all German and show exactly this just a HR is not enough

The first option is username and password and the other option has the headline: Or
I think if we say be, we have to say A ? What do you think ?

Correct. But as a user I don't see that these text fragments form one sentence. Suppose you are blind then the screenreander reads the first part of the sentence .. the labels, announces the input field .. then says "or" ...

What, if we start with a complete sentence: "Login with username and password or with a passkey" - then the two clearly separated blocks?

At the moment I have no good testing environment - can someone listen to the screenreader?

Why ? My screenshots are all German and show exactly this just a HR is not enough

My screenshot above is German as well, but it shows "OR", which obviously is not correct in German.

Why ? My screenshots are all German and show exactly this just a HR is not enough

My screenshot above is German as well, but it shows "OR", which obviously is not correct in German.

@dautrich A new language string added by this PR to the English file can't be available in the German translation yet :-) https://github.com/joomla/joomla-cms/pull/44228/files#diff-749c19a3bc27785f12905b9c65fe7600eedf704f0bb0093fbf838b266713fa29R11

@coolcat-creations Have you checked if there isn't already a global language string for "OR" (or "Or" or "or") which we could use here instead of creating a new string?

@coolcat-creations Have you checked if there isn't already a global language string for "OR" (or "Or" or "or") which we could use here instead of creating a new string?

There isnt and its not a good idea to add one for the reasons stated above by @chmst

@coolcat-creations Have you checked if there isn't already a global language string for "OR" (or "Or" or "or") which we could use here instead of creating a new string?

There isnt and its not a good idea to add one for the reasons stated above by @chmst

I thought maybe someone wants to override it with something else than or, it's not possible when I take the general "OR"
Otherwise all OR will be replaced with "or use one of these methods" 😅

@coolcat-creations I think this could be improved:

this text could be inside the field, as @google did with its login page (and many other services):

That actually not so good UX if in the moment you click in the Field the label disappears

@coolcat-creations also I think the or could be between the two lines (not above the lines) as done by Amazon and in your examples above:

That actually not so good UX if in the moment you click in the Field the label disappears

this is how it works, it's very convenient, you can check it by opening a new tab in private mode:
https://accounts.google.com/ServiceLogin

That actually not so good UX if in the moment you click in the Field the label disappears

this is how it works, it's very convenient, you can check it by opening a new tab in private mode:

https://accounts.google.com/ServiceLogin

Yes but changing all Inputs/ Labels are not scope of this PR, if I do it here I would need to do it everywhere.

Yes but changing all Inputs/ Labels are not scope of this PR, if I do it here I would need to do it everywhere.

there's still a lot of time until version 5.3, I think it's worth it to make the login form better.

When you work on new login form, please make sure, that it is accessible for all. WCAG 2.2

Yes but changing all Inputs/ Labels are not scope of this PR, if I do it here I would need to do it everywhere.

there's still a lot of time until version 5.3, I think it's worth it to make the login form better.

Yes but changing Input Fields in Joomla is a bigger scope, it can't be part of this PR

When you work on new login form, please make sure, that it is accessible for all. WCAG 2.2

Was this directed to me ?

It was for @universewrld.
@coolcat-creations I agree with you that it is not in scope of this PR. Re-arranging the fields is an improvement and enough.

@dautrich how do you get the screen at #44228 (comment)?

There is always shown the Constant like in your #44228 (comment):

@coolcat-creations thanks for your work, looks very nice.
Please keep language field as it was, after the username and password field.
It is an optional input, it should not be first on the page.

@Fedik ok,but it should also not be between two alternate sign in options. Then I put it at the very end?

Then I put it at the very end?

Not sure, but can try. We probably could even make it "hiddable" somehow, but that another topic 😃
My concern (currently) that it should not be the first input that User will see 😉

@fgsw It's a mockup. I installed locally and modified administrator/modules/mod_login/tmpl/default.php. I added a 'class="visually-hidden"' to line 31 and deleted line 42.

@Fedik ok,but it should also not be between two alternate sign in options. Then I put it at the very end?

Maybe yes, but it should somehow be obvious that the language selection belongs to both login options.

Info Please fill in this field is shown partiell above "Log in"-Button:

Beside the 2 mentioned Issues i found no more.

Test as Instructions say but not screen reader. Looked at Desktop, iPad, iPhone; Light/Dark mode; RTL-Language (Farsi).

@dautrich Can you reset your test result to "Not tested" so it not count als failed.

I have tested this item ✅ successfully on 52e7bff

I tested with different viewport sizes (desktop, tablet, smartphone) and using keyboard. No further issues.

I have tested this item 🔴 unsuccessfully on 52e7bff

Passkey is enabled but still passkey is not available in the login page. And Language dropdown is not available at the top.

This pull request has been automatically rebased to 6.0-dev.

This pull request has been automatically rebased to 6.1-dev.

I have tested this item ✅ successfully on 52e7bff

@coolcat-creations could you fix the issues that are open?

@RickR2H not sure what the issues were? The project is so old. Should we start from scratch?

Started branch update as there is no full package existing for testing and with gh pr checkout 44228 the result is a Joomla! version 5.3.0-alpha1-dev

Started branch update as there is no full package existing for testing and with gh pr checkout 44228 the result is a Joomla! version 5.3.0-alpha1-dev

@muhme Then please restore @RickR2H 's test result in the issue tracker.

@muhme Then please restore @RickR2H 's test result in the issue tracker.

Restored test result

@coolcat-creations @ThomasFinnern and I started to test this PR from full PR package installation.

• Installed German language from zip packet and 'Multilingual Sample Data' data
• Set passkey for user
• See screen shot

• Is variable MOD_LOGIN_CHOSE_LANGUAGE missing in language strings?
• For me the result may look not that clear, as
  • The legend 'Log in with your username and password' with the same font size as the field labels and the centering looks somehow not in line
  • Needs the language selection a legend as we have already the field label and it is only one field?
  • Perhaps we should have the same horizontal line below language selection?
  • For sign in with a passkey the Username is needed, for me this is visual not clear.
  • Is 'Login in' and 'Sign in' not equivalent and to clarify better to use one, e.g. 'Log in with a password' and 'Log in with a passkey'?

Overall, I’m not sure it feels more user-friendly to me at this stage — though that’s very subjective, and I’m not an end user. Others may well see this differently or have ideas I haven’t considered yet?

That PR is more than 2 Years old, I am very happy you tested it! I will review everything and improve it.

@coolcat-creations for two years testers have been reporting missing language strings (and other things) that you have not addressed so far - thats why the pr has just sat here

@muhme @ThomasFinnern and @brianteeman thank you! I changed the complete PR to a more logical pattern now.
First the Username and then the decision if password or Passkey. If the Passkey plugin is disabled the full form is shown. I tested it with and without Passkey and with and without MFA and it seems to work well. Hope you find some time to test.

I have tested this item 🔴 unsuccessfully on 6f14f4e

I have tested this item ❌ unsuccessfully on 6f14f4e

Issues found:

• Missing language string: MOD_LOGIN_CHOSE_LANGUAGE displays as raw key instead of translated text
• Username + password legend font size and centering appears inconsistent with field labels
• UX clarity issue: It's not visually clear that username is required for passkey authentication
• Inconsistent terminology: "Log in" vs "Sign in" used interchangeably

The two-step login flow concept works, but the above issues need to be addressed before this can be merged.

I am confused as it works on my side I will recheck it.

@PranavAgarkar07 can you retest? I cannot reproduce what you wrote

I have tested this item ✅ successfully on a60fb65

I was able to successfully test ALL of the Tests successfully! Great improvement! Thank you for the persistence!

I have tested this item ✅ successfully on 714c339

I successfully finished all test steps without any issues. Installed three additional languages (de, fr, it). Tested in desktop and smartphone modes.
Excellent solution!!!

My admins do not like this solution. It is one click more to login.

The behaviour is confusing if there are errors in input.
Enter a username and "continue with password". Enter a wrong password. It redirects to login and the username is removed.
Or don't enter a username - then the old login with error message appears.
It is not predictable which redirect works in which combination of wrong input.

@chmst do you have an idea how to rearrange it so that the current state (before PR) is not confusing? In the current state login with passkey is not clear enough and confuses admins. I used a common pattern for this PR.

My customers are not so familiar with modern technologies - but they will get used to an extra click..

I could imagine two separate boxes on the login screen. One with username -password - login button
and
one with username and passkey button.

More important is the inconsistency when there is an error in input.

My customers are not so familiar with modern technologies - but they will get used to an extra click..

I could imagine two separate boxes on the login screen. One with username -password - login button and one with username and passkey button.

More important is the inconsistency when there is an error in input.

I tested my PR with failed password and wrong/aborted passkey and I am redirected to the first view where username has to be added. Thats also the current behaviour in the latest version. Wrong password resets both fields.

Extra click is big "no no" from me too 😉
It will slow down my day to day work.

Need to think something better.

As an idea.

Show the button on initial visit.
But remember last choice for following visits with possibility to change last choice.

Maybe we should skip this pr until we find someone who implement Discoverable Credentials for passkeys then we don't need a username anymore.