article

Saturday, September 3, 2022

Python Login with sqlite3 and Python Eel library

Python Login with sqlite3 and Python Eel library

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

Create Database sqlite3 using python
createdb.py
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
#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
Posted by ednalan at 11:28 PM . Under , .

Related Post