fixed-login

* fixed-login

* Updated after copilot feedback

.venv/bin/email_validator

@@ -0,0 +1,10 @@
+#!/bin/sh
+'''exec' "/Users/husseinelsaadi/Documents/Data Science USAL/Spring 24-25/FYP - Codingo/Codingo/.venv/bin/python3.12" "$0" "$@"
+' '''
+# -*- coding: utf-8 -*-
+import re
+import sys
+from email_validator.__main__ import main
+if __name__ == '__main__':
+    sys.argv[0] = re.sub(r'(-script\.pyw|\.exe)?$', '', sys.argv[0])
+    sys.exit(main())

backend/app.py

@@ -1,102 +1,111 @@
 from flask import Flask, render_template, redirect, url_for, flash, request
+from flask_login import LoginManager, login_required, current_user
 from werkzeug.utils import secure_filename
 import os
 import sys
 import json
 from datetime import datetime
 
-# Add the parent directory to sys.path to help with imports
+# Adjust sys.path for import flexibility
 current_dir = os.path.dirname(os.path.abspath(__file__))
 parent_dir = os.path.dirname(current_dir)
 sys.path.append(parent_dir)
 sys.path.append(current_dir)
 
-# Import local modules with error handling
-try:
-    from form.JobApplicationForm import JobApplicationForm
-except ImportError:
-    try:
-        from backend.form.JobApplicationForm import JobApplicationForm
-    except ImportError:
-        print("Error importing JobApplicationForm. Check the path.")
-        sys.exit(1)
+# Initialize Flask app
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your-secret-key'
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///codingo.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+# Import and initialize DB
+from backend.models.database import db, Job, Application, init_db
+init_db(app)
+
+# Import models/routes AFTER initializing the DB
+from backend.models.user import User
+from backend.routes.auth import auth_bp
 
+# Import other modules
 try:
-    from models.database import db, Job, Application, init_db
+    from backend.form.JobApplicationForm import JobApplicationForm
 except ImportError:
-    try:
-        from backend.models.database import db, Job, Application, init_db
-    except ImportError:
-        print("Error importing database models. Check the path.")
-        sys.exit(1)
+    from form.JobApplicationForm import JobApplicationForm
 
 try:
-    from models.resume_parser.resume_to_features import extract_resume_features
+    from backend.models.resume_parser.resume_to_features import extract_resume_features
 except ImportError:
+    from models.resume_parser.resume_to_features import extract_resume_features
+
+# Flask-Login setup
+login_manager = LoginManager()
+login_manager.login_view = 'auth.login'
+login_manager.init_app(app)
+
+@login_manager.user_loader
+def load_user(user_id):
+    return db.session.get(User, int(user_id))
+
+# Register auth blueprint
+app.register_blueprint(auth_bp)
+
+
+def handle_resume_upload(file):
+    """
+    Save uploaded file temporarily, extract features, then clean up.
+    Returns (features_dict, error_message, filename)
+    """
+    if not file or file.filename == '':
+        return None, "No file uploaded", None
+
     try:
-        from backend.models.resume_parser.resume_to_features import extract_resume_features
-    except ImportError:
-        print("Error importing resume_to_features. Check if the function is defined in the module.")
-        sys.exit(1)
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(current_dir, 'temp', filename)
+        os.makedirs(os.path.dirname(filepath), exist_ok=True)
+        file.save(filepath)
 
-app = Flask(__name__)
-app.config['SECRET_KEY'] = 'your-secret-key'
-app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///codingo.db'
-app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-app.config['UPLOAD_FOLDER'] = 'uploads/resumes'
+        features = extract_resume_features(filepath)
+        os.remove(filepath)  # Clean up after parsing
 
-# Create upload folder if it doesn't exist
-os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+        return features, None, filename
+    except Exception as e:
+        print(f"Error in handle_resume_upload: {e}")
+        return None, str(e), None
 
-# Initialize the database with the app
-init_db(app)
 
 # Routes
 @app.route('/')
 def index():
     return render_template('index.html')
 
-
 @app.route('/jobs')
 def jobs():
     all_jobs = Job.query.order_by(Job.date_posted.desc()).all()
     return render_template('jobs.html', jobs=all_jobs)
 
