Surely the color of the button should reflect the template button color and not be a darker blue ?

Surely the color of the button should reflect the template button color and not be a darker blue ?

thats kinda what I thought but I don't think they've gotten that far. It's (btn-secondary) is gray on white in cassiopeia right now.
I suppose I could change it to btn-primary.. hopefully one of the cassiopeia folks will chime in.

Pull Request for Issue # 31166

Please # 31166 => #31166 for linking

Maybe use a different image?

@PhilETaylor is right -

Maybe use a different image?

plugin only supports a single image.

done

Just an FYI, you can inherit the button text colour: https://jsfiddle.net/Ln9xrzfo

Just an FYI, you can inherit the button text colour: https://jsfiddle.net/Ln9xrzfo

only works with inline svg ?

Why not use inline SVG then?

tbh, cause I don't know how I would do so in the plugin

tbh, cause I don't know how I would do so in the plugin

Try this:

protected $app;

public function onUserLoginButtons(string $form): array
{
	if ($this->app->isClient('administrator'))
	{
		$image = 'plg_system_webauthn/webauthn-white.svg'; // backend
	}
	else
	{
		$image = 'plg_system_webauthn/webauthn-color.png'; // site
	}		

	return [
		[
			....
			....
			'image' => $image,
			....
		],
	];

[EDIT] Oops, I thought, you would use a white button at the frontend.

To use inline svg in that case, see
#31098

targetting the svg with css let's define the color using a variable

for the vote plugin is used for example:

.content_rating .vote-star svg {
	width: 1em;
	height: 1em;
	fill: #fd7e14;
}

For Cassiopea, can be
$white-offset: #fefefe;

i.e.

.whateverclass svg {
...
...
fill: $white-offset;
}

3rd party templates would just have to modify their css to fit their needs.

NOW WORKS AS SVG INLINE! YAY ME!

Removing path check is not enough. As @SharkyKZ wrote ( #31190 (comment) ), when using JPATH_ROOT . HTMLHelper::_('image', "plg_system_webauthn/webauthn-black.svg", "", "", true, true), it does not work

I get here as path

string(115) "/Applications/MAMP/htdocs/newfolder/joomla40/newfolder/joomla40/media/plg_system_webauthn/images/webauthn-black.svg"

which obvioulsy wrong.

Removing path check is not enough. As @SharkyKZ wrote ( #31190 (comment) ), when using JPATH_ROOT . HTMLHelper::_('image', "plg_system_webauthn/webauthn-black.svg", "", "", true, true), it does not work

I get here as path

string(115) "/Applications/MAMP/htdocs/newfolder/joomla40/newfolder/joomla40/media/plg_system_webauthn/images/webauthn-black.svg"

which obvioulsy wrong.

thats not at all what I get..
D:\Development\neard\www\j4/media/plg_system_webauthn/images/webauthn-black.svg

You are not getting this because your site is in root.
mine is in a sub-sub folder

ok ty.

@sandewt This might be useful to you. #31098

@Quy ty

All this work just for a silly icon - Im sorry :)

Can we just remove the icon?

I could find no official reference saying this was an official logo of the WebAuthn feature globally

In fact I found more uses of a Fingerprint logo than I did of this one when searching for WebAuthn logo references.

I don't think anyone coming to use Joomla with WebAuthn would instantly recognise the feature by its logo.

The only "official" source I could find was https://github.com/webauthn-open-source/webauthn-logos which sets out some dos and donts and I would say that adding this logo to a button with text next to it is part of the donts.

The SVG is not in that repo and therefore is not an officially provided logo?

Also it seems we need to seek permission to use them too... so using the images without permission it seems is not allowed.

All this work just for a silly icon - Im sorry :)

It's ok, and it is turning into something that will be useful for other svg's in core. So not a total waste of time.
Now if I can just remember everything I'm learning that would be even better ?

Even if it is decided to not use the logo, the code concerning loading a svg as file contents would be really useful. For example for the vote plugin PR.

@N6REJ
Please take off
use Joomla\CMS\Filesystem\File;

Also, please modify the svg as stated in #31190 (comment)

@infograf768 first thing in the morning ( 8hrs )

I have tested this item ✅ successfully on b90703e

Front End:

• Before: Button white on white, using image.
• After: Button rendered with primary colour and white icon, svg icon.

Administrator Login:

• WebAuthN logo now uses svg icon instead of image too.

Nice work @N6REJ - Look forward to seeing where else it can be used over time.

Can someone add a Documentation Required Label so someone can come back and write up an example in JDOCs.

As far as I remember @SharkyKZ had a comment about the use of $relative in the new method
public static function svg(string $file, $relative = false)

I have tested this item ✅ successfully on 8ef4846

Tested again following additional coding changes.
Expected result still appeared successfully.

I have tested this item ✅ successfully on 8ef4846

Last change had no impact on @particthistle test

RTC

@N6REJ Please solve conflicting file modules/mod_login/tmpl/default.php.

@N6REJ Please solve conflicting file modules/mod_login/tmpl/default.php.

done

please fix codestyle https://ci.joomla.org/joomla/joomla-cms/37340/1/6

I have tested this item ✅ successfully on 8ef4846

Additional test just to confirm latest updates are all correct.

Front End Button

SVG Code

Administrator Button
To repeat what @gostn had fail.

SVG Code

I have tested this item ✅ successfully on 8ef4846

Tested again following additional changes that had been made.

Only difference to my previous successful test was the front end button colours which had been changed in a later commit.

I have not tested this item.

Tested both front and back, both working as should

I have not tested this item.

Tested both front and back, both working as should

I have tested this item ✅ successfully on 8ef4846

Tested both front and back, both working as should

RTC

restarted drone

@N6REJ
I suggest to not add the class .plg_system_webauthn_login_button svg in template-rtl.scss in both atum and cassiopea but rather use the direction in icon.scss.

I mean doing this in _icon.scss

  // WebAuthn
  .plg_system_webauthn_login_button svg {
    [dir=ltr] & {
      margin-right: 2px;
    }
    
    [dir=rtl] & {
      margin-left: 2px;
    }
  }

I have tested this item ✅ successfully on 8ef4846

Tks.

@ infograf768 You've made a huge mistake merging this. The API is incomplete and extremely naive (talking about public static function svg(string $file, bool $relative = true): ?string)...

The API is incomplete and extremely naive (talking about public static function svg(string $file, bool $relative = true): ?string)...

@dgrammatiko Do you think it can be fixed/improved before the next beta, and if so, could you help with that?

Do you think it can be fixed/improved before the next beta, and if so, could you help with that?

I'll try to make a PR although pretty busy atm and I have already promised to provide some help in another sub-project from @bembelimen

This can be easily reverted if necessary.

@dgrammatiko nice... so I don't do it the way that you abandoned therefore my code is crap. Then you further admit "I'm pretty busy". So your just ragging on me without anything useful to contribute! How beneficial. You had 26 days to make it better!
.

@N6REJ you know what I'll take it back. Your API is perfect, as the rest of the Joomla. Bye.-

@dgrammatiko I seriously doubt it's perfect, It's functional. Your a good coder but for w/e reason you seem to have made it your lifes mission to trash everything I do WITHOUT giving feedback that is constructive and useful.
as @sandewt & @infograf768 can attest to, I've got no problem with folks saying, "Hey bear, can you fix this please it needs to do xyz cause of................" Thats HELPFUL. Saying I'm naive isn't!

@N6REJ Check your Glip. You've asked me for help and I provided it but you've completely ignored it. I'm not trashing you without reason: you've started this icons improvements without a plan and you just keep doing small things ignoring B/C or sustainability. If you had a concrete plan that could move the project forward I will back it but that's not what's happening.(how many PR's already for this one icon?)

@dgrammatiko I did as you asked and checked your work that you said wasn't the right way, and didn't understand the discussion. I don't TRY to ignore b/c or anything else. I may not think of it, or realize it & in the case of fa I was under the impression that with a major version change we were allowed to break b/c. I was told no, and why and that started a process to make things HOPEFULLY even better. @hans2103 & myself formed a team specifically for icons and together came up with the recent changes to iconclass that now ensure no 3rd party icons are broken. Was a huge task and ALOT of credit goes to hans.
If you'd like to join the "Bug Squad Icon Team" your perfectly welcome to.
As to doing small things, your 100% correct. Thats what I know how to do and often struggle with that. What takes you minutes takes me days. I won't go into details why but it does.

In this way, everyone contributes their own. Only together we are strong.