Project

General

Profile

1
<%--
2
  Created by IntelliJ IDEA.
3
  User: sofia
4
  Date: 19/10/2017
5
  Time: 4:30 μμ
6
  To change this template use File | Settings | File Templates.
7
--%>
8
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
9
<!DOCTYPE html>
10
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
11
<html lang="en-gb" dir="ltr" vocab="http://schema.org/">
12
<head>
13
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
14
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
15
    <meta name="viewport" content="width=device-width, initial-scale=1">
16
    <base href=".">
17
    <title>OpenAIRE - Register</title>
18
    <script src="./js/jquery.js"></script>
19
    <script src="./js/uikit.js"></script>
20
    <script src="./js/validation.js"></script>
21
    <script src="./js/uikit-icons-max.js"></script>
22
    <link rel="stylesheet" style="text/css" href="./css/theme.css">
23
    <link rel="stylesheet" style="text/css" href="./css/custom.css">
24
    <link rel="stylesheet" style="text/css" href="./css/aai-custom.css">
25
</head>
26
<body class="" style="">
27
<div class="uk-offcanvas-content uk-height-viewport">
28
    <!-- MENU STARTS HERE -->
29
    <!-- MAIN MENU STARTS HERE -->
30
    <div class="tm-header  tm-header-transparent" uk-header="">
31
        <div class="uk-container uk-container-expand">
32
            <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">
33
                <div class="uk-navbar-center">
34
                    <div class="uk-logo uk-navbar-item">
35
                        <img alt="OpenAIRE" class="uk-responsive-height" src="./images/Logo_Horizontal.png">
36
                    </div>
37
                </div>
38
            </nav>
39
        </div>
40
    </div>
41
    <!-- MENU ENDS HERE -->
42
    <!-- CONTENT STARTS HERE -->
43
    <div class="first_page_section uk-section-default uk-section uk-padding-remove-vertical">
44
        <div class="first_page_banner_headline uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid" uk-grid="">
45
        </div>
46
    </div>
47
    <div class=" uk-section  uk-margin-small-top tm-middle custom-main-content" id="tm-main">
48
        <div class="uk-container uk-container-small uk-margin-medium-top  uk-margin-small-bottom uk-text-center">
49
            <h2 class="uk-h2 uk-margin-small-bottom">Create new OpenAIRE account</h2>
50
            <%--<div class="uk-text-meta uk-margin-large-bottom">Use the same credentials for all our services</div>--%>
51
                <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first uk-first-column">
52
                    <div class="uk-grid ">
53
                        <!-- CENTER SIDE -->
54
                        <div class="uk-width-1-1@m uk-width-1-1@s uk-text-center">
55
                            <h3 class="uk-h3">Create an account</h3>
56
                            <div class="middle-box text-center loginscreen animated fadeInDown ">
57
                                <div class="uk-width-1-3@m uk-align-center">
58
                                    <!-- REGISTER FORM -->
59
                                    <div id="registerForm">
60
                                        <form action="register" method="POST" role="form" class="m-t" id="register_form">
61
                                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
62
                                            <div class="alert alert-success" aria-hidden="true" style="display: none;"></div>
63
                                            <div class="alert alert-danger" aria-hidden="true" style="display: none;"></div>
64
                                            <div class="form-group">
65
                                                <span class="msg_first_name_error uk-text-danger uk-text-small uk-float-left" style="display:none">Please enter your first name.</span>
66
                                                <input id="first_name" name="first_name" type="text" placeholder="First name (*)" class="form-control" value=${first_name}></div>
67
                                                <c:remove var="first_name" scope="session" />
68
                                            <div class="form-group">
69
                                                <span class="msg_last_name_error uk-text-danger uk-text-small uk-float-left" style="display:none">Please enter your last name.</span>
70
                                                <input id="last_name" name="last_name" type="text" placeholder="Last name (*)" class="form-control" value=${last_name}></div>
