diff --git a/package.json b/package.json new file mode 100644 index 0000000..1d7c6dc --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "your-app-name", + "version": "1.0.0", + "type": "module", + "main": "index.js", + "scripts": { + "start": "node signup_server.js" + }, + "dependencies": { + "express": "^4.17.1", + "body-parser": "^1.19.0", + "cors": "^2.8.5" + } +} diff --git a/sign_up.css b/sign_up.css index 5d785bc..f326b6a 100644 --- a/sign_up.css +++ b/sign_up.css @@ -97,3 +97,10 @@ form { padding: 0; } +.error-message { + color: red; + font-size: 14px; + margin-top: 5px; +} + + diff --git a/sign_up.html b/sign_up.html index 0ebe3f6..8bfb3d7 100644 --- a/sign_up.html +++ b/sign_up.html @@ -5,22 +5,29 @@ Sign up|Studentify + -
+
-

Sign Up

-

Please fill in this form to create an account.

+

Sign Up

+

Please fill in this form to create an account.

+ - + +

- + +

- + +

+ +
+ + + + \ No newline at end of file diff --git a/sign_up.js b/sign_up.js new file mode 100644 index 0000000..ca5cc0c --- /dev/null +++ b/sign_up.js @@ -0,0 +1,71 @@ +document.getElementById('signupForm').addEventListener('submit', function (e) { + e.preventDefault(); + + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; + const repeatPassword = document.getElementById('repeatPassword').value; + + // Reset previous error messages + document.getElementById('emailError').innerText = ''; + document.getElementById('passwordError').innerText = ''; + document.getElementById('repeatPasswordError').innerText = ''; + + // Validate if fields are empty + if (!email || !password || !repeatPassword) { + alert('Please fill in all fields.'); + return; // Stop further execution if any field is empty + } + + let isValid = true; + + // Email validation + const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; + if (!emailPattern.test(email)) { + document.getElementById('emailError').innerText = 'Please enter a valid email address.'; + isValid = false; + } + + // Password validation + if (password.length < 6) { + document.getElementById('passwordError').innerText = 'Password must be at least 6 characters.'; + isValid = false; + } + + // Repeat Password validation + if (password !== repeatPassword) { + document.getElementById('repeatPasswordError').innerText = 'Passwords do not match.'; + isValid = false; + } + + // If all validations pass, submit the form using Fetch API + if (isValid) { + // Create URL-encoded string + const formData = new URLSearchParams(); + formData.append('email', email); + formData.append('password', password); + formData.append('repeatPassword', repeatPassword); + + fetch('http://localhost:3000/signup', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', // Explicitly set the content type + }, + body: formData.toString(), // Serialize the form data + }) + .then(response => response.json()) + .then(data => { + // Show alert based on response from the server + if (data.message === 'Account created successfully!') { + alert('Registration successful!'); + } else if (data.message === 'Email is already registered.') { + alert('This email is already registered.'); + } else { + alert('Error: ' + data.message); + } + document.getElementById('signupForm').reset(); + }) + .catch(error => { + alert('An error occurred. Please try again.'); + }); + } +}); diff --git a/signup_server.js b/signup_server.js new file mode 100644 index 0000000..620236b --- /dev/null +++ b/signup_server.js @@ -0,0 +1,60 @@ +import express from 'express'; +import cors from 'cors'; +import bodyParser from 'body-parser'; + +const app = express(); + +// Enable CORS +app.use(cors()); + +// Middleware to parse URL-encoded data (FormData) +app.use(bodyParser.urlencoded({ extended: true })); + +// Middleware to parse JSON data +app.use(bodyParser.json()); + +const users = []; // Dummy user storage + +app.post('/signup', (req, res) => { + console.log('\nReceived data:', req.body); + const { email, password, repeatPassword } = req.body; + + // Check if all fields are present + if (!email || !password || !repeatPassword) { + return res.status(400).json({ message: 'Please fill in all fields.' }); + } + + // Validate email format + const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; + if (!emailPattern.test(email)) { + return res.status(400).json({ message: 'Please enter a valid email address.' }); + } + + // Password length check + if (password.length < 6) { + return res.status(400).json({ message: 'Password must be at least 6 characters.' }); + } + + // Password match check + if (password !== repeatPassword) { + return res.status(400).json({ message: 'Passwords do not match.' }); + } + + // Check if email already exists + if (users.some(user => user.email === email)) { + console.log('\n'+email+' is already registered!'); + return res.status(400).json({ message: 'Email is already registered.' }); + } + + // Add user to the users array + users.push({ email, password }); + + // Respond with success message + res.status(201).json({ message: 'Account created successfully!' }); + console.log('\n'+email+' is registered successfully!'); +}); + +app.listen(3000, () => { + console.log('Server is running on http://localhost:3000'); +}); +