[4.0] Webauth inline SVG button with fill

administrator/modules/mod_login/tmpl/default.php

@@ -12,6 +12,7 @@
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Router\Route;
+use Joomla\CMS\Filesystem\File;
 
 /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
 $wa = $app->getDocument()->getWebAssetManager();
@@ -116,6 +117,8 @@ class="btn btn-secondary btn-block mt-4 <?php echo $button['class'] ?? '' ?>"
 					<?php echo HTMLHelper::_('image', $button['image'], Text::_($button['tooltip'] ?? ''), [
 						'class' => 'icon',
 					], true) ?>
+				<?php elseif (!empty($button['svg'])): ?>
+					<?php echo $button['svg']; ?>
 				<?php endif; ?>
 				<?php echo Text::_($button['label']) ?>
 			</button>

administrator/templates/atum/scss/blocks/_login.scss

@@ -65,6 +65,10 @@
     }
   }
 
+  .plg_system_webauthn_login_button svg path {
+    fill: $white;
+  }
+
   .form-group {
     label {
       span {

libraries/src/HTML/Helpers/Icons.php

@@ -13,6 +13,7 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Uri\Uri;
 
 /**
  * Utility class for icons.
@@ -88,4 +89,27 @@ public static function button($button)
 
 		return $layout->render($button);
 	}
+
+	/**
+	 * Writes a inline '<svg>' element
+	 *
+	 * @param   string  $file       The relative or absolute PATH to use for the src attribute.
+	 * @param   boolean $relative   Flag if the path to the file is relative to the /media folder (and searches in template).
+	 *
+	 * @return  string
+	 *
+	 * @since   4.0
+	 */
+	public static function svg(string $file, $relative = false)
+	{
+
+		if ($relative == true)
+		{
+			$file = HTMLHelper::_('image', $file,  "", "", $relative, true);
+		}
+
+		$file = substr($file, \strlen(Uri::root(true)));
+
+		return file_get_contents(JPATH_ROOT . $file);
+	}
 }

libraries/src/Helper/AuthenticationHelper.php

@@ -150,6 +150,7 @@ public static function getLoginButtons(string $formId): array
 					'tooltip' => '',
 					'icon'    => '',
 					'image'   => '',
+					'svg'     => '',
 					'class'   => '',
 					'id'      => '',
 					'onclick' => '',
@@ -165,7 +166,7 @@ public static function getLoginButtons(string $formId): array
 						continue;
 					}
 
-					if (!in_array($key, ['label', 'tooltip', 'icon', 'image', 'class', 'id', 'onclick']))
+					if (!in_array($key, ['label', 'tooltip', 'icon', 'image', 'svg', 'class', 'id', 'onclick']))
 					{
 						unset($button[$key]);
 					}

modules/mod_login/tmpl/default.php

@@ -112,7 +112,7 @@
 			?>
 			<div class="mod-login__submit form-group">
 				<button type="button"
-				        class="btn btn-secondary <?php echo $button['class'] ?? '' ?>"
+				        class="btn btn-primary btn-block mt-4 <?php echo $button['class'] ?? '' ?>"
 						<?php foreach ($dataAttributeKeys as $key): ?>
 						<?php echo $key ?>="<?php echo $button[$key] ?>"
 						<?php endforeach; ?>
@@ -128,6 +128,8 @@ class="btn btn-secondary <?php echo $button['class'] ?? '' ?>"
 						<?php echo HTMLHelper::_('image', $button['image'], Text::_($button['tooltip'] ?? ''), [
 							'class' => 'icon',
 						], true) ?>
+					<?php elseif (!empty($button['svg'])): ?>
+						<?php echo $button['svg']; ?>
 					<?php endif; ?>
 					<?php echo Text::_($button['label']) ?>
 				</button>

plugins/system/webauthn/src/PluginTraits/AdditionalLoginButtons.php

@@ -15,6 +15,7 @@
 use Exception;
 use Joomla\CMS\Factory;
 use Joomla\CMS\Helper\AuthenticationHelper;
+use Joomla\CMS\HTML\HTMLHelper;
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Uri\Uri;
 use Joomla\CMS\User\UserHelper;
@@ -152,7 +153,7 @@ public function onUserLoginButtons(string $form): array
 				'id'                 => $randomId,
 				'data-webauthn-form' => $form,
 				'data-webauthn-url'  => $url,
-				'image'              => 'plg_system_webauthn/webauthn-white.svg',
+				'svg'                => HTMLHelper::_('icons.svg', "plg_system_webauthn/webauthn-black.svg", true),
 				'class'              => 'plg_system_webauthn_login_button',
 			],
 		];

templates/cassiopeia/scss/blocks/_icons.scss

@@ -17,3 +17,7 @@
     min-width: 16px;
   }
 }
+
+.plg_system_webauthn_login_button svg path {
+  fill: $white;
+}

templates/cassiopeia/scss/vendor/bootstrap/_buttons.scss

@@ -14,13 +14,13 @@
 }
 
 .btn-secondary {
-  color: $gray-800;
-  background-color: $white-offset;
+  color: $white-offset;
+  background-color: rgb(40, 73, 113);
   border-color: $gray-400;
 
   &:hover,
   &:focus {
-    color: $gray-800;
-    background-color: $gray-100;
+    color: $white-offset;
+    background-color: #004e72;
   }
 }