-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup.html
194 lines (187 loc) · 11.4 KB
/
signup.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Wed Jun 03 2015 20:38:09 GMT+0000 (UTC) -->
<html data-wf-site="54f9268573ee3d0b05795f70" data-wf-page="54f9268573ee3d0b05795f78">
<head>
<meta charset="utf-8">
<title>Sign Up - Converse</title>
<meta name="description" content="Sign up here to join Converse Alpha.">
<meta name="keywords" content="converse, global, chat, conversation, sign, up, apply, alpha, world, globe, international">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/goconverse.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","PT Serif:400,400italic,700,700italic","Raleway:200,300,regular,500,600,700"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/webclip.png">
<style>
.w-slider-nav-invert>div.w-active {
background-color: #00c2a2; !important
}
.w-slider-nav-invert>div {
background-color: #e5e5e5; !important
}
</style>
<!-- Adding Firebase code, differing from Webflow -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script>
// Checks the user's auth state
var ref = new Firebase("https://goconverse.firebaseio.com");
var userId;
function authDataCallback(authData)
{
var usersRef = new Firebase("https://goconverse.firebaseio.com/users");
if (authData)
{
console.log("User " + authData.uid + " is logged in with " + authData.provider);
console.log("Redirecting to homepage.html");
window.location = "homepage.html";
}
else
{
console.log("User is not logged in.");
}
};
// Register the callback to be fired every time auth state changes
ref.onAuth(authDataCallback);
// Function called when form is submitted - Calls createUser() then adds their userID, name, and reasons for joining to Firebase.
function createCredentials()
{
// Changing the button value to a waiting message
document.getElementById("Submit").setAttribute("value", "Please wait...");
// Calling Firebase's createUser()
ref.createUser(
{
email: document.getElementById('email').value,
password: document.getElementById('password').value
}
, // This function is passed to createUser() as the second argument
function(error, userData) {
if (error) {
switch (error.code) {
case "EMAIL_TAKEN":
console.log("The new user account cannot be created because the email is already in use.");
document.getElementById('Submit').setAttribute("value", "Error signing up");
var emailField = document.getElementById('email');
emailField.style.backgroundColor = "#FFA8A8";
emailField.value="Email address already taken";
break;
case "INVALID_EMAIL":
console.log("The specified email is not a valid email.");
document.getElementById('Submit').setAttribute("value", "Error signing up");
var emailField = document.getElementById('email');
emailField.style.backgroundColor = "#FFA8A8";
emailField.value="Invalid email address";
break;
default:
console.log("Error creating user:", error);
}
}
else
{
// On success, log userID
console.log("Successfully created user account with uid:", userData.uid);
// ...then add user ID and user data to Firebase
var usersRef = ref.child("users");
console.log(document.getElementById('country').value);
usersRef.child(userData.uid).set(
{
firstname: document.getElementById('first-name').value,
lastname: document.getElementById('last-name').value,
email: document.getElementById('email').value,
country: document.getElementById('country').value,
city: document.getElementById('city').value,
birthday: document.getElementById('birthday').value,
interests: document.getElementById('interests').value,
conversationsCount: 0,
userid: userData.uid
});
// ...then redirect the user to the success page
window.location.href="success.html";
}
});
}
// Create list of countries to choose from
var countriesString = "Afghanistan,Albania,Algeria,American Samoa,Andorra,Angola,Anguilla,Antarctica,Antigua and Barbuda,Argentina,Armenia,Aruba,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bermuda,Bhutan,Bolivia,Bosnia and Herzegovina,Botswana,Bouvet Island,Brazil,British Indian Ocean Territory,Brunei Darussalam,Bulgaria,Burkina Faso,Burundi,Cambodia,Cameroon,Canada,Cape Verde,Cayman Islands,Central African Republic,Chad,Chile,China,Christmas Island,Cocos (Keeling Islands),Colombia,Comoros,Congo,Cook Islands,Costa Rica,Cote D'Ivoire (Ivory Coast),Croatia (Hrvatska),Cuba,Cyprus,Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Estonia,Ethiopia,Falkland Islands (Malvinas),Faroe Islands,Fiji,Finland,France,France Metropolitan,French Guiana,French Polynesia,French Southern Territories,Gabon,Gambia,Georgia,Germany,Ghana,Gibraltar,Greece,Greenland,Grenada,Guadeloupe,Guam,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Heard and McDonald Islands,Honduras,Hong Kong,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Israel,Italy,Jamaica,Japan,Jordan,Kazakhstan,Kenya,Kiribati,Korea (North),Korea (South),Kuwait,Kyrgyzstan,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macau,Macedonia,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Marshall Islands,Martinique,Mauritania,Mauritius,Mayotte,Mexico,Micronesia,Moldova,Monaco,Mongolia,Montserrat,Morocco,Mozambique,Myanmar,Namibia,Nauru,Nepal,Netherlands,Netherlands Antilles,New Caledonia,New Zealand,Nicaragua,Niger,Nigeria,Niue,Norfolk Island,Northern Mariana Islands,Norway,Oman,Pakistan,Palau,Palestine,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Pitcairn,Poland,Portugal,Puerto Rico,Qatar,Reunion,Romania,Russian Federation,Rwanda,S. Georgia and S. Sandwich Isls.,Saint Kitts and Nevis,Saint Lucia,Saint Vincent and The Grenadines,Samoa,San Marino,Sao Tome and Principe,Saudi Arabia,Senegal,Seychelles,Sierra Leone,Singapore,Slovak Republic,Slovenia,Solomon Islands,Somalia,South Africa,Spain,Sri Lanka,St. Helena,St. Pierre and Miquelon,Sudan,Suriname,Svalbard and Jan Mayen Islands,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Togo,Tokelau,Tonga,Trinidad and Tobago,Tunisia,Turkey,Turkmenistan,Turks and Caicos Islands,Tuvalu,US Minor Outlying Islands,Uganda,Ukraine,United Arab Emirates,United Kingdom,United States,Uruguay,Uzbekistan,Vanuatu,Vatican City State (Holy See),Venezuela,Viet Nam,Virgin Islands (British),Virgin Islands (US),Wallis and Futuna Islands,Western Sahara,Yemen,Yugoslavia,Zaire,Zambia,Zimbabwe";
var newCountriesArray = countriesString.split(",");
</script>
</head>
<body>
<a class="w-inline-block go-top" href="#top" data-ix="hide"></a>
<div class="w-nav navigation" id="top" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
<div class="w-container">
<a class="w-nav-brand barnd" href="index.html"><img src="images/converseWhiteTrans.png" width="185">
</a>
<nav class="w-nav-menu nav-menu" role="navigation"><a class="w-nav-link nav-link" href="index.html">Home</a><a class="w-nav-link nav-link" href="login.html">Log In</a><a class="w-nav-link nav-link" href="signup.html">Sign Up</a>
</nav>
<div class="w-nav-button menu-ham">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="w-section banner inner" data-ix="show-hide-scroll-nav">
<div class="triangle"><img src="images/tri-gray.png">
</div>
<div class="w-container">
<div class="div-center">
<h1 class="h-inner" data-ix="text-inner"><span class="white-2">want to try it?</span></h1>
<div class="sub-text" data-ix="text-inner-2">Sign up to join Converse Alpha!</div>
</div>
</div>
</div>
<div class="w-section section">
<div class="w-container">
<div class="tittle-heading">
<h3>sign up here</h3>
<div class="div-line"><img src="images/arrow.png">
</div>
</div>
<div class="div-form">
<div class="w-form">
<form class="w-clearfix" id="email-form" name="email-form" data-name="email Form">
<input class="w-input text-field" id="first-name" type="text" placeholder="First name" name="First-name" data-name="First name" required="required" autofocus="autofocus">
<input class="w-input text-field" id="last-name" type="text" placeholder="Last name" name="Last-name" data-name="Last name" required="required">
<input class="w-input text-field" id="email" type="email" placeholder="email" name="Email" data-name="Email" required="required">
<input class="w-input text-field" id="password" type="password" placeholder="Password" name="Password" data-name="Password" required="required">
<select class="w-select country-select" id="country" name="Country" required="required" data-name="Country">
<option value="">Select one...</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="Brazil">Brazil</option>
<option value="Columbia">Columbia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="India">India</option>
<script>
for (index = 0; index < newCountriesArray.length; index++)
{
document.getElementById('country').insertAdjacentHTML("beforeend", "<option value=" + "\"" + newCountriesArray[index] + "\"" + ">" + newCountriesArray[index] + "</option>");
}
</script>
</select>
<input class="w-input text-field" id="city" type="text" placeholder="City" name="City" data-name="City" required="required">
<input class="w-input text-field" id="birthday" type="text" placeholder="Birthday DD/MM/YYYY" name="Birthday" data-name="Birthday">
<textarea class="w-input text-area" id="interests" placeholder="What are some interests of yours? Please list." name="User-Info" data-name="User Info" required="required"></textarea>
<div class="div-spc">
<input class="w-button button s-button" id="Submit" type="button" onclick="createCredentials()" value="Submit Sign-up" data-wait="Please wait...">
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>