login and Signup

This commit is contained in:
viviannTam 2024-01-10 16:46:45 +08:00
parent a5be62cc46
commit cf153c03cb
7 changed files with 183 additions and 0 deletions

BIN
Vivian/eco saver.mwb Normal file

Binary file not shown.

22
Vivian/index.php Normal file
View File

@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

21
Vivian/login.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="login.js" defer></script>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="button" onclick="validateForm()">Login</button>
</form>
</body>
</html>

37
Vivian/login.js Normal file
View File

@ -0,0 +1,37 @@
function validateForm() {
var username = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Perform basic validation
if (!email || !password) {
alert('Please enter both email and password');
return;
}
// If validation passes, send data to the server
sendDataToServer(email, password);
}
function sendDataToServer(email, password) {
// Use AJAX or fetch to send data to the server
// Example using fetch:
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
})
.then(response => response.json())
.then(data => {
// Handle the response from the server
console.log(data);
if (data.success) {
// Redirect or perform other actions for successful login
alert('Login successful');
} else {
alert('Login failed. Please check your credentials.');
}
})
.catch(error => console.error('Error:', error));
}

44
Vivian/server.js Normal file
View File

@ -0,0 +1,44 @@
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const port = 3000;
app.use(bodyParser.json());
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'your_mysql_password',
database: 'your_database_name',
});
db.connect(err => {
if (err) {
console.error('Error connecting to MySQL:', err);
} else {
console.log('Connected to MySQL');
}
});
app.post('/signup', (req, res) => {
const { username, password } = req.body;
// Perform server-side validation if needed
const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
db.query(sql, [username, password], (err, result) => {
if (err) {
console.error('Error executing SQL query:', err);
res.status(500).json({ success: false, message: 'Internal Server Error' });
} else {
console.log('User signed up successfully');
res.json({ success: true, message: 'User signed up successfully' });
}
});
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

24
Vivian/signup.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Page</title>
<script src="signup.js" defer></script>
</head>
<body>
<h2>Signup</h2>
<form id="signupForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<button type="button" onclick="validateForm()">Sign Up</button>
</form>
</body>
</html>

35
Vivian/signup.js Normal file
View File

@ -0,0 +1,35 @@
function validateForm() {
var userid = document.getElementById('user_id').value;
var username = document.getElementById('user_name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword = document.getElementById('confirmPassword').value;
var email = document.getElementById('email').value;
// Perform basic validation
if (password !== confirmPassword) {
alert('Passwords do not match');
return;
}
// If validation passes, send data to the server
sendDataToServer(username, email, password);
}
function sendDataToServer(username, password) {
// Use AJAX or fetch to send data to the server
// Example using fetch:
fetch('/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, email, password }),
})
.then(response => response.json())
.then(data => {
// Handle the response from the server
console.log(data);
})
.catch(error => console.error('Error:', error));
}