JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class='panel'>

<form id="acesso" method="post">   
<input name="senha"  class="senha" maxlength="100" type="password" />
<div class="forca_senha '+strColor+'"><div><p class="forca_title">Nível de segurança - <span class="nivel">'+strText+'</span></p><p class="dicas"><a>Dicas para fortalecer sua senha</a></p></div><div class="barra"><div class="bloco"><div class="porcentagem"></div><div class="divisores"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div></div>
</form>
</div>

CSS

.forca_senha .forca_title {
    font: 11px arial;
    color: #505050;
    text-transform: uppercase;
    margin-top:13px;
}

.forca_senha .dicas {
    font: 11px arial
}

.forca_senha .dicas a {
    font: 11px arial;
    color: #008ff7;
    cursor:pointer;
}

.forca_senha .barra {
    margin: 20px 0 5px;
    width: 265px;
    height: 12px;
    border: 1px solid #cacaca;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}
.forca_senha span{
    float: none;
    margin: 0;
}

.forca_senha .barra .bloco {
    position: relative;
    width: 259px;
    height: 6px;
    margin: 3px;
    background: #cacaca
}

.forca_senha .barra .bloco .porcentagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%
}

.forca_senha .barra .bloco .divisores {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.forca_senha .barra .bloco .divisores div {
    float: left;
    margin-left: 25px;
    width: 1px;
    height: 100%;
    background: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    -moz-opacity: .1;
    -khtml-opacity: .1;
    opacity: .1;
    zoom:1
}

.forca_senha.forte .forca_title .nivel {
    color: #37a600
}

.forca_senha.medio .forca_title .nivel {
    color: #ffc000
}

.forca_senha.fraco .forca_title .nivel {
    color: #f10039
}

.forca_senha.forte .barra .bloco .porcentagem {
    background: #37a600
}

.forca_senha.medio .barra .bloco .porcentagem {
    background: #ffd800
}

.forca_senha.fraco .barra .bloco .porcentagem {
    background: #f10039
}
::focus{
  outline:none;
}
.panel {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    max-width:450px;
}
input[type='password']:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none...

JavaScript

!function(d){
"use strict";

function $(e) {
return d.querySelectorAll(e);
}

Object.prototype.on = function(t, e) {
this.forEach(function(x){
return x.addEventListener ? x.addEventListener(t, e) : x.attachEvent ? x.attachEvent("on" + t, e) : void 0
})

}
var VALIDACAO_SENHA = {
teste: function(e){
r_senha(e.value,'#status-senha')

}

}

var checarnumeros = true;
var checarletrasmaiusculas = true;
var checarletrasminusculas = true;
var checarpontuacao = true;
var tempodevidadasenha = 365;
var strColor ='';
var strText ='';
function checarsenha(strPassword){ 
let numerosdecombinacoes = 0; 
if (checarnumeros){
var checarforca = "0123456789";
if (doesContain(strPassword, checarforca) > 0){
numerosdecombinacoes += checarforca.length;
}
}
if (checarletrasmaiusculas){
checarforca = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (doesContain(strPassword, checarforca) > 0){
numerosdecombinacoes += checarforca.length;
}
}
if (checarletrasminusculas){
checarforca = "abcdefghijklmnopqrstuvwxyz";
if (doesContain(strPassword, checarforca) > 0){
numerosdecombinacoes += checarforca.length;
}
} 
if (checarpontuacao){
checarforca = ";:-_=+\|//?^&!.@$£#*()%~<>{}[]";
if (doesContain(strPassword, checarforca) > 0){
numerosdecombinacoes += checarforca.length;
}
}
var numerosdedias = ((Math.pow(numerosdecombinacoes, strPassword.length) / 500) / 2) / 86400;
var percetual = numerosdedias / tempodevidadasenha;   
return percetual;
}
function r_senha(strPassword, strFieldID){
var percetual = checarsenha(strPassword);

var ctlText = document.getElementById('#status-senha');
if (ctlText)
return;
var nRound = Math.round(percetual * 100);

if (nRound < (strPassword.length * 5)){
nRound += strPassword.length * 5;
}
if (nRound > 100)
nRound = 100;
if (nRound > 95){
strText = "Bastante Seguro";
strColor = "forte";
}else if (nRound > 75){
strText = "Seguro";
strColor = "medio";
}else if (nRound > 50){
strText = "Baixa Segurança";
strColor = "azul";
}else{
strColor = "fraco";
strText = "Senha...