WBR4892 · XGC1564 · Nov 9, 2025 · Nov 6, 2025 · Nov 8, 2025 · Nov 8, 2025
diff --git a/essenza/db.sqlite3 b/essenza/db.sqlite3
diff --git a/essenza/essenza/settings.py b/essenza/essenza/settings.py
@@ -46,6 +46,7 @@
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.locale.LocaleMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
@@ -63,6 +64,7 @@
         'OPTIONS': {
             'context_processors': [
                 'django.template.context_processors.request',
+                'django.template.context_processors.i18n',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
             ],
@@ -106,7 +108,7 @@
 # Internationalization
 # https://docs.djangoproject.com/en/5.2/topics/i18n/
 
-LANGUAGE_CODE = 'en-us'
+LANGUAGE_CODE = 'es'
 
 TIME_ZONE = 'UTC'
 

diff --git a/essenza/essenza/urls.py b/essenza/essenza/urls.py
@@ -3,6 +3,8 @@
 from django.http import HttpResponse
 from info.views import info_view
 from product.views import EscaparateView
+import user
+
 def home(request):
     html = """
     <html>
@@ -45,27 +47,38 @@ def home(request):
                     transition: background-color 0.3s;
                 }
                 .info-button:hover { background-color: #a35a34; }
-                .login-button {
-                    position: absolute;
-                    top: 60%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
+                
+                .button-container {
+                    margin-top: 30px; /* Espacio desde el texto de arriba */
+                    display: flex;
+                    flex-direction: column; /* Apila los botones verticalmente */
+                    align-items: center;  /* Centra los botones horizontalmente */
+                    gap: 20px; /* Espacio automático entre cada botón */
+                }
+
+                .action-button {
                     padding: 15px 35px;
                     background-color: #c06b3e;
                     color: white;
-                    font-size: 20px;
+                    font-size: 15px;
                     font-weight: bold;
                     border: none;
                     border-radius: 10px;
                     cursor: pointer;
                     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                     text-decoration: none;
                     transition: background-color 0.3s, transform 0.2s;
+                    
+                    display: block;
+                    width: 300px; /* Ancho fijo para que se vean uniformes */
+                    box-sizing: border-box; /* Para que el padding no afecte el ancho */
                 }
-                .login-button:hover {
+                
+                .action-button:hover {
                     background-color: #a35a34;
-                    transform: translate(-50%, -50%) scale(1.05);
+                    transform: scale(1.05); /* Efecto de zoom simple */
                 }
+                
             </style>
         </head>
         <body>
@@ -74,7 +87,11 @@ def home(request):
             <p>Tu espacio online de cosmética natural, belleza y cuidado personal.</p>
             <p>Explora nuestros productos, descubre nuevas fragancias y disfruta de la experiencia Essenza 🌸</p>
 
-            <a href="/user/login" class="login-button" title="Iniciar Sesión">Iniciar sesión</a>
+            <div class="button-container">
+                <a href="/user/register" class="action-button" title="Registro">Registro</a>
+                <a href="/user/login" class="action-button" title="Iniciar Sesión">Iniciar sesión</a>
+                <a href="/escaparate" class="action-button" title="invitado">Continuar como invitado</a>
+            </div>
         </body>
     </html>
     """
@@ -86,5 +103,4 @@ def home(request):
     path("user/", include("user.urls")), 
     path('admin/', admin.site.urls),
     path('escaparate/', EscaparateView.as_view(), name='escaparate')
-]
-
+]
diff --git a/essenza/templates/product/escaparate.html b/essenza/templates/product/escaparate.html
@@ -105,18 +105,26 @@
   </style>
 </head>
 
-<body>
-  <header>
+<header>
     <div class="brand">ESSENZA</div>
 
     <div class="search-bar">
       <input type="text" placeholder="Buscar...">
     </div>
 
