About Us
This Can Be Secondary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
About Me
This Can Be Secondary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
This Can Be Secondary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
- Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
Secondary Heading
Integ nosd quos cras demque sint fames sque optio aut Impedit metus quas neque accu minus be since 1918
Convallis, hymenaeos sociis voluptates platea neque? Et vulputate repudiandae! Officiis do fames! Similique saepe hendrerit doloribus. Quisquam, nihil adipisci litora, aut fermentum euismod sequi qui orci habitasse voluptas, hendrerit habitasse deserunt consectetur porttitor, ullam felis augue helloss, vivamus,lectus saepe cupidatat, aliqua semper reprehe.
Suitable Subtitle
Magna ante sequi pulvinar itaque? Animi cum mattis impedit porta cumque repudiandae! Mi dignissim, molestie officia.
Suitable Subtitle
Magna ante sequi pulvinar itaque? Animi cum mattis impedit porta cumque repudiandae! Mi dignissim, molestie officia.
Secondary Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Fred Jackson
Co-Founder
Leila Simon
Developer
Kristie Brooks
Designer
Newt Weasley
Accountant
Heading One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.
Heading Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.
Heading Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.
Testimonials
My Happy Clients!
Aliquip quae scipit eros. Anim commodi maiores pharetra, arcu incidunt, omnis iste incidunt cursus. Officia ea numquam vivamus repellen. Minus fermentum litora.
Deborah Sims
Ceo & Founder Initech
from flask import Flask, request, jsonify
from flask_cors import CORS
from flask_bcrypt import Bcrypt
from db import get_connection
app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "*"}})
bcrypt = Bcrypt(app)
@app.get("/api/health")
def health():
return jsonify({"status": "ok"}), 200
@app.post("/api/signup")
def signup():
data = request.get_json()
if not data:
return jsonify({"error": "Invalid JSON"}), 400
username = (data.get("username") or "").strip()
email = (data.get("email") or "").strip().lower()
password = data.get("password") or ""
confirm = data.get("confirmPassword") or ""
if not username or not email or not password or not confirm:
return jsonify({"error": "All fields are required"}), 400
if password != confirm:
return jsonify({"error": "Passwords do not match"}), 400
pw_hash = bcrypt.generate_password_hash(password).decode("utf-8")
conn = get_connection()
try:
with conn.cursor() as cur:
cur.execute("SELECT id FROM users WHERE email=%s", (email,))
if cur.fetchone():
return jsonify({"error": "Email already registered"}), 409
cur.execute(
"INSERT INTO users (username, email, password) VALUES (%s, %s, %s)",
(username, email, pw_hash),
)
conn.commit()
return jsonify({"message": "Signup successful"}), 201
finally:
conn.close()
@app.post("/api/login")
def login():
data = request.get_json(force=True)
email = (data.get("email") or "").strip().lower()
password = data.get("password") or ""
if not email or not password:
return jsonify({"error": "Email and password required"}), 400
conn = get_connection()
try:
with conn.cursor() as cur:
cur.execute("SELECT id, username, email, password FROM users WHERE email=%s", (email,))
user = cur.fetchone()
if not user:
return jsonify({"error": "Invalid credentials"}), 401
if not bcrypt.check_password_hash(user["password"], password):
return jsonify({"error": "Invalid credentials"}), 401
return jsonify({"message": f"Welcome {user['username']}!", "user": {"id": user["id"], "username": user["username"], "email": user["email"]}}), 200
finally:
conn.close()
if __name__ == "__main__":
app.run(host="127.0.0.1", port=5000, debug=True)
Login Form
const API = "http://127.0.0.1:5000/api";
/* ELEMENTS */
const tabLogin = document.getElementById("tabLogin");
const tabSignup = document.getElementById("tabSignup");
const loginForm = document.getElementById("loginForm");
const signupForm = document.getElementById("signupForm");
const loginEmail = document.getElementById("loginEmail");
const loginPassword = document.getElementById("loginPassword");
const signupName = document.getElementById("signupName");
const signupEmail = document.getElementById("signupEmail");
const signupPassword = document.getElementById("signupPassword");
const signupConfirm = document.getElementById("signupConfirm");
const title = document.getElementById("title");
const msg = document.getElementById("msg");
const footerText = document.getElementById("footerText");
/* 🔹 UNIVERSAL RESET FUNCTION */
function clearAllInputs() {
loginForm.reset();
signupForm.reset();
}
/* 🔹 MESSAGE HANDLER */
function showMessage(text, success = false) {
msg.textContent = text;
msg.className = success ? "msg success" : "msg error";
}
/* 🔹 SWITCH TO LOGIN */
function switchToLogin() {
title.textContent = "Login Form";
tabLogin.classList.add("active");
tabSignup.classList.remove("active");
loginForm.classList.remove("hidden");
signupForm.classList.add("hidden");
footerText.innerHTML = `Not a member? Signup now`;
document.getElementById("goSignup").onclick = switchToSignup;
clearAllInputs(); // ✅ CLEAR VALUES
showMessage("");
}
/* 🔹 SWITCH TO SIGNUP */
function switchToSignup() {
title.textContent = "Signup Form";
tabSignup.classList.add("active");
tabLogin.classList.remove("active");
signupForm.classList.remove("hidden");
loginForm.classList.add("hidden");
footerText.innerHTML = `Already have an account? Login`;
document.getElementById("goLogin").onclick = switchToLogin;
clearAllInputs(); // ✅ CLEAR VALUES
showMessage("");
}
/* TAB EVENTS */
tabLogin.onclick = switchToLogin;
tabSignup.onclick = switchToSignup;
/* 🔹 LOGIN SUBMIT */
loginForm.addEventListener("submit", async (e) => {
e.preventDefault();
const res = await fetch(`${API}/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email: loginEmail.value,
password: loginPassword.value
})
});
const data = await res.json();
showMessage(data.message, data.success);
if (res.ok) {
clearAllInputs();
window.location.href = "./services.html";
}
});
/* 🔹 SIGNUP SUBMIT */
signupForm.addEventListener("submit", async (e) => {
e.preventDefault();
if (signupPassword.value !== signupConfirm.value) {
showMessage("Passwords do not match");
return;
}
const res = await fetch(`${API}/signup`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: signupName.value, // ✅ FIXED
email: signupEmail.value,
password: signupPassword.value,
confirmPassword: signupConfirm.value // ✅ FIXED
})
});
const data = await res.json();
showMessage(data.message, data.success);
if (res.ok) {
clearAllInputs();
setTimeout(() => {
window.location.href = "./services.html";
}, 500);
}
});
/* DEFAULT LOAD */
switchToLogin();