Merge pull request #19 from HE-Arc/6-login-registration-logic-users-rights

6 login registration logic users rights

Author: theory-of-evrth

api/fantasyforge/settings.py

@@ -32,8 +32,18 @@
 ALLOWED_HOSTS = [
     "localhost",
     "api-fantasy-forge.k8s.ing.he-arc.ch",
+    "127.0.0.1"
     ]
 
+ALLOWED_METHODS = [
+    "*",
+    "GET",
+    "POST",
+    "PUT",
+    "DELETE",
+    "OPTIONS",
+    "HEAD",
+]
 
 # Application definition
 
@@ -46,6 +56,7 @@
     'django.contrib.staticfiles',
     'fantasyforgeapp',
     'rest_framework',
+    'rest_framework_simplejwt', # for authentification
     'corsheaders',
 ]
 MIDDLEWARE = [
@@ -90,7 +101,7 @@
         'USER': os.getenv('DB_USER'),
         'PASSWORD': os.getenv('DB_PASSWORD'),
         'HOST': os.getenv('DB_HOST'),
-        'PORT': os.getenv('DB_PORT', '5432'),  # Default to 5432
+        'PORT': os.getenv('DB_PORT'),  
     }
 }
 
@@ -142,3 +153,16 @@
 ]
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+REST_FRAMEWORK = {
+    'DEFAULT_AUTHENTICATION_CLASSES': (
+        'rest_framework_simplejwt.authentication.JWTAuthentication',
+    ),
+}
+
+from datetime import timedelta
+
+SIMPLE_JWT = {
+    'ACCESS_TOKEN_LIFETIME': timedelta(days=1),  # Tokens expire after 1 day
+    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),  # Refresh token expires after 1 week
+}

api/fantasyforge/urls.py

@@ -18,12 +18,14 @@
 from django.urls import path
 from django.urls import include
 from rest_framework.routers import DefaultRouter
+from fantasyforgeapp import views
 
 router = DefaultRouter()
-# Add your viewsets to the router here, for example:
-# router.register(r'myviewset', views.MyViewSet)
+
+router.register(r"auth", views.AuthViewSet, basename="auth")
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path("api/", include("fantasyforgeapp.urls")),
+    path("", include(router.urls)),
 ]

api/fantasyforgeapp/models.py

@@ -1,12 +1,8 @@
 from django.db import models
 
-# Create your models here.
+from django.contrib.auth.models import User
 
-# for intermediate eval enough:
-
-#User
-#Character (for now name enough)
-#Class(?)
 
 class Character(models.Model):
     name = models.CharField(max_length=100)
+    #owner = models.ForeignKey(User, on_delete=models.CASCADE)

api/fantasyforgeapp/serializers.py

@@ -1,5 +1,9 @@
 from rest_framework import serializers
 from .models import Character
+from django.contrib.auth.models import User
+
+from django.contrib.auth.password_validation import validate_password
+from django.core.exceptions import ValidationError
 
 class CharacterSerializer(serializers.ModelSerializer):
     class Meta:
@@ -15,4 +19,28 @@ def create(self, validated_data):
     def update(self, instance, validated_data):
         instance.name = validated_data.get("name", instance.name)
         instance.save()
-        return instance
+        return instance
+    
+
+class UserSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = User
+        fields = ['id', 'username', 'password']
+        extra_kwargs = {'password': {'write_only': True}}
+
+    def validate_password(self, value):
+        """
+        Validate password against Django's password validators.
+        """
+        try:
+            validate_password(value)  
+        except ValidationError as e:
+            raise serializers.ValidationError(e.messages)  
+        return value
+
+    def create(self, validated_data):
+        password = validated_data.pop('password') 
+        user = User(**validated_data) 
+        user.set_password(password)
+        user.save()
+        return user

api/fantasyforgeapp/views.py

@@ -1,8 +1,62 @@
 
 from .models import Character
-from .serializers import CharacterSerializer
-from rest_framework import viewsets
+from .serializers import CharacterSerializer, UserSerializer
+from rest_framework import viewsets, status
+from rest_framework.views import APIView
+from rest_framework.decorators import action
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
+from django.contrib.auth.models import User
+from rest_framework_simplejwt.tokens import RefreshToken
+from django.contrib.auth import authenticate
+from django.contrib.auth import authenticate, login, logout
 
+
+# list of characters
 class CharacterViewSet(viewsets.ModelViewSet):
+    #permission_classes = [IsAuthenticated]
+
     queryset = Character.objects.all()
