Login with picture
- :
mod_login
Cet article vous a plu ?
(0)
Live demo
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_login
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
JLoader::register('UsersHelperRoute', JPATH_SITE . '/components/com_users/helpers/route.php');
JHtml::_('behavior.keepalive');
JHtml::_('bootstrap.tooltip');
?>
<div class="register-photo">
<div class="form-container">
<div class="image-holder"></div>
<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure', 0)); ?>" method="post" id="login-form" class="form-inline">
<?php if ($params->get('pretext')) : ?>
<div class="pretext">
<p><?php echo $params->get('pretext'); ?></p>
</div>
<?php endif; ?>
<div class="userdata">
<div id="form-login-username" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext', 0)) : ?>
<div class="input-prepend">
<span class="add-on">
<span class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>"></span>
<label for="modlgn-username" class="element-invisible"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
</span>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>" />
</div>
<?php else : ?>
<label for="modlgn-username"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>" />
<?php endif; ?>
</div>
</div>
<div id="form-login-password" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext', 0)) : ?>
<div class="input-prepend">
<span class="add-on">
<span class="icon-lock hasTooltip" title="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>">
</span>
<label for="modlgn-passwd" class="element-invisible"><?php echo JText::_('JGLOBAL_PASSWORD'); ?>
</label>
</span>
<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>" />
</div>
<?php else : ?>
<label for="modlgn-passwd"><?php echo JText::_('JGLOBAL_PASSWORD'); ?></label>
<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>" />
<?php endif; ?>
</div>
</div>
<?php if (count($twofactormethods) > 1) : ?>
<div id="form-login-secretkey" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext', 0)) : ?>
<div class="input-prepend input-append">
<span class="add-on">
<span class="icon-star hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>">
</span>
<label for="modlgn-secretkey" class="element-invisible"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?>
</label>
</span>
<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>" />
<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
<span class="icon-help"></span>
</span>
</div>
<?php else : ?>
<label for="modlgn-secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?></label>
<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>" />
<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
<span class="icon-help"></span>
</span>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<div id="form-login-remember" class="control-group checkbox">
<label for="modlgn-remember" class="control-label"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME'); ?></label> <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
</div>
<?php endif; ?>
<div id="form-login-submit" class="control-group">
<div class="controls">
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary btn-block login-button"><?php echo JText::_('JLOGIN'); ?></button>
</div>
</div>
<?php
$usersConfig = JComponentHelper::getParams('com_users'); ?>
<ul class="unstyled">
<?php if ($usersConfig->get('allowUserRegistration')) : ?>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
<?php echo JText::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-arrow-right"></span></a>
</li>
<?php endif; ?>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=remind'); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</li>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
</li>
</ul>
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.login" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
<?php if ($params->get('posttext')) : ?>
<div class="posttext">
<p><?php echo $params->get('posttext'); ?></p>
</div>
<?php endif; ?>
</form>
</div>
</div>
CSS
.register-photo {
background:#f1f7fc;
padding:80px 0;
}
.register-photo .image-holder {
display:table-cell;
width:auto;
background:url(../../../images/overrides/meeting.jpg);
background-size:cover;
}
.register-photo .form-container {
display:table;
max-width:900px;
width:90%;
margin:0 auto;
box-shadow:1px 1px 5px rgba(0,0,0,0.1);
}
.register-photo form {
display:table-cell;
width:400px;
background-color:#ffffff;
padding:40px 60px;
color:#505e6c;
}
@media (max-width:991px) {
.register-photo form {
padding:40px;
}
}
.register-photo form h2 {
font-size:24px;
line-height:1.5;
margin-bottom:30px;
}
.register-photo form .form-control {
background:#f7f9fc;
border:none;
border-bottom:1px solid #dfe7f1;
border-radius:0;
box-shadow:none;
outline:none;
color:inherit;
text-indent:6px;
height:40px;
}
.register-photo form .form-check {
font-size:13px;
line-height:20px;
}
.register-photo form .btn-primary {
background:#f4476b;
border:none;
border-radius:4px;
padding:11px;
box-shadow:none;
margin-top:35px;
text-shadow:none;
outline:none !important;
}
.register-photo form .btn-primary:hover, .register-photo form .btn-primary:active {
background:#eb3b60;
}
.register-photo form .btn-primary:active {
transform:translateY(1px);
}
.register-photo form .already {
display:block;
text-align:center;
font-size:12px;
color:#6f7a85;
opacity:0.9;
text-decoration:none;
}
A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.
