edge/pkg/module/auth/http/templates/login.html.tmpl

105 lines
3.0 KiB
Cheetah

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Login</title>
<style>
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
html, body {
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
}
#container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex-direction: column;
}
.form-control {
margin-bottom: 0.5em;
}
.form-control > label {
font-weight: bold;
}
.form-control > input {
width: 100%;
line-height: 1.4em;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 1.2em;
padding: 0 5px;
margin: 5px 0;
}
#submit {
float: right;
background-color: #5e77ff;
padding: 5px 10px;
border: none;
border-radius: 5px;
color: white;
font-size: 1em;
cursor: pointer;
}
#submit:hover {
background-color: hsl(231deg 100% 71%);
}
#login {
padding: 1.5em 1em;
border: 1px solid #e0e0e0;
background-color: white;
border-radius: 5px;
box-shadow: 2px 2px #cccccc1c;
color: #333333 !important;
}
#message {
margin-bottom: 10px;
color: red;
text-shadow: 1px 1px #fff0f0;
}
</style>
</head>
<body>
<div id="container">
<p id="message">{{ .Message }}</p>
<div id="login">
<form method="post" action="{{ .URL }}">
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="{{ .Username }}" required autofocus />
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="{{ .Password }}" required />
</div>
<input id="submit" type="submit" value="Login" />
</form>
</div>
</div>
</body>
</html>