71
                                                <c:remove var="last_name" scope="session" />
72
                                            <div class="form-group">
73
                                                <input id="organization" name="organization" type="text" placeholder="Affiliation / Organization:" class="form-control" value=${organization}></div>
74
                                                <c:remove var="organization" scope="session" />
75
                                            <div class="form-group">
76
                                                <span class="msg_username_min_lenght uk-text-danger uk-text-small uk-float-left" style="display:none">Minimum username length 5 characters.</span>
77
                                                <span class="msg_username_max_lenght uk-text-danger uk-text-small uk-float-left" style="display:none">Maximum username lenght 150 characters.</span>
78
                                                <span class="msg_username_error uk-text-danger uk-text-small uk-float-left" style="display:none">Please enter your username.</span>
79
                                                <span id="username_server_error" class="uk-text-danger uk-text-small uk-float-left">${username_message}</span>
80
                                                <c:remove var="username_message" scope="session" />
81
                                                <input id="username" name="username" type="text" placeholder="Username (*)" class="form-control" value=${username}></div>
82
                                                <c:remove var="username" scope="session" />
83
                                            <div class="form-group">
84
                                                <span class="msg_email_error uk-text-danger uk-text-small uk-float-left" style="display:none">Please enter your email.</span>
85
                                                <span class="msg_email_validation_error uk-text-danger uk-text-small uk-float-left" style="display:none">Please enter a valid email.</span>
86
                                                <span class="msg_email_conf_error uk-text-danger uk-text-small uk-float-left" style="display:none">These emails don't match.</span>
87
                                                <span id="email_server_error" class="uk-text-danger uk-text-small uk-float-left">${email_message}</span>
88
                                                <c:remove var="email_message" scope="session" />
89
                                                <input id="email" name="email" type="text" placeholder="Email (*)" class="form-control" value=${email}></div>
90
                                                <c:remove var="email" scope="session" />
91
                                            <div class="form-group">
92
                                                <input id="email_conf" name="email_conf" type="text" placeholder="Confirm email (*)" class="form-control" value=${email_conf}></div>
93
                                                <c:remove var="email_conf" scope="session" />
94
                                            <%--<div class="form-group">--%>
95
                                                <%--<span class="msg_password_error uk-text-danger uk-text-small uk-float-left" style="display:none">Please enter your password.</span>--%>
96
                                                <%--<span class="msg_pass_conf_error uk-text-danger uk-text-small uk-float-left" style="display:none">These passwords don't match.</span>--%>
97
                                                <%--<p><span class="msg_please_add uk-text-danger uk-text-small uk-float-left" style="display:none">Please add: &nbsp</span></p>--%>
98
                                                <%--<span class="msg_lowercase_letter uk-text-danger uk-text-small uk-float-left" style="display:none">A lowercase letter. &nbsp</span>--%>
99
                                                <%--<span class="msg_capital_letter uk-text-danger uk-text-small uk-float-left" style="display:none">A capital (uppercase) letter. &nbsp </span>--%>
100
                                                <%--<span class="msg_number uk-text-danger uk-text-small uk-float-left" style="display:none">A number. &nbsp</span>--%>
101
                                                <%--<span class="msg_lenght uk-text-danger uk-text-small uk-float-left" style="display:none">Minimum 6 characters. &nbsp</span>--%>
102
                                                <%--<input id="password" name="password" type="password" placeholder="Password" class="form-control"></div>--%>
103
                                            <%--<div class="form-group">--%>
104
                                                <%--<input id="password_conf" name="password_conf" type="password" placeholder="Confirm password" class="form-control"></div>--%>
105
                                            <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-text-left uk-grid-stack" uk-grid="">
106
                                                <div class="uk-width-1-1 uk-text-meta uk-text-danger uk-first-column">(*) Required fields</div>
107
                                                <div class="uk-width-1-1 uk-grid-margin uk-first-column">RECAPTHA I AM NOT A ROBOT THING GOES HERE</div>
