This is a basic login system that will create ticket upon successful user login. The backend server is built using FastAPI.
Python v3.11.6 is used for development.Run the following commands to create a virtual environment and install all necessary dependencies:
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt
Then, run the following command to launch the backend server
uvicorn app:app
You will notice that a ".db" file is created. That is a SQLite database used to store data!
To launch frontend, double click index.html
to open it in browser.
index.html
is the initial landing page for login, and home.html
is only accessible upon successful login.
Please open the HTML files directly in browser, after launching the backend server.
The table below shows the existing user credentials for login:
Username | Password |
---|---|
John Doe | john123 |
Oyen | cuteOyen |
After entering username and password accordingly, click "Login" button to login. Upon successful login, user will be redirected to home.html
.
In home.html
, user can click "Logout" hyperlink to log out. After logging out, the user cannot access home.html
anymore.
- To change the ".db" filename, do it at
config.py
. - If you launch the backend server in different port number (other than 8000), please modify the host and port number at
src/functions.js
. - If you would like to add more authenticated users, please modify the SQL in the
insert_users_sql
variable atservices/service.py
.
All authenticated users are stored in the USERS
table. Upon successful login, the backend system will create a ticket and add both username and ticket string to the TICKETS
table. The ticket will be saved in session variable too.
When home.html
is accessed, the system will retrieve the ticket string in the session variable and check its existence in TICKETS
table.
When user logout, the system delete the ticket string from the TICKETS
table. The session variable is removed from the frontend side. This will restrict the user to access the home.html
or other authenticated webpages.
Frontend and backend are integrated through FastAPI.