sql_app: basic front end. (login)

Signed-off-by: HeshamTB <hishaminv@gmail.com>
This commit is contained in:
HeshamTB 2022-06-09 17:03:07 +03:00
parent cdf3a6dfb1
commit ede2b56b71
Signed by: Hesham
GPG Key ID: 74876157D199B09E
6 changed files with 139 additions and 1 deletions

View File

@ -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 import OAuth2PasswordBearer, OAuth2PasswordRequestForm, OAuth2AuthorizationCodeBearer
from fastapi.security.api_key import APIKey from fastapi.security.api_key import APIKey
from fastapi.responses import PlainTextResponse from fastapi.responses import PlainTextResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
from sqlalchemy.orm import Session from sqlalchemy.orm import Session
from . import crud, models, schemas, auth_helper, init_db from . import crud, models, schemas, auth_helper, init_db
@ -16,11 +18,16 @@ models.Base.metadata.create_all(bind=engine)
oauth = OAuth2PasswordBearer(tokenUrl="tkn") oauth = OAuth2PasswordBearer(tokenUrl="tkn")
app = FastAPI(title="IoT Building System") 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 # Split into endpoints modules
#app.include_router(users.router,prefix="/users", tags=["User"]) #app.include_router(users.router,prefix="/users", tags=["User"])
init_db.init() 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)): def get_current_user(token: str = Depends(oauth), db: Session = Depends(get_db)):
credentials_exception = HTTPException( credentials_exception = HTTPException(

20
sql_app/static/main.css Normal file
View 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
View 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; }
})
}

View 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>

View 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>

View 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 %}