|
|
@@ -0,0 +1,142 @@
|
|
|
+<!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>
|
