Dicas de seguranca da senha

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso :  
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://webgamescommunity.forumeiros.com/

Descrição do problema

estava criando um email novo para mim e acabei me deparando com uma coisa que achei muito legal

quando vc n clicou sobre o local da senha > https://i.imgur.com/f4NLG7J.png
quando vc clicou > https://i.imgur.com/XWQdyu5.png

vejam aonde vi https://service.mail.com/registration.html

se pudesse ser dessa forma tambem seria legal
https://i.imgur.com/WyXv8jc.png
https://i.imgur.com/3eWutdm.png

Olá!

Use este código numa página Javascript, investida em todas as páginas:

Código:

$(function() {
  $('#password_reg').after('<style>#PanelSecurityTips { margin-top: 10px; margin-left:-220px; } .securityTipsBody .secHint:before { content: "- "; } .securityTipsHead { font-weight: bold; } .securityTipsBody { height: 70px;} .securityTipsHead, .securityTipsBody { background: #ECF4E5; float: left; width: 70%; padding:5px;} .securityTipsHead span { font-weight: bold; padding: 0 20px; color: #5B9E22; font-size: 14px; display: block; } .secHint { margin-left: -20px; font-size: 13px; }.securityTips { float: left; position: relative; width: auto; border: none; padding: 14px 0 0; margin: 0 0 10px; background: url(http://i.imgur.com/GeFTql6.png) no-repeat 20px top transparent; }</style></br><div class="securityTips hidden" id="PanelSecurityTips" style="overflow: hidden; display:none; "> <div class="securityTipsHead"> <span>Dicas de segurança:</span> </div> <div class="securityTipsBody" id="id2f"> <ul> <li class="pwLength"><div id="PW_LENGTH" class="GREY"></div> <span class="secHint">Use pelo menos 8 caracteres</span> </li> <li class="pwCharMix"><div id="PW_MIX" class="GREY"></div> <span class="secHint">Misture letras e números</span> </li> <li class="pwCaseMix"><div id="PW_CASE" class="GREY"></div> <span class="secHint">Misture letras minúsculas e maiúsculas</span> </li> <li class="pwSpecialChars"><div id="PW_SPECIALS" class="GREY"></div> <span class="secHint">Use caracteres especiais (exemplo: @)</span> </li> </ul> </div> </div>');
    $('#password_reg').click(function() {
        $('.securityTips.hidden').toggle('slow');
    });
    $('#password_reg').blur(function() {
        $('.securityTips.hidden').toggle('slow');
    });
});

Resultado quando clica na caixa de texto da password: http://prntscr.com/6houuj

Hancki

*o* top vlw Hancki