feat: edição perfil

filme/forms.py

@@ -15,7 +15,7 @@ class CustomLoginForm(AuthenticationForm):
     def clean_username(self):
         username = self.cleaned_data.get('username')
         # Exemplo de validação simples de formato de email:
-        if not username.endswith('@'):
+        if '@' not in username:
             raise forms.ValidationError(
                 'Este campo deve ser um email válido.')
         return username

filme/templates/editarperfil.html

@@ -11,7 +11,69 @@
 
 {% block content %}
 <div class="content">
-  <h2>Edição do Perfil</h2>
+  <header class="header">
+    <div class="content-form">
+      <div class="title-form">
+        Edição de Perfil <p>{{ user.username }}</p>
+      </div>
+
+      <form method="post" class="form-editarperfil">
+        {% csrf_token %}
+
+        {% if 'editarperfil' in request.path %}
+          <div class="form-group">
+            <input type="text" name="{{ form.first_name.name }}" value="{{ user.first_name }}" placeholder="Primeiro Nome">
+          </div>
+          <div class="form-group">
+            <input type="text" name="{{ form.last_name.name }}" value="{{ user.last_name }}" placeholder="Sobrenome">
+          </div>
+          <div class="form-group">
+            <input type="text" name="{{ form.email.name }}" value="{{ user.email }}" placeholder="Email">
+          </div>
+
+        {% else %}
+        <div class="form-group">
+          {% if form.old_password.errors %}
+            <input type="password" class="is-invalid" name="{{ form.old_password.name }}" value="{{ user.old_password }}" placeholder="Senha antiga" required>
+            <div class="invalid-feedback">
+              {% for erro in form.old_password.errors %}
+                {{ erro }}
+              {% endfor %}
+            </div>
+          {% else %}
+            <input type="password" name="{{ form.old_password.name }}" value="{{ user.old_password }}" placeholder="Senha antiga" required>
+          {% endif %}
+        </div>
+        <div class="form-group">
+          <input type="password" name="{{ form.new_password1.name }}" value="{{ user.new_password1 }}" placeholder="Nova senha" required>
+          <small>{{ form.new_password1.help_text }}</small>
+        </div>
+        <div class="form-group">
+          {% if form.new_password2.errors %}
+              <input type="password" class="is-invalid" name="{{ form.new_password2.name }}" value="{{ user.new_password2 }}" placeholder="Confirmação da nova senha" required>
+              <div class="invalid-feedback">
+                {% for erro in form.new_password2.errors %}
+                  {{ erro }}
+                {% endfor %}
+              </div>
+          {% else %}
+            <input type="password" name="{{ form.new_password2.name }}" value="{{ user.new_password2 }}" placeholder="Confirmação da nova senha" required>
+          {% endif %}
+        </div>
+        {% endif %}
+
+        {% if 'editarperfil' in request.path %}
+          <small><a href="{% url 'filme:alterarsenha' %}">Quer mudar sua senha?</a></small>
+        {% endif %}
+        <div class="form-group">
+          <button type="submit" name="button">
+              Finalizar Edição
+          </button>
+        </div>
+      </form>
+
+    </div>
+  </header>
 
 </div>
 {% endblock %}

filme/urls.py

@@ -1,4 +1,4 @@
-from django.urls import path, include
+from django.urls import path, reverse_lazy
 from .views import Homepage, HomeFilmes, DetalhesFilme, PesquisaFilme, EditarPerfil, CriarConta, CustomLoginView
 from django.contrib.auth import views as auth_view
 
@@ -15,6 +15,8 @@
         template_name='login.html'), name='login'),
     path('logout/', auth_view.LogoutView.as_view(
         template_name='logout.html'), name='logout'),
-    path('editarperfil/', EditarPerfil.as_view(), name='editarperfil'),
+    path('editarperfil/<int:pk>', EditarPerfil.as_view(), name='editarperfil'),
+    path('alterarsenha/',
+         auth_view.PasswordChangeView.as_view(template_name='editarperfil.html', success_url=reverse_lazy('filme:homefilmes')), name='alterarsenha'),
     path('criarconta/', CriarConta.as_view(), name='criarconta'),
 ]

filme/views.py

@@ -1,6 +1,6 @@
 from django.shortcuts import render, redirect, reverse
 from .models import Filme, Usuario
-from django.views.generic import TemplateView, ListView, DetailView, FormView
+from django.views.generic import TemplateView, ListView, DetailView, FormView, UpdateView
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.contrib.auth.views import LoginView
 from .forms import CustomLoginForm, CriarContaForm, FormHomepage
@@ -76,8 +76,15 @@ def get_queryset(self):
             return None
 
 
-class EditarPerfil(LoginRequiredMixin, TemplateView):
+class EditarPerfil(LoginRequiredMixin, UpdateView):
     template_name = 'editarperfil.html'
+    model = Usuario
+    # Irá criar um form com os fields definidos na lista
+    fields = ['first_name', 'last_name', 'email']
+
+    # Assim que editar será redirecionado para homefilmes
+    def get_success_url(self):
+        return reverse('filme:homefilmes')
 
 
 class CriarConta(FormView):

static/css/style_criarconta.css

@@ -27,7 +27,7 @@
 
 .content-form {
 	width: 30rem;
-	height: 40rem;
+	height: auto;
 	background-color: rgb(0, 0, 0, 0.5);
 	display: flex;
 	flex-direction: column;
@@ -91,7 +91,6 @@
 }
 
 
-
 .is-invalid {
 	border: 1px solid rgb(255, 0, 0) !important;
 }

static/css/style_editarperfil.css

@@ -1,4 +1,103 @@
-.content{
-  	padding-top: 4.68rem;
-    min-height: 100vh;
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto:wght@500&display=swap");
+
+.header {
+	min-height: 100vh;
+	position: relative; /* Adicione uma posição relativa para que possamos posicionar o pseudo-elemento */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.header::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-image: url("../images/background_netflix.jpg");
+	background-repeat: no-repeat;
+	background-blend-mode: overlay;
+	background-size: cover; /* Ajuste para cobrir todo o cabeçalho */
+	background-color: rgb(0, 0, 0, 0.7);
+	opacity: 0.7; /* Opacidade para a imagem de fundo */
+	z-index: -1; /* Coloque o pseudo-elemento atrás do conteúdo */
+}
+
+.content-form {
+	width: 30rem;
+	height: auto;
+	background-color: rgb(0, 0, 0, 0.5);
+	display: flex;
+	flex-direction: column;
+}
+
+.form-editarperfil {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 2rem 4rem;
+	gap: 1rem;
+}
+
+.title-form {
+	font-family: "Montserrat", sans-serif;
+	color: rgb(255, 255, 255);
+	font: 2rem bold;
+	padding-left: 4.5rem;
+	padding-top: 2rem;
+}
+
+.form-editarperfil input {
+	height: 3rem;
+	padding-left: 0.8rem;
+	border-radius: 0.3rem;
+	outline: none;
+	border: 1px rgb(204, 204, 204);
+	background-color: #313235;
+	color: hsl(0, 0%, 100%);
+}
+
+.form-editarperfil button {
+	height: 3rem;
+	border-radius: 0.3rem;
+	outline: none;
+  margin: auto;
+	width: 90%;
+	background-color: rgb(255, 0, 0);
+	border: transparent;
+	color: hsl(0, 0%, 100%);
+	text-align: center;
+	font-weight: bold;
+	transition: background-color -3s ease;
+}
+
+.form-editarperfil button:hover {
+	background-color: rgb(189, 8, 8);
+	cursor: pointer;
+}
+
+.form-editarperfil small {
+  text-align: center;
+}
+
+.form-editarperfil ul {
+  list-style-type: none; /* Retira o simbolo da lista */
+}
+
+.form-group {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.is-invalid {
+	border: 1px solid rgb(255, 0, 0) !important;
+}
+
+.invalid-feedback {
+	outline: none;
+	font-size: 0.8rem;
+	color: rgb(255, 0, 0);
 }

static/css/style_login.css

@@ -27,7 +27,7 @@
 
 .content-form {
 	width: 30rem;
-	height: 35rem;
+	height: auto;
 	background-color: rgb(0, 0, 0, 0.5);
 	display: flex;
 	flex-direction: column;
@@ -95,6 +95,7 @@
 .inscrever p {
 	text-decoration: underline;
 	color: rgb(197, 82, 66);
+	padding-bottom: 2rem;
 }
 
 .is-invalid {

templates/navbar.html

@@ -24,7 +24,7 @@
       {% endif %}
       {% if user.is_authenticated %}
         <div class="nav-btn">
-            <a href="{% url 'filme:editarperfil' %}">Editar Perfil</a>
+            <a href="{% url 'filme:editarperfil' user.pk %}">Editar Perfil</a>
         </div>
       {% endif %}
     </div>