open-collaboration-server
Version:
Open Collaboration Server implementation, part of the Open Collaboration Tools project
121 lines (107 loc) • 3.48 kB
HTML
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
background: rgb(244, 247, 252);
color: #111;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
overflow: hidden;
min-height: 568px;
min-width: 320px;
}
input,
button {
font-family: inherit;
font-size: 1rem;
line-height: 1rem;
}
button {
background-color: #5772f5;
border-radius: 5px;
border: none;
box-sizing: border-box;
color: white;
cursor: pointer;
padding: 12px;
margin: 4px 12px;
text-decoration: none;
}
.center-container {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
min-height: 100%;
width: 100%;
}
.card-box {
background-color: rgb(250, 253, 258);
border-radius: 5px;
box-shadow:
rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px,
rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
max-width: 600px;
width: 100%;
padding: 8px;
min-height: 200px;
}
.login-form {
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
}
.login-form>.label {
margin: 4px 12px;
}
.login-form>.field {
margin: 4px 12px;
}
#error {
margin: 4px 12px;
color: #92140C;
}
.login-success {
text-align: center;
}
</style>
<script>
async function login() {
const token = new URLSearchParams(location.search).get('token');
const user = document.getElementById('user').value;
const email = document.getElementById('email').value;
const resp = await fetch('/api/login/simple', {
method: 'POST',
body: JSON.stringify({ user, email, token }),
headers: {
'Content-Type': 'application/json'
}
});
if (resp.ok) {
document.getElementById('login-form').innerHTML = '<p class="login-success">Login successful. You can close this page now.<p>';
} else {
document.getElementById('error').style.visibility = 'visible';
}
}
</script>
</head>
<body>
<div class="center-container">
<div class="card-box login-form" id="login-form">
<span class="label">Username *</span>
<input class="field" id="user">
<span class="label">Email</span>
<input class="field" id="email">
<button class="submit" onclick="login()">Login</button>
<p style="visibility: hidden;" id="error">Error, could not login. Please try again.</p>
</div>
</div>
</body>
</html>