Customização Login Cliente

Convenhamos que os templates (.tpl) são uma mão na roda, é possível customizar o WHMCS em diversos aspectos. Semana passada estava navegando no site da Dell e percebi um recurso bem “curioso” e resolvi disponibilizar para o WHMCS, assista o vídeo.

Para alguns esse recurso seja algo bobo mas para algumas empresas que possuem clientes leigos pode fazer a diferença, na tela de login existe um caixa de marcação (checkbox) que permite alterar temporariamente a propriedade do campo “password” para texto. Assim o cliente conseguirá visualizar a senha e não o famoso “*******”.

Essa customização foi desenvolvida para o WHMCS v6 (template six) e utilizei a customização jQuery.

Caso esteja utilizando o WHMCS v7 ignore os passos e localize a atualização no final do post.

Edite o arquivo login.tpl (templates/six) e localize a linha 17:

<input type="password" name="password" class="form-control" 
id="inputPassword" placeholder="{$LANG.clientareapassword}">

E altere para:

<input type="password" id="password" name="password" 
class="form-control" id="inputPassword" 
placeholder="{$LANG.clientareapassword}">

Após a linha 24 insira:

<div class="checkbox">
    <label>
       <input type="checkbox" id="exibir" name="exibir" /> Exibir Senha
    </label>
</div>

Por fim acesse o arquivo whmcs.js (templates/six/js/) e na última linha do arquivo insira:

//Place this plugin snippet into another file in your applicationb
(function ($) {
 $.toggleShowPassword = function (options) {
 var settings = $.extend({
 field: "#password",
 control: "#toggle_show_password",
 }, options);

 var control = $(settings.control);
 var field = $(settings.field)

 control.bind('click', function () {
 if (control.is(':checked')) {
 field.attr('type', 'text');
 } else {
 field.attr('type', 'password');
 }
 })
 };
}(jQuery));

//Here how to call above plugin from everywhere in your application document body
$.toggleShowPassword({
 field: '#password',
 control: '#exibir'
});

Pronto, agora seu cliente poderá visualizar a senha enquanto é digitada.

Para facilitar estou disponibilizando os arquivos ( Exibir Senha  ) para WHMCS v6.3.1.

Atualização 03/03/2017

Caso você esteja utilizando o WHMCS v7 ignore os passos acima e apenas execute o passo abaixo.

Edite o arquivo login.tpl (templates/six) e insira após a linha 22:

<div class="checkbox">
    <label>
       <input type="checkbox" id="exibir" name="exibir" /> Exibir Senha
    </label>
</div>
{literal}
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#exibir").click(function() {
 jQuery('#inputPassword').attr('type', $(this).is(':checked') ? 'text' : 'password');
 });
}); 
</script>
{/literal}

Abaixo um vídeo demonstrativo: