Pasando a Bulma

LyricsPy/servicios/lyrics/__init__.py

@@ -1,9 +1,12 @@
 import os
 from flask import Flask, url_for
 from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
 
+# init SQLAlchemy so we can use it later in our models
+db = SQLAlchemy()
 
-from lyrics import paginas
+from lyrics import paginas, auth
 
 def create_app():
     app = Flask(__name__)
@@ -12,12 +15,25 @@ def create_app():
     app.config['SECRET_KEY'] = 'secret-key-goes-here'
     app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///songs.db'
     app.config['UPLOAD_FOLDER'] = os.path.join(app.instance_path, 'uploads')
+    
     app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB máximo
 
     from .models import db
 
     db.init_app(app)
 
+    login_manager = LoginManager()
+    login_manager.login_view = 'auth.login'
+    login_manager.init_app(app)
+
+
+    from .models import User
+
+    @login_manager.user_loader
+    def load_user(user_id):
+        # since the user_id is just the primary key of our user table, use it in the query for the user
+        return User.query.get(int(user_id))
+
     from . import models
 
     with app.app_context():
@@ -26,6 +42,8 @@ def create_app():
 #    basededatos.init_app(app)
 
     app.register_blueprint(paginas.bp)
+    app.register_blueprint(auth.bp)
+
 
     print(f"Current Environment: {os.getenv('ENVIRONMENT')}")
     print(f"Using Database: {app.config.get('DATABASE')}")

LyricsPy/servicios/lyrics/auth.py

@@ -0,0 +1,62 @@
+from flask import Blueprint, render_template, redirect, url_for, request, flash
+from werkzeug.security import generate_password_hash, check_password_hash
+from flask_login import login_user, logout_user, login_required
+from .models import User
+from . import db
+
+bp = Blueprint('auth', __name__)
+
+@bp.route('/login')
+def login():
+    return render_template('login.html')
+
+
+@bp.route('/login', methods=['POST'])
+def login_post():
+    email = request.form.get('email')
+    password = request.form.get('password')
+    remember = True if request.form.get('remember') else False
+
+    user = User.query.filter_by(email=email).first()
+
+    # check if the user actually exists
+    # take the user-supplied password, hash it, and compare it to the hashed password in the database
+    if not user or not check_password_hash(user.password, password):
+        flash('Por favor, comprueba los datos de registro y vuelve a intentarlo.')
+        return redirect(url_for('auth.login')) # if the user doesn't exist or password is wrong, reload the page
+
+    # if the above check passes, then we know the user has the right credentials
+    login_user(user, remember=remember)
+
+    return redirect(url_for('reservas.misreservas'))
+
+@bp.route('/signup')
+def signup():
+    return render_template('signup.html')
+
+@bp.route('/signup', methods=['POST'])
+def signup_post():
+    email = request.form.get('email')
+    name = request.form.get('name')
+    password = request.form.get('password')
+
+    user = User.query.filter_by(email=email).first() # if this returns a user, then the email already exists in database
+
+    if user: # if a user is found, we want to redirect back to signup page so user can try again
+        flash('La dirección de correo ya existe')
+        return redirect(url_for('auth.signup'))
+
+    # create a new user with the form data. Hash the password so the plaintext version isn't saved.
+    new_user = User(email=email, name=name, password=generate_password_hash(password, method='pbkdf2:sha256'))
+
+    # add the new user to the database
+    db.session.add(new_user)
+    db.session.commit()
+
+    return redirect(url_for('auth.login'))
+
+@bp.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('auth.index'))

LyricsPy/servicios/lyrics/models.py

