diff --git a/db.sqlite3 b/db.sqlite3 index 6606a28..be10f5a 100644 Binary files a/db.sqlite3 and b/db.sqlite3 differ diff --git a/filme/forms.py b/filme/forms.py new file mode 100644 index 0000000..36d24dd --- /dev/null +++ b/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 diff --git a/filme/templates/criarconta.html b/filme/templates/criarconta.html index 02f49a2..173c2f8 100644 --- a/filme/templates/criarconta.html +++ b/filme/templates/criarconta.html @@ -11,7 +11,60 @@ {% block content %}
-

Criar Conta

+
+
+
+ Criação de Conta +
+ +
+ {% csrf_token %} +
+ + {{form.username.help_text }} +
+
+ {% if form.email.errors %} + +
+ {% for erro in form.email.errors %} + {{ erro }} + {% endfor %} +
+ {% else %} + + {% endif %} + {{form.email.help_text }} +
+
+ + {{form.password1.help_text }} +
+
+ {% if form.password2.errors %} + +
+ {% for erro in form.password2.errors %} + {{ erro }} + {% endfor %} +
+ {% else %} + + {{form.password2.help_text }} + {% endif %} +
+ + +
+ +
+
{% endblock %} diff --git a/filme/templates/homepage.html b/filme/templates/homepage.html index 527761d..707a536 100644 --- a/filme/templates/homepage.html +++ b/filme/templates/homepage.html @@ -19,13 +19,22 @@ Quer começar? Coloque seu e-mail abaixo para acessar.
- -
- + {% csrf_token %} + {% if form.email.errors %} + +
+ {% for erro in form.email.errors %} + {{ erro }} + {% endfor %} +
+ + {% else %} + + {% endif %} +
+
diff --git a/filme/templates/login.html b/filme/templates/login.html index 3920204..eddac82 100644 --- a/filme/templates/login.html +++ b/filme/templates/login.html @@ -11,6 +11,45 @@ {% block content %}
-

Login

+
+
+
+ Entrar +
+ + + +
+ Não tem uma conta ainda? +

Clique aqui para criar uma conta

+
+ +
+
{% endblock %} diff --git a/filme/urls.py b/filme/urls.py index 2428485..7ca2578 100644 --- a/filme/urls.py +++ b/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/', 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'), diff --git a/filme/views.py b/filme/views.py index d9302db..100ab1c 100644 --- a/filme/views.py +++ b/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 diff --git a/hashflix/settings.py b/hashflix/settings.py index 7cafbfd..58e4f58 100644 --- a/hashflix/settings.py +++ b/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' diff --git a/static/css/style_criarconta.css b/static/css/style_criarconta.css index fc54b21..84d18eb 100644 --- a/static/css/style_criarconta.css +++ b/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); } diff --git a/static/css/style_homepage.css b/static/css/style_homepage.css index 2a0e14f..b29e29d 100644 --- a/static/css/style_homepage.css +++ b/static/css/style_homepage.css @@ -40,6 +40,7 @@ .form-access { display: flex; + flex-direction: column; gap: 0.3rem; justify-content: center; align-items: center; @@ -47,6 +48,8 @@ .btn-access { background-color: rgb(255, 0, 0); padding: 0.55rem; + color: #fff; + border-color: rgb(255, 0, 0); } .input-email { @@ -69,3 +72,13 @@ font: 3rem bold; padding: 0.8rem; } + +.is-invalid { + border: 1px solid rgb(255, 0, 0) !important; +} + +.invalid-feedback { + outline: none; + font-size: 0.8rem; + color: rgb(255, 0, 0); +} diff --git a/static/css/style_login.css b/static/css/style_login.css index e69de29..191e1bf 100644 --- a/static/css/style_login.css +++ b/static/css/style_login.css @@ -0,0 +1,108 @@ +@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: 35rem; + background-color: rgb(0, 0, 0, 0.5); + display: flex; + flex-direction: column; +} + +.form-login { + display: flex; + flex-direction: column; + justify-content: center; + padding: 4rem; + gap: 1rem; +} + +.title-form { + font-family: "Montserrat", sans-serif; + color: rgb(255, 255, 255); + font: 2rem bold; + padding-left: 4.9rem; + padding-top: 4.1rem; +} + +.form-login input { + height: 3rem; + padding-left: 0.8rem; + border-radius: 0.3rem; + outline: none; + width: 90%; + border: 1px rgb(204, 204, 204); + background-color: #313235; + color: hsl(0, 0%, 100%); +} + +.form-login 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-login button:hover { + background-color: rgb(189, 8, 8); + cursor: pointer; +} + +.form-group { + display: flex; + flex-direction: column; + justify-content: center; +} + +.inscrever { + color: rgb(255, 255, 255); + font: 1rem bold; + display: flex; + flex-direction: column; + text-align: center; +} + +.inscrever p { + text-decoration: underline; + color: rgb(197, 82, 66); +} + +.is-invalid { + border: 1px solid rgb(255, 0, 0) !important; +} + +.invalid-feedback { + outline: none; + font-size: 0.8rem; + color: rgb(255, 0, 0); +} diff --git a/templates/base.html b/templates/base.html index 0291806..a95f4dd 100644 --- a/templates/base.html +++ b/templates/base.html @@ -12,13 +12,10 @@ - - - {% block head %} {% endblock %} - - + + {% include 'navbar.html' %}