finish user registration / login
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{{define "login"}}
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<html>
|
||||
<head>
|
||||
<title>Login ~ PixelDrain</title>
|
||||
<meta charset="UTF-8"/>
|
||||
@@ -26,6 +26,8 @@
|
||||
<meta property="og:url" content="http://pixeldra.in/" />
|
||||
<meta property="og:image" content="/res/img/pixeldrain_big.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
|
||||
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -33,26 +35,58 @@
|
||||
{{template "menu" .}}
|
||||
|
||||
<h1>Log in to your PixelDrain account</h1>
|
||||
<form action="/login" method="POST" class="highlight_dark border_top border_bottom">
|
||||
<div id="submit_result"></div>
|
||||
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
|
||||
<table style="margin-left: auto; margin-right: auto;">
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td><input name="username" type="text" value=""/></td>
|
||||
<td><input id="username" name="username" type="text" autocomplete="username" value=""/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password</td>
|
||||
<td><input name="password" type="password"/></td>
|
||||
<td><input id="password" name="password" type="password" autocomplete="current-password"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 style="text-align: right;"><input type="submit" value="Login"/></td>
|
||||
<td colspan=2 style="text-align: right;"><input type="submit" value="Login" class="button_highlight"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<br/>
|
||||
If you don't have a PixelDrain account, you can <a href="/register">register here</a>. No e-mail address required.<br/>
|
||||
If you don't have a PixelDrain account yet, you can <a href="/register">register here</a>. No e-mail address is required.<br/>
|
||||
{{template "footer"}}
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function submitForm(){
|
||||
var req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function(){
|
||||
if (this.readyState === 4) {
|
||||
var response = JSON.parse(req.responseText);
|
||||
var resultDiv = document.getElementById("submit_result");
|
||||
if (response.success) {
|
||||
resultDiv.className = "border_top border_bottom highlight_green";
|
||||
resultDiv.innerHTML = 'Success! Proceeding to user portal...<br/>'
|
||||
+'<a href="/user">Click here if you are not redirected automatically</a>';
|
||||
window.location.href = "/user";
|
||||
} else {
|
||||
resultDiv.className = "border_top border_bottom highlight_red";
|
||||
resultDiv.innerHTML = response.message;
|
||||
}
|
||||
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
var data = new FormData();
|
||||
data.append("username", document.getElementById("username").value);
|
||||
data.append("password", document.getElementById("password").value);
|
||||
|
||||
req.open("POST", apiEndpoint+"/user/login", true);
|
||||
req.send(data);
|
||||
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
58
res/template/account/logout.html
Normal file
58
res/template/account/logout.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{{define "logout"}}<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Logging out... ~ Pixeldrain</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="/global.css"/>
|
||||
<link rel="stylesheet" href="/res/style/layout.css"/>
|
||||
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
|
||||
<link rel="shortcut icon" href="/res/img/tray32.png"/>
|
||||
<meta name="theme-color" content="#9FCF6C"/>
|
||||
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
|
||||
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
|
||||
{{template "bgpattern"}}
|
||||
|
||||
<meta name="description" content="PixelDrain is a free file sharing service, you
|
||||
can upload any file and you will be given a shareable link right away.
|
||||
PixelDrain also supports previews for images, videos, audio, PDFs and much more.
|
||||
Uncensored, unmonitored and unmoderated."/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Logging out... ~ Pixeldrain" />
|
||||
<meta property="og:site_name" content="Pixeldrain" />
|
||||
<meta property="og:description" content="Instant file and screenshot sharing." />
|
||||
<meta property="og:url" content="http://pixeldra.in/" />
|
||||
<meta property="og:image" content="/res/img/pixeldrain_big.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
</head>
|
||||
<body>
|
||||
<div id='body' class="body">
|
||||
{{template "menu" .}}
|
||||
|
||||
<h1>Please confirm that you want to log out of your Pixeldrain account</h1>
|
||||
<form method="POST" target="/logout" class="highlight_dark border_top border_bottom">
|
||||
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
|
||||
</form>
|
||||
<br/>
|
||||
<h2>Why do I need to confirm my logout?</h2>
|
||||
<p>
|
||||
We need you to confirm your action here so we can be sure that
|
||||
you really requested a logout. If we didn't do this, anyone (or
|
||||
any website) would be able to send you to the page
|
||||
pixeldrain.com/logout and you would automatically get logged
|
||||
out of Pixeldrain, which would be very annoying.
|
||||
</p>
|
||||
<p>
|
||||
To prevent this from happening we're verifying that you actually
|
||||
want to log out by making you submit this form. Because this
|
||||
logout button triggers a different request type than normal
|
||||
page vitis we can confirm that you really want to log out.
|
||||
</p>
|
||||
|
||||
{{template "footer"}}
|
||||
</div>
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -1,20 +1,11 @@
|
||||
{{define "register"}}
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<html>
|
||||
<head>
|
||||
<title>Register ~ PixelDrain</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="/global.css"/>
|
||||
<link rel="stylesheet" href="/res/style/layout.css"/>
|
||||
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
|
||||
<link rel="shortcut icon" href="/res/img/tray32.png"/>
|
||||
<meta name="theme-color" content="#9FCF6C"/>
|
||||
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
|
||||
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
|
||||
{{template "bgpattern"}}
|
||||
|
||||
<meta name="theme-color" content="#82C13E"/>
|
||||
<meta name="description" content="PixelDrain is a free file sharing service, you
|
||||
can upload any file and you will be given a shareable link right away.
|
||||
PixelDrain also supports previews for images, videos, audio, PDFs and much more.
|
||||
@@ -27,7 +18,17 @@
|
||||
<meta property="og:image" content="/res/img/pixeldrain_big.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
|
||||
<link rel="stylesheet" href="/global.css"/>
|
||||
<link rel="stylesheet" href="/res/style/layout.css"/>
|
||||
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
|
||||
<link rel="shortcut icon" href="/res/img/tray32.png"/>
|
||||
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
|
||||
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
|
||||
|
||||
<script src="https://www.google.com/recaptcha/api.js"></script>
|
||||
|
||||
{{template "bgpattern"}}
|
||||
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
|
||||
</head>
|
||||
|
||||
@@ -36,32 +37,55 @@
|
||||
{{template "menu" .}}
|
||||
|
||||
<h1>Register a new Pixeldrain account</h1>
|
||||
<div id="submit_result"></div>
|
||||
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
|
||||
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
|
||||
<tr><td>Username (Used to log in)</td></tr>
|
||||
<tr><td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td></tr>
|
||||
<tr><td>used for logging into your account</td></tr>
|
||||
<tr><td><hr/></td></tr>
|
||||
<tr><td>E-mail address (optional):</td></tr>
|
||||
<tr><td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td></tr>
|
||||
<tr><td>
|
||||
your e-mail address will only be used for password
|
||||
resets and important account notifications.
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td>
|
||||
</tr>
|
||||
<tr><td colspan="2">used for logging into your account<br/><hr/></td></tr>
|
||||
<tr>
|
||||
<td>E-mail address</td>
|
||||
<td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td>
|
||||
</tr>
|
||||
<tr><td colspan="2">
|
||||
not required. your e-mail address will only be used for
|
||||
password resets and important account notifications<br/>
|
||||
<hr/>
|
||||
</td></tr>
|
||||
<tr><td><hr/></td></tr>
|
||||
<tr><td>
|
||||
Enter your password twice:<br/>
|
||||
(so we can verify that you have not made any typing errors)
|
||||
</td></tr>
|
||||
<tr><td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td></tr>
|
||||
<tr><td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td></tr>
|
||||
<tr><td><hr/></td></tr>
|
||||
<tr><td>Prove that you're not a robot (Click the white box)</td></tr>
|
||||
<tr><td style="text-align: center;">
|
||||
<div class="g-recaptcha" data-theme="dark" data-sitekey="6LdEeQ0TAAAAALBmDF_k_2LgbpuJM66PGspByViS"></div>
|
||||
</td></tr>
|
||||
<tr><td><hr/></td></tr>
|
||||
<tr><td colspan=2 style="text-align: right;"><input type="submit" value="Register" class="button_highlight"/></td></tr>
|
||||
<tr>
|
||||
<td>Password</td>
|
||||
<td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password verification</td>
|
||||
<td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
you need to enter your password twice so we can
|
||||
verify that you have not made any typing errors<br/>
|
||||
<hr/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Turing test<br/>
|
||||
(Click the white box)
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
<div class="g-recaptcha" data-theme="dark" data-sitekey="6LdEeQ0TAAAAALBmDF_k_2LgbpuJM66PGspByViS"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
the reCaptcha turing test verifies that you are not
|
||||
an evil robot that is trying to flood the website
|
||||
with fake accounts<br/><hr/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="2" style="text-align: right;"><input type="submit" value="Register" class="button_highlight"/></td></tr>
|
||||
</table>
|
||||
</form>
|
||||
<br/>
|
||||
@@ -86,6 +110,21 @@
|
||||
req.onreadystatechange = function(){
|
||||
if (this.readyState === 4) {
|
||||
var response = JSON.parse(req.responseText);
|
||||
var resultDiv = document.getElementById("submit_result");
|
||||
if (response.success) {
|
||||
resultDiv.className = "border_top border_bottom highlight_green";
|
||||
resultDiv.innerHTML = 'Registration completed! You can now <a href="/login">log in to your account</a>.<br/>'
|
||||
+ "We're glad to have you on board, have fun sharing!";
|
||||
} else {
|
||||
resultDiv.className = "border_top border_bottom highlight_red";
|
||||
var resultHtml = "Something went wrong, please correct these problems and try again:<br/><ul>";
|
||||
for (err in response.errors) {
|
||||
resultHtml += "<li>"+ response.errors[err].message +"</li>";
|
||||
}
|
||||
resultHtml += "</ul>";
|
||||
resultDiv.innerHTML = resultHtml;
|
||||
}
|
||||
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,11 @@
|
||||
<div id="navigation" class="highlight_light border_top border_bottom navigation">
|
||||
<a href="/">Home</a>
|
||||
<a href="/history">My Files</a>
|
||||
<a href="/api">API Documentation</a>
|
||||
<a href="/user">{{if .Authenticated}}{{.Username}}{{else}}Account{{end}}</a>
|
||||
<a href="/api">API</a>
|
||||
{{if .Authenticated}}<a href="/user">{{.Username}}</a>{{else}}
|
||||
<a href="/login">Login</a>
|
||||
<a href="/register">Register</a>
|
||||
{{end}}
|
||||
<a href="javascript:void(0);" class="icon" onclick="expandNavigation()">☰</a>
|
||||
<script>
|
||||
function expandNavigation() {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
{{define "history-cookies"}}
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
{{define "history-cookies"}}<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Upload History ~ PixelDrain</title>
|
||||
<meta charset="UTF-8"/>
|
||||
@@ -49,5 +48,4 @@
|
||||
<script src="/res/script/history.js"></script>
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
</html>{{end}}
|
||||
|
||||
Reference in New Issue
Block a user