Home Explore Help
Sign In
DimaBondarenko
/
HW
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

HW JS10 Password done

DimaBondarenko 3 years ago
parent
9c3df5a1bc
commit
7f73baa30a
6 changed files with 244 additions and 0 deletions
Unified View Show Diff Stats
  1. 2 0
      HWJS10.2/src/css/style.min.css
  2. 9 0
      HWJS10.2/src/css/style.min.css.map
  3. BIN
      HWJS10.2/src/image/1@3x.png
  4. 14 0
      HWJS10.2/src/index.html
  5. 191 0
      HWJS10.2/src/js/script.js
  6. 28 0
      HWJS10.2/src/sass/style.scss

File diff suppressed because it is too large
+ 2 - 0
HWJS10.2/src/css/style.min.css


File diff suppressed because it is too large
+ 9 - 0
HWJS10.2/src/css/style.min.css.map


BIN
HWJS10.2/src/image/1@3x.png
View File


+ 14 - 0
HWJS10.2/src/index.html
View File 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="css/style.min.css">
 
+</head>
 
+<body>
 
+
 
+    <script src="js/script.js"></script>
 
+</body>
 
+</html>

+ 191 - 0
HWJS10.2/src/js/script.js
View File 

@@ -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;
 
+    }
 
+}
 
+
 
+
 
+
 
+

+ 28 - 0
HWJS10.2/src/sass/style.scss
View File 

@@ -0,0 +1,28 @@
 
+*{
 
+    box-sizing: border-box;
 
+    margin: 0;
 
+}
 
+
 
+#form1, .form-body{
 
+    width: 300px;
 
+    padding: 30px 40px;
 
+    margin: 0 auto;
 
+    background-color: rgb(240, 240, 240);
 
+    border-radius: 4px;
 
+    box-shadow: 0px 0.5px 30px 1px rgba(0, 0, 0, .4);
 
+    input{
 
+        margin-top: 10px;
 
+        margin-bottom: 10px;
 
+        width: 100%;
 
+    }
 
+    label{
 
+        display: flex;
 
+        align-items: flex-end;
 
+        input{
 
+            margin-left: 15px;
 
+            margin-bottom: 0px;
 
+            width: 20px;
 
+        }
 
+    }
 
+}
 
+