Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.
https://github.com/ChrisKnott/Eel
Install
pip install eel
C:\python_dev\login>pip install eel
createdb.py
#createdb.py
import sqlite3
from sqlite3 import Error
def create_connection(db_file):
""" create a database connection to a SQLite database """
conn = None
try:
conn = sqlite3.connect(db_file)
print(sqlite3.version)
except Error as e:
print(e)
finally:
if conn:
conn.close()
if __name__ == '__main__':
create_connection(r"C:\python_dev\login\views\database\storage.db")
run C:\python_dev\login>createdb.py
main.py
#main.py
from __future__ import print_function
import eel
from views.models.login import login_user, login_session
eel.init('views')
@eel.expose
def btn_login(user_name, password):
msg = login_user(user_name, password)
eel.login_return(str(msg))
@eel.expose
def get_user_online():
get_user = login_session()
print(get_user)
eel.get_user(str(get_user))
eel.start("index.html", size=(1366, 743))
Create table CREATE TABLE users (
id INTEGER NOT NULL
PRIMARY KEY,
Name TEXT,
Phone NUMBER,
User TEXT,
Password TEXT,
Email TEXT,
Birth DATE
);
CREATE TABLE user_session (
id INTEGER NOT NULL
PRIMARY KEY,
User TEXT
);
login/views/models/login.py
#login/views/models/login.py
import sqlite3
def login_user(user_name, password):
print(user_name)
print(password)
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
cursor.execute(
"SELECT Password FROM users WHERE User =?", (user_name,))
get_password = cursor.fetchone()
if password == get_password[0]:
msg = "success"
connect.close()
return msg
else:
msg = "failed"
connect.close()
return msg
except Exception as Error:
print(Error)
msg = "failed"
return msg
def login_session():
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
cursor.execute("SELECT User FROM user_session WHERE id =?", (1,))
get_user_online = cursor.fetchone()
user_online = []
for name in get_user_online:
user_online.append(name)
connect.close()
return user_online[0]
except Exception as error:
user_online = "error"
print(error)
return user_online
Make your Front-end HTML CSS and Javascript login/views/index.html
//login/views/index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="img/password.png">
<title>Python Login</title>
</head>
<body class="background">
<div class="container">
<div class="row">
<div class="wrap-login">
<div class="login_label">
<label class="label_login">Member Login</label>
</div>
<div class="login_user">
<label class="label_input">User:</label>
<input type="text" class="inputs" name="username" id="get_user_login" placeholder="Username"><br>
</div>
<div class="login_user">
<label class="label_input">Password:</label>
<input type="password" class="inputs" name="password" id="get_user_password" placeholder="* * * * * * * * *">
</div>
<div class="buttons_container">
<label class="top_label" style="margin: 0 20px;">Forgot your password? Click here</label>
<button class="buttons" onclick="btnlogin();">Confirm</button>
</div>
<div class="login_user" style="text-align: center;width: 100%;">
<div id="login_txt"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
// USER LOGIN
async function btnlogin(){
//var username = $('#get_user_login').val();
//alert(username);
eel.btn_login($('#get_user_login').val(), $('#get_user_password').val())
};
eel.expose(login_return)
function login_return(status){ //alert(status);
if (status == "success"){
location.href = "admin.html";
}
if (status == "failed"){
$('#login_txt').text("Incorrect User or Password")
}
}
</script>
</body>
</html>
login/views/admin.html
#login/views/admin.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="/eel.js"></script>
<link rel="icon" href="img/password.png">
<title>Admin</title>
</head>
<body>
<div class="container">
<h1 id="user_logged_id"></h1>
</div>
<script type="text/javascript">
$(document).ready(function(){
eel.get_user_online()
})
eel.expose(get_user)
function get_user(user){
$('#user_logged_id').text('User logged in: '+ user)
}
</script>
</body>
</html>
css file
#login/views/css/main.css
body{
padding: 0;
margin: 0;
}
@font-face{
font-family: "BungeeInline-Regular";
src: url("../fonts/BungeeInline-Regular.ttf");
}
@font-face{
font-family: "PoiretOne-Regular";
src: url("../fonts/PoiretOne-Regular.ttf");
}
.container{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.background{
display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;background:#9053c7;background:-webkit-linear-gradient(-135deg,#c850c0,#4158d0);background:-o-linear-gradient(-135deg,#c850c0,#4158d0);background:-moz-linear-gradient(-135deg,#c850c0,#4158d0);background:linear-gradient(-135deg,#c850c0,#4158d0)
}
.wrap-login{
margin: auto;
width:560px;height:450px;background:#fff;border-radius:10px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:space-between;
}
.row {
padding-top:100px;
}
.login_label, .buttons_container{
width: 100%;
height: 10vh;
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.label_login{
font-family: "PoiretOne-Regular";
font-size: 40px;
}
.login_user{
width: 100%;
height: 10vh;
margin-top: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.label_input{
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: black;
margin: 0 10px;
width: 80px;
}
.inputs{
background: transparent;
border: none;
border-bottom: 1px solid #BF3EFF;
margin: 0 10px;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color:black;
padding-left: 10px;
}
.inputs:focus{
border-bottom:2px solid #9A32CD;
}
.buttons{
margin: 0 20px;
border:1px solid white;
background:#BF3EFF ;
color:white;
border-radius: 3px;
width: 120px;
height: 40px;
font-family: sans-serif;
font-size: 16px;
}
.buttons:hover{
cursor: pointer;
background:#9A32CD ;
}
#login_txt { color: #EC4E20; width: 100%;font-weight:bold;font-size:22px;}
Run : C:\python_dev\login>python main.py
