RidersGuide Website

Description

The RidersGuide website is a platform for users to register, log in, and update their personal information. The project uses a local SQLite database to manage user data, which is stored in the browser’s local storage. The website allows for user authentication, data modification, and account deletion.

Features

• User Authentication: Users can log in using their registered credentials.
• Account Registration: New users can register with a username, password, email, and date of birth.
• Edit User Data: After logging in, users can update their personal information.
• Account Deletion: Logged-in users can delete their account.
• Responsive Design: The website is mobile-friendly with a collapsible menu.

Files

The project consists of multiple JavaScript files that handle various functionalities for the website:

login.js

Handles user login by verifying the username and password from the local SQLite database. Upon successful login, the user’s data (username, email, date of birth) is stored in the local storage for future access.

• Database: Opens a local SQLite database named RidersGuide.
• Functionality:
  • Verifies login credentials.
  • Stores user data in local storage on successful login.
  • Redirects to the homepage on successful login or shows an alert on failure.

edit.js

Enables logged-in users to edit their personal information (username, password, and email). After the update, the changes are stored in both the SQLite database and local storage.

• Database: Updates user data in the SQLite database.
• Functionality:
  • Validates user input.
  • Updates the user’s data in the database.
  • Updates local storage with the new values.

register.js

Handles new user registration. It checks whether the username or email already exists in the database, validates the input fields, and inserts the new user data into the database.

• Database: Creates a Users table in the local SQLite database if it doesn’t exist.
• Functionality:
  • Validates input fields.
  • Ensures unique usernames and emails.
  • Inserts new user data into the database and redirects to the login page.

script.js

This file contains the main logic for the website, including user interaction with the navigation menu, handling login/logout actions, and controlling the behavior of the website’s elements based on the time of day.

• Functionality:
  • Displays user data (like greeting messages) based on the time of day.
  • Manages the mobile menu and the logged-in user’s menu.
  • Handles log-out functionality and account deletion.

userData.js

This file retrieves the user data from local storage and displays it on the user’s profile page.

• Functionality:
  • Sets the username, password, email, and date of birth fields with the values stored in local storage.

Setup

To get started with the project:

1. Clone the repository to your local machine.
2. Open the HTML files in a browser.
3. Ensure that your browser supports localStorage and openDatabase for storing and retrieving data.
4. The project will automatically create and manage a local SQLite database (RidersGuide).

Usage

1. Registration: Visit the registration page, fill in the required fields (username, password, email, date of birth), and click "Speichern" to create a new account.
2. Login: After registering, you can log in using the username and password you provided. If the login is successful, you will be redirected to the homepage.
3. Edit User Data: Once logged in, you can edit your username, password, and email from the profile page.
4. Account Deletion: You can delete your account from the profile page, which will remove all your data from the database.