|
|
@@ -0,0 +1,191 @@
|
|
|
+//////////////////////////////////////////////Password
|
|
|
+function Password (parent, open){
|
|
|
+ let inputPassword = document.createElement('input');
|
|
|
+ inputPassword.placeholder = 'password'
|
|
|
+ parent.append(inputPassword);
|
|
|
+
|
|
|
+ let label = document.createElement('label');
|
|
|
+ parent.append(label);
|
|
|
+ label.innerText ='показать пароль'
|
|
|
+
|
|
|
+ let inputCheckbox = document.createElement('input');
|
|
|
+ inputCheckbox.type ='checkbox'
|
|
|
+ label.append(inputCheckbox);
|
|
|
+
|
|
|
+ let password = '';
|
|
|
+
|
|
|
+ this.setValue = (newPassword) =>{
|
|
|
+ if(newPassword !== password && typeof this.onchange ==='function'){
|
|
|
+ this.onchange(newPassword)
|
|
|
+ }
|
|
|
+ password = newPassword;
|
|
|
+ inputPassword.value = password;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setOpen = (newOpen) => {
|
|
|
+ if(newOpen !== open && typeof this.onOpenChange === 'function'){
|
|
|
+ this.onOpenChange(newOpen)
|
|
|
+ }
|
|
|
+ open = newOpen;
|
|
|
+ open ? inputPassword.type = 'text' : inputPassword.type = 'password'
|
|
|
+ inputCheckbox.checked = open
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue(password)
|
|
|
+ this.setOpen(open)
|
|
|
+ this.getOpen = () => open
|
|
|
+ this.getValue = () => password;
|
|
|
+
|
|
|
+ inputPassword.oninput = () =>{
|
|
|
+ this.setValue(inputPassword.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ inputCheckbox.oninput =()=>{
|
|
|
+ this.setOpen(inputCheckbox.checked)
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// let p = new Password(document.body, false);
|
|
|
+// p.onchange = data => p.setValue(data)
|
|
|
+// p.onOpenChange = open => console.log(open)
|
|
|
+
|
|
|
+
|
|
|
+////////////////////////////////////////////////////LoginForm Constructor
|
|
|
+
|
|
|
+function Form (parent,open){
|
|
|
+ let form = document.createElement('form');
|
|
|
+ form.id = 'form1'
|
|
|
+ parent.append(form);
|
|
|
+
|
|
|
+ let inputLogin = document.createElement('input');
|
|
|
+ form.append(inputLogin);
|
|
|
+
|
|
|
+ let inputPassword = new Password(form,open);
|
|
|
+
|
|
|
+ let btn = document.createElement('button');
|
|
|
+ btn.innerText = 'click'
|
|
|
+ form.append(btn);
|
|
|
+
|
|
|
+ let login
|
|
|
+
|
|
|
+ let activateBtn = (password) => {
|
|
|
+ (password && this.getValueLogin()) ? btn.disabled = false : btn.disabled = true
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValueLogin = (newLogin) =>{
|
|
|
+ if(newLogin !== login && typeof this.onchangeLogin ==='function'){
|
|
|
+ this.onchangeLogin(newLogin)
|
|
|
+ }
|
|
|
+ login = newLogin;
|
|
|
+ inputLogin.value = login;
|
|
|
+
|
|
|
+ activateBtn(this.getValuePassword())
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValuePassword = (newPassword) => {
|
|
|
+ inputPassword.setValue(newPassword)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValueOpen = (value) => {
|
|
|
+ inputPassword.setOpen(value)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValuePassword = () => inputPassword.getValue();
|
|
|
+ this.getValueLogin = () => login;
|
|
|
+ this.getValueOpen = () => inputPassword.getOpen();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ inputLogin.oninput = () => {
|
|
|
+ this.setValueLogin(inputLogin.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ inputPassword.onchange = (newPassword) => {
|
|
|
+ if(newPassword !== inputPassword.getValue() && typeof this.onchangePassword ==='function'){
|
|
|
+ this.onchangePassword(newPassword)
|
|
|
+ }
|
|
|
+ activateBtn(newPassword)
|
|
|
+ }
|
|
|
+
|
|
|
+ inputPassword.onOpenChange = (newOpen) =>{
|
|
|
+ if(newOpen !== inputPassword.getOpen() && typeof this.onchangeOpen === 'function'){
|
|
|
+ this.onchangeOpen(newOpen)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ activateBtn(this.getValuePassword())
|
|
|
+}
|
|
|
+
|
|
|
+// let form = new Form(document.body, true);
|
|
|
+// form.onchangeLogin = (data) => console.log(data);
|
|
|
+// form.onchangePassword = (data) => console.log(data);
|
|
|
+// form.onchangeOpen = (data) => console.log(data);
|
|
|
+
|
|
|
+
|
|
|
+////////////////////////////////////////Password Verify
|
|
|
+let formBody = document.createElement('div');
|
|
|
+formBody.classList.add('form-body');
|
|
|
+document.body.append(formBody);
|
|
|
+
|
|
|
+let p1 = new Password(formBody, false);
|
|
|
+
|
|
|
+let hideDiv = document.createElement('div')
|
|
|
+formBody.append(hideDiv);
|
|
|
+
|
|
|
+let p2 = new Password(hideDiv,false);
|
|
|
+let labels = document.querySelectorAll('label')
|
|
|
+labels[labels.length-1].style.display = 'none' //прячем checkbox во втором input
|
|
|
+
|
|
|
+let btn = document.createElement('button');
|
|
|
+btn.innerText = 'Enter';
|
|
|
+btn.disabled = true
|
|
|
+formBody.append(btn);
|
|
|
+
|
|
|
+
|
|
|
+if(p1.getOpen()){
|
|
|
+ hideDiv.style.display = 'none'
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+p1.onOpenChange = (value) => {
|
|
|
+ if(value){
|
|
|
+ hideDiv.style.display = 'none';
|
|
|
+ p1.getValue() ? btn.disabled = false : btn.disabled = true
|
|
|
+ }else{
|
|
|
+ hideDiv.style.display = 'block';
|
|
|
+
|
|
|
+ if(p1.getValue() === p2.getValue()){
|
|
|
+ (p1.getValue() && p2.getValue()) ? btn.disabled = false : btn.disabled = true
|
|
|
+ } else {
|
|
|
+ btn.disabled = true
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+p1.onchange = (value) => {
|
|
|
+ if(hideDiv.style.display === 'none'){
|
|
|
+ value ? btn.disabled = false : btn.disabled = true
|
|
|
+ }else{
|
|
|
+ if(value === p2.getValue()){
|
|
|
+ (value && p2.getValue()) ? btn.disabled = false : btn.disabled = true
|
|
|
+ }else{
|
|
|
+ btn.disabled = true
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+p2.onchange = (value) => {
|
|
|
+ if(value === p1.getValue()){
|
|
|
+ (value && p1.getValue()) ? btn.disabled = false : btn.disabled = true
|
|
|
+ } else {
|
|
|
+ btn.disabled = true;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