-
 @app.route('/job/<int:job_id>')
 def job_detail(job_id):
     job = Job.query.get_or_404(job_id)
     return render_template('job_detail.html', job=job)
 
-
 @app.route('/apply/<int:job_id>', methods=['GET', 'POST'])
+@login_required
 def apply(job_id):
     job = Job.query.get_or_404(job_id)
     form = JobApplicationForm()
     form.job_id.data = job_id
 
     if form.validate_on_submit():
-        # Save resume file
         resume_file = form.resume.data
-        filename = secure_filename(
-            f"{form.name.data.replace(' ', '_')}_{datetime.now().strftime('%Y%m%d%H%M%S')}.{resume_file.filename.split('.')[-1]}")
-        resume_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-        resume_file.save(resume_path)
-
-        # Extract features from resume
-        try:
-            features = extract_resume_features(resume_path)
-            features_json = json.dumps(features)
-        except Exception as e:
-            print(f"Error extracting features: {e}")
-            features_json = "{}"
-
-        # Create new application
+
+        features, error, filename = handle_resume_upload(resume_file)
+        features_json = json.dumps(features or {})
+
         application = Application(
             job_id=job_id,
             name=form.name.data,
             email=form.email.data,
-            resume_path=resume_path,
+            resume_path=filename,
             cover_letter=form.cover_letter.data,
             extracted_features=features_json
         )
@@ -109,36 +118,32 @@ def apply(job_id):
 
     return render_template('apply.html', form=form, job=job)
 
-
 @app.route('/parse_resume', methods=['POST'])
 def parse_resume():
-    if 'resume' not in request.files:
-        return {"error": "No file uploaded"}, 400
+    file = request.files.get('resume')
+    features, error, _ = handle_resume_upload(file)
 
-    file = request.files['resume']
-    if file.filename == '':
-        return {"error": "No selected file"}, 400
+    if error:
+        print(f"[Resume Error] {error}")
+        return {"error": "Error parsing resume. Please try again."}, 400
 
-    filename = secure_filename(file.filename)
-    file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-    file.save(file_path)
+    if not features:
+        print("[Resume Error] No features extracted.")
+        return {"error": "Failed to extract resume details."}, 400
+
+    response = {
+        "name": features.get('name', ''),
+        "email": features.get('email', ''),
+        "mobile_number": features.get('mobile_number', ''),
+        "skills": features.get('skills', []),
+        "experience": features.get('experience', [])
+    }
+    return response, 200
 
-    # Extract features from resume
-    try:
-        features = extract_resume_features(file_path)
-        response = {
-            "name": features.get('name', ''),
-            "email": features.get('email', ''),
-            "mobile_number": features.get('mobile_number', ''),
-            "skills": features.get('skills', []),
-            "experience": features.get('experience', [])
-        }
-        return response, 200
-    except Exception as e:
-        print(f"Error parsing resume: {e}")
-        return {"error": "Failed to parse resume"}, 500
 
 
 if __name__ == '__main__':
     print("Starting Codingo application...")
-    app.run(debug=True)
+    with app.app_context():
+        db.create_all()
+    app.run(debug=True, port=5001)

backend/form/AuthForms.py

@@ -0,0 +1,17 @@
+
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, SubmitField, SelectField
+from wtforms.validators import DataRequired, Email, EqualTo
+
+class LoginForm(FlaskForm):
+    email = StringField('Email', validators=[DataRequired(), Email()])
+    password = PasswordField('Password', validators=[DataRequired()])
+    submit = SubmitField('Login')
+
+class SignupForm(FlaskForm):
+    username = StringField('Username', validators=[DataRequired()])
+    email = StringField('Email', validators=[DataRequired(), Email()])
+    password = PasswordField('Password', validators=[DataRequired()])
+    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
+    role = SelectField('Role', choices=[('unemployed', 'Unemployed'), ('recruiter', 'Recruiter')])
+    submit = SubmitField('Sign Up')

backend/models/database.py

@@ -7,7 +7,6 @@ from datetime import datetime
 
 db = SQLAlchemy()
 
-
 class Job(db.Model):
     """Job model representing a job posting."""
     id = db.Column(db.Integer, primary_key=True)

backend/models/user.py

@@ -0,0 +1,19 @@
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
+from backend.models.database import db  # ✅ Use shared db instance only
+
+class User(UserMixin, db.Model):
+    __tablename__ = 'user'
+    __table_args__ = {'extend_existing': True}
+
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(150), unique=True, nullable=False)
+    email = db.Column(db.String(150), unique=True, nullable=False)
+    password_hash = db.Column(db.String(256), nullable=False)
+    role = db.Column(db.String(50), nullable=False)
+
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)

backend/routes/auth.py

@@ -0,0 +1,45 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request
+from flask_login import login_user, logout_user, login_required
+from backend.form.AuthForms import LoginForm, SignupForm
+from backend.models.user import User
+from backend.models.database import db
+
+auth_bp = Blueprint('auth', __name__)
+
+@auth_bp.route('/login', methods=['GET', 'POST'])
+def login():
+    form = LoginForm()
+    if form.validate_on_submit():
+        user = User.query.filter_by(email=form.email.data).first()
+        if user and user.check_password(form.password.data):
+            login_user(user)
+            return redirect(url_for('index'))
+        else:
+            flash('Invalid credentials', 'danger')
+    return render_template('login.html', form=form)
+
+@auth_bp.route('/signup', methods=['GET', 'POST'])
+def signup():
+    form = SignupForm()
+    if form.validate_on_submit():
+        existing_user = User.query.filter_by(email=form.email.data).first()
+        if existing_user:
+            flash('Email already registered.', 'warning')
+        else:
+            user = User(
+                username=form.username.data,
+                email=form.email.data,
+                role=form.role.data
+            )
+            user.set_password(form.password.data)
+            db.session.add(user)
+            db.session.commit()
+            flash('Account created successfully!', 'success')
+            return redirect(url_for('auth.login'))
+    return render_template('signup.html', form=form)
+
+@auth_bp.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('auth.login'))

backend/templates/apply.html

@@ -21,7 +21,7 @@
         <li><a href="{{ url_for('job_detail', job_id=job.id) }}">{{ job.title }}</a></li>
         <li>Apply</li>
     </ul>
-    
+
     <div class="card">
         <div class="card-header">
             <h2>Complete Your Application</h2>
@@ -29,17 +29,15 @@
         </div>
 
         <div class="card-body">
-            <form id="resumeForm" method="POST" enctype="multipart/form-data">
-                <div class="form-group">
-                    <label for="resume">Upload Resume</label>
-                    <input type="file" id="resume" name="resume" class="form-control" required>
-                </div>
-            </form>
-
             <form method="POST" enctype="multipart/form-data">
                 {{ form.hidden_tag() }}
                 {{ form.job_id }}
 
+                <div class="form-group">
+                    <label for="resume">Upload Resume</label>
+                    {{ form.resume(class="form-control", id="resume", required=True) }}
+                </div>
+
                 <div class="form-group">
                     {{ form.name.label }}
                     {{ form.name(class="form-control", id="name", placeholder="Enter your full name") }}
@@ -57,12 +55,14 @@
 
                 <div class="form-group">
                     <label for="skills">Skills</label>
-                    <textarea id="skills" class="form-control" placeholder="Skills extracted from your resume..."></textarea>
+                    <textarea id="skills" class="form-control"
+                              placeholder="Skills extracted from your resume..."></textarea>
                 </div>
 
                 <div class="form-group">
                     <label for="experience">Previous Experience</label>
-                    <textarea id="experience" class="form-control" placeholder="Experience extracted from your resume..."></textarea>
+                    <textarea id="experience" class="form-control"
+                              placeholder="Experience extracted from your resume..."></textarea>
                 </div>
 
                 <div class="form-group">
@@ -75,17 +75,18 @@
                     {{ form.submit(class="btn btn-primary") }}
                 </div>
             </form>
+
         </div>
     </div>
 </section>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
