-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (193 loc) · 7.52 KB
/
index.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
195
196
197
198
199
200
201
202
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Join Mattermost.fsinf.at!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://mm.fsinf.at/">
<link rel="icon" type="image/png" href="https://mattermost.fsinf.at/static/images/favicon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://mattermost.fsinf.at/static/images/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://mattermost.fsinf.at/static/images/favicon/favicon-96x96.png" sizes="96x96">
<style>
body { font-family: sans-serif; max-width: 650px; padding: 20px; margin: auto; }
input { margin-bottom: 1em; padding: 8px 4px; width: 100%; box-sizing: border-box; }
input, select { margin-bottom: 1em; }
label { font-weight: bold; display: block; }
form { max-width: 260px; }
footer { margin-top: 2em; border-top: 1px solid #aaa; padding: 0.5em; font-size: small; }
#matrikel { letter-spacing: 0.1em; }
#tagline { font-size: large; }
#success {background-color: palegreen }
.error:not(:empty) {background-color: salmon;}
.error:not(:empty), #success { padding: 5px; margin: 1em 0; border-radius: 5px; }
.button {
text-decoration: none;
padding: 0.4em 0.5em;
width: 100%;
color: white;
cursor: pointer;
border: 0;
border-bottom: 5px solid #4e6b79;
border-radius: 3px;
background: #8dabd9;
}
.button[type='submit'] {
padding: 0.5em;
font-size: 1.3em;
background-color: #53b91b;
}
#viewdata[data-role=student] .employee-only { display: none; }
#viewdata[data-role=student] .guest-only { display: none; }
#viewdata[data-role=employee] .student-only { display: none; }
#viewdata[data-role=employee] .guest-only { display: none; }
#viewdata[data-role=guest] .student-only { display: none; }
#viewdata[data-role=guest] .employee-only { display: none; }
/* Firefox */
input[type=number]{
-moz-appearance:textfield;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
button:active { border: 0; margin-top: 5px; }
#viewdata { margin: 1em; margin-top: 2em; }
h1 { color: #166de0; }
.hint {
position: relative;
width: 1em;
text-align: center;
font-weight: normal;
float: right;
background: #ececec;
color: #555;
cursor: default;
}
.hint p {
display: none;
position: absolute;
right: 0;
width: 200px;
background: white;
top: 10px;
text-align: left;
box-shadow: 10px 10px 10px #0002;
padding: 0.5em;
font-size: 0.9em;
z-index: 1;
color: black;
}
.hint:hover p { display: block }
</style>
</head>
<body>
<h1>Join mattermost<small>.fsinf.at</small>!</h1>
<p id=tagline>Your chat platform for your informatics studies at TU Wien.</p>
<noscript><div class=error>This site and Mattermost require JavaScript.</div></noscript>
<div id=error class=error></div>
Already have an account? <a class=button href="https://mattermost.fsinf.at/">Log in</a>
<div id=viewdata data-role=student>
<div>
<br>
<label>You are
<select id=role autocomplete=off>
<option value="student">a student</option>
<option value="employee">an employee</option>
<option value="guest">neither (guest account plz!)</option>
</select>
</label>
</div>
<div class=student-only>
<form id=form-student>
<div class=hint>?<p>Can be found on your TUCard. Is not shown to other students.</p></div>
<label for=matrikel>Matriculation number</label> <input id=matrikel type=number required min=1 max=99999999 />
<div class=hint>?<p>Is shown to other students. You can use a pseudonym. Can be changed later.</p></div>
<label for=username>Account name</label> <input id=username required />
<label for=password>New password</label> <input id=password type=password required />
<button class=button type=submit>Sign up</button>
</form>
</div>
<div class=employee-only>
Please <a href="https://mattermost.fsinf.at/signup_email">sign up here</a> with your @tuwien.ac.at email.
</div>
<div class=guest-only>
<form id="form-guest">
<label for=username>eMail address</label> <input id=email type="email" required />
<p>Guest accounts are very limited and will be deleted after 30 days of inactivity.</p>
<button class=button type=submit>Get guest account</button>
</form>
</div>
<small>By proceeding, you agree to our
<a href="https://wiki.fsinf.at/wiki/Mattermost">Terms of Service</a> and
<a href="https://www.fsinf.at/datenschutz">Privacy Policy</a>.</small>
<footer>A service of your <a href="https://www.fsinf.at/">Fachschaft Informatik</a>.</footer>
<script>
let errorDiv = document.getElementById('error');
if (!window.fetch) {
errorDiv.textContent = 'Your browser does not support fetch(). Please install a new browser, like Firefox.';
}
document.getElementById('role').addEventListener('change', function (e) {
document.getElementById('viewdata').dataset.role = e.target.value;
});
document.getElementById('form-student').addEventListener("submit", async function(e){
e.preventDefault();
errorDiv.textContent = '';
let user = 'e' + document.getElementById('matrikel').value;
let email = user + '@student.tuwien.ac.at';
let response = await fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
username: document.getElementById('username').value,
password: document.getElementById('password').value
})
});
if (response.status == 400){
let error = await response.json();
if (error.id == 'store.sql_user.save.email_exists.app_error'){
errorDiv.innerHTML = 'You already have an account, <a href="https://mattermost.fsinf.at/">please log in</a> (if you forgot your password, use the password recovery).';
} else {
errorDiv.textContent = error.message;
}
} else if (response.status == 201){
document.getElementById('form-student').outerHTML = '<div id=success>Your account has created! Please confirm our email to ' + email + '.<br>'
+'If you haven\'t yet configured your email client, <a href="https://mail.student.tuwien.ac.at/webmail/">log in to Webmail</a> with username '+user+ ' and your TU password.</div>';
}
}, false);
document.getElementById('form-guest').addEventListener("submit", async function(e){
e.preventDefault();
errorDiv.textContent = '';
let email = document.getElementById('email').value;
let response = await fetch('/api/bot/guest', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
});
if (response.status == 400){
let error = await response.json();
if (error.id == 'store.sql_user.save.email_exists.app_error'){
errorDiv.innerHTML = 'You already have an account, <a href="https://mattermost.fsinf.at/">please log in</a> (if you forgot your password, use the password recovery).';
} else {
errorDiv.textContent = error.message;
}
} else if (response.status == 200){
document.getElementById('form-guest').outerHTML = '<div id=success>Your account has been created! Please complete the account creation by following steps in our email to ' + email + '.</div>';
}
}, false);
if(window.location.hash == "#guest") {
document.getElementById("role").value="guest";
document.getElementById('viewdata').dataset.role = "guest";
document.forms["form-guest"].submit();
}
</script>
</body>
</html>