Personalizzare il modulo di login in Joomla 3 - seconda parte
(Vai alla prima parte dell'articolo.)
Prima di modificare il codice, è il caso di impostare alcune opzioni per il modulo con il layout alternativo. Considerato che si tratta di campi visualizzati sulla stessa riga, in modo compatto, non ha senso mostrare un messaggio primo o dopo i campi di testo, per cui lasciamo vuoti Testo prima del form e Testo dopo il form nelle opzioni del modulo di login. Una volta compreso il meccanismo per modificare il layout, potrete intervenire sul codice e sul CSS per impostare una visualizzazione adeguata dell'eventuale testo, se preferite.
Bene, ora passiamo finalmente alla modifica del codice. Ricordo che il file che modifichiamo ora è horizontal.php, che si trova nella cartella <%cartella Joomla 3%>\templates\protostar\html\mod_login.
Il primo passo è portare sulla stessa riga i campi di testo e il pulsante di invio del form.
Riporto di seguito il codice modificato. Sostituire tutto il codice tra <form action="<?php echo JRoute::_(htmlspecialchars(JUri::getInstance()->toString()), true, $params->get('usesecure')); ?>"method="post" id="login-form" class="form-inline"> (riga 18) e il relativo </form> di chiusura a fine file, compresi i tag form stessi, con quanto segue:
<form action="<?php echo JRoute::_(htmlspecialchars(JUri::getInstance()->toString()), true, $params->get('usesecure')); ?>" method="post" id="login-form" class="form-inline hidden-phone">
<?php if ($params->get('pretext')) : ?>
<div class="pretext">
<p><?php echo $params->get('pretext'); ?></p>
</div>
<?php endif; ?>
<div class="userdata text-right">
<span id="form-login-username" class="control-group">
<span class="controls">
<?php if (!$params->get('usetext')) : ?>
<span 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') ?>" />
</span>
<?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; ?>
</span>
</span>
<span id="form-login-password" class="control-group">
<span class="controls">
<?php if (!$params->get('usetext')) : ?>
<span 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') ?>" />
</span>
<?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; ?>
</span>
</span>
<?php if (count($twofactormethods) > 1): ?>
<span id="form-login-secretkey" class="control-group">
<span class="controls">
<?php if (!$params->get('usetext')) : ?>
<span 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 mr3" 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>
</span>
<?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 mr3" 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; ?>
</span>
</span>
<?php endif; ?>
<span id="form-login-submit" class="control-group">
<span class="controls">
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary"><?php echo JText::_('JLOGIN') ?></button>
</span>
</span>
</div>
<div class="text-right">
<?php
$usersConfig = JComponentHelper::getParams('com_users'); ?>
<ul class="inline mt3">
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<li id="form-login-remember" class="control-group checkbox vbottom">
<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"/>
</li>
<?php endif; ?>
<?php if ($usersConfig->get('allowUserRegistration')) : ?>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=registration&Itemid=' . UsersHelperRoute::getRegistrationRoute()); ?>">
<?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&Itemid=' . UsersHelperRoute::getRemindRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</li>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=reset&Itemid=' . UsersHelperRoute::getResetRoute()); ?>">
<?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>
Come vedete, il grosso delle modifiche sta nel raggruppare all'interno dello stesso <div> etichette, campi di testo e pulsante per l'invio del form, in modo che questi elementi siano organizzati su una stessa riga separati da <span>, e su una seconda riga i link Ricordami, Password dimenticata, etc.
Nella prima riga abbiamo quindi etichetta e campo per nome utente, password, password per autenticazione a due fattori se questa opzione è abilitata (la condizione per l'abilitazione è <?php if (count($twofactormethods) > 1): ?>, con la relativa chiusura <?php endif; ?>).
Il pulsante per l'help relativo all'autenticazione a due fattori quando presente è spaziato dal campo di input precedente aggiungendo a quest'ultimo la classe mr3, inserita modificando il file CSS del template protostar.
Ho inoltre modificato la classe del <div> iniziale dei controlli del form (<div class="userdata text-right">) per allineare a destra il gruppo dei pulsanti; la stessa classe text-right è stata aggiunta al gruppo link/casella di controllo "Ricordami" (<div class="text-right">).
<ul class="inline mt3">).Più oltre spiego brevemente come e dove aggiungere queste classi. Notare che la classe text-right è nativa del sistema.
Quando si abilita la vista delle etichette come testo (codice tra le righe <?php else: ?> ed il relativo <?php endif; ?>) ho di nuovo raggruppato quanto serviva, semplicemente affiancando etichette e campi.
Personalmente, preferisco non visualizzare il campo Ricordami nè i link per recuperare password e/o nome utente. Questi ultimi si possono visualizzare nella pagina cui si accede in caso di dati errati, mostrandoli così solo se necessario. L'unico link che è il caso di lasciare è quello per la registrazione, se consentita (su questo sito NON è consentita).
Comunque, in questo esempio ho lasciato tutto visibile per completezza.
Se avete fatto tutto correttamente, il risultato finale è quello visibile nell'immagine:
Nella figura è visibile il modulo di login con il nuovo layout; sono abilitate l'autenticazione a due fattori, il Ricordami, la registrazione di nuovi utenti e la visualizzazione dei link per nome utente/password dimenticati.
Logout
Ho tralasciato fino ad ora il modulo di logout. Senza alcuna modifica, la situazione attuale è quella in figura:
Decisamente meglio visualizzare il testo Ciao Test alla sinistra del pulsante.
La modifica è semplice. Si deve aprire il file horizontal_logout.php, che si trova nella cartella <%cartella Joomla 3%>\templates\protostar\html\mod_login, e modificarlo come di seguito:
<form action="<?php echo JRoute::_(htmlspecialchars(JUri::getInstance()->toString()), true, $params->get('usesecure')); ?>" method="post" id="login-form" class="form-vertical">
<?php if ($params->get('greeting')) : ?>
<span class="login-greeting">
<?php if ($params->get('name') == 0) : {
echo JText::sprintf('MOD_LOGIN_HINAME', htmlspecialchars($user->get('name')));
} else : {
echo JText::sprintf('MOD_LOGIN_HINAME', htmlspecialchars($user->get('username')));
} endif; ?>
</span>
<?php endif; ?>
<span class="logout-button">
<input type="submit" name="Submit" class="btn btn-primary" value="<?php echo JText::_('JLOGOUT'); ?>" />
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.logout" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHtml::_('form.token'); ?>
</span>
</form>
Fatto. Ora il testo, visibile se Mostra saluto nel modulo è abilitato, è allineato al pulsante.
CSS
Per aggiungere le classi CSS cui ho fatto riferimento, si deve modificare il file template.css che si trova in
<%cartella Joomla 3%>\templates\protostar\css
Aprirlo con un editor di testo e aggiungere al termine le seguenti righe:
.mt3 {
margin-top: 3px;
}
.mr3 {
margin-right: 3px;
}
Come vedete, ho modificato il CSS nativo del template protostar, cosa che sarebbe bene evitare: in caso di aggiornamento del template la modifica va persa. L'ho fatto per semplicità visto che l'override degli stili CSS nel template protostar si basa su una tecnica non immediata, che richiede di usare LESS, per ora preferisco evitarlo per non appesantire eccessivamente l'articolo.
Dispositivi mobili
Non vi sarà sfuggita la strana classe aggiunta alla riga iniziale del form: hidden-phone. Se provate a ridimensionare orizzontalmente la finestra del browser nel vostro sito con il login modificato, vedrete che ad un certo punto i campi di input spariscono. Eliminate questa classe dal codice e riprovate: i campi di input rimangono visibili e soprattutto restano orizzontali, rovinando il layout.
La classe hidden-phone, come avete intuito, serve proprio a evitare questo comportamento, nascondendo il modulo di login su dispositivi mobili.
La domanda successiva è: da dove salta fuori? Beh date un'occhiata al file
<%cartella Joomla 3%>\templates\protostar\css\template.css
(fate una ricerca del testo hidden-phone). Troverete questa ed altre utili classi che gestiscono il comportamento del layout a seconda delle dimensioni dello schermo.
Rimane ancora un piccolo problema. Il modulo di login non è più visibile sugli smartphone. La soluzione è semplice: dobbiamo aggiungere un secondo modulo di login che visualizzeremo solo sui dispositivi mobili. Considerato il tipo di schermo, dobbiamo mantenere un layout verticale per i campi di input ed il pulsante. Procediamo in questo modo:
- Clic su Estensioni - Moduli, quindi clic su Nuovo;
- Selezionare Login e assegnare un nome al modulo appena creato, impostando le opzioni desiderate;
- Assegnare una posizione al modulo; selezionare ad esempio la posizione Navigation [position-1] tra quelle disponibili sotto Protostar. In questo modo il modulo di login sarà visibile solo quando si espande il pulsante corrispondente al menu principale.
Clic su Avanzate: in Suffisso classe CSS modulo scriviamo 'hidden-desktop hidden-tablet', senza virgolette.
Sappiamo già dove si trovano queste classi, il cui scopo è abbastanza ovvio: nascondere questo modulo su desktop e tablet.
- Clic su Stile del modulo: selezioniamo well
- Salviamo il modulo
Ora proviamo a ridimensionare orizzontalmente la finestra del browser. Se tutto è stato fatto correttamente, il modulo di login orizzontale dovrebbe scomparire quando la finestra ha il corretto rapporto altezza-larghezza; in questa configurazione il menu principale scompare allo stesso modo, per aprirsi con un pulsante. Facendo clic su questo, appare anche il modulo di login con i campi disposti verticalmente.
Una nota. I più attenti si chiederanno perchè non ho usato la stessa tecnica del Suffisso classe CSS modulo anche sul modulo di login personalizzato, invece di aggiungere la classe hidden-phone nel codice. Tra l'altro, sarebbe formalmente preferibile. Semplice: ho voluto mostrare due modi differenti per ottenere lo stesso risultato, cosa che ritengo sempre utile per approfondire la conoscenza del sistema.
Altro
Ho volutamente tralasciato la personalizzazione del testo introduttivo e conclusivo che è possibile aggiungere prima e dopo i campi del modulo: si tratta dei parametri Testo prima del form e Testo dopo il form. Non mi pare molto elegante aggiungerlo quando la visualizzazione dei campi è orizzontale, come ho anticipato all'inizio dell'articolo. Ma i gusti sono gusti: se volete aggiungerlo, nessun problema. Nell'esempio di questo articolo, troverete che il testo introduttivo e finale occupa due righe, prima e dopo i campi. A voi il piacere di modificare il codice per portarlo in linea.
Conclusione
Provate il template dopo queste modifiche, cambiandone i parametri a piacimento: visualizzate etichette di testo o icone a fianco dei campi di input, passate da layout statico a fluido, etc.
Provate tutto, tranne una cosa: NON ABILITATE L'AUTENTICAZIONE A DUE FATTORI SE NON LA CONOSCETE A FONDO.. Correte il rischio di non potere più accedere all'amministrazione del sito.
Infine, concludo ricordando che non posso escludere imprecisioni ed errori: non si tratta di un argomento così banale, e qualcosa può essermi sfuggito, per imprecisione o ignoranza. Spero in questo caso che vorrete segnalarmi gli uni e gli altri.
Ricordo nuovamente che queste modifiche sono valide per la versione 3.4.8 di Joomla e la versione 1.0.0 del template protostar. In ogni caso, la tecnica di base non cambia e si possono facilmente adattare ad altri template.
Tags: Joomla, Override, Personalizzare template, PHP