Merge pull request #58 from Nuno-Jesus/2factor

2factor

.env

@@ -7,3 +7,6 @@ POSTGRES_PASSWORD="1234"
 PGADMIN_DEFAULT_EMAIL="[email protected]"
 PGADMIN_DEFAULT_PASSWORD="1234"
 PGADMIN_LISTEN_PORT="8080"
+
+EMAIL_USER='[email protected]'
+EMAIL_PASS='uwgk hbmf sera vxch'

Makefile

@@ -23,6 +23,7 @@ clean:
 		backend/pong/migrations/*_initial.py \
 		backend/pong/migrations/0*.py
 
+	rm -rf backend/media/upload/*
 	mkdir data/
 
 prune:

backend/backend/settings.py

@@ -12,6 +12,7 @@
 
 from pathlib import Path
 import os
+from datetime import timedelta 
 
 from dotenv import load_dotenv
 
@@ -41,8 +42,8 @@
 DEBUG = True
 
 
-LOGOUT_REDIRECT_URL = "login"
-LOGIN_REDIRECT_URL = ''
+LOGOUT_REDIRECT_URL = 'login'
+LOGIN_REDIRECT_URL = 'home'
 LOGIN_URL = 'login'
 
 ALLOWED_HOSTS = ['*']
@@ -58,12 +59,13 @@
 SESSION_COOKIE_SECURE = False  # Deve ser True em produção, requer HTTPS
 SESSION_EXPIRE_AT_BROWSER_CLOSE = False  # Define se a sessão expira ao fechar o navegador
 
-CSRF_COOKIE_SECURE = False
-CSRF_COOKIE_HTTPONLY = True
+
 # Application definition
 
 INSTALLED_APPS = [
     'daphne',
+    'crispy_forms',
+    'crispy_bootstrap4',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -72,6 +74,12 @@
     'django.contrib.staticfiles',
     'rest_framework', #django rest framework
     'rest_framework_swagger',
+    'rest_framework_simplejwt',
+    'rest_framework_simplejwt.token_blacklist',
+    'corsheaders',
+    'django_otp',
+    'django_otp.plugins.otp_totp',
+    'django_otp.plugins.otp_static',
     'drf_yasg',
     "pong",
     'bootstrap4',
@@ -80,11 +88,12 @@
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    "corsheaders.middleware.CorsMiddleware",
     'django.middleware.common.CommonMiddleware',
-    'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'django_otp.middleware.OTPMiddleware',
 ]
 
 AUTHENTICATION_BACKENDS = [
@@ -131,17 +140,20 @@
 }
 
 REST_FRAMEWORK = { 
-    # Use Django's standard `django.contrib.auth` permissions,
-    # or allow read-only access for unauthenticated users.
-    # 'DEFAULT_PERMISSION_CLASSES': [
-    #     'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
-    # ]
-    #  For a quick way to limit permissions to authenticated users, we add the following to our settings file:
-    # 'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAuthenticated',)
+    'DEFAULT_AUTHENTICATION_CLASSES': (
+        'rest_framework_simplejwt.authentication.JWTAuthentication',
+    ),
 
     'DEFAULT_SCHEMA_CLASS': 'rest_framework.schemas.coreapi.AutoSchema' 
 }
 
+SIMPLE_JWT = {
+    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=10),
+    'REFRESH_TOKEN_LIFETIME': timedelta(minutes=60),
+    'AUTH_HEADER_TYPES': ('Bearer',),
+    'BLACKLIST_AFTER_ROTATION': True,
+}
+
 # Password validation
 # https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
 
@@ -190,7 +202,7 @@
 EMAIL_USE_TLS = True
 EMAIL_PORT = 587
 EMAIL_HOST_USER = '[email protected]'
-EMAIL_HOST_PASSWORD = 'nfvzbxadhvgzfgpq'
+EMAIL_HOST_PASSWORD = 'uwgk hbmf sera vxch'
 
 
 # Default primary key field type

backend/backend/urls.py

@@ -14,6 +14,7 @@
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+
 from django.contrib import admin
 from django.urls import path,include
 from django.conf.urls.static import static

backend/pong/migrations/0001_initial.py

@@ -1,4 +1,4 @@
-# Generated by Django 5.1.2 on 2024-10-23 19:47
+# Generated by Django 5.1.3 on 2024-11-10 12:04
 
 import django.db.models.deletion
 from django.conf import settings
@@ -25,6 +25,7 @@ class Migration(migrations.Migration):
                 ('email', models.EmailField(blank=True, max_length=254, null=True)),
                 ('picture', models.ImageField(default='default.jpg', null=True, upload_to='upload')),
                 ('status', models.CharField(default='Offline', max_length=7)),
+                ('two_factor', models.BooleanField(default=False)),
                 ('created_at', models.DateTimeField(auto_now_add=True)),
                 ('updated_at', models.DateTimeField(auto_now=True)),
                 ('is_active', models.BooleanField(default=True)),

backend/pong/models.py

@@ -2,7 +2,7 @@
 from django.core.exceptions import ValidationError
 from django.contrib.auth.hashers import make_password
 from django.contrib.auth.models import BaseUserManager, AbstractBaseUser, PermissionsMixin
-
+from rest_framework_simplejwt.tokens import RefreshToken
 
 
 #make_password Creates a hashed password in the format used by this application.
@@ -32,6 +32,7 @@ class Users(AbstractBaseUser, PermissionsMixin):
     email = models.EmailField(null=True, blank=True)
     picture = models.ImageField(default='default.jpg', upload_to='upload', null=True)
     status = models.CharField(max_length=7, default='Offline')
+    two_factor = models.BooleanField(default=False)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
     is_active = models.BooleanField(default=True)
@@ -59,6 +60,13 @@ def has_perm(self, perm, obj=None):
 
     def has_module_perms(self, app_label):
         return True
+
+    def tokens(self):
+        refresh = RefreshToken.for_user(self)
+        return {
+            "refresh": str(refresh),
+            "access": str(refresh.access_token)
+        }
 
 class Friends(models.Model):
     user1_id = models.ForeignKey(Users, related_name="friends_with", on_delete=models.CASCADE)

backend/pong/templates/navs.html

@@ -16,14 +16,16 @@
     <script defer src="{% static 'js/friends.js' %}"></script>
     <script defer src="{% static 'js/friend-block.js' %}"></script>
     <script defer src="{% static 'js/notifications.js' %}"></script>
+    <script defer src="{% static 'js/signout.js' %}"></script>
+    <script defer src="{% static 'js/token.js' %}"></script>
 
     <main id="MainPage" style="padding: 70px;">
         {% block main_content %}
         {% endblock %}
     </main>
     {% if user.is_authenticated %}
 		{% block friend-bar %}
-            <button class="toggle-button" id="toggle-button" onclick="toggleSidebar('{{user_id}}')">
+            <button class="toggle-button" id="toggle-button" onclick="toggleFriendsDrawer('{{user_id}}')">
                 <img src="{% static 'assets/icons/puxador.png' %}">
             </button>
             <div class="sidebar" id="sidebar"></div>
@@ -36,6 +38,7 @@
                 hx-trigger="submit"
                 hx-target="#main"
                 hx-push-url="true"
+                onclick="checkTokenBeforeNavigation(event)"
                 id="searchForm">
                 <div class="search-container d-flex align-items-center">
                     <input type="text" autocomplete="off" placeholder="Search for players..." name="searched" id="search" onkeyup="getSuggestions()">
@@ -61,7 +64,8 @@
                 <a  hx-get="{% url 'user-profile' user.id %}"
                     hx-trigger="click"
                     hx-target="#main"
-                    hx-push-url="true">
+                    hx-push-url="true"
+                    onclick="checkTokenBeforeNavigation(event)">
                     {% if "http" in user.picture.url %}
                         <img class="profile-pic" src="{{ user.picture }}" alt="Profile">
                     {% else %}
@@ -85,7 +89,8 @@
                             hx-get="{% url 'home' %}"
                             hx-trigger="click"
                             hx-target="#main"
-                            hx-push-url="true">
+                            hx-push-url="true"
+                            onclick="checkTokenBeforeNavigation(event)">
                             <!-- data-url="{% url 'home' %}" data-page="home" 
                             data-icon="{% static 'assets/icons/pong.png' %}" 
                             data-highlight="{% static 'assets/icons/pong-highlight.png' %}" 
@@ -104,7 +109,8 @@
                             hx-get="{% url 'tournaments' %}"
                             hx-trigger="click"
                             hx-target="#main"
-                            hx-push-url="true">
+                            hx-push-url="true"
+                            onclick="checkTokenBeforeNavigation(event)">
                             <!-- data-url="{% url 'tournaments' %}" data-page="tournaments" data-icon="{% static 'assets/icons/tournament.png' %}" data-highlight="{% static 'assets/icons/tournament-highlight.png' %}" onclick="loadPage(event)"> -->
                             {% if page == "tournament" %}
                                 <img class="icon" id="highlight-icon2" src="{% static 'assets/icons/tournament-highlight.png' %}" alt="Ping Pong">
@@ -121,7 +127,8 @@
                             hx-get="{% url 'user-profile' user.id %}"
                             hx-trigger="click"
                             hx-target="#main"
-                            hx-push-url="true">
+                            hx-push-url="true"
+                            onclick="checkTokenBeforeNavigation(event)">
                             <!-- data-url="{% url 'user-profile' user.id %}" data-page="profile" data-icon="{% static 'assets/icons/profile.png' %}" data-highlight="{% static 'assets/icons/profile-highlight.png' %}" onclick="loadPage(event)"> -->
                             {% if page == "profile" %}
                                 <img class="icon" id="highlight-icon3" src="{% static 'assets/icons/profile-highlight.png' %}" alt="Ping Pong">
@@ -132,15 +139,9 @@
                             {% endif %}
                         </a>
                     </button>
-                    <button class="select-item d-flex align-items-center logout-icon">
-                        <a class="side-menu_a" 
-                            hx-get="{% url 'signout' %}"
-                            hx-trigger="click"
-                            hx-target="#main"
-                            hx-push-url="true">
-                            <img class="logout-img" src="{% static 'assets/icons/logout.png' %}" alt="logout">
-                            <span class="icon-title">Logout</span>
-                        </a>
+                    <button class="select-item d-flex align-items-center logout-icon" onclick="onSignout()">
+                        <img class="logout-img" src="{% static 'assets/icons/logout.png' %}" alt="logout">
+                        <span class="icon-title">Logout</span>
                     </button>
                 </div>
             </div>

backend/pong/templates/pages/home-view.html

@@ -3,6 +3,7 @@
 
 {% block main_content %}
     <link rel="stylesheet" href="{% static 'css/home_view.css' %}">
+    <script defer src="{% static 'js/login42.js' %}"></script>
     <div class="main-content d-flex justify-content-center align-items-center non_compressed"  id="main-content">
         <div class="local options">
             <button class="main-button">

backend/pong/templates/pages/login.html

@@ -9,7 +9,6 @@
             <h4 class="title" ><img src="{% static 'assets/icons/42logosmall.png' %}"> My Website</h4>
             <h3 class="title" id="nice" >Nice to see you back :)</h3>
             <form id="loginForm" >
-                {% csrf_token %}
                 <div class="input-group">
                     <label for="username">Username</label>
                     <input type="text" id="username" name="username" placeholder="Username" required>

backend/pong/templates/pages/otp.html

@@ -0,0 +1,27 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block body %}
+    <link rel="stylesheet" href="{% static 'css/signup.css' %}">
+    <script defer src="{% static 'js/login.js' %}"></script>
+    <script defer src="{% static 'js/opt.js' %}"></script>
+    <div class="login-container">
+        <div class="login-container2">
+            <h4 class="title"><img src="{% static 'assets/icons/42logosmall.png' %}"> My Website</h4>
+            <p>A code was sent to your email {{ user.email }}</p>
+            <form id="otpForm" method="POST" onsubmit="return submitOtp(event);">
+                <div class="input-group">
+                    <label for="otp">Code: </label>
+                    <input type="text" id="otp" name="otp" placeholder="Please insert the code sent to your email" required>
+                </div>
+                <p id="errorMessage" class="error-message"></p>
+                <p>If you didn't receive your code, please 
+                    <a onclick="resend_code()" style="color: blue;">click here</a> to resend the code
+                </p>
+                <button type="submit">Confirm</button>
+            </form>
+            <br>
+            <h6>© 42 Porto 2024</h6>
+        </div>
+    </div>
+{% endblock %}

backend/pong/templates/pages/password_reset.html

@@ -1,15 +1,16 @@
 {% extends 'base.html' %}
+{% load crispy_forms_tags %}
 {% load static %}
 
 {% block body %}
     <link rel="stylesheet" href="{% static 'css/signup.css' %}">
     <div class="login-container">
         <div class="login-container2">
-            <form method="POST" action="{% url 'password_reset' %}">
+            <form method="POST">
                 {% csrf_token %}
                 <fieldset class="form-group">
                     <legend class="border-bottom mb-4">Reset Password</legend>
-                    {{ form.as_p }}
+                    {{ form|crispy }}
                 </fieldset>
                 <div class="form-group">
                     <button class="btn btn-outline-info" type="submit">Request Password Reset</button>

backend/pong/templates/pages/password_reset_complete.html

@@ -6,7 +6,7 @@
     <div class="login-container">
         <div class="login-container2">
             <div class="alert alert-info">
-                AYour password has been set.
+                Your password has been set.
             </div>
             <a href="{% url 'login' %}">Sign In Here</a>
         </div>

backend/pong/templates/pages/password_reset_confirm.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% load static %}
-
+{% load crispy_forms_tags %}
 {% block body %}
     <link rel="stylesheet" href="{% static 'css/signup.css' %}">
     <div class="login-container">
@@ -9,7 +9,7 @@
                 {% csrf_token %}
                 <fieldset class="form-group">
                     <legend class="border-bottom mb-4">Reset Password</legend>
-                    {{ form.as_p }}
+                    {{ form|crispy }}
                 </fieldset>
                 <div class="form-group">
                     <button class="btn btn-outline-info" type="submit">Reset Password</button>

backend/pong/templates/pages/sign-up.html

@@ -9,11 +9,14 @@
             <h4 class="title" ><img src="{% static 'assets/icons/42logosmall.png' %}"> My Website</h4>
             <h3 class="title" id="nice" >Welcome to our platform</h3>
             <form id="signupForm">
-                {% csrf_token %}
                 <div class="input-group">
                     <label for="username">Username</label>
                     <input type="text" id="username" name="username" placeholder="Username" required>
                 </div>
+                <div class="input-group">
+                    <label for="email">Email</label>
+                    <input type="text" id="email" name="email" placeholder="Email" required>
+                </div>
                 <div class="input-group password-group">
                     <label id= "password2" for="password">New Password</label>
                     <input type="password" id="password" name="password" placeholder="Password"  required>
@@ -35,7 +38,9 @@ <h3 class="title" id="nice" >Welcome to our platform</h3>
                 <img class="divider" src="{% static 'assets/icons/divider.png' %}" width="100%">
                 <div id="login42">
                     <a href="{% url 'signin42' %}">
-                        <button type="submit2"><img src="{% static 'assets/icons/42logosmall.png' %}"> Sign in with 42</button>
+                        <button type="submit2">
+                            <img src="{% static 'assets/icons/42logosmall.png' %}"> Sign in with 42
+                        </button>
                     </a>
                 </div>
                 <p> Do you already have an account? <a class="sign-up" 
@@ -45,7 +50,7 @@ <h3 class="title" id="nice" >Welcome to our platform</h3>
                     hx-push-url="true"        
                     >Log in</a></p>
                 <br>
-                <h6>© 42 Porto 2024</h6>
+                <h6 style="margin-bottom:0px">© 42 Porto 2024</h6>
             </div>
         </div>
     </div>