chg: [layout:login] Improved layout
Sami Mokaddem
parent
4beb9a5e4d
commit
1c21090a9c
|
|
@ -1,44 +1,52 @@
|
|||
<?php
|
||||
use Cake\Core\Configure;
|
||||
|
||||
echo $this->Html->image('logo-purple.png', ['alt' => 'CakePHP', 'class="form-signin"']);
|
||||
echo '<div class="form-signin panel shadow">';
|
||||
$template = [
|
||||
'inputContainer' => '<div class="form-floating input {{type}}{{required}}">{{content}}</div>',
|
||||
'formGroup' => '{{input}}{{label}}',
|
||||
'submitContainer' => '<div class="submit d-grid">{{content}}</div>',
|
||||
];
|
||||
$this->Form->setTemplates($template);
|
||||
echo $this->Form->create(null, ['url' => ['controller' => 'users', 'action' => 'login']]);
|
||||
echo $this->Form->control('username', ['label' => 'Username', 'class' => 'form-control mb-2', 'placeholder' => __('Username')]);
|
||||
echo $this->Form->control('password', ['type' => 'password', 'label' => 'Password', 'class' => 'form-control mb-3', 'placeholder' => __('Password')]);
|
||||
echo $this->Form->control(__('Submit'), ['type' => 'submit', 'class' => 'btn btn-primary']);
|
||||
echo $this->Form->end();
|
||||
|
||||
if (!empty(Configure::read('keycloak'))) {
|
||||
echo sprintf('<div class="d-flex align-items-center my-3"><hr class="d-inline-block flex-grow-1"/><span class="mx-3 fw-light">%s</span><hr class="d-inline-block flex-grow-1"/></div>', __('Or'));
|
||||
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 '<div class="form-signin panel shadow position-absolute start-50 translate-middle">';
|
||||
echo sprintf(
|
||||
'<div class="text-center mb-4">%s</div>',
|
||||
$this->Html->image('logo-purple.png', [
|
||||
'alt' => __('Cerebrate logo'),
|
||||
'width' => 100, 'height' => 100,
|
||||
'style' => ['filter: drop-shadow(4px 4px 4px #924da666);']
|
||||
])
|
||||
);
|
||||
echo sprintf('<h4 class="text-uppercase fw-light mb-3">%s</h4>', __('Sign in'));
|
||||
$template = [
|
||||
'inputContainer' => '<div class="form-floating input {{type}}{{required}}">{{content}}</div>',
|
||||
'formGroup' => '{{input}}{{label}}',
|
||||
'submitContainer' => '<div class="submit d-grid">{{content}}</div>',
|
||||
];
|
||||
$this->Form->setTemplates($template);
|
||||
echo $this->Form->create(null, ['url' => ['controller' => 'users', 'action' => 'login']]);
|
||||
echo $this->Form->control('username', ['label' => 'Username', 'class' => 'form-control mb-2', 'placeholder' => __('Username')]);
|
||||
echo $this->Form->control('password', ['type' => 'password', 'label' => 'Password', 'class' => 'form-control mb-3', 'placeholder' => __('Password')]);
|
||||
echo $this->Form->control(__('Submit'), ['type' => 'submit', 'class' => 'btn btn-primary']);
|
||||
echo $this->Form->end();
|
||||
}
|
||||
|
||||
if (!empty(Configure::read('keycloak'))) {
|
||||
echo sprintf('<div class="d-flex align-items-center my-3"><hr class="d-inline-block flex-grow-1"/><span class="mx-3 fw-light">%s</span><hr class="d-inline-block flex-grow-1"/></div>', __('Or'));
|
||||
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>';
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
</title>
|
||||
<?= $this->Html->meta('icon') ?>
|
||||
<?php
|
||||
echo $this->Html->css('themes/bootstrap-' . $bsTheme);
|
||||
echo $this->Html->css('themes/theme-' . $bsTheme);
|
||||
echo $this->Html->css('themes/bootstrap-' . $bsTheme);
|
||||
echo $this->Html->css('themes/theme-' . $bsTheme);
|
||||
?>
|
||||
<?= $this->Html->css('login.css') ?>
|
||||
<?= $this->Html->css('main.css') ?>
|
||||
|
|
@ -26,7 +26,8 @@
|
|||
<?= $this->Html->meta('favicon.ico', '/img/favicon.ico', ['type' => 'icon']); ?>
|
||||
</head>
|
||||
|
||||
<body class="text-center">
|
||||
<body>
|
||||
<div class="position-absolute cerebrate-background-logo"></div>
|
||||
<?= $this->Flash->render() ?>
|
||||
<?= $this->fetch('content') ?>
|
||||
<div id="mainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true"></div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,32 @@
|
|||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
border-radius: 0.5rem;
|
||||
top: 40%;
|
||||
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 35%) !important
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F8F9FA;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(0,960,497)'%3E%3Cstop offset='0.6' stop-color='%23F8F9FA'/%3E%3Cstop offset='1' stop-color='%23D7B9DF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.05'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
/* background by SVGBackgrounds.com */
|
||||
}
|
||||
|
||||
.cerebrate-background-logo {
|
||||
background-color: var(--cerebrate-color);
|
||||
-webkit-mask: url(/img/icon-composition/z.svg) no-repeat;
|
||||
mask: url(/img/icon-composition/z.svg) no-repeat;
|
||||
-webkit-mask-size: 400px 400px;
|
||||
mask-size: 400px 400px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.15;
|
||||
-webkit-transform: rotate(100deg);
|
||||
transform: rotate(100deg);
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
left: 42%;
|
||||
top: 30%;
|
||||
}
|
||||
Loading…
Reference in New Issue