hw1/signup.js at main · globox97/hw1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function jsonCheckUsername(json) {
    // Controllo il campo exists ritornato dal JSON
    if (formStatus.username = !json.exists) {
        document.querySelector('.username').classList.remove('errorj');
        document.querySelector('#username_span').classList.remove('errorj');
        document.querySelector('#username_span').textContent = "";
    } else {
        document.querySelector('#username_span').textContent = "Nome utente già utilizzato";
        document.querySelector('.username').classList.add('errorj');
        document.querySelector('#username_span').classList.add('errorj');
    }
    checkForm();
}

function jsonCheckEmail(json) {
    // Controllo il campo exists ritornato dal JSON
    if (formStatus.email = !json.exists) {
        document.querySelector('.email').classList.remove('errorj');
        document.querySelector('#email_span').textContent = "";
        document.querySelector('#email_span').classList.remove('errorj');
    } else {
        document.querySelector('#email_span').textContent = "Email già utilizzata";
        document.querySelector('.email').classList.add('errorj');
        document.querySelector('#email_span').classList.add('errorj');
    }
    checkForm();
}

function fetchResponse(response) {
    if (!response.ok) return null;
    return response.json();
}

function checkUsername(event) {
    const input = document.querySelector('.username input');

    if(!/^[a-zA-Z0-9_]{1,15}$/.test(input.value)) {
        document.querySelector('#username_span').textContent = "Sono ammesse lettere, numeri e underscore. Max. 15";
        input.parentNode.classList.add('errorj');
        document.querySelector('#username_span').classList.add('errorj');
        formStatus.username = false;
        checkForm();
    } else {
        document.querySelector('#username_span').textContent = "";
        input.parentNode.classList.remove('errorj');
        fetch("check-username.php?q="+encodeURIComponent(input.value)).then(fetchResponse).then(jsonCheckUsername);
    }
}

function checkEmail(event) {
    const emailInput = document.querySelector('.email input');
    if(!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(emailInput.value).toLowerCase())) {
        document.querySelector('#email_span').textContent = "Email non valida";
        document.querySelector('.email').classList.add('errorj');
        document.querySelector('#email_span').classList.add('errorj');
        formStatus.email = false;
        checkForm();
    } else {
        fetch("check-email.php?q="+encodeURIComponent(String(emailInput.value).toLowerCase())).then(fetchResponse).then(jsonCheckEmail);
    }
}

function checkPassword(event) {
    const passwordInput = document.querySelector('.password input');
    if (formStatus.password = passwordInput.value.length >= 8) {
        document.querySelector('.password').classList.remove('errorj');
        document.querySelector('#password_span').textContent = "";
        document.querySelector('#password_span').classList.remove('errorj');
    } else {
        document.querySelector('.password').classList.add('errorj');
        document.querySelector('#password_span').textContent = "La password deve avere almeno 8 caratteri";
        document.querySelector('#password_span').classList.add('errorj');
    }
    checkForm();
}

function checkConfirmPassword(event) {
    const confirmPasswordInput = document.querySelector('.confirm_pwd input');
    if (formStatus.confirm_pwd = confirmPasswordInput.value === document.querySelector('.password input').value) {
        document.querySelector('.confirm_pwd').classList.remove('errorj');
        document.querySelector('#confirm_span').textContent = "";
        document.querySelector('#confirm_span').classList.remove('errorj');
    } else {
        document.querySelector('.confirm_pwd').classList.add('errorj');
        document.querySelector('#confirm_span').textContent = "Le due passsword devono coincidere";
        document.querySelector('#confirm_span').classList.add('errorj');
    }
    checkForm();
}

function checkForm() {
    console.log(formStatus);
    if(formStatus['username'] && formStatus['email'] && formStatus['password'] && formStatus['confirm_pwd']) {
        document.querySelector('#submit').disabled = false;
    } else {
        document.querySelector('#submit').disabled = true;
    }
}

const formStatus = {};
document.querySelector('.username input').addEventListener('blur', checkUsername);
document.querySelector('.email input').addEventListener('blur', checkEmail);
document.querySelector('.password input').addEventListener('blur', checkPassword);
document.querySelector('.confirm_pwd input').addEventListener('blur', checkConfirmPassword);

if (document.querySelector('.errorj') !== null) {
    checkUsername();
    checkPassword();
    checkConfirmPassword();
    checkEmail();
    document.querySelector('.name input').dispatchEvent(new Event('blur'));
    document.querySelector('.surname input').dispatchEvent(new Event('blur'));
}