no more auth, working html page with request

app/__init__.py

@@ -1,7 +1,9 @@
 from flask import Flask
 from flask_sqlalchemy import SQLAlchemy
+from flask_cors import CORS
 
 app = Flask(__name__)
+CORS(app, supports_credentials=True)
 app.config.from_pyfile('config.py')
 
 db = SQLAlchemy(app)

app/routes.py

@@ -1,18 +1,18 @@
 from flask import request, jsonify, redirect, url_for, render_template
-from flask_login import LoginManager, login_user, logout_user, login_required, current_user
+# from flask_login import LoginManager, login_user, logout_user, login_required, current_user
 from app import app, db
 from app.models import User
 
-login_manager = LoginManager()
+# login_manager = LoginManager()
-login_manager.init_app(app)
+# login_manager.init_app(app)
-login_manager.login_view = 'login'
+# login_manager.login_view = 'login'
 
-@login_manager.user_loader
+# @login_manager.user_loader
-def load_user(user_id):
+# def load_user(user_id):
-    return User.query.get(int(user_id))
+#     return User.query.get(int(user_id))
 
 @app.route('/api', methods=['POST'])
-@login_required
+# @login_required
 def process_request():
     image = request.files.get('image')
     text = request.form.get('text')
@@ -25,47 +25,47 @@ def process_request():
     app.logger.info(text)
     return jsonify(success=True)
 
-@app.route('/signup', methods=['GET', 'POST'])
+# @app.route('/signup', methods=['GET', 'POST'])
-def signup():
+# def signup():
-    if current_user.is_authenticated:
+#     if current_user.is_authenticated:
-        return redirect(url_for('process_request'))
+#         return redirect(url_for('process_request'))
 
-    if request.method == 'POST':
+#     if request.method == 'POST':
-        username = request.form['username']
+#         username = request.form['username']
-        password = request.form['password']
+#         password = request.form['password']
-        user = User.query.filter_by(username=username).first()
+#         user = User.query.filter_by(username=username).first()
         
-        if user is None:
+#         if user is None:
-            new_user = User(username=username)
+#             new_user = User(username=username)
-            new_user.set_password(password)
+#             new_user.set_password(password)
-            db.session.add(new_user)
+#             db.session.add(new_user)
-            db.session.commit()
+#             db.session.commit()
-            return redirect(url_for('login'))
+#             return redirect(url_for('login'))
-        else:
+#         else:
-            return "User already exists"
+#             return "User already exists"
 
-    return render_template('signup.html')
+#     return render_template('signup.html')
 
-@app.route('/login', methods=['GET', 'POST'])
+# @app.route('/login', methods=['GET', 'POST'])
-def login():
+# def login():
-    if current_user.is_authenticated:
+#     if current_user.is_authenticated:
-        return redirect(url_for('process_request'))
+#         return redirect(url_for('process_request'))
 
-    if request.method == 'POST':
+#     if request.method == 'POST':
-        username = request.form['username']
+#         username = request.form['username']
-        password = request.form['password']
+#         password = request.form['password']
-        user = User.query.filter_by(username=username).first()
+#         user = User.query.filter_by(username=username).first()
 
-        if user and user.check_password(password):
+#         if user and user.check_password(password):
-            login_user(user)
+#             login_user(user)
-            return redirect(url_for('process_request'))
+#             return redirect(url_for('process_request'))
-        else:
+#         else:
-            return "Invalid username or password"
+#             return "Invalid username or password"
 
-    return render_template('login.html')
+#     return render_template('login.html')
 
-@app.route('/logout')
+# @app.route('/logout')
-@login_required
+# @login_required
-def logout():
+# def logout():
-    logout_user()
+#     logout_user()
-    return redirect(url_for('login'))
+#     return redirect(url_for('login'))