-    <form action='user/logout' method="post" style="margin:0;">
-      {% csrf_token %}
-      <button formaction="{% url 'home' %}" type="submit" class="logout-btn">Log out</button>
-    </form>
-  </header>
-</body>
-</html>
+    {% if user.is_authenticated %}
+
+      <form action="{% url 'logout' %}" method="post" style="margin:0;">
+        {% csrf_token %}
+        <button type="submit" class="logout-btn">Log out</button>
+      </form>
+
+    {% else %}
+
+      <a href="{% url 'login' %}" class="logout-btn" style="text-decoration: none;">
+        Log in
+      </a>
+
+    {% endif %}
+    </header>
+</html>
diff --git a/essenza/templates/user/register.html b/essenza/templates/user/register.html
@@ -0,0 +1,176 @@
+{% load static %}
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8">
+  <title>Registro · Essenza</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+ <style>
+    body {
+        /* --- Variables de Color --- */
+        --color-principal: #c06b3e;
+        --color-principal-hover: #a35a34;
+        --color-fondo: #faf7f2;
+        --color-fondo-tarjeta: #fff;
+        --color-texto-base: #333;
+        --color-borde-claro: #eee;
+        --color-error: #b00020;
+        --color-foco-sombra: rgba(192, 107, 62, 0.2);
+
+        background-color: var(--color-fondo);
+        margin: 0;
+        font-family: 'Segoe UI', Arial, sans-serif;
+    }
+
+    .page {
+        min-height: 100dvh;
+        display: grid;
+        place-items: start center; /* Centrado horizontal, arriba vertical */
+        padding: 56px 0;
+    }
+
+    .brand {
+        color: var(--color-principal);
+        font-size: 48px;
+        margin-bottom: 10px;
+        text-align: center;
+    }
+
+    .form-card {
+        width: min(420px, 88vw);
+        background: var(--color-fondo-tarjeta);
+        border: 2px solid var(--color-principal);
+        border-radius: 16px;
+        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
+        padding: 22px 24px;
+        box-sizing: border-box;
+    }
+
+    /* --- 3. Elementos del Formulario (Inputs y Labels) --- */
+    label {
+        display: block;
+        font-size: 13px;
+        color: var(--color-texto-base);
+        margin: 10px 0 6px;
+    }
+
+    /* Estilos comunes para inputs de texto */
+    input[type="text"],
+    input[type="email"],
+    input[type="password"] {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid var(--color-borde-claro);
+        border-radius: 10px;
+        background: #fafafa; /* Este es un gris muy claro, lo mantenemos */
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    /* Estilo para el input de archivo */
+    input[type="file"] {
+        width: 100%;
+        font-size: 13px;
+        color: #555; /* Un gris un poco más oscuro para el texto */
+        margin: 10px 0 15px;
+        padding: 8px;
+        border: 1px solid var(--color-borde-claro);
+        border-radius: 10px;
+        background: #fafafa;
+        box-sizing: border-box;
+    }
+
+    /* Efecto :focus (resplandor) usando variables */
+    input:focus {
+        border-color: var(--color-principal);
+        box-shadow: 0 0 0 3px var(--color-foco-sombra);
+    }
+
+    /* --- 4. Botones y Clases de Ayuda --- */
+    .btn-primary {
+        width: 100%;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 10px;
+        background: var(--color-principal);
+        color: var(--color-fondo-tarjeta); /* Blanco */
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+
+    .btn-primary:hover {
+        background-color: var(--color-principal-hover);
+    }
+
+    /* Link para "Ya tienes cuenta?" */
+    .login-link {
+        margin-top: 15px;
+        text-align: center;
+        font-size: 13px;
+    }
+
+    .login-link a {
+        color: var(--color-principal);
+        text-decoration: underline;
+    }
+
+    /* Mensajes de error */
+    .form-error {
+        color: var(--color-error);
+        font-size: 13px;
+        margin: 6px 0;
+    }
+</style>
+</head>
+<body class="login-bg">
+  <div class="page">
+    <h1 class="brand">ESSENZA</h1>
+    <div class="form-card">
+      <form method="post" enctype="multipart/form-data" novalidate>
+        {% csrf_token %}
+
+        <label for="{{ form.first_name.id_for_label }}">Nombre</label>
+        {{ form.first_name }}
+
+        <label for="{{ form.last_name.id_for_label }}">Apellidos</label>
+        {{ form.last_name }}
+
+        <label for="{{ form.username.id_for_label }}">Nombre de usuario</label>
+        {{ form.username }}
+
+        <label for="{{ form.email.id_for_label }}">Correo electrónico</label>
+        {{ form.email }}
+
+        <label for="{{ form.password1.id_for_label }}">Contraseña</label>
+        {{ form.password1 }}
+
+        <label for="{{ form.password2.id_for_label }}">Confirmar contraseña</label>
+        {{ form.password2 }}
+
+        <label for="{{ form.foto.id_for_label }}">Foto (Opcional)</label>
+        {{ form.foto }}
+
+        {% if form.errors %}
+            <div style="margin-top: 15px;">
+                {% for field in form %}
+                    {% for error in field.errors %}
+                        <p class="form-error">{{ error }}</p>
+                    {% endfor %}
+                {% endfor %}
+                {% for error in form.non_field_errors %}
+                    <p class="form-error">{{ error }}</p>
+                {% endfor %}
+            </div>
+        {% endif %}
+
+        <button type="submit" class="btn-primary">Crear cuenta</button>
+
+        <p class="login-link">
+          <a href="{% url 'login' %}">¿Ya tienes cuenta? Inicia sesión</a>
+        </p>
+      </form>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/essenza/user/forms.py b/essenza/user/forms.py
@@ -1,5 +1,6 @@
-# user/forms.py
 from django import forms
+from django.contrib.auth.forms import UserCreationForm
+from .models import Usuario 
 
 class LoginForm(forms.Form):
     email = forms.CharField(
@@ -10,3 +11,28 @@ class LoginForm(forms.Form):
         label="Contraseña",
         widget=forms.PasswordInput(attrs={"placeholder": "Introduce tu contraseña"})
     )
+
+class RegisterForm(UserCreationForm):
+
+    first_name = forms.CharField(
+        label="Nombre", 
+        required=True
+    )
+    last_name = forms.CharField(
+        label="Apellidos", 
+        required=True
+    )
+    email = forms.EmailField(
+        label="Correo electrónico", 
+        required=True
+    )
+    foto = forms.ImageField(
+        label="Foto (Opcional)", 
+        required=False
+    )
+
+    class Meta(UserCreationForm.Meta):
+
+        model = Usuario
+
+        fields = UserCreationForm.Meta.fields + ('first_name', 'last_name', 'email', 'foto')
diff --git a/essenza/user/models.py b/essenza/user/models.py
@@ -9,9 +9,9 @@ class Usuario(AbstractUser):
     foto = models.ImageField(upload_to='images/', null=True, blank=True)
     role = models.CharField(max_length=10, choices=Role.choices, default=Role.USER)
 
-    email = models.EmailField(unique=True)  # <-- aseguramos emails únicos
+    email = models.EmailField(unique=True) 
 
-    USERNAME_FIELD = 'email'                # <-- se usará email para login
+    USERNAME_FIELD = 'email'               
     REQUIRED_FIELDS = ['username']     
 
     def __str__(self):