feat: form login criar conta validacoes

filme/forms.py

@@ -0,0 +1,38 @@
+from django import forms
+from django.contrib.auth.forms import AuthenticationForm
+from django.contrib.auth.forms import UserCreationForm
+from .models import Usuario
+
+
+class FormHomepage(forms.Form):
+    email = forms.EmailField(label=False)
+
+
+class CustomLoginForm(AuthenticationForm):
+    username = forms.EmailField(required=True, widget=forms.TextInput(
+        attrs={'placeholder': 'Email'}))
+
+    def clean_username(self):
+        username = self.cleaned_data.get('username')
+        # Exemplo de validação simples de formato de email:
+        if not username.endswith('@'):
+            raise forms.ValidationError(
+                'Este campo deve ser um email válido.')
+        return username
+
+
+class CriarContaForm(UserCreationForm):
+    # se o campo não for obrigatório dentro dos parenteses incluir (required=False)
+    email = forms.EmailField()
+
+    class Meta:  # Quando se cria um UserCreationForm ele espera uma class Meta indicando qual o modelo ele ira se basear
+        model = Usuario
+        fields = ('username', 'email', 'password1', 'password2')
+
+    def clean_email(self):
+        email = self.cleaned_data.get('email')
+        if Usuario.objects.filter(email=email).exists():
+            raise forms.ValidationError(
+                'Já existe uma conta com este e-mail.'
+            )
+        return email

filme/templates/criarconta.html

@@ -11,7 +11,60 @@
 
 {% block content %}
 <div class="content">
-  <h2>Criar Conta</h2>
+  <header class="header">
+    <div class="content-form">
+      <div class="title-form">
+        Criação de Conta
+      </div>
+
+      <form method="post" class="form-criarconta">
+        {% csrf_token %}
+        <div class="form-group">
+          <input type="text" name="{{ form.username.name }}" placeholder="Username (Email)" required>
+          <small>{{form.username.help_text }}</small>
+        </div>
+        <div class="form-group">
+          {% if form.email.errors %}
+          <input type="text" class="is-invalid" name="{{ form.email.name }}" placeholder="Email" required>
+            <div class="invalid-feedback">
+              {% for erro in form.email.errors %}
+                {{ erro }}
+              {% endfor %}
+            </div>
+          {% else %}
+            <input type="text" name="{{ form.email.name }}" placeholder="Email" required>
+          {% endif %}
+          <small>{{form.email.help_text }}</small>
+        </div>
+        <div class="form-group">
+            <input type="password" name="{{ form.password1.name }}" placeholder="Senha" required>
+            <small>{{form.password1.help_text }}</small>
+        </div>
+        <div class="form-group">
+            {% if form.password2.errors %}
+              <input type="password" class="is-invalid" name="{{ form.password2.name }}" placeholder="Confirmação de Senha" required>
+                <div class="invalid-feedback">
+                  {% for erro in form.password2.errors %}
+                    {{ erro }}
+                  {% endfor %}
+                </div>
+            {% else %}
+              <input type="password" name="{{ form.password2.name }}" placeholder="Confirmação de Senha" required>
+              <small>{{form.password2.help_text }}</small>
+            {% endif %}
+        </div>
+
+        <div class="form-group">
+          <button type="submit" name="button">
+            <a href="{% url 'filme:login' %}">
+              Finalizar Cadastro
+            </a>
+          </button>
+        </div>
+      </form>
+
+    </div>
+  </header>
 
 </div>
 {% endblock %}

filme/templates/homepage.html

@@ -19,13 +19,22 @@
 		Quer começar? Coloque seu e-mail abaixo para acessar.
 	</div>
 	<form method="POST" action="" class="form-access">
-		<input type="text" name="email" id="email" class="input-email"/>
-		<div class="btn-access">
-			<a href="#">
+    {% csrf_token %}
+    {% if form.email.errors %}
+    <input type="text" class="input-email is-invalid" name="{{ form.email.name }}"  placeholder="E-mail"/>
+    <div class="invalid-feedback">
+      {% for erro in form.email.errors %}
+        {{ erro }}
+      {% endfor %}
+    </div>
+
+    {% else %}
+		<input type="text" class="input-email" name="{{ form.email.name }}"  placeholder="E-mail"/>
+    {% endif %}
+		<button type="submit" class="btn-access">
         <span>Acesse</span>
         <ion-icon name="chevron-forward-outline"></ion-icon>
-      </a>
-		</div>
+		</button>
 	</form>
 </header>
 

filme/templates/login.html

@@ -11,6 +11,45 @@
 
 {% block content %}
 <div class="content">
