Hugo H
716a4c6148
The signup form now works and the oauth buttons are only visible if they have been enabled in the settings.json file
216 lines
6.9 KiB
HTML
216 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login | {{ appName }}</title>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background-color: #f8f8f8;
|
|
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
margin: 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
.login {
|
|
background-color: white;
|
|
padding: 40px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 380px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0;
|
|
}
|
|
|
|
.header p {
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.oauth-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 20px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: #4b5563;
|
|
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #f3f4f6;
|
|
border-color: #e5e7eb;
|
|
}
|
|
|
|
.button img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: #9ca3af;
|
|
font-size: 14px;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.divider:not(:empty)::before {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.divider:not(:empty)::after {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.emaillogin {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loginbutton {
|
|
background-color: #1f2937;
|
|
color: white;
|
|
border: 1px solid #1f2937;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.loginbutton:hover {
|
|
background-color: #374151;
|
|
border-color: #374151;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.footer a {
|
|
color: #1f2937;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
<div class="login">
|
|
<div class="header">
|
|
<h1>Sign up to {{ appName }}</h1>
|
|
<p>Please fill out your details:</p>
|
|
</div>
|
|
{% if oauthlogin == "true" %}
|
|
<div class="oauth-buttons">
|
|
{% if githublogin == "true" %}
|
|
<a href="{{ githubUrl }}" class="button">
|
|
<img src="{{ url_for('static', filename='github-icon.png') }}" alt="Github logo">
|
|
Sign up with Github
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="divider">Or</div>
|
|
{% endif %}
|
|
<div class="emaillogin">
|
|
<input id="userbox" class="input" type="text" name="username" placeholder="Username">
|
|
<input id="displaybox" class="input" type="text" name="display" placeholder="Display name">
|
|
<input id="emailbox" class="input" type="text" name="email" placeholder="Email">
|
|
<input id="passbox" class="input" type="password" name="password" placeholder="Password">
|
|
<input id="codebox" class="input" type="password" name="password" placeholder="Signup Code">
|
|
</div>
|
|
<a onclick="login(document.getElementById('userbox').value, document.getElementById('passbox').value, document.getElementById('displaybox').value, document.getElementById('emailbox').value, document.getElementById('codebox').value)" class="button loginbutton">Sign Up</a>
|
|
<p id="incorrectdetailstext" style="display: none;">Incorrect signup code</p>
|
|
<p id="existingusertext" style="display: none;">User already exists</p>
|
|
<p id="somethingwrongtext" style="display: none;">Something went wrong</p>
|
|
<div class="footer">
|
|
<p>Already have an account? <a href="{{ url_for('index') }}">Sign in</a></p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
async function login(user, pass, displayname, email, code) {
|
|
document.getElementById("existingusertext").style = "display: none;"
|
|
document.getElementById("incorrectdetailstext").style = "display: none;"
|
|
document.getElementById("somethingwrongtext").style = "display: none;"
|
|
try {console.log("attempting to fetch")
|
|
const response = await fetch("{{ url_for('handleSignup') }}", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ "username": user, "password":pass, "email":email, "access_code":code, "displayname":displayname }),
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Response status: ${response.status}`);
|
|
}
|
|
const result = await response.json();
|
|
if (result == "User already exists") {
|
|
document.getElementById("existingusertext").style = "display: block;"
|
|
} else if (result == "Code not found") {
|
|
document.getElementById("incorrectdetailstext").style = "display: block;"
|
|
} else if (result == "Signups have been disabled" || result == "An error occured") {
|
|
document.getElementById("somethingwrongtext").style = "display: block;"
|
|
} else {
|
|
window.location = "{{ url_for('index') }}";
|
|
}
|
|
} catch (error) {
|
|
console.error(error.message)
|
|
}
|
|
return false
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |