database signin and better styling
This commit is contained in:
ralphi3
@@ -0,0 +1,90 @@
|
||||
from flask import Flask, render_template, redirect, request, url_for
|
||||
from flask_sqlalchemy import SQLAlchemy
|
||||
from werkzeug.security import generate_password_hash, check_password_hash
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///accounts.db'
|
||||
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
|
||||
app.secret_key = 'super_secret_session_encryption_key'
|
||||
db = SQLAlchemy(app)
|
||||
|
||||
class User(db.Model):
|
||||
id = db.Column(db.Integer, primary_key=True)
|
||||
username = db.Column(db.String(80), unique=True, nullable=False)
|
||||
email = db.Column(db.String(120), unique=True, nullable=False)
|
||||
password_hash = db.Column(db.String(128), nullable=False)
|
||||
|
||||
with app.app_context():
|
||||
db.create_all()
|
||||
|
||||
|
||||
@app.route('/submit-form', methods=['POST'])
|
||||
def handle_submission():
|
||||
form_username = request.form.get('username')
|
||||
form_email = request.form.get('email')
|
||||
form_password = request.form.get('password') # 1. Grab password from HTML
|
||||
|
||||
# Check for duplicates
|
||||
if User.query.filter_by(username=form_username).first():
|
||||
return "<h3>Username taken!</h3>", 400
|
||||
if User.query.filter_by(email=form_email).first():
|
||||
return "<h3>Email already registered!</h3>", 400
|
||||
|
||||
# 2. Hash the password into a secure scramble
|
||||
hashed_password = generate_password_hash(form_password)
|
||||
|
||||
# 3. Save the user with the scrambled hash
|
||||
new_user = User(username=form_username, email=form_email, password_hash=hashed_password)
|
||||
db.session.add(new_user)
|
||||
db.session.commit()
|
||||
|
||||
return redirect(url_for('success'))
|
||||
|
||||
@app.route('/success')
|
||||
def success():
|
||||
return "<h3>Data successfully saved to the database!</h3>"
|
||||
|
||||
@app.route('/users')
|
||||
def view_users():
|
||||
# Fetch all user records from the database
|
||||
all_users = User.query.all()
|
||||
|
||||
# Create a simple HTML table to display them nicely
|
||||
html_output = "<h2>Registered Accounts</h2><table border='1' cellpadding='10'>"
|
||||
html_output += "<tr><th>ID</th><th>Username</th><th>Email</th></tr>"
|
||||
|
||||
for user in all_users:
|
||||
html_output += f"<tr><td>{user.id}</td><td>{user.username}</td><td>{user.email}</td><td>{user.password_hash}</td></tr>"
|
||||
|
||||
html_output += "</table>"
|
||||
|
||||
# If the database is completely empty
|
||||
if not all_users:
|
||||
return "<h3>No accounts found in the database yet.</h3>"
|
||||
|
||||
return html_output
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def home():
|
||||
return render_template('index.html')
|
||||
|
||||
@app.route('/bivariate')
|
||||
def bivariate():
|
||||
return render_template('bivariate.html')
|
||||
|
||||
@app.route('/about')
|
||||
def about():
|
||||
return render_template('about.html')
|
||||
|
||||
@app.route('/signin')
|
||||
def signin():
|
||||
return render_template('signin.html')
|
||||
|
||||
@app.route('/signup')
|
||||
def signup():
|
||||
return render_template('signup.html')
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Math Website</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="bivariate.html">Bivariate Data</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Math website</h1>
|
||||
<p>with math</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -0,0 +1,59 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
color: #1a1a1a;
|
||||
background-color: #fafafa;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
background-color: #333333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
.navbar li {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.navbar li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar li a:hover {
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 26px;
|
||||
max-width: 800px;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul li a:hover {
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: lightsteelblue;
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -9,4 +10,5 @@
|
||||
<body>
|
||||
<h1>About this website</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{% endblock %}
|
||||
@@ -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>{% block title %}Math Website{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<ul class="navbar">
|
||||
<li><a href="{{ url_for('home') }}">Home</a></li>
|
||||
<li><a href="{{ url_for('bivariate') }}">Bivariate Data</a></li>
|
||||
<li><a href="{{ url_for('about') }}">About</a></li>
|
||||
<li style="margin-left: auto;"><a href="{{ url_for('signup') }}">Sign Up</a></li>
|
||||
<li style="margin-left:0px"><a href="{{ url_for('signin') }}">Sign In</a></li>
|
||||
</ul>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -32,4 +35,8 @@
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<div>
|
||||
|
||||
<h1>homepage for math website wow</h1>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,13 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sign in page with sql database</h1>
|
||||
</body>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,25 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sign up page with sql database</h1>
|
||||
<form action="/submit-form" method="POST">
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username" required><br><br>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required><br><br>
|
||||
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required><br><br>
|
||||
|
||||
<button type="submit">Submit to Database</button>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user