2023-03-13 16:46:18 +01:00
|
|
|
<!DOCTYPE html>
|
2023-03-11 17:22:27 +01:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2023-03-13 16:46:18 +01:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
|
|
|
|
|
|
|
|
|
|
<title>Cloudron OpenID Connect Login</title>
|
|
|
|
|
|
|
|
|
|
<!-- Theme CSS -->
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="/theme.css">
|
|
|
|
|
|
|
|
|
|
<!-- Fontawesome -->
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css"/>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
2023-03-13 19:08:41 +01:00
|
|
|
<script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
|
2023-03-13 16:46:18 +01:00
|
|
|
<script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
|
2023-03-11 17:22:27 +01:00
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2023-03-13 16:46:18 +01:00
|
|
|
<div class="layout-root">
|
|
|
|
|
<div class="layout-content">
|
|
|
|
|
<div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12" style="text-align: center;">
|
|
|
|
|
<img width="128" height="128" style="margin-top: -84px" src="/api/v1/cloudron/avatar"/>
|
|
|
|
|
<br/>
|
|
|
|
|
<h1>Cloudron OIDC Login</h1>
|
2023-03-11 17:22:27 +01:00
|
|
|
</div>
|
2023-03-13 16:46:18 +01:00
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
2023-03-13 19:08:41 +01:00
|
|
|
<form id="loginForm">
|
2023-03-13 16:46:18 +01:00
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label" for="inputUsername">Username</label>
|
|
|
|
|
<input type="text" class="form-control" id="inputUsername" name="username" autofocus required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label" for="inputPassword">Password</label>
|
|
|
|
|
<input type="password" class="form-control" name="password" id="inputPassword" required password-reveal>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label class="control-label" for="inputTotpToken">2FA Token</label>
|
|
|
|
|
<input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">
|
|
|
|
|
</div>
|
|
|
|
|
<button class="btn btn-primary btn-outline pull-right" type="submit">Log in</button>
|
|
|
|
|
</form>
|
2023-03-11 17:22:27 +01:00
|
|
|
</div>
|
2023-03-13 16:46:18 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
2023-03-13 19:08:41 +01:00
|
|
|
document.getElementById('loginForm').addEventListener('submit', function (event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
var apiUrl = '<%= submitUrl %>';
|
|
|
|
|
console.log('submit', apiUrl);
|
|
|
|
|
|
|
|
|
|
var body = {
|
|
|
|
|
username: document.getElementById('inputUsername').value,
|
|
|
|
|
password: document.getElementById('inputPassword').value,
|
|
|
|
|
totpToken: document.getElementById('inputTotpToken').value
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetch(apiUrl, {
|
|
|
|
|
method: 'POST'
|
|
|
|
|
body: JSON.stringify(body),
|
|
|
|
|
headers: { 'Content-type': 'application/json; charset=UTF-8' }
|
|
|
|
|
}).then(function (response) {
|
|
|
|
|
if (response.ok) return response.json();
|
|
|
|
|
return Promise.reject(response);
|
|
|
|
|
}).then(function (data) {
|
|
|
|
|
console.log('login success', data);
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
console.warn('Something went wrong.', error);
|
|
|
|
|
});
|
|
|
|
|
});
|
2023-03-13 16:46:18 +01:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
2023-03-11 17:22:27 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