108
                                                <div class="uk-width-1-1 uk-grid-margin uk-first-column">
109
                                                    <button type="submit" class="uk-button uk-button-primary" onclick="return validateForm();">Register</button>
110
                                                </div>
111
                                            </div>
112
                                        </form>
113
                                    </div>
114
                                    <!-- END OF REGISTER FORM -->
115
                                    <script>
116

    
117
                                        //var myInput = document.getElementById("password");
118
                                        var usernameInput = document.getElementById("username");
119
                                        //var myEmailInput = document.getElementById("email");
120

    
121
//                                        // When the user starts to type something inside the password field
122
//                                        myInput.onkeyup = function() {
123
//
124
//                                            // Validate lowercase letters
125
//                                            var lowerCaseLetters = /[a-z]/g;
126
//                                            if (myInput.value.match(lowerCaseLetters)) {
127
//                                                $(".msg_lowercase_letter").fadeOut();
128
//                                            } else {
129
//                                                $(".msg_lowercase_letter").fadeIn();
130
//                                            }
131
//
132
//                                            // Validate capital letters
133
//                                            var upperCaseLetters = /[A-Z]/g;
134
//                                            if (myInput.value.match(upperCaseLetters)) {
135
//                                                $(".msg_capital_letter").fadeOut();
136
//                                            } else {
137
//                                                $(".msg_capital_letter").fadeIn();
138
//                                            }
139
//
140
//                                            // Validate numbers
141
//                                            var numbers = /[0-9]/g;
142
//                                            if (myInput.value.match(numbers)) {
143
//                                                $(".msg_number").fadeOut();
144
//                                            } else {
145
//                                                $(".msg_number").fadeIn();
146
//                                            }
147
//
148
//                                            // Validate length
149
//                                            if (myInput.value.length >= 6) {
150
//                                                $(".msg_lenght").fadeOut();
151
//                                            } else {
152
//                                                $(".msg_lenght").fadeIn();
153
//                                            }
154
//
155
//                                            if(myInput.value.match(lowerCaseLetters) && myInput.value.match(upperCaseLetters)
156
//                                                    && myInput.value.match(numbers) && (myInput.value.length >= 6)){
157
//                                                if($(".msg_please_add").css('display')!='none'){
158
//                                                    $(".msg_please_add").fadeOut();
159
//                                                }
160
//                                            } else {
161
//                                                if($(".msg_please_add").css('display')=='none') {
162
//                                                    $(".msg_please_add").fadeIn();
163
//                                                }
164
//                                            }
165
//                                        }
166

    
167
                                        usernameInput.onkeyup = function() {
168

    
169
                                            // Validate username minimum length
170
                                            if (usernameInput.value.length >= 5) {
171
                                                $(".msg_username_min_lenght").fadeOut();
172
                                            } else {
173
                                                $(".msg_username_min_lenght").fadeIn();
174
                                            }
175
                                            // Validate username maximum length
176
                                            if (usernameInput.value.length < 150) {
177
                                                $(".msg_username_max_lenght").fadeOut();
178
                                            } else {
179
                                                $(".msg_username_max_lenght").fadeIn();
180
                                            }
181
                                        }
182
//                                        myEmailInput.onfocusOut = function() {
183
//
184
//                                        }
185

    
186
                                        $("#first_name").focusin(function () {
187
                                            $(this).removeClass('aai-form-danger');
188
                                            $(".msg_first_name_error").fadeOut();
189
                                        });
190

    
191
                                        $("#last_name").focusin(function () {
192
                                            $(this).removeClass('aai-form-danger');
193
                                            $(".msg_last_name_error").fadeOut();
194
                                        });
195

    
196
                                        $("#username").focusin(function () {
197
                                            $(this).removeClass('aai-form-danger');
198
                                            $(".msg_username_error").fadeOut();
199
                                            $("#username_server_error").fadeOut();
200
                                        });
