<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Functional: OOP</title>
</head>
<body>
<script>
//---------Password ---- LoginForm ----
function Password(parent,open=false){
this.parent=parent;
this.open=open;
let key1=false;
let key2=false;
let login=document.createElement('input');
login.type='text';
login.placeholder='login';
let input=document.createElement('input');
input.placeholder='Password';
let input2=document.createElement('input');
input2.type='password';
input2.placeholder='Password';
let check=document.createElement('input');
check.type='checkbox';
check.checked=true;
let p=document.createElement('p');
let btn=document.createElement('input');
btn.type='submit'
btn.value='Autorized';
parent.append(login,input,check);
if(open==true){
input.type='password';
}
if(open==false){
input.type='text';
}
parent.append(p,btn);
this.setValue=function(val){
input.value=val;
}
login.value===''?key1=false:key1=true;
key1===false?login.style.borderColor='red':login.style.borderColor='green';
input.value===''?key1=false:key1=true;
key2===false?input.style.borderColor='red':input.style.borderColor='green';
parent.append(input2);
input2.hidden=true;
btn.disabled=true;
login.onblur=function(){
if(login.value==false){
key2=false;
login.style.borderColor='red';
}else{
key2=true;
login.style.borderColor='green';
if(key1===true){
if(input.type==='text'){
btn.disabled=false;
}
}
}
}
/*setInterval(()=>console.log(key1+":"+key2),3000);*/
input.onblur=function(){
if(input.value==false){
key1=false
input.style.borderColor='red';
}else{
key1=true;
input.style.borderColor='green';
if(key2===true){
if(input.type==='text'){
btn.disabled=false;
}
if(input2.value===input.value){
input2.borderColor='green';
btn.disabled=false;
}else{
input2.borderColor='red';
}
/*setInterval(()=>console.log(input.type+":"+input2.value+":"+(input2.value===input.value)),2500);*/
}
}
}
btn.onclick=function(){
console.log(login.value+":"+input.value);
}
this.getValue=function(){
return input.value;
}
this.setOpen=function(val){
val==true?input.type='password':input.type='text';
check.checked=val;
}
check.onclick=function(){
if(check.checked==true){
input.type='password';
let arr=(input.value).split('');
for(let i=0;i<arr.length;i++){
arr[i]='*';
}
p.innerText=arr.join('');
input2.hidden=false;
}else{
input.type='text';
p.innerText=input.value;
input2.hidden=true;
}
}
this.getOpen=function(){
return input.type;
}
input.oninput=function(){
p.innerText=input.value;
}
}
let p=new Password(document.body,false);
//p.setValue('qwerty');
//console.log(p.getValue());
p.setOpen(false);
console.log(p.getOpen());
</script>
</body>
</html>