-    $(document).ready(function() {
+    $(document).ready(function () {
         $("#resume").on("change", function () {
             var formData = new FormData();
             formData.append("resume", $("#resume")[0].files[0]);
-            
+
             $.ajax({
                 url: "{{ url_for('parse_resume') }}",
                 type: "POST",

backend/templates/base.html

@@ -94,9 +94,46 @@
 
         .login-buttons {
             display: flex;
+            align-items: center;
             gap: 1rem;
         }
 
+        /* Style for the welcome message */
+        .welcome-message {
+            color: white;
+            font-weight: 500;
+            margin-right: 0.5rem;
+            display: flex;
+            align-items: center;
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+        }
+
+        .welcome-message:before {
+            content: '👋 ';
+            margin-right: 0.5rem;
+        }
+
+        /* Enhanced logout button */
+        .btn-logout {
+            background-color: transparent;
+            border: 2px solid var(--accent);
+            color: var(--accent);
+            font-weight: 600;
+            padding: 0.5rem 1.5rem;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+        }
+
+        .btn-logout:hover {
+            background-color: var(--accent);
+            color: var(--dark);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
+        }
+
         .btn {
             padding: 0.5rem 1.5rem;
             border-radius: 5px;
@@ -248,14 +285,26 @@
         }
 
         @keyframes pulse {
-            0% { transform: scale(0.9); opacity: 0.5; }
-            100% { transform: scale(1.1); opacity: 0.7; }
+            0% {
+                transform: scale(0.9);
+                opacity: 0.5;
+            }
+            100% {
+                transform: scale(1.1);
+                opacity: 0.7;
+            }
         }
 
         @keyframes float {
-            0% { transform: translateY(0px) rotateY(0deg); }
-            50% { transform: translateY(-15px) rotateY(5deg); }
-            100% { transform: translateY(0px) rotateY(0deg); }
+            0% {
+                transform: translateY(0px) rotateY(0deg);
+            }
+            50% {
+                transform: translateY(-15px) rotateY(5deg);
+            }
+            100% {
+                transform: translateY(0px) rotateY(0deg);
+            }
         }
 
         .luna-avatar img {
@@ -679,53 +728,59 @@
     </style>
 </head>
 <body>
-    <header>
-        <div class="container nav-container">
-            <a href="{{ url_for('index') }}" class="logo">
-                <span class="logo-part1">Cod</span><span class="logo-part2">in</span><span class="logo-part3">go</span>
-            </a>
-            <div class="login-buttons">
-                <a href="{{ url_for('index') }}" class="btn btn-outline">Log In</a>
-                <a href="{{ url_for('index') }}" class="btn btn-primary">Sign Up</a>
-            </div>
+<header>
+    <div class="container nav-container">
+        <a href="{{ url_for('index') }}" class="logo">
+            <span class="logo-part1">Cod</span><span class="logo-part2">in</span><span class="logo-part3">go</span>
+        </a>
+        <div class="login-buttons">
+            {% if current_user.is_authenticated %}
+            <span class="welcome-message">Welcome, {{ current_user.username }}</span>
+            <a href="{{ url_for('auth.logout') }}" class="btn btn-logout">Logout</a>
+            {% else %}
+            <a href="{{ url_for('auth.login') }}" class="btn btn-outline">Log In</a>
+            <a href="{{ url_for('auth.signup') }}" class="btn btn-primary">Sign Up</a>
+            {% endif %}
         </div>
-    </header>
-
-    {% block hero %}{% endblock %}
-
-    <main>
-        <div class="container">
-            {% with messages = get_flashed_messages(with_categories=true) %}
-                {% if messages %}
-                    <div class="flash-messages">
-                        {% for category, message in messages %}
-                            <div class="alert alert-{{ category }}">{{ message }}</div>
-                        {% endfor %}
-                    </div>
-                {% endif %}
-            {% endwith %}
-
-            {% block content %}{% endblock %}
+
+    </div>
+</header>
+
+{% block hero %}{% endblock %}
+
+<main>
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        <div class="flash-messages">
+            {% for category, message in messages %}
+            <div class="alert alert-{{ category }}">{{ message }}</div>
+            {% endfor %}
         </div>
-    </main>
-
-    <footer>
-        <div class="container">
-            <div class="footer-grid">
-                <div class="footer-col">
-                    <h3>Codingo</h3>
-                    <p>AI-powered recruitment platform that revolutionizes how companies hire technical talent.</p>
-                    <div class="social-links">
-                        <a href="#"><span>f</span></a>
-                        <a href="#"><span>t</span></a>
-                        <a href="#"><span>in</span></a>
-                    </div>
+        {% endif %}
+        {% endwith %}
+
+        {% block content %}{% endblock %}
+    </div>
+</main>
+
+<footer>
+    <div class="container">
+        <div class="footer-grid">
+            <div class="footer-col">
+                <h3>Codingo</h3>
+                <p>AI-powered recruitment platform that revolutionizes how companies hire technical talent.</p>
+                <div class="social-links">
+                    <a href="#"><span>f</span></a>
+                    <a href="#"><span>t</span></a>
+                    <a href="#"><span>in</span></a>
                 </div>
             </div>
-            <div class="copyright">
-                <p>&copy; 2025 Codingo. All rights reserved.</p>
-            </div>
         </div>
-    </footer>
+        <div class="copyright">
+            <p>&copy; 2025 Codingo. All rights reserved.</p>
+        </div>
+    </div>
+</footer>
 </body>
 </html>

backend/templates/login.html

@@ -0,0 +1,122 @@
+{% extends "base.html" %}
+
+{% block title %}Codingo - Login{% endblock %}
+
+{% block content %}
+<section class="content-section">
+    <div class="container">
+        <div class="card" style="max-width: 500px; margin: 2rem auto;">
+            <div class="card-header">
+                <h2 style="text-align: center; margin: 0; color: white;">Login to Codingo</h2>
+            </div>
+            <div class="card-body">
+                <form method="POST" class="auth-form">
+                    {{ form.hidden_tag() }}
+                    
+                    <div class="form-group">
+                        {{ form.email.label(class="form-label") }}
+                        {{ form.email(class="form-control", placeholder="Enter your email") }}
+                        {% if form.email.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.email.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="form-group">
+                        {{ form.password.label(class="form-label") }}
+                        {{ form.password(class="form-control", placeholder="Enter your password") }}
+                        {% if form.password.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.password.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="form-group" style="margin-top: 2rem;">
+                        {{ form.submit(class="btn btn-primary", style="width: 100%;") }}
+                    </div>
+                </form>
+                
+                <div style="text-align: center; margin-top: 1.5rem;">
+                    <p>Don't have an account? <a href="{{ url_for('auth.signup') }}" style="color: var(--primary); font-weight: 500;">Sign up here</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+    .auth-form .form-label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: var(--dark);
+    }
+    
+    .auth-form .form-control {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        font-size: 1rem;
+        transition: all 0.3s ease;
+    }
+    
+    .auth-form .form-control:focus {
+        border-color: var(--primary);
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
+    }
+    
+    .auth-form .btn-primary {
+        background: linear-gradient(135deg, var(--primary), var(--secondary));
+        color: white;
+        padding: 0.75rem;
+        border: none;
+        border-radius: 5px;
+        font-size: 1rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+    }
+    
+    .auth-form .btn-primary::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.1);
+        transition: all 0.3s ease;
+        z-index: -1;
+    }
+    
+    .auth-form .btn-primary:hover::before {
+        width: 100%;
+    }
+    
+    .auth-form .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+    
+    .alert-danger {
+        color: var(--danger);
+        background-color: rgba(231, 76, 60, 0.1);
+        border: 1px solid var(--danger);
+        border-radius: 5px;
+        padding: 0.5rem;
+        margin-top: 0.5rem;
+        font-size: 0.9rem;
+    }
+</style>
+{% endblock %}

backend/templates/signup.html

@@ -0,0 +1,213 @@
+{% extends "base.html" %}
+
+{% block title %}Codingo - Sign Up{% endblock %}
+
+{% block content %}
+<section class="content-section">
+    <div class="container">
+        <div class="card" style="max-width: 500px; margin: 2rem auto;">
+            <div class="card-header">
+                <h2 style="text-align: center; margin: 0; color: white;">Sign Up for Codingo</h2>
+            </div>
+            <div class="card-body">
+                <form method="POST" class="auth-form">
+                    {{ form.hidden_tag() }}
+                    
+                    <div class="form-group">
+                        {{ form.username.label(class="form-label") }}
+                        {{ form.username(class="form-control", placeholder="Choose a username") }}
+                        {% if form.username.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.username.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="form-group">
+                        {{ form.email.label(class="form-label") }}
+                        {{ form.email(class="form-control", placeholder="Enter your email") }}
+                        {% if form.email.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.email.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="form-group">
+                        {{ form.password.label(class="form-label") }}
+                        {{ form.password(class="form-control", placeholder="Create a password") }}
+                        {% if form.password.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.password.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                        <div class="password-strength">
+                            <div class="password-strength-bar" id="password-strength-bar"></div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        {{ form.confirm_password.label(class="form-label") }}
+                        {{ form.confirm_password(class="form-control", placeholder="Confirm your password") }}
+                        {% if form.confirm_password.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.confirm_password.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="form-group">
+                        {{ form.role.label(class="form-label") }}
+                        {{ form.role(class="form-control") }}
+                        {% if form.role.errors %}
+                            <div class="alert alert-danger">
+                                {% for error in form.role.errors %}
+                                    <span>{{ error }}</span>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="form-group" style="margin-top: 2rem;">
+                        {{ form.submit(class="btn btn-primary", style="width: 100%;") }}
+                    </div>
+                </form>
+                
+                <div style="text-align: center; margin-top: 1.5rem;">
+                    <p>Already have an account? <a href="{{ url_for('auth.login') }}" style="color: var(--primary); font-weight: 500;">Login here</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+    .auth-form .form-label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: var(--dark);
+    }
+    
+    .auth-form .form-control {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        font-size: 1rem;
+        transition: all 0.3s ease;
+    }
+    
+    .auth-form .form-control:focus {
+        border-color: var(--primary);
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
+    }
+    
+    .auth-form .btn-primary {
+        background: linear-gradient(135deg, var(--primary), var(--secondary));
+        color: white;
+        padding: 0.75rem;
+        border: none;
+        border-radius: 5px;
+        font-size: 1rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+    }
+    
+    .auth-form .btn-primary::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.1);
+        transition: all 0.3s ease;
+        z-index: -1;
+    }
+    
+    .auth-form .btn-primary:hover::before {
+        width: 100%;
+    }
+    
+    .auth-form .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+    
+    .alert-danger {
+        color: var(--danger);
+        background-color: rgba(231, 76, 60, 0.1);
+        border: 1px solid var(--danger);
+        border-radius: 5px;
+        padding: 0.5rem;
+        margin-top: 0.5rem;
+        font-size: 0.9rem;
+    }
+    
+    .password-strength {
+        height: 5px;
+        width: 100%;
+        background-color: #eee;
+        margin-top: 5px;
+        border-radius: 3px;
+        overflow: hidden;
+    }
+    
+    .password-strength-bar {
+        height: 100%;
+        width: 0;
+        border-radius: 3px;
+        transition: width 0.3s, background-color 0.3s;
+    }
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const passwordInput = document.querySelector('input[name="password"]');
+    const strengthBar = document.getElementById('password-strength-bar');
+    
+    if (passwordInput && strengthBar) {
+        passwordInput.addEventListener('input', function() {
+            const password = this.value;
+            const strength = checkPasswordStrength(password);
+            
+            strengthBar.style.width = `${strength.percentage}%`;
+            strengthBar.style.backgroundColor = strength.color;
+        });
+    }
+    
+    function checkPasswordStrength(password) {
+        const requirements = {
+            length: password.length >= 8,
+            uppercase: /[A-Z]/.test(password),
+            lowercase: /[a-z]/.test(password),
+            number: /\d/.test(password),
+            special: /[^A-Za-z0-9]/.test(password)
+        };
+        
+        const strength = Object.values(requirements).filter(Boolean).length;
+        const percentage = (strength / 5) * 100;
+        
+        return {
+            valid: Object.values(requirements).every(Boolean),
+            percentage,
+            color: strength < 2 ? '#e74c3c' : strength < 4 ? '#f39c12' : '#27ae60'
+        };
+    }
+});
+</script>
+{% endblock %}

requirements.txt

@@ -8,4 +8,5 @@ spacy>=3.0.0
 nltk
 pyresparser
 flask_sqlalchemy
-flask_wtf
+flask_wtf
+email-validator