sql_app: basic front end. (login)
Signed-off-by: HeshamTB <hishaminv@gmail.com>
This commit is contained in:
parent
cdf3a6dfb1
commit
ede2b56b71
@ -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
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