@@ -1,7 +1,13 @@
 from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
 
 db = SQLAlchemy()
 
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(150), unique=True, nullable=False)
+    password = db.Column(db.String(150), nullable=False)
+
 class Album(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     name = db.Column(db.String(100), nullable=False)

LyricsPy/servicios/lyrics/paginas.py

@@ -1,5 +1,7 @@
 from flask import Blueprint, render_template, request, redirect, url_for, current_app, send_from_directory
 from werkzeug.utils import secure_filename
+from flask_login import login_user, logout_user, login_required
+
 import os
 
 from .models import db, Song, Album
@@ -18,6 +20,7 @@ def song(song_id):
     return render_template('song.html', song=song)
 
 @bp.route('/add_song', methods=['GET', 'POST'])
+@login_required
 def add_song():
     if request.method == 'POST':
         title = request.form['title']
@@ -37,6 +40,7 @@ def add_song():
     return render_template('add_song.html', albums=albums)
 
 @bp.route('/add_album', methods=['GET', 'POST'])
+@login_required
 def add_album():
     if request.method == 'POST':
 
@@ -85,5 +89,6 @@ def search():
     return render_template('search.html', query=query, songs=songs)
 
 @bp.route('/uploads/<filename>')
+@login_required
 def uploaded_file(filename):
     return send_from_directory(current_app.config['UPLOAD_FOLDER'], filename)

LyricsPy/servicios/lyrics/templates/_navegacion.html

@@ -0,0 +1,75 @@
+  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <img src="./static/bruce.jpeg" class="image is-48x48"/>
+	      <a class="navbar-item" href="/">Letras de canciones</a>
+            <div class="navbar-burger" role="button" data-target="navMenu">
+
+            <span></span>
+	    {% if current_user.is_authenticated %}
+            <span></span>
+            <span></span>
+	    {% else %}
+            <span></span>
+            <span></span>
+	    {% endif %}
+        </div>
+      </div>
+
+      <div class="navbar-menu" id="navMenu">
+        <div class="navbar-end">
+          <a class="navbar-item" href="{{ url_for('paginas.index') }}" >
+            Inicio
+          </a>         
+          <div class="navbar-item">
+           <!-- <div class="buttons">-->
+              {% if current_user.is_authenticated %}
+                  <div class="navbar-item has-dropdown is-hoverable">
+                    <a class="navbar-link">
+                      {{ current_user.name }}
+                    </a>
+
+                    <div class="navbar-dropdown">
+                      <a href="{{ url_for('reservas.misreservas') }}" class="navbar-item">Mis reservas</a>
+
+                      <a href="{{ url_for('auth.logout') }}" class="navbar-item">Salir</a>
+                    </div>
+
+                  </div>
+              {% else %}
+                  <a href="{{ url_for('auth.login') }}" class="button is-primary">Entrar</a>
+                  <a href="{{ url_for('auth.signup') }}" class="button is-light">Registrarse</a>
+              {% endif %} 
+            <!--</div>-->
+          </div>
+        </div>
+      </div>
+
+ <script>
+document.addEventListener('DOMContentLoaded', function () {
+
+  // Get all "navbar-burger" elements
+  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+
+        // Get the target from the "data-target" attribute
+        var target = $el.dataset.target;
+        var $target = document.getElementById(target);
+
+        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
+        $el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+  }
+
+});
+    </script>
+ 
+  </nav>

LyricsPy/servicios/lyrics/templates/base.html

@@ -3,28 +3,46 @@
 <head>
     <meta charset="UTF-8">
     <title>Mis letras de canciones</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+<!--    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">-->
