Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Functional: OOP</title>
</head>
<body>
	<script>

//---------Password ---- LoginForm ---- LoginForm Constructor ---- 
//  ---- Password Verify ---- Все в одном задании сразу ↧

		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;
						}
					}	
				}
			}
			input.onblur=function(){
				if(input.value==false){
					key1=false
					input.style.borderColor='red';
				}else{
					
					if(key2===true && input.type==='text'){
						key1=true;
						input.style.borderColor='green';
						btn.disabled=false;
					}
					if(input.type=='password'){
						btn.disabled=true;
						if(input2.value===input.value){
							input2.borderColor='green';
							btn.disabled=false;
						}else{
							input2.borderColor='red';
							btn.disabled=true;
						}
					}	
				}
			}

			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>