|
|
@@ -0,0 +1,310 @@
|
|
|
+// Password
|
|
|
+
|
|
|
+// function Password(parent, open){
|
|
|
+
|
|
|
+// .....
|
|
|
+// }
|
|
|
+
|
|
|
+// let p = new Password(document.body, true)
|
|
|
+
|
|
|
+// p.onChange = data => console.log(data)
|
|
|
+// p.onOpenChange = open => console.log(open)
|
|
|
+
|
|
|
+// p.setValue('qwerty')
|
|
|
+// console.log(p.getValue())
|
|
|
+
|
|
|
+// p.setOpen(false)
|
|
|
+// console.log(p.getOpen())
|
|
|
+
|
|
|
+// Напишите функцию конструктор Password, которая будет в родительском элементе создавать поле ввода для пароля и кнопку/иконку/чекбокс,
|
|
|
+// который будет переключать режим просмотра пароля в поле ввода.
|
|
|
+// Параметры:
|
|
|
+// * parent - родительский элемент
|
|
|
+// * open - стартовое состояние
|
|
|
+// Методы:
|
|
|
+// * setValue/getValue - задают/читают значения
|
|
|
+// * setOpen/getOpen - задают/читают открытость текста в поле ввода
|
|
|
+// Колбэки (функции обратного вызова, данные изнутри объекта):
|
|
|
+// * onChange - запускается по событию oninput в поле ввода, передает текст наружу
|
|
|
+// * onOpenChange - запускается по изменению состояния открытости пароля
|
|
|
+
|
|
|
+function Password(parent, open) {
|
|
|
+ let value = ''
|
|
|
+ let pass = document.createElement('input')
|
|
|
+ pass.id = 'password'
|
|
|
+ let check = document.createElement('input')
|
|
|
+ check.id = 'checkbox'
|
|
|
+ check.type = 'checkbox'
|
|
|
+ parent.append(pass, check)
|
|
|
+ check.onchange = () => {
|
|
|
+ this.setOpen(check.checked)
|
|
|
+ }
|
|
|
+ //добавить pass oninput, который из pass забирает value, запускает setValue
|
|
|
+ this.getValue = function () {
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ this.setValue = function (value) {
|
|
|
+ // передает value в onchange если он есть
|
|
|
+ }
|
|
|
+ this.getOpen = function () {
|
|
|
+ return open
|
|
|
+ }
|
|
|
+ this.setOpen = function (newOpen) {
|
|
|
+ open = newOpen
|
|
|
+ pass.type = open ? 'text' : 'password'
|
|
|
+ check.checked = open
|
|
|
+ if (typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(open)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+}
|
|
|
+
|
|
|
+let p = new Password(document.body, true)
|
|
|
+document.getElementById('password').placeholder = 'Enter password'
|
|
|
+
|
|
|
+p.onChange = data => console.log(data)
|
|
|
+p.onOpenChange = open => console.log(open)
|
|
|
+
|
|
|
+p.setValue('qwerty')
|
|
|
+console.log(p.getValue())
|
|
|
+
|
|
|
+p.setOpen(false)
|
|
|
+console.log(p.getOpen())
|
|
|
+
|
|
|
+const hr1 = document.createElement('hr')
|
|
|
+document.body.appendChild(hr1)
|
|
|
+
|
|
|
+// LoginForm
|
|
|
+
|
|
|
+// С помощью предыдущего кода Password сделайте форму логина, кнопка в которой будет активна только если и login и пароль не пусты
|
|
|
+
|
|
|
+function LoginForm(parent, open) {
|
|
|
+ let value = ''
|
|
|
+
|
|
|
+ // login
|
|
|
+
|
|
|
+ let log = document.createElement('input')
|
|
|
+ log.id = 'login'
|
|
|
+ log.placeholder = 'Enter login'
|
|
|
+
|
|
|
+ // password
|
|
|
+
|
|
|
+ let pass = document.createElement('input')
|
|
|
+ pass.id = 'password'
|
|
|
+ pass.placeholder = 'Enter password'
|
|
|
+
|
|
|
+ // checkbox
|
|
|
+
|
|
|
+ let check = document.createElement('input')
|
|
|
+ check.id = 'checkbox'
|
|
|
+ check.type = 'checkbox'
|
|
|
+
|
|
|
+ // submit
|
|
|
+
|
|
|
+ let submit = document.createElement('input')
|
|
|
+ submit.id = 'submit'
|
|
|
+ submit.type = 'submit'
|
|
|
+ submit.disabled = true;
|
|
|
+
|
|
|
+ parent.append(log, pass, check, submit)
|
|
|
+
|
|
|
+ check.onchange = () => {
|
|
|
+ this.setOpen(check.checked)
|
|
|
+ }
|
|
|
+ this.getValue = function () {
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ this.setValue = function (value) {
|
|
|
+ }
|
|
|
+ this.getOpen = function () {
|
|
|
+ return open
|
|
|
+ }
|
|
|
+ this.setOpen = function (newOpen) {
|
|
|
+ open = newOpen
|
|
|
+ pass.type = open ? 'text' : 'password'
|
|
|
+ check.checked = open
|
|
|
+ if (typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(open)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+
|
|
|
+ let isFulfilled = function () {
|
|
|
+ return log && log.value && pass && pass.value ? true : false;
|
|
|
+ }
|
|
|
+
|
|
|
+ let setSubmit = function () {
|
|
|
+ if (isFulfilled()) {
|
|
|
+ submit.disabled = false;
|
|
|
+ } else {
|
|
|
+ submit.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setSubmit();
|
|
|
+
|
|
|
+ pass.onkeyup = () => {
|
|
|
+ setSubmit();
|
|
|
+ }
|
|
|
+
|
|
|
+ log.onkeyup = () => {
|
|
|
+ setSubmit();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let lF = new LoginForm(document.body, true)
|
|
|
+
|
|
|
+lF.onChange = data => console.log(data)
|
|
|
+lF.onOpenChange = open => console.log(open)
|
|
|
+
|
|
|
+lF.setValue('qwerty')
|
|
|
+console.log(lF.getValue())
|
|
|
+
|
|
|
+lF.setOpen(false)
|
|
|
+console.log(lF.getOpen())
|
|
|
+
|
|
|
+const hr2 = document.createElement('hr')
|
|
|
+document.body.appendChild(hr2)
|
|
|
+
|
|
|
+// LoginForm Constructor
|
|
|
+
|
|
|
+// оформите предыдущую задачу как функцию-конструктор. Продумайте и предусмотрите геттеры, сеттеры и колбэки.
|
|
|
+
|
|
|
+function LoginFormConstructor(parent, open) {
|
|
|
+
|
|
|
+ // login
|
|
|
+
|
|
|
+ let log = document.createElement('input')
|
|
|
+ log.id = 'login'
|
|
|
+ log.placeholder = 'Enter login'
|
|
|
+
|
|
|
+ // password
|
|
|
+
|
|
|
+ let pass = document.createElement('input')
|
|
|
+ pass.id = 'password'
|
|
|
+ pass.placeholder = 'Enter password'
|
|
|
+
|
|
|
+ // checkbox
|
|
|
+
|
|
|
+ let check = document.createElement('input')
|
|
|
+ check.id = 'checkbox'
|
|
|
+ check.type = 'checkbox'
|
|
|
+
|
|
|
+ // submit
|
|
|
+
|
|
|
+ let submit = document.createElement('input')
|
|
|
+ submit.id = 'submit'
|
|
|
+ submit.type = 'submit'
|
|
|
+ submit.disabled = true
|
|
|
+
|
|
|
+ parent.append(log, pass, check, submit)
|
|
|
+
|
|
|
+ // form
|
|
|
+
|
|
|
+ let form = {
|
|
|
+ log: log.value,
|
|
|
+ pass: pass.value,
|
|
|
+ check: check.checked,
|
|
|
+ submitDisabled: submit.disabled
|
|
|
+ }
|
|
|
+
|
|
|
+ // fields check
|
|
|
+
|
|
|
+ let isFulfilled = function () {
|
|
|
+ return log && log.value && pass && pass.value ? true : false
|
|
|
+ }
|
|
|
+
|
|
|
+ let setSubmit = function () {
|
|
|
+ if (isFulfilled()) {
|
|
|
+ submit.disabled = false
|
|
|
+ } else {
|
|
|
+ submit.disabled = true
|
|
|
+ }
|
|
|
+ form.submitDisabled = submit.disabled
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(form)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ pass.onkeyup = () => {
|
|
|
+ setSubmit()
|
|
|
+ form.pass = pass.value;
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(pass.value);
|
|
|
+ }
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(form);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ log.onkeyup = () => {
|
|
|
+ setSubmit()
|
|
|
+ form.log = log.value;
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(log.value);
|
|
|
+ }
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(form);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // checkbox check
|
|
|
+
|
|
|
+ check.onchange = () => {
|
|
|
+ form.check = check.checked;
|
|
|
+ if (check.checked) {
|
|
|
+ pass.type = 'text';
|
|
|
+ } else {
|
|
|
+ pass.type = 'password';
|
|
|
+ };
|
|
|
+
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(check.checked);
|
|
|
+ }
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(form);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // getter
|
|
|
+
|
|
|
+ this.getValue = function () {
|
|
|
+ return form;
|
|
|
+ }
|
|
|
+
|
|
|
+ // setter
|
|
|
+
|
|
|
+ this.setValue = function (newLogVal, newPassVal, newCheckVal) {
|
|
|
+
|
|
|
+ if (typeof newLogVal === 'string') {
|
|
|
+ log.value = newLogVal;
|
|
|
+ log.onkeyup();
|
|
|
+ };
|
|
|
+ if (typeof newPassVal === 'string') {
|
|
|
+ pass.value = newPassVal;
|
|
|
+ pass.onkeyup();
|
|
|
+ };
|
|
|
+ if (typeof newCheckVal === 'boolean') {
|
|
|
+ check.disabled = newCheckVal;
|
|
|
+ check.onchange();
|
|
|
+ };
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let loginForm = new LoginFormConstructor(document.body, true)
|
|
|
+
|
|
|
+loginForm.setValue('ObiWanKenobi', 'jediRules', false)
|
|
|
+
|
|
|
+console.log(loginForm.getValue())
|
|
|
+
|
|
|
+const hr3 = document.createElement('hr')
|
|
|
+document.body.appendChild(hr3)
|
|
|
+
|
|
|
+// Password Verify
|
|
|
+
|
|
|
+// С помощью Password сделайте пару инпутов, которые проверяют введеный пароль (в двух полях ввода) на совпадение.
|
|
|
+// Кнопка должна активизироваться при совпадающих паролях. При открытом пароле второе поле вводы должно пропадать с экрана
|
|
|
+// Таким образом:
|
|
|
+// * Когда Password в скрытом режиме - появляется второй инпут (<input type='password'>) с паролем в скрытом режиме
|
|
|
+// * Когда Password в открытом режиме - второй инпут пропадат
|