+    <link rel="stylesheet" href="{{ url_for('static', filename='bulma.css') }}">
+    <style>
+        .tabcontent {
+            display: none;
+            animation: fadeEffect 1s; /* Fading effect takes 1 second */
+        }
+        /* Go from zero to full opacity */
+        @keyframes fadeEffect {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+    </style>
+
     <!-- DataTables CSS -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">  
 </head>
 <body>
-    <div class="container">
-        <h1>Mis letras de canciones</h1>
-        <nav>
-            <a href="{{ url_for('paginas.index') }}">Inicio</a>
-            <a href="{{ url_for('paginas.add_song') }}">Añadir canción</a>
-            <a href="{{ url_for('paginas.add_album') }}">Añadir álbum</a>
-	    <!--
-            <form action="{{ url_for('paginas.search') }}" method="get" style="display:inline;">
-                <input type="text" name="query" placeholder="Search songs...">
-                <button type="submit">Search</button>
-            </form>
-	    -->
-        </nav>
-        <hr>
-        {% block content %}{% endblock %}
-    </div>
- 
+    {% include("_navegacion.html") %}
+    <section  class="hero is-fullheight">
+        <header>
+            {% block header %}{% endblock header %}
+        </header>
+        <div class="container has-text-centered mt-5">
+            <h1>Mis letras de canciones</h1>
+                <nav>
+                    <a href="{{ url_for('paginas.index') }}">Inicio</a>
+                    <a href="{{ url_for('paginas.add_song') }}">Añadir canción</a>
+                    <a href="{{ url_for('paginas.add_album') }}">Añadir álbum</a>
+                <!--
+                    <form action="{{ url_for('paginas.search') }}" method="get" style="display:inline;">
+                        <input type="text" name="query" placeholder="Search songs...">
+                        <button type="submit">Search</button>
+                    </form>
+                -->
+                </nav>
+            <hr>
+            {% block content %}{% endblock %}
+        </div>
+    </section>
     <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <!-- DataTables JS -->

LyricsPy/servicios/lyrics/templates/index.html

@@ -1,12 +1,28 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="tab">
+<div class="tabs is-toggle is-fullwidth" id="tabs">
+    <!--
     <button class="tablinks" onclick="openTab(event, 'Songs')">Songs</button>
     <button class="tablinks" onclick="openTab(event, 'Albums')">Albums</button>
+    -->
+    <ul>
+        <li class="is-active" id="tablinks">
+            <a onclick="openTab(event, 'Songs')">
+              <span class="icon is-small"><i class="fa fa-image"></i></span>
+              <span>Canciones</span>
+            </a>
+          </li>
+          <li id="tablinks">
+            <a onclick="openTab(event, 'Albums')">
+              <span class="icon is-small"><i class="fa fa-music"></i></span>
+              <span>Álbumes</span>
+            </a>
+          </li>
+    </ul>
 </div>
 
-<div id="Songs" class="tabcontent">
+<div id="Songs" class="tabcontent is-active">
     <h2>Song List</h2>
     {% if songs %}
     <table id="songTable" class="display">

LyricsPy/servicios/lyrics/templates/login.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="column is-4 is-offset-4">
+    <h3 class="title">Login</h3>
+    <div class="box">
+        {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <div class="notification is-danger">
+                {{ messages[0] }}
+            </div>
+        {% endif %}
+        {% endwith %}
+        <form method="POST" action="/login">
+            <div class="field">
+                <div class="control">
+                    <input class="input is-large" type="email" name="email" placeholder="Tu correo" autofocus="">
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    <input class="input is-large" type="password" name="password" placeholder="Tu contraseña">
+                </div>
+            </div>
+            <div class="field">
+                <label class="checkbox">
+                    <input type="checkbox">
+                    Recuerdame
+                </label>
+            </div>
+            <button class="button is-block is-info is-large is-fullwidth">Entrar</button>
+        </form>
+    </div>
+</div>
+{% endblock %}

LyricsPy/servicios/lyrics/templates/signup.html

@@ -0,0 +1,56 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="column is-4 is-offset-4">
+    <h3 class="title">Nuevo usuario</h3>
+    <div class="box">
+
+        {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <div class="notification is-danger">
+                {{ messages[0] }}. Go to <a href="{{ url_for('auth.login') }}">login page</a>.
+            </div>
+        {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="/signup">
+            <div class="field">
+                <div class="control">
+                    <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    <input class="input is-large" type="text" name="name" placeholder="Nombre" autofocus="">
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    <input class="input is-large" type="password" name="password" placeholder="Password">
+                </div>
+            </div>
+
+            <button class="button is-block is-info is-large is-fullwidth">Registrarse</button>
+        </form>
+    </div>
+    <div class="box">
+        <article class="media">
+            <div class="media-content">
+                <div class="content">
+                    <h3>
+                        Información importante.
+                    </h3>
+                    <p> 
+                        El correo se usará exclusivamente para informarte de que has hecho una reserva.
+                    </p>
+                    <p>
+                        El nombre aparecerá en el listado de reservas.
+                    </p>
+                </div>
+            </div>
+        </article>
+    </div>
+</div>
+{% endblock %}

LyricsPy/servicios/requirements.txt

@@ -1,11 +1,14 @@
 blinker==1.8.2
 click==8.1.7
 Flask==3.0.3
+Flask-Login==0.6.3
 Flask-SQLAlchemy==3.1.1
+greenlet==3.0.3
+gunicorn==22.0.0
 itsdangerous==2.2.0
 Jinja2==3.1.4
 MarkupSafe==2.1.5
+packaging==24.1
 SQLAlchemy==2.0.31
 typing_extensions==4.12.2
 Werkzeug==3.0.3
-gunicorn==22.0.0