-  <h2>Login</h2>
+  <header class="header">
+    <div class="content-form">
+      <div class="title-form">
+    		Entrar
+    	</div>
+
+      <form method="post" class="form-login">
+        {% csrf_token %}
+        <div class="form-group">
+          {% if form.username.errors %}
+          <input type="text" class="is-invalid" name="{{ form.username.name }}" placeholder="Email" required>
+          <div class="invalid-feedback">
+              {% for erro in form.username.errors %}
+                {{ erro }}
+              {% endfor %}
+          </div>
+          {% else %}
+            <input type="text" name="{{ form.username.name }}" placeholder="Email" required>
+          {% endif %}
+        </div>
+        <div class="form-group">
+            <input type="password" name="{{ form.password.name }}" placeholder="Senha" required>
+        </div>
+
+        <div class="form-group">
+          <button type="submit" name="button">
+            <a href="{% url 'filme:login' %}">
+              Entrar
+            </a>
+          </button>
+        </div>
+      </form>
+
+      <div class="inscrever">
+        Não tem uma conta ainda?
+        <p><a href="{% url 'filme:criarconta' %}">Clique aqui para criar uma conta</a></p>
+      </div>
+
+    </div>
+  </header>
 </div>
 {% endblock %}

filme/urls.py

@@ -1,5 +1,5 @@
 from django.urls import path, include
-from .views import Homepage, HomeFilmes, DetalhesFilme, PesquisaFilme, EditarPerfil, CriarConta
+from .views import Homepage, HomeFilmes, DetalhesFilme, PesquisaFilme, EditarPerfil, CriarConta, CustomLoginView
 from django.contrib.auth import views as auth_view
 
 
@@ -11,7 +11,7 @@
     path('filmes/', HomeFilmes.as_view(), name='homefilmes'),
     path('filmes/<int:pk>', DetalhesFilme.as_view(), name='detalhesfilme'),
     path('pesquisa/', PesquisaFilme.as_view(), name='pesquisafilme'),
-    path('login/', auth_view.LoginView.as_view(
+    path('login/', CustomLoginView.as_view(
         template_name='login.html'), name='login'),
     path('logout/', auth_view.LogoutView.as_view(
         template_name='logout.html'), name='logout'),

filme/views.py

@@ -1,13 +1,16 @@
-from django.shortcuts import render, redirect
-from .models import Filme
-from django.views.generic import TemplateView, ListView, DetailView
+from django.shortcuts import render, redirect, reverse
+from .models import Filme, Usuario
+from django.views.generic import TemplateView, ListView, DetailView, FormView
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.contrib.auth.views import LoginView
+from .forms import CustomLoginForm, CriarContaForm, FormHomepage
 
 # Create your views here.
 
 
-class Homepage(TemplateView):
+class Homepage(FormView):
     template_name = 'homepage.html'
+    form_class = FormHomepage
 
     def get(self, request, *args, **kwargs):
         if request.user.is_authenticated:
@@ -17,6 +20,15 @@ def get(self, request, *args, **kwargs):
             # Redireciona para a url final da view neste caso a homepage
             return super().get(request, *args, **kwargs)
 
+    def get_success_url(self):
+        email = self.request.POST.get("email")
+        usuarios = Usuario.objects.filter(email=email)
+        if usuarios:
+            return reverse('filme:login')
+        else:
+            return reverse('filme:criarconta')
+        # print(self.request.POST)
+
 
 class HomeFilmes(LoginRequiredMixin, ListView):
     template_name = "homefilmes.html"
@@ -68,5 +80,21 @@ class EditarPerfil(LoginRequiredMixin, TemplateView):
     template_name = 'editarperfil.html'
 
 
-class CriarConta(TemplateView):
+class CriarConta(FormView):
     template_name = 'criarconta.html'
+    form_class = CriarContaForm
+
+    # Verifica se todos os campos do formulário foram preenchido corretamente e salva no banco de dados
+    def form_valid(self, form):
+        form.save()
+        return super().form_valid(form)
+
+    # Se a validação for bem sucedida tem que redirecionar para um link
+
+    def get_success_url(self):
+        return reverse('filme:login')  # Retorna o texto do link
+
+
+class CustomLoginView(LoginView):
+    template_name = 'login.html'
+    form_class = CustomLoginForm

hashflix/settings.py

@@ -39,6 +39,8 @@
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'filme',
+    # 'crispy_forms',
+    # 'crispy_bootstrap5'
 ]
 
 MIDDLEWARE = [
@@ -144,3 +146,7 @@
 LOGIN_REDIRECT_URL = 'filme:homefilmes'
 
 LOGIN_URL = 'filme:login'
+
+# CRISPY_ALLOWED_TEMPLATE_PACKS = 'bootstrap5'
+
+# CRISPY_TEMPLATE_PACK = 'bootstrap5'

static/css/style_criarconta.css

@@ -1,3 +1,103 @@
-.content {
-	padding-top: 4.68rem;
+@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: 40rem;
+	background-color: rgb(0, 0, 0, 0.5);
+	display: flex;
+	flex-direction: column;
+}
+
+.form-criarconta {
+	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.9rem;
+	padding-top: 2rem;
+}
+
+.form-criarconta 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-criarconta button {
+	height: 3rem;
+	border-radius: 0.3rem;
+	outline: none;
+	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-criarconta button:hover {
+	background-color: rgb(189, 8, 8);
+	cursor: pointer;
+}
+
+.form-criarconta small {
+}
+
+.form-criarconta 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);
 }