Display login page
This commit is contained in:
parent
5bc4af399d
commit
70aaa1ff44
57
assets/css/base_login_page.css
Normal file
57
assets/css/base_login_page.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
/* background-color: #f5f5f5; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-signin {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 330px;
|
||||||
|
padding: 15px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-signin .checkbox {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-signin .form-floating:focus-within {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-floating:first-child input {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-floating:not(:first-child):not(:last-child) input {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-floating:last-child input {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
background-color: var(--bs-gray-700);
|
||||||
|
color: var(--bs-gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
background-color: var(--bs-gray-600);
|
||||||
|
color: var(--bs-gray-100);
|
||||||
|
}
|
||||||
@ -1,5 +0,0 @@
|
|||||||
/**
|
|
||||||
* Login page
|
|
||||||
*
|
|
||||||
* @author Pierre Hubert
|
|
||||||
*/
|
|
||||||
5
assets/js/base_login_page.js
Normal file
5
assets/js/base_login_page.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// Remove un-used alerts
|
||||||
|
document.querySelectorAll("[role=alert]").forEach(el => {
|
||||||
|
if(el.innerHTML.trim() === "")
|
||||||
|
el.remove();
|
||||||
|
})
|
||||||
@ -1,15 +1,35 @@
|
|||||||
use actix_web::Responder;
|
use actix_web::{HttpResponse, Responder};
|
||||||
use askama::Template;
|
use askama::Template;
|
||||||
|
|
||||||
use crate::constants::APP_NAME;
|
use crate::constants::APP_NAME;
|
||||||
|
|
||||||
|
#[derive(Template)]
|
||||||
|
#[template(path = "base_login_page.html")]
|
||||||
|
struct BaseLoginPage {
|
||||||
|
danger: String,
|
||||||
|
success: String,
|
||||||
|
page_title: &'static str,
|
||||||
|
app_name: &'static str,
|
||||||
|
}
|
||||||
|
|
||||||
#[derive(Template)]
|
#[derive(Template)]
|
||||||
#[template(path = "login.html")]
|
#[template(path = "login.html")]
|
||||||
struct LoginTemplate<'a> {
|
struct LoginTemplate {
|
||||||
app_name: &'a str,
|
_parent: BaseLoginPage,
|
||||||
|
mail: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
pub async fn login_route() -> impl Responder {
|
pub async fn login_route() -> impl Responder {
|
||||||
LoginTemplate { app_name: APP_NAME }.render().unwrap()
|
HttpResponse::Ok()
|
||||||
|
.content_type("text/html")
|
||||||
|
.body(LoginTemplate {
|
||||||
|
_parent: BaseLoginPage {
|
||||||
|
page_title: "Login",
|
||||||
|
danger: "".to_string(),
|
||||||
|
success: "".to_string(),
|
||||||
|
app_name: APP_NAME,
|
||||||
|
},
|
||||||
|
mail: "".to_string()
|
||||||
|
}.render().unwrap())
|
||||||
}
|
}
|
||||||
63
templates/base_login_page.html
Normal file
63
templates/base_login_page.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Auth service">
|
||||||
|
<title>{{ app_name }} - {{ page_title }}</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="/assets/css/bootstrap.css" rel="stylesheet" crossorigin="anonymous"/>
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<meta name="theme-color" content="#7952b3">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bd-placeholder-img {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-anchor: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-placeholder-img-lg {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="/assets/css/base_login_page.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="text-center">
|
||||||
|
|
||||||
|
<main class="form-signin">
|
||||||
|
|
||||||
|
<h1 class="h3 mb-3 fw-normal">{{ page_title }}</h1>
|
||||||
|
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
{{ danger }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
{{ success }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
TO_REPLACE
|
||||||
|
{% endblock content %}
|
||||||
|
|
||||||
|
<p class="mt-5 mb-3 text-muted">© 2022 -
|
||||||
|
<script>document.write(new Date().getFullYear())</script>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="/assets/js/base_login_page.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1 +1,22 @@
|
|||||||
here comes the login page for {{ app_name }}
|
{% extends "base_login_page.html" %}
|
||||||
|
{% block content %}
|
||||||
|
<form action="/login" method="post">
|
||||||
|
<div>
|
||||||
|
<div class="form-floating">
|
||||||
|
<input name="mail" type="text" required class="form-control" id="floatingName" placeholder="unsername"
|
||||||
|
value="{{ mail }}">
|
||||||
|
<label for="floatingName">Email address or username</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-floating">
|
||||||
|
<input name="password" type="password" required class="form-control" id="floatingPassword"
|
||||||
|
placeholder="Password">
|
||||||
|
<label for="floatingPassword">Password</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user