chg: [ui:keycloak] Nice login and logged-in UI
parent
04a0b7ef2a
commit
07a4ebfc92
src/View/Helper
templates
Users
element/layouts/header
webroot/img
|
@ -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),
|
||||
]);
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
Loading…
Reference in New Issue