201

    
202
                                        $("#email").focusin(function () {
203
                                            $(this).removeClass('aai-form-danger');
204
                                            $(".msg_email_error").fadeOut();
205
                                            $(".msg_email_validation_error").fadeOut();
206
                                            $("#email_server_error").fadeOut();
207
                                        });
208

    
209
                                        $("#email_conf").focusin(function () {
210
                                            $(this).removeClass('aai-form-danger');
211
                                            $(".msg_email_conf_error").fadeOut();
212
                                        });
213

    
214
                                        $("#password").focusin(function () {
215
                                            $(this).removeClass('aai-form-danger');
216
                                            $(".msg_please_add").fadeOut();
217
                                            $(".msg_password_error").fadeOut();
218
                                            $(".msg_pass_conf_error").fadeOut();
219
                                            $(".msg_lowercase_letter").fadeOut();
220
                                            $(".msg_capital_letter").fadeOut();
221
                                            $(".msg_number").fadeOut();
222
                                            $(".msg_lenght").fadeOut();
223
                                        });
224

    
225
                                        $("#password_conf").focusin(function () {
226
                                            $(this).removeClass('aai-form-danger');
227
                                            $(".msg_pass_conf_error").fadeOut();
228
                                        });
229

    
230

    
231
//                                        // Run on page load
232
//                                        window.onload = function() {
233
//
234
////                                            // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
235
////                                            if (sessionStorage.getItem('name') == "name") {
236
////                                                return;
237
////                                            }
238
//
239
//                                            // If values are not blank, restore them to the fields
240
//
241
//                                            var first_name = sessionStorage.getItem('first_name');
242
//                                            if (first_name !== null) $('#first_name').val(first_name);
243
//
244
//                                            var last_name = sessionStorage.getItem('last_name');
245
//                                            if (last_name !== null) $('#last_name').val(last_name);
246
//
247
//                                            var organization = sessionStorage.getItem('organization');
248
//                                            if (organization !== null) $('#organization').val(organization);
249
//
250
//                                            var username = sessionStorage.getItem('username');
251
//                                            if (username !== null) $('#username').val(username);
252
//
253
//                                            var email = sessionStorage.getItem('email');
254
//                                            if (email !== null) $('#email').val(email);
255
//
256
//                                            var email_conf= sessionStorage.getItem('email_conf');
257
//                                            if (email_conf!== null) $('#email_conf').val(email_conf);
258
//
259
//
260
//                                        }
261
//
262
//                                        // Before refreshing the page, save the form data to sessionStorage
263
//                                        window.onbeforeunload = function() {
264
//                                            sessionStorage.setItem("first_name", $('#first_name').val());
265
//                                            sessionStorage.setItem("last_name", $('#last_name').val());
266
//                                            sessionStorage.setItem("organization", $('#organization').val());
267
//                                            sessionStorage.setItem("username", $('#username').val());
268
//                                            sessionStorage.setItem("email", $('#email').val());
269
//                                            sessionStorage.setItem("email_conf", $('#email_conf').val());
270
//                                        }
271

    
272

    
273

    
274
                                    </script>
275
                                </div>
276
                                </ul>
277
                            </div>
278
                        </div>
279
                        <!-- END OF CENTER SIDE -->
280
                    </div>
281
                </div>
282
            </div>
283
        </div>
284
    </div>
285
    <!-- CONTENT ENDS HERE -->
286
    <!-- FOOTER STARTS HERE-->
287
    <div class="custom-footer">
288
        <div class="uk-section-primary uk-section uk-section-small uk-padding-remove-bottom">
289
            <div class="uk-container">
290
                <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
291
                    <div class="uk-width-expand@m uk-light uk-first-column">
292
                        FOOTER???
293
                    </div>
294
                </div>
295
            </div>
296
        </div>
297
    </div>
298
</div>
299
</body>
300
</html>
(8-8/14)