sql_app: basic front end. (login)
Signed-off-by: HeshamTB <hishaminv@gmail.com>
This commit is contained in:
parent
cdf3a6dfb1
commit
ede2b56b71
GPG Key ID:
74876157D199B09E
@ -1,7 +1,9 @@
|
||||
from fastapi import Depends, FastAPI, HTTPException, status
|
||||
from fastapi import Depends, FastAPI, HTTPException, status, Request
|
||||
from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm, OAuth2AuthorizationCodeBearer
|
||||
from fastapi.security.api_key import APIKey
|
||||
from fastapi.responses import PlainTextResponse
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from . import crud, models, schemas, auth_helper, init_db
|
||||
@ -16,11 +18,16 @@ models.Base.metadata.create_all(bind=engine)
|
||||
oauth = OAuth2PasswordBearer(tokenUrl="tkn")
|
||||
|
||||
app = FastAPI(title="IoT Building System")
|
||||
app.mount("/sql_app/static", StaticFiles(directory="sql_app/static"), name="static")
|
||||
templates = Jinja2Templates(directory="sql_app/templates")
|
||||
|
||||
# Split into endpoints modules
|
||||
#app.include_router(users.router,prefix="/users", tags=["User"])
|
||||
init_db.init()
|
||||
|
||||
@app.get("/")
|
||||
def home(request: Request):
|
||||
return templates.TemplateResponse("home.html", context={"request": request})
|
||||
|
||||
def get_current_user(token: str = Depends(oauth), db: Session = Depends(get_db)):
|
||||
credentials_exception = HTTPException(
|
||||
|
||||
20
sql_app/static/main.css
Normal file
20
sql_app/static/main.css
Normal file
@ -0,0 +1,20 @@
|
||||
/* custom css */
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 2rem;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
36
sql_app/static/main.js
Normal file
36
sql_app/static/main.js
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
(function () {
|
||||
console.log("Sanity Check!");
|
||||
})()
|
||||
|
||||
var token = null;
|
||||
var logged_in = false;
|
||||
|
||||
function handleLogInClick() {
|
||||
|
||||
var username = document.getElementById("username_box").value;
|
||||
var password = document.getElementById("password_box").value;
|
||||
console.log("Username ", username);
|
||||
|
||||
fetch('/users/tkn', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-type': 'application/x-www-form-urlencoded',
|
||||
'accept': 'application/json'
|
||||
},
|
||||
body: `grant_type=&username=${username}&password=${password}&scope=&client_id=&client_secret=`
|
||||
})
|
||||
.then(response => {
|
||||
if (!response) {
|
||||
throw new Error("HTTP error " + response.status);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
console.log(json);
|
||||
token = json['access_token'];
|
||||
console.log(token);
|
||||
if (token) { logged_in = true; }
|
||||
})
|
||||
|
||||
}
|
||||
32
sql_app/templates/_base.html
Normal file
32
sql_app/templates/_base.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IoT Building System</title>
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<!-- styles -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
|
||||
<link href="{{url_for('static', path='/main.css')}}" rel="stylesheet" media="screen">
|
||||
{% block css %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<!-- child template -->
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
|
||||
<!-- scripts -->
|
||||
<script src="{{url_for('static', path='/main.js')}}" type="text/javascript"></script>
|
||||
{% block js %}{% endblock %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
6
sql_app/templates/footer.html
Normal file
6
sql_app/templates/footer.html
Normal file
@ -0,0 +1,6 @@
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<small><span class="text-muted">© <a href="https://testdriven.io">TestDriven.io</a></span></small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
37
sql_app/templates/home.html
Normal file
37
sql_app/templates/home.html
Normal file
@ -0,0 +1,37 @@
|
||||
{% extends "_base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="starter-template">
|
||||
<h1>IoT Building System</h1>
|
||||
<hr><br>
|
||||
<div>
|
||||
<h3>Task</h3>
|
||||
<p>Login</p>
|
||||
<div class="login_form" role="group" aria-label="Basic example">
|
||||
<form>
|
||||
<input type="text" id="username_box" placeholder="Username">
|
||||
<input type="password" id="password_box" placeholder="Password">
|
||||
<input type="button"value="Login" class="btn btn-primary" onclick="handleLogInClick()">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div>
|
||||
<h3>Task Status</h3>
|
||||
<br>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Status</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tasks">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user