-    serializer_class = CharacterSerializer
+    serializer_class = CharacterSerializer
+
+
+# credit : https://github.com/HE-Arc/Instagenda/
+
+class AuthViewSet(viewsets.ViewSet):
+
+    @action(detail=False, methods=['post'])
+    def login(self, request):
+        username = request.data.get('username')
+        password = request.data.get('password')
+
+        user = authenticate(request, username=username, password=password)
+        if user is not None:
+            login(request, user)
+            
+            return Response({"message": "User logged in"}, status=status.HTTP_200_OK)
+        return Response({"error": "Invalid credentials"}, status=status.HTTP_400_BAD_REQUEST)
+
+    @action(detail=False, methods=['post'])
+    def register(self, request):
+        serializer = UserSerializer(data=request.data)
+        if serializer.is_valid():
+            user = serializer.save()
+            login(request, user)
+            return Response({"message": "User registered"}, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @action(detail=False, methods=['post'])
+    def logout(self, request):
+        if request.user.is_authenticated:
+            logout(request)
+            return Response({"message": "User logged out"}, status=status.HTTP_200_OK)
+        return Response({"error": "User not logged in"}, status=status.HTTP_204_NO_CONTENT)
+
+    @action(detail=False, methods=['get'], permission_classes=[IsAuthenticated])
+    def profile(self, request):
+        if not request.user or request.user.is_anonymous:
+            return Response({"error": "User not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
+
+        serializer = UserSerializer(request.user)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+   

api/requirements.txt

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+// Create API instance
+const api = axios.create({
+    headers: {
+        "Content-Type": "application/json",
+    },
+});
+
+// Function to set Authorization token
+export function setAuthToken(token) {
+    if (token) {
+        api.defaults.headers["Authorization"] = `Bearer ${token}`;
+    } else {
+        delete api.defaults.headers["Authorization"];
+    }
+}
+
+export default api;

frontend/src/api.js

@@ -8,36 +8,31 @@
   font-weight: normal;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+.ff-input {
+  @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+.ff-input:focus {
+  @apply outline-none ring;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
+.ff-button {
+  @apply bg-red-500 text-white px-4 py-2 rounded; 
+}
 
-  font-weight: normal;
+.ff-button:dark {
+  @apply text-gray-900;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+.ff-button:hover {
+  @apply bg-red-800;
+  cursor: pointer;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: hsla(0, 100%, 50%, 0.874);
+    @apply rounded;
   }
 }
 
@@ -52,4 +47,4 @@ a,
     grid-template-columns: 1fr;
     padding: 0 2rem;
   }
-}
+}

frontend/src/assets/main.css

@@ -0,0 +1,47 @@
+import api, { setAuthToken } from "./api";
+
+// Register function
+export async function register(username, email, password, password2) {
+    try {
+        const response = await api.post("/auth/register/", {
+            username,
+            email,
+            password,
+            password2,
+        });
+
+        return response.data;
+    } catch (error) {
+        console.error("Registration failed:", error.response.data);
+        throw error.response.data;
+    }
+}
+
+// Login function
+export async function login(username, password) {
+    try {
+        const response = await api.post("/auth/login/", {
+            username,
+            password,
+        });
+
+        const tokens = response.data; // {access, refresh}
+        localStorage.setItem("access", tokens.access); // Save tokens
+        localStorage.setItem("refresh", tokens.refresh);
+
+        console.log(localStorage.getItem("access"));
+
+        setAuthToken(tokens.access); // Set token for future requests
+        return tokens;
+    } catch (error) {
+        console.error("Login failed:", error.response.data);
+        throw error.response.data;
+    }
+}
+
+// Logout function
+export function logout() {
+    localStorage.removeItem("access");
+    localStorage.removeItem("refresh");
+    setAuthToken(null); // Remove token from API
+}

frontend/src/auth.js

@@ -9,10 +9,8 @@ import { ref } from 'vue'
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <ul class="flex justify-center items-center space-x-8 h-full">
           <li>
-            <router-link :to="{ name: 'home' }">
                 <img src="@/assets/logo-app.svg" alt="App Logo" class="h-12 w-auto block dark:hidden" />
                 <img src="@/assets/logo-app-dark.svg" alt="App Logo Dark" class="h-12 w-auto hidden dark:block" />
-            </router-link>
           </li>
           <li>
             <router-link :to="{ name: 'characters' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
@@ -24,6 +22,12 @@ import { ref } from 'vue'
               About
             </router-link>
           </li>
+          <li>
+            <!-- TODO if logged in - log out -->
+            <router-link :to="{ name: 'login' }" class="text-gray-400 dark:text-white-400 inline-block py-2 px-4 text-sm font-medium">
+              Login
+            </router-link>
+          </li>
         </ul>
       </div>
     </div>

frontend/src/components/CreateCharacter.vue

@@ -0,0 +1,4 @@
+<template>
+   <svg class="text-pink-500 w-10 h-10"
+   xmlns="http://www.w3.org/2000/svg" width="24"  height="24"   viewBox="0 0 24 24"  stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z"/>  <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />  <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />  <line x1="16" y1="5" x2="19" y2="8" /></svg>
+</template>