index.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flask App</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
+</head>
+<body class="bg-light">
+    <!-- <div class="container py-5">
+        <div id="signup" class="mb-5">
+            <h2>Signup</h2>
+            <form id="signup-form">
+                <div class="mb-3">
+                    <label for="signup-username" class="form-label">Username:</label>
+                    <input type="text" id="signup-username" class="form-control" required>
+                </div>
+                <div class="mb-3">
+                    <label for="signup-password" class="form-label">Password:</label>
+                    <input type="password" id="signup-password" class="form-control" required>
+                </div>
+                <button type="submit" class="btn btn-dark">Signup</button>
+            </form>
+        </div>
+
+        <div id="login" class="mb-5">
+            <h2>Login</h2>
+            <form id="login-form">
+                <div class="mb-3">
+                    <label for="login-username" class="form-label">Username:</label>
+                    <input type="text" id="login-username" class="form-control" required>
+                </div>
+                <div class="mb-3">
+                    <label for="login-password" class="form-label">Password:</label>
+                    <input type="password" id="login-password" class="form-control" required>
+                </div>
+                <button type="submit" class="btn btn-dark">Login</button>
+            </form>
+        </div> -->
+
+        <div id="main-form-container" style="display:block">
+            <h2>API Request</h2>
+            <form id="main-form">
+                <div class="mb-3">
+                    <label for="image" class="form-label">Image:</label>
+                    <input type="file" id="image" class="form-control" accept="image/*" required>
+                </div>
+                <div class="mb-3">
+                    <label for="text" class="form-label">Text:</label>
+                    <input type="text" id="text" class="form-control" required>
+                </div>
+                <div class="mb-3">
+                    <label for="blocks" class="form-label">Blocks (comma-separated):</label>
+                    <input type="text" id="blocks" class="form-control" required>
+                </div>
+                <button type="submit" class="btn btn-dark">Submit</button>
+            </form>
+        </div>
+    </div>
+    <script>
+        // async function signup(username, password) {
+        // const response = await fetch("http://localhost:5000/signup", {
+        //     method: "POST",
+        //     headers: {
+        //     "Content-Type": "application/x-www-form-urlencoded",
+        //     },
+        //     body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
+        //     mode: "cors", // Adding this line to explicitly enable CORS
+        // });
+        // return response;
+        // }
+
+        // async function login(username, password) {
+        // const response = await fetch("http://localhost:5000/login", {
+        //     method: "POST",
+        //     headers: {
+        //     "Content-Type": "application/x-www-form-urlencoded",
+        //     },
+        //     body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
+        //     credentials: "include",
+        //     mode: "cors", // Adding this line to explicitly enable CORS
+        // });
+        // return response;
+        // }
+
+        // // Signup form
+        // document.getElementById("signup-form").addEventListener("submit", async (event) => {
+        //     event.preventDefault();
+        //     const username = document.getElementById("signup-username").value;
+        //     const password = document.getElementById("signup-password").value;
+        //     await signup(username, password);
+        //     alert("Signup successful!");
+        // });
+
+        // // Login form
+        // document.getElementById("login-form").addEventListener("submit", async (event) => {
+        //     event.preventDefault();
+        //     const username = document.getElementById("login-username").value;
+        //     const password = document.getElementById("login-password").value;
+        //     const response = await login(username, password);
+        //     if (response.ok) {
+        //         alert("Login successful!");
+        //         document.getElementById("signup").style.display = "none";
+        //         document.getElementById("login").style.display = "none";
+        //         document.getElementById("main-form-container").style.display = "block";
+        //     } else {
+        //         alert("Login failed. Please check your credentials and try again.");
+        //     }
+        // });
+
+        // Main form
+        document.getElementById("main-form").addEventListener("submit", async (event) => {
+            event.preventDefault();
+            const imageFile = document.getElementById("image").files[0];
+            const text = document.getElementById("text").value;
+            const blocks = document.getElementById("blocks").value.split(",").map(block => block.trim());
+
+            const formData = new FormData();
+            formData.append("image", imageFile);
+            formData.append("text", text);
+            blocks.forEach(block => formData.append("blocks", block));
+
+            const response = await fetch("http://localhost:5000/api", {
+                method: "POST",
+                body: formData,
+                credentials: "include",
+            });
+
+            if (response.ok) {
+                alert("Request succeeded.");
+            } else {
+                alert("Request failed.");
+            }
+        });
+    </script>
+</body>
+</html>

requirements.txt

@@ -3,3 +3,4 @@ flask_sqlalchemy
 psycopg2-binary
 flask_bcrypt
 flask_login
+flask_cors

test_app.sh

@@ -10,12 +10,12 @@ PASSWORD="$2"
 IMAGE_PATH="$3"
 
 # Signup and login the user to get the session cookie
-./signup_user.sh "${USERNAME}" "${PASSWORD}"
+# ./signup_user.sh "${USERNAME}" "${PASSWORD}"
-./login_user.sh "${USERNAME}" "${PASSWORD}"
+# ./login_user.sh "${USERNAME}" "${PASSWORD}"
 
+  # -b cookies.txt \
 curl -X POST \
   -H "Content-Type: multipart/form-data" \
-  -b cookies.txt \
   -F "image=@${IMAGE_PATH}" \
   -F "text=Sample Text" \
   -F "blocks=Block 1" \