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
205 lines
5.7 KiB
HTML
205 lines
5.7 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 into {{ appName }}</h1>
|
|
<p>Log in:</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 in 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="passbox" class="input" type="password" name="password" placeholder="Password">
|
|
</div>
|
|
<a onclick="login(document.getElementById('userbox').value, document.getElementById('passbox').value)" class="button loginbutton">Login</a>
|
|
<p id="incorrectdetailstext" style="display: none;">Incorrect username or password</p>
|
|
<div class="footer">
|
|
<p>Don't have an account? <a href="{{ url_for('signup') }}">Sign up</a></p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
async function login(user, pass) {
|
|
try {console.log("attempting to fetch")
|
|
const response = await fetch("{{ url_for('handleLogin') }}", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ "username": user, "password":pass }),
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Response status: ${response.status}`);
|
|
}
|
|
const result = await response.json();
|
|
if (result != "Incorrect username or password") {
|
|
document.cookie = `auth_token=${result}`;
|
|
window.location.reload();
|
|
} else {
|
|
document.getElementById("incorrectdetailstext").style = "display: block;"
|
|
}
|
|
} catch (error) {
|
|
console.error(error.message)
|
|
}
|
|
return false
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |