I have this weird error where I try to log into my flask application, but somehow, I always get a "405 Method not allowed".
My app.py:
from flask import Flask, render_template, request, flash, redirect, url_for
from models import db
from models import User, Score
app = Flask(__name__)
app.secret_key = "super secret key"
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db.init_app(app)
with app.app_context():
db.create_all()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login', methods=['POST'])
def login():
if request.method == 'POST':
username = request.form.get('userName')
password = request.form.get('userPassword')
user = User.query.filter_by(username=username).first()
if user and user.password == password:
flash('Login successful', 'success')
return redirect(url_for('game'))
else:
flash('Invalid username or password', 'error')
return redirect(url_for('index'))
return redirect(url_for('index'))
@app.route('/register', methods=['POST'])
def register():
if request.method == 'POST':
username = request.form.get('userName')
password = request.form.get('userPassword')
existing_user = User.query.filter_by(username=username).first()
if existing_user:
flash('Username already exists', 'error')
return redirect(url_for('index'))
else:
new_user = User(username=username, password=password)
db.session.add(new_user)
db.session.commit()
flash('Registration successful', 'success')
return redirect(url_for('game'))
return redirect(url_for('index'))
@app.route('/game')
def game():
return render_template('game.html')
app.run(debug=True)
My index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="/static/css/styles.css" rel="stylesheet">
<script src="/static/js/script.js"></script>
<title>Space Invaders Login</title>
</head>
<body>
<div class="container-fluid">
<form class="mx-auto" id="loginForm" name="loginForm" method="post">
<h4 class="text-center" id="loginTitle">Login</h4>
<div class="mb-3 mt-5">
<label for="exampleInputEmail1" class="form-label">User Name</label>
<input type="text" class="form-control" name="userName" id="userName" aria-describedby="emailHelp">
</di
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="userPassword" id="userPassword">
<div id="emailHelp" class="form-text mt-3">Forgot password?</div>
</div>
<button type="submit" class="btn btn-primary mt-5" id="submitButton">Login</button>
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab"
aria-controls="pills-login" aria-selected="true">Login</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab-register" data-mdb-toggle="pill" href="#pills-register" role="tab"
aria-controls="pills-register" aria-selected="false">Register</a>
</li>
</ul>
</form>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
My script.js:
document.addEventListener('DOMContentLoaded', function () {
const loginTitle = document.getElementById('loginTitle');
const emailHelp = document.getElementById('emailHelp');
const submitButton = document.getElementById('submitButton');
const pills = document.querySelectorAll(".nav-link");
const loginForm = document.getElementById('loginForm');
document.getElementById('tab-login').click();
pills.forEach(pill => {
pill.addEventListener("click", function () {
pills.forEach(p => p.classList.remove("active"));
this.classList.add("active");
if (this.id === "tab-login") {
loginTitle.textContent = 'Login';
emailHelp.hidden = false;
submitButton.textContent = 'Login';
loginForm.action = '/login';
} else if (this.id === "tab-register") {
loginTitle.textContent = 'New Account';
emailHelp.hidden = true;
submitButton.textContent = 'Register';
loginForm.action = '/register';
}
});
});
});
When I start the application and load my webpage, whenever I click on the submitButton, I get the 405 error. However, when I switch my pills to "tab-register", the submit button works fine. Also, when I first click on "tab-register" and then click back on "tab-login", I can click the submitButton and it works just fine.
What exactly am I doing wrong in my code to create this error?