chg: [ui:keycloak] Nice login and logged-in UI

src/View/Helper/SocialProviderHelper.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\View\Helper;
+
+use Cake\View\Helper;
+use Cake\Utility\Hash;
+
+class SocialProviderHelper extends Helper
+{
+    public $helpers = ['Bootstrap'];
+
+    private $providerImageMapping = [
+        'keycloak' => '/img/keycloak_logo.png',
+    ];
+
+    public function getIcon($identity)
+    {
+        if (!empty($identity['social_profile'])) {
+            $provider = $identity['social_profile']['provider'];
+            if (!empty($this->providerImageMapping[$provider])) {
+                return $this->genImage($this->providerImageMapping[$provider], h($provider));
+            }
+        }
+        return '';
+    }
+
+    private function genImage($url, $alt)
+    {
+        return $this->Bootstrap->genNode('img', [
+            'src' => $url,
+            'class' => ['img-fluid'],
+            'width' => '16',
+            'height' => '16',
+            'alt' => $alt,
+            'title' => __('Authentication provided by {0}', $alt),
+        ]);
+    }
+}

templates/Users/login.php

@@ -1,4 +1,6 @@
 <?php
+    use Cake\Core\Configure;
+
     echo $this->Html->image('logo-purple.png', ['alt' => 'CakePHP', 'class="form-signin"']);
     echo '<div class="form-signin">';
     $template = [
@@ -13,16 +15,31 @@
     echo $this->Form->control(__('Submit'), ['type' => 'submit', 'class' => 'btn btn-primary']);
     echo $this->Form->end();
     echo '</div>';
-    echo $this->Form->postLink(
-        'Login with Keycloak',
-        [
-            'prefix' => false,
-            'plugin' => 'ADmad/SocialAuth',
-            'controller' => 'Auth',
-            'action' => 'login',
-            'provider' => 'keycloak',
-            '?' => ['redirect' => $this->request->getQuery('redirect')]
-        ]
-    );
+
+    if (!empty(Configure::read('keycloak'))) {
+        echo '<div class="form-signin pt-0">';
+        echo $this->Form->create(null, [
+            'url' => Cake\Routing\Router::url([
+                'prefix' => false,
+                'plugin' => 'ADmad/SocialAuth',
+                'controller' => 'Auth',
+                'action' => 'login',
+                'provider' => 'keycloak',
+                '?' => ['redirect' => $this->request->getQuery('redirect')]
+            ]),
+        ]);
+        echo $this->Bootstrap->button([
+            'type' => 'submit',
+            'text' => __('Login with Keycloak'),
+            'variant' => 'secondary',
+            'class' => ['d-block', 'w-100'],
+            'image' => [
+                'path' => '/img/keycloak_logo.png',
+                'alt' => 'Keycloak'
+            ]
+        ]);
+        echo $this->Form->end();
+        echo '</div>';
+    }
 ?>
 </div>

templates/element/layouts/header/header-profile.php

@@ -1,4 +1,5 @@
 <?php
+
 use Cake\Routing\Router;
 ?>
 <div class="btn-group">
@@ -6,7 +7,14 @@ use Cake\Routing\Router;
         <i class="<?= $this->FontAwesome->getClass('user-circle') ?> fa-lg"></i>
     </a>
     <div class="dropdown-menu dropdown-menu-end">
-        <h6 class="dropdown-header"><?= h($this->request->getAttribute('identity')['username']) ?></h6>
+        <h6 class="dropdown-header">
+            <div class="fw-light"><?= __('Loggin in as') ?></div>
+            <div>
+                <?= $this->SocialProvider->getIcon($this->request->getAttribute('identity')) ?>
+                <strong><?= h($this->request->getAttribute('identity')['username']) ?></strong>
+            </div>
+        </h6>
+        <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'view', 'plugin' => null]) ?>">
             <i class="me-1 <?= $this->FontAwesome->getClass('user-circle') ?>"></i>
             <?= __('My Account') ?>
@@ -16,7 +24,7 @@ use Cake\Routing\Router;
             <?= __('Settings') ?>
         </a>
         <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'logout', 'plugin' => null]) ?>">
+        <a class="dropdown-item dropdown-item-outline-danger" href="<?= Router::url(['controller' => 'users', 'action' => 'logout', 'plugin' => null]) ?>">
             <i class="me-1 <?= $this->FontAwesome->getClass('sign-out-alt') ?>"></i>
             <?= __('Logout') ?>
         </a>