george/borg-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve login form layout and aesthetic

Browse Source
This commit is contained in:
George Lacey 2021-05-10 00:32:57 +01:00
parent 93da0603da
commit 3f5a074fef
1 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
borgweb/templates/registration/login.html
View File

@ -3,15 +3,57 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Login</title> <title>Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<style>
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: aliceblue;
text-align: center;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
</style>
</head> </head>
<body> <body class="text-center">
{% block content %} {% block content %}
<h2>Log In</h2>
<form method="post"> <main class="form-signin">
{% csrf_token %} <form method="post p-4">
{{ form.as_p }} {% csrf_token %}
<button type="submit">Log In</button> <!-- <img class="mb-4" src="" alt="" width="" height="">-->
</form> <h1 class="h1 mb-4 fw-regular">Log in</h1>
<div class="form-floating my-2">
<input class="form-control" placeholder="Username" type="text" name="username" autofocus=""
autocapitalize="none" autocomplete="username"
maxlength="150" required="" id="{{ form.username.id_for_label }}">
<label for="{{ form.username.id_for_label }}">Username</label>
</div>
<div class="form-floating mb-4">
<input class="form-control" placeholder="Password" type="password" name="password"
autocomplete="current-password" required=""
id="{{ form.password.id_for_label }}">
<label for="{{ form.password.id_for_label }}">Password</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Log In</button>
</form>
</main>
{% endblock %} {% endblock %}
</body> </body>
</html> </html>