-
Notifications
You must be signed in to change notification settings - Fork 55
/
register.html
142 lines (130 loc) · 5.95 KB
/
register.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon/icon.png" type="image/png">
<link rel="apple-touch-icon" href="icon/icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./register.css">
<title>S'inscrire - Naire Online</title>
</head>
<body style="margin:0;padding:0;">
<div class="overlay"></div>
<div class="container">
<div class="row register_row">
<div class="col s12" style="float: none; margin: 0 auto; box-sizing: border-box;">
<div class="card" style="margin: 0;">
<div class="card-image">
<div style="width: 100%; height: 200px; overflow: hidden;">
<img src="./img/parallaxes/BlueSky.png">
</div>
<h1 class="card-title black-text" style="text-align: center; width: 100%;">Sign up</h1>
</div>
<div class="card-content" style="padding-bottom: 4px;">
<div id="instructionsZone" class="row">
<div class="col s12">
<ol>
<li id="allfieldsrequired" style="color: black;">All fields are required</li>
<li id="usernameformat" style="color: black;">Username must be alphanumeric</li>
</ol>
</div>
</div>
<div id="inputsZone" class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="username" type="text" class="validate">
<label for="username">Username</label>
</div>
<div class="input-field col s6">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
</form>
</div>
<div id="serverResponseZone" style="color: red; margin:8px; text-align: center;" class="row"></div>
</div>
<div class="card-action">
<div class="row" style="margin:0;">
<div class="col xs12 m6">
<a onclick="window.close()" class="blue-text" style="cursor:pointer; line-height: 36px;">Close</a>
</div>
<div class="col xs12 m6" style="text-align: right;">
<button id="registerBtn" disabled="true" class="btn waves-effect waves-light">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Please : Set your own server on line 103 -->
<script type="text/javascript" src="./js/libs/materialize.min.js"></script>
<script type="text/javascript" src="./js/libs/socket.io.js"></script>
<script>
// Select the form inputs :
const userField = document.getElementById('username');
const passField = document.getElementById('password');
const registerBtn = document.getElementById('registerBtn');
let isFormValid = false; // declare a boolean to true to remember if the form datas are correct
const checkInputs = () => {
// This function will test the username format (from 4 to 25 alphanumeric characters)
function isValidUsername(string) {
return /^(?=[a-zA-Z0-9\s]{4,25}$)(?=[a-zA-Z0-9\s])(?:([\w\s*?])\1?(?!\1))+$/.test(string);
}
isFormValid = true; // We first say the form is valid
// Then if it's not, do the followings :
if (!userField || !userField.value || !isValidUsername(userField.value) ) { // No username or not valid
isFormValid = false;
document.getElementById('usernameformat').style.color = 'red';
} else {
document.getElementById('usernameformat').style.color = 'black';
}
if (!passField || !passField.value || passField.value.length < 1) { // No password
isFormValid = false;
document.getElementById('allfieldsrequired').style.color = 'red';
} else {
document.getElementById('allfieldsrequired').style.color = 'black';
}
registerBtn.disabled = !isFormValid; // If form is not valid, disable Register button.
};
const register = (username,password) => {
const domain = 'http://localhost:8097'; // TODO : Set your own server (domain name + port, ex : http://mynew.mmo:8097/ )
const socket = io.connect(domain);
// Setting up UI behavior :
socket.on('login_error', (data,callback) => { // Display UI error when server returns any
if (data) {
document.getElementById('serverResponseZone').innerHTML = data.msg;
document.getElementById('serverResponseZone').style.color = "red";
}
});
socket.on('register_success', (data,callback) => { // On succes, just display the success msg from backend
if (data) {
document.getElementById('serverResponseZone').innerHTML = data.msg;
document.getElementById('serverResponseZone').style.color = "green";
document.getElementById('instructionsZone').style.display = 'none';
document.getElementById('inputsZone').style.display = 'none';
registerBtn.style.display = 'none';
}
});
// Run the registration, passing username and password as payload.
socket.emit('register', {username, password});
};
const init = () => {
registerBtn.addEventListener('click', (e) => { // On Registration btn press.
checkInputs(); // Check the inputs one last time
if (isFormValid) {
// if everything went fine, run the register function.
register(userField.value,passField.value)
}
});
// Check inputs validity whenever the user types anything
userField.addEventListener('keyup', () => checkInputs());
passField.addEventListener('keyup', () => checkInputs());
};
init();
</script>
</body>
</html>