oidc: apply basic style to login view

This commit is contained in:
Johannes Zellner
2023-03-13 16:46:18 +01:00
parent 36f8bfc229
commit 57689ffdf4
+53 -14
View File
@@ -1,24 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<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 -->
<script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
<title>Cloudron OpenID Connect Login</title>
</head>
<body>
<h1>Cloudron Login</h1>
<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>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<form method="post" action="<%= submitUrl %>">
<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>
</div>
</div>
</div>
</div>
</div>
<script>
console.log('OIDC login');
</script>
<form method="post" action="<%= submitUrl %>">
<div>
<label>Username</label>
<input type="username" name="username"/>
</div>
<div>
<label>Password</label>
<input type="password" name="password"/>
</div>
<button type="submit">Login</button>
</form>
</body>
</html>