TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/dashboard' of https://github.com/TurTaskProject/TurTaskWeb into feature/dashboard

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-25 13:10:12 +07:00
commit eec15cf297
65 changed files with 1566 additions and 1683 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
.github/workflows/django.yml vendored
View File

@ -2,13 +2,12 @@ name: Django CI
on:
push:
branches: [ "main" ]
branches: ["main"]
pull_request:
branches: [ "main" ]
branches: ["main"]
jobs:
build:
runs-on: ubuntu-latest
services:
@ -24,20 +23,21 @@ jobs:
options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
steps:
- uses: actions/checkout@v2
- name: Set up Python 3.11
uses: actions/setup-python@v2
with:
python-version: 3.11
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install -r requirements.txt
- name: Run migrations
run: |
cd backend
python manage.py migrate
- name: Run tests
run: |
cd backend
python manage.py test
- uses: actions/checkout@v2
- name: Set up Python 3.11
uses: actions/setup-python@v2
with:
python-version: 3.11
- name: Install dependencies
run: |
cd backend
python -m pip install --upgrade pip
pip install -r requirements.txt
- name: Run migrations
run: |
cd backend
python manage.py migrate
- name: Run tests
run: |
cd backend
python manage.py test

1
.gitignore vendored
View File

@ -57,7 +57,6 @@ cover/
# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal

5
backend/authentications/urls.py
View File

@ -1,12 +1,11 @@
from django.urls import path
from rest_framework_simplejwt import views as jwt_views
from authentications.views import ObtainTokenPairWithCustomView, GreetingView, GoogleLogin, GoogleRetrieveUserInfo
from authentications.views import ObtainTokenPairWithCustomView, GoogleRetrieveUserInfo, CheckAccessTokenAndRefreshToken
urlpatterns = [
path('token/obtain/', jwt_views.TokenObtainPairView.as_view(), name='token_create'),
path('token/refresh/', jwt_views.TokenRefreshView.as_view(), name='token_refresh'),
path('token/custom_obtain/', ObtainTokenPairWithCustomView.as_view(), name='token_create_custom'),
path('hello/', GreetingView.as_view(), name='hello_world'),
path('dj-rest-auth/google/', GoogleLogin.as_view(), name="google_login"),
path('auth/google/', GoogleRetrieveUserInfo.as_view()),
path('auth/status/', CheckAccessTokenAndRefreshToken.as_view(), name='check_token_status')
]

68
backend/authentications/views.py
View File

@ -1,6 +1,3 @@
from django.shortcuts import render
# Create your views here.
"""This module defines API views for authentication, user creation, and a simple hello message."""
import json
@ -10,14 +7,11 @@ from django.conf import settings
from django.contrib.auth.hashers import make_password
from rest_framework import status
from rest_framework.permissions import IsAuthenticated, AllowAny
from rest_framework.permissions import AllowAny
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework_simplejwt.tokens import RefreshToken
from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from dj_rest_auth.registration.views import SocialLoginView
from rest_framework_simplejwt.authentication import JWTAuthentication
from google_auth_oauthlib.flow import InstalledAppFlow
@ -27,6 +21,31 @@ from users.managers import CustomAccountManager
from users.models import CustomUser
class CheckAccessTokenAndRefreshToken(APIView):
permission_classes = (AllowAny,)
JWT_authenticator = JWTAuthentication()
def post(self, request, *args, **kwargs):
access_token = request.data.get('access_token')
refresh_token = request.data.get('refresh_token')
# Check if the access token is valid
if access_token:
response = self.JWT_authenticator.authenticate(request)
if response is not None:
return Response({'status': 'true'}, status=status.HTTP_200_OK)
# Check if the refresh token is valid
if refresh_token:
try:
refresh = RefreshToken(refresh_token)
access_token = str(refresh.access_token)
return Response({'access_token': access_token}, status=status.HTTP_200_OK)
except Exception as e:
return Response({'status': 'false'}, status=status.HTTP_401_UNAUTHORIZED)
return Response({'status': 'false'}, status=status.HTTP_400_BAD_REQUEST)
class ObtainTokenPairWithCustomView(APIView):
"""
Custom Token Obtain Pair View.
@ -45,39 +64,6 @@ class ObtainTokenPairWithCustomView(APIView):
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
class GreetingView(APIView):
"""
Hello World View.
Returns a greeting and user information for authenticated users.
"""
permission_classes = (IsAuthenticated,)
def get(self, request):
"""
Retrieve a greeting message and user information.
"""
user = request.user
user_info = {
"username": user.username,
}
response_data = {
"message": "Hello, world!",
"user_info": user_info,
}
return Response(response_data, status=status.HTTP_200_OK)
class GoogleLogin(SocialLoginView):
"""
Google Login View.
Handles Google OAuth2 authentication.
"""
# permission_classes = (AllowAny,)
adapter_class = GoogleOAuth2Adapter
# client_class = OAuth2Client
# callback_url = 'http://localhost:8000/accounts/google/login/callback/'
class GoogleRetrieveUserInfo(APIView):
"""
Retrieve user information from Google and create a user if not exists.

269
backend/core/local_settings.py Normal file
View File

@ -0,0 +1,269 @@
"""
Django settings for core project.
Generated by 'django-admin startproject' using Django 4.2.6.
For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""
from datetime import timedelta
import os
from pathlib import Path
from decouple import config, Csv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY', default='j5&66&8@b-!3tbq!=w6-dypl($_0zzoi*ilxd1*&$_6s-59il5')
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = config('DEBUG', default=False, cast=bool)
ALLOWED_HOSTS = config('ALLOWED_HOSTS', default='*', cast=Csv())
# Application definition
SITE_ID = 4
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'tasks',
'users',
'authentications',
'dashboard',
'boards',
'corsheaders',
'drf_spectacular',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
'rest_framework',
'dj_rest_auth',
'dj_rest_auth.registration',
'rest_framework.authtoken',
]
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAuthenticated',
],
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.BasicAuthentication',
'rest_framework.authentication.TokenAuthentication',
'rest_framework_simplejwt.authentication.JWTAuthentication',
'dj_rest_auth.jwt_auth.JWTCookieAuthentication',
],
'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
}
SPECTACULAR_SETTINGS = {
'TITLE': 'TurTask API',
'DESCRIPTION': 'API documentation for TurTask',
'VERSION': '1.0.0',
'SERVE_INCLUDE_SCHEMA': False,
}
REST_USE_JWT = True
SIMPLE_JWT = {
'ACCESS_TOKEN_LIFETIME': timedelta(days=3),
'REFRESH_TOKEN_LIFETIME': timedelta(days=30),
}
GOOGLE_CLIENT_ID = config('GOOGLE_CLIENT_ID', default='fake-client-id')
GOOGLE_CLIENT_SECRET = config('GOOGLE_CLIENT_SECRET', default='fake-client-secret')
SOCIALACCOUNT_PROVIDERS = {
'google': {
'APP': {
'client_id': GOOGLE_CLIENT_ID,
'secret': GOOGLE_CLIENT_SECRET,
'key': ''
},
"SCOPE": [
"profile",
"email",
],
"AUTH_PARAMS": {
"access_type": "online",
}
}
}
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOWED_ORIGINS = [
"http://localhost:8000",
"http://127.0.0.1:8000",
"http://localhost:5173",
]
CSRF_TRUSTED_ORIGINS = ["http://localhost:5173"]
CORS_ORIGIN_WHITELIST = ["*"]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
"allauth.account.middleware.AccountMiddleware",
]
ROOT_URLCONF = 'core.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates')
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'core.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': config('DB_NAME', default='github_actions'),
'USER': config('DB_USER', default='postgres'),
'PASSWORD': config('DB_PASSWORD', default='postgres'),
'HOST': config('DB_HOST', default='127.0.0.1'),
'PORT': config('DB_PORT', default='5432'),
}
}
# Cache
CACHES_LOCATION = f"{config('DB_NAME', default='db_test')}_cache"
CACHES = {
"default": {
"BACKEND": "django.core.cache.backends.db.DatabaseCache",
"LOCATION": CACHES_LOCATION,
}
}
# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATIC_URL = 'static/'
# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = [
'https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
]
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
AUTH_USER_MODEL = "users.CustomUser"
ACCOUNT_EMAIL_REQUIRED = True
# Storages
AWS_ACCESS_KEY_ID = config('AMAZON_S3_ACCESS_KEY', default='fake-access-key')
AWS_SECRET_ACCESS_KEY = config('AMAZON_S3_SECRET_ACCESS_KEY', default='fake-secret-access-key')
AWS_STORAGE_BUCKET_NAME = config('BUCKET_NAME', default='fake-bucket-name')
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
MEDIA_URL = '/mediafiles/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')
STORAGES = {
"default": {
"BACKEND": "storages.backends.s3.S3Storage",
"OPTIONS": {
},
},
"staticfiles": {
"BACKEND": "django.contrib.staticfiles.storage.StaticFilesStorage",
},
}

267
backend/core/production_settings.py Normal file
View File

@ -0,0 +1,267 @@
"""
Django settings for core project.
Generated by 'django-admin startproject' using Django 4.2.6.
For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""
from datetime import timedelta
import os
from pathlib import Path
from decouple import config, Csv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY', default='j5&66&8@b-!3tbq!=w6-dypl($_0zzoi*ilxd1*&$_6s-59il5')
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = config('DEBUG', default=False, cast=bool)
ALLOWED_HOSTS = config('ALLOWED_HOSTS', default='*', cast=Csv())
# Application definition
SITE_ID = 4
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'tasks',
'users',
'authentications',
'dashboard',
'boards',
'corsheaders',
'drf_spectacular',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
'rest_framework',
'dj_rest_auth',
'dj_rest_auth.registration',
'rest_framework.authtoken',
]
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAuthenticated',
],
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.BasicAuthentication',
'rest_framework.authentication.TokenAuthentication',
'rest_framework_simplejwt.authentication.JWTAuthentication',
'dj_rest_auth.jwt_auth.JWTCookieAuthentication',
],
'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
}
SPECTACULAR_SETTINGS = {
'TITLE': 'TurTask API',
'DESCRIPTION': 'API documentation for TurTask',
'VERSION': '1.0.0',
'SERVE_INCLUDE_SCHEMA': False,
}
REST_USE_JWT = True
SIMPLE_JWT = {
'ACCESS_TOKEN_LIFETIME': timedelta(days=3),
'REFRESH_TOKEN_LIFETIME': timedelta(days=30),
}
GOOGLE_CLIENT_ID = config('GOOGLE_CLIENT_ID', default='fake-client-id')
GOOGLE_CLIENT_SECRET = config('GOOGLE_CLIENT_SECRET', default='fake-client-secret')
SOCIALACCOUNT_PROVIDERS = {
'google': {
'APP': {
'client_id': GOOGLE_CLIENT_ID,
'secret': GOOGLE_CLIENT_SECRET,
'key': ''
},
"SCOPE": [
"profile",
"email",
],
"AUTH_PARAMS": {
"access_type": "online",
}
}
}
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOWED_ORIGINS = [
"https://turtask.vercel.app",
]
CSRF_TRUSTED_ORIGINS = ["https://turtask.vercel.app"]
CORS_ORIGIN_WHITELIST = ["*"]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
"allauth.account.middleware.AccountMiddleware",
]
ROOT_URLCONF = 'core.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates')
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'core.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': config('PGDATABASE', default='github_actions'),
'USER': config('PGUSER', default='postgres'),
'PASSWORD': config('PGPASSWORD', default='postgres'),
'HOST': config('PGHOST', default='127.0.0.1'),
'PORT': config('PGPORT', default='5432'),
}
}
# Cache
CACHES_LOCATION = "accesstokencache"
CACHES = {
"default": {
"BACKEND": "django.core.cache.backends.db.DatabaseCache",
"LOCATION": CACHES_LOCATION,
}
}
# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATIC_URL = 'static/'
# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = [
'https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
]
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
AUTH_USER_MODEL = "users.CustomUser"
ACCOUNT_EMAIL_REQUIRED = True
# Storages
AWS_ACCESS_KEY_ID = config('AMAZON_S3_ACCESS_KEY', default='fake-access-key')
AWS_SECRET_ACCESS_KEY = config('AMAZON_S3_SECRET_ACCESS_KEY', default='fake-secret-access-key')
AWS_STORAGE_BUCKET_NAME = config('BUCKET_NAME', default='fake-bucket-name')
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
MEDIA_URL = '/mediafiles/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')
STORAGES = {
"default": {
"BACKEND": "storages.backends.s3.S3Storage",
"OPTIONS": {
},
},
"staticfiles": {
"BACKEND": "django.contrib.staticfiles.storage.StaticFilesStorage",
},
}

271
backend/core/settings.py
View File

@ -1,269 +1,6 @@
"""
Django settings for core project.
Generated by 'django-admin startproject' using Django 4.2.6.
For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""
from datetime import timedelta
import os
from pathlib import Path
from decouple import config, Csv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY', default='j5&66&8@b-!3tbq!=w6-dypl($_0zzoi*ilxd1*&$_6s-59il5')
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = config('DEBUG', default=False, cast=bool)
ALLOWED_HOSTS = config('ALLOWED_HOSTS', default='*', cast=Csv())
# Application definition
SITE_ID = 4
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'tasks',
'users',
'authentications',
'dashboard',
'boards',
'corsheaders',
'drf_spectacular',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
'rest_framework',
'dj_rest_auth',
'dj_rest_auth.registration',
'rest_framework.authtoken',
]
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAuthenticated',
],
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.BasicAuthentication',
'rest_framework.authentication.TokenAuthentication',
'rest_framework_simplejwt.authentication.JWTAuthentication',
'dj_rest_auth.jwt_auth.JWTCookieAuthentication',
],
'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
}
SPECTACULAR_SETTINGS = {
'TITLE': 'TurTask API',
'DESCRIPTION': 'API documentation for TurTask',
'VERSION': '1.0.0',
'SERVE_INCLUDE_SCHEMA': False,
}
REST_USE_JWT = True
SIMPLE_JWT = {
'ACCESS_TOKEN_LIFETIME': timedelta(days=3),
'REFRESH_TOKEN_LIFETIME': timedelta(days=30),
}
GOOGLE_CLIENT_ID = config('GOOGLE_CLIENT_ID', default='fake-client-id')
GOOGLE_CLIENT_SECRET = config('GOOGLE_CLIENT_SECRET', default='fake-client-secret')
SOCIALACCOUNT_PROVIDERS = {
'google': {
'APP': {
'client_id': GOOGLE_CLIENT_ID,
'secret': GOOGLE_CLIENT_SECRET,
'key': ''
},
"SCOPE": [
"profile",
"email",
],
"AUTH_PARAMS": {
"access_type": "online",
}
}
}
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOWED_ORIGINS = [
"http://localhost:8000",
"http://127.0.0.1:8000",
"http://localhost:5173",
]
CSRF_TRUSTED_ORIGINS = ["http://localhost:5173"]
CORS_ORIGIN_WHITELIST = ["*"]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
"allauth.account.middleware.AccountMiddleware",
]
ROOT_URLCONF = 'core.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates')
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'core.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': config('DB_NAME', default='github_actions'),
'USER': config('DB_USER', default='postgres'),
'PASSWORD': config('DB_PASSWORD', default='postgres'),
'HOST': config('DB_HOST', default='127.0.0.1'),
'PORT': config('DB_PORT', default='5432'),
}
}
# Cache
CACHES_LOCATION = f"{config('DB_NAME', default='db_test')}_cache"
CACHES = {
"default": {
"BACKEND": "django.core.cache.backends.db.DatabaseCache",
"LOCATION": CACHES_LOCATION,
}
}
# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATIC_URL = 'static/'
# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = [
'https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
]
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
AUTH_USER_MODEL = "users.CustomUser"
ACCOUNT_EMAIL_REQUIRED = True
# Storages
AWS_ACCESS_KEY_ID = config('AMAZON_S3_ACCESS_KEY', default='fake-access-key')
AWS_SECRET_ACCESS_KEY = config('AMAZON_S3_SECRET_ACCESS_KEY', default='fake-secret-access-key')
AWS_STORAGE_BUCKET_NAME = config('BUCKET_NAME', default='fake-bucket-name')
AWS_DEFAULT_ACL = 'public-read'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
MEDIA_URL = '/mediafiles/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')
STORAGES = {
"default": {
"BACKEND": "storages.backends.s3.S3Storage",
"OPTIONS": {
},
},
"staticfiles": {
"BACKEND": "django.contrib.staticfiles.storage.StaticFilesStorage",
},
}
if os.environ.get("DJANGO_ENV") == "PRODUCTION":
from .production_settings import *
else:
from .local_settings import *

2
backend/core/wsgi.py
View File

@ -11,6 +11,6 @@ import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings")
application = get_wsgi_application()

11
backend/railway.json Normal file
View File

@ -0,0 +1,11 @@
{
"$schema": "https://railway.app/railway.schema.json",
"build": {
"builder": "NIXPACKS"
},
"deploy": {
"startCommand": "python manage.py migrate && python manage.py createcachetable accesstokencache && gunicorn --timeout 500 core.wsgi",
"restartPolicyType": "NEVER",
"restartPolicyMaxRetries": 10
}
}

2
requirements.txt → backend/requirements.txt
View File

@ -16,3 +16,5 @@ django-storages[s3]>=1.14
Pillow>=10.1
drf-spectacular>=0.26
python-dateutil>=2.8
gunicorn==21.2.0
packaging==23.1

2
backend/users/migrations/0005_alter_userstats_endurance_and_more.py
View File

@ -25,7 +25,7 @@ class Migration(migrations.Migration):
migrations.AlterField(
model_name='userstats',
name='luck',
field=models.IntegerField(default=users.models.random_luck, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(50)]),
field=models.IntegerField(default=1, validators=[django.core.validators.MinValueValidator(1), django.core.validators.MaxValueValidator(50)]),
),
migrations.AlterField(
model_name='userstats',

4
backend/users/models.py
View File

@ -31,14 +31,12 @@ class CustomUser(AbstractBaseUser, PermissionsMixin):
# Fields for authentication
USERNAME_FIELD = 'email'
REQUIRED_FIELDS = ['username', 'first_name']
REQUIRED_FIELDS = []
def __str__(self):
# String representation of the user
return self.username
def random_luck():
return random.randint(1, 50)
class UserStats(models.Model):
"""

6
backend/users/views.py
View File

@ -7,6 +7,8 @@ from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.parsers import MultiPartParser
from rest_framework_simplejwt.tokens import RefreshToken
from users.serializers import CustomUserSerializer, UpdateProfileSerializer
from users.models import CustomUser
@ -25,7 +27,9 @@ class CustomUserCreate(APIView):
if serializer.is_valid():
user = serializer.save()
if user:
return Response(serializer.data, status=status.HTTP_201_CREATED)
refresh = RefreshToken.for_user(user)
return Response(data={'access_token': str(refresh.access_token), 'refresh_token': str(refresh),},
status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

26
frontend/.eslintrc.cjs
View File

@ -1,20 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
env: { browser: true, es2020: true, node: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: "18.2" } },
plugins: ["react-refresh"],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
"react/prop-types": 0,
},
}
};

8
frontend/jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"]
}
}
}

1
frontend/package.json
View File

@ -38,6 +38,7 @@
"framer-motion": "^10.16.4",
"gapi-script": "^1.2.0",
"jwt-decode": "^4.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-bootstrap": "^2.9.1",

3
frontend/pnpm-lock.yaml
View File

@ -89,6 +89,9 @@ dependencies:
jwt-decode:
specifier: ^4.0.0
version: 4.0.0
prop-types:
specifier: ^15.8.1
version: 15.8.1
react:
specifier: ^18.2.0
version: 18.2.0

100
frontend/src/App.jsx
View File

@ -1,36 +1,91 @@
import "./App.css";
import { Route, Routes, useLocation } from "react-router-dom";
import TestAuth from "./components/testAuth";
import LoginPage from "./components/authentication/LoginPage";
import SignUpPage from "./components/authentication/SignUpPage";
import NavBar from "./components/navigations/Navbar";
import Calendar from "./components/calendar/calendar";
import KanbanPage from "./components/kanbanBoard/kanbanPage";
import IconSideNav from "./components/navigations/IconSideNav";
import Eisenhower from "./components/EisenhowerMatrix/Eisenhower";
import PrivateRoute from "./PrivateRoute";
import ProfileUpdatePage from "./components/profilePage";
import Dashboard from "./components/dashboard/dashboard";
import axios from "axios";
import { useEffect } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import { LoginPage } from "./components/authentication/LoginPage";
import { SignUp } from "./components/authentication/SignUpPage";
import { NavBar } from "./components/navigations/Navbar";
import { Calendar } from "./components/calendar/calendar";
import { KanbanPage } from "./components/kanbanBoard/kanbanPage";
import { SideNav } from "./components/navigations/IconSideNav";
import { Eisenhower } from "./components/EisenhowerMatrix/Eisenhower";
import { PrivateRoute } from "./PrivateRoute";
import { ProfileUpdatePage } from "./components/profile/profilePage";
import { Dashboard } from "./components/dashboard/dashboard";
import { LandingPage } from "./components/landingPage/LandingPage";
import { PublicRoute } from "./PublicRoute";
import { useAuth } from "./hooks/AuthHooks";
const baseURL = import.meta.env.VITE_BASE_URL;
const App = () => {
const location = useLocation();
const prevention = ["/login", "/signup"];
const isLoginPageOrSignUpPage = prevention.some(_ => location.pathname.includes(_));
const { isAuthenticated, setIsAuthenticated } = useAuth();
useEffect(() => {
const checkLoginStatus = async () => {
const data = {
access_token: localStorage.getItem("access_token"),
refresh_token: localStorage.getItem("refresh_token"),
};
await axios
.post(`${baseURL}auth/status/`, data, {
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
},
})
.then((response) => {
if (response.status === 200) {
if (response.data.access_token) {
localStorage.setItem("access_token", response.data.access_token);
setIsAuthenticated(true);
} else {
setIsAuthenticated(true);
}
} else {
setIsAuthenticated(false);
}
})
.catch((error) => {});
};
checkLoginStatus();
}, [setIsAuthenticated]);
return <div>{isAuthenticated ? <AuthenticatedComponents /> : <NonAuthenticatedComponents />}</div>;
};
const NonAuthenticatedComponents = () => {
return (
<div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
{!isLoginPageOrSignUpPage && <IconSideNav />}
<div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px] overflow-hidden"}>
<div>
<Routes>
<Route exact path="/l" element={<PublicRoute />}>
<Route exact path="/l" element={<LandingPage />} />
</Route>
<Route exact path="/login" element={<PublicRoute />}>
<Route exact path="/login" element={<LoginPage />} />
</Route>
<Route exact path="/signup" element={<PublicRoute />}>
<Route exact path="/signup" element={<SignUp />} />
</Route>
<Route path="*" element={<Navigate to="/l" />} />
</Routes>
</div>
);
};
const AuthenticatedComponents = () => {
return (
<div className="display: flex">
<SideNav />
<div className="flex-1 ml-[76px] overflow-hidden">
<NavBar />
<div className={isLoginPageOrSignUpPage ? "" : "overflow-x-auto"}>
<div className="overflow-x-auto">
<Routes>
<Route path="/" element={<Dashboard />} />
<Route exact path="/tasks" element={<PrivateRoute />}>
<Route exact path="/tasks" element={<KanbanPage />} />
</Route>
<Route path="/testAuth" element={<TestAuth />} />
<Route exact path="/profile" element={<PrivateRoute />}>
<Route exact path="/profile" element={<ProfileUpdatePage />} />
</Route>
@ -40,8 +95,7 @@ const App = () => {
<Route exact path="/priority" element={<PrivateRoute />}>
<Route exact path="/priority" element={<Eisenhower />} />
</Route>
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignUpPage />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</div>
</div>

12
frontend/src/PrivateRoute.jsx
View File

@ -1,11 +1,7 @@
import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "./hooks/authentication/IsAuthenticated";
import { useAuth } from "src/hooks/AuthHooks";
const PrivateRoute = () => {
const { isAuthenticated, setIsAuthenticated } = useAuth();
const auth = isAuthenticated;
return auth ? <Outlet /> : <Navigate to="/login" />;
export const PrivateRoute = () => {
const { isAuthenticated } = useAuth();
return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
};
export default PrivateRoute;

7
frontend/src/PublicRoute.jsx Normal file
View File

@ -0,0 +1,7 @@
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "src/hooks/AuthHooks";
export const PublicRoute = () => {
const { isAuthenticated } = useAuth();
return isAuthenticated ? <Navigate to="/d" /> : <Outlet />;
};

59
frontend/src/api/AuthenticationApi.jsx
View File

@ -1,72 +1,43 @@
import axios from "axios";
import axiosInstance from "./configs/AxiosConfig";
import { axiosInstance } from "./AxiosConfig";
const baseURL = import.meta.env.VITE_BASE_URL;
// Function for user login
const apiUserLogin = data => {
export const apiUserLogin = (data) => {
return axiosInstance
.post("token/obtain/", data)
.then(response => {
console.log(response.statusText);
return response;
})
.catch(error => {
console.log("apiUserLogin error: ", error);
return error;
.then((response) => response)
.catch((error) => {
throw error;
});
};
// Function for user logout
const apiUserLogout = () => {
export const apiUserLogout = () => {
axiosInstance.defaults.headers["Authorization"] = ""; // Clear authorization header
localStorage.removeItem("access_token"); // Remove access token
localStorage.removeItem("refresh_token"); // Remove refresh token
};
// Function for Google login
const googleLogin = async token => {
export const googleLogin = async (token) => {
axios.defaults.withCredentials = true;
let res = await axios.post("http://localhost:8000/api/auth/google/", {
let res = await axios.post(`${baseURL}auth/google/`, {
code: token,
});
// console.log('service google login res: ', res);
return await res;
};
// Function to get 'hello' data
const getGreeting = () => {
return axiosInstance
.get("hello")
.then(response => {
return response;
})
.catch(error => {
return error;
});
};
const config = {
headers: {
"Content-Type": "application/json",
},
};
// Function to register
const createUser = async formData => {
export const createUser = async (formData) => {
try {
axios.defaults.withCredentials = true;
const resposne = axios.post("http://localhost:8000/api/user/create/", formData);
// const response = await axiosInstance.post('/user/create/', formData);
const response = await axios.post(`${baseURL}user/create/`, formData);
return response.data;
} catch (error) {
throw error;
} catch (e) {
console.error("Error in createUser function:", e);
throw e;
}
};
// Export the functions and Axios instance
export default {
apiUserLogin,
apiUserLogout,
getGreeting: getGreeting,
googleLogin,
createUser,
};

53
frontend/src/api/AxiosConfig.jsx Normal file
View File

@ -0,0 +1,53 @@
import axios from "axios";
import { redirect } from "react-router-dom";
const baseURL = import.meta.env.VITE_BASE_URL;
export const axiosInstance = axios.create({
baseURL: baseURL,
timeout: 5000,
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
"Content-Type": "application/json",
accept: "application/json",
},
});
axiosInstance.interceptors.request.use((config) => {
const access_token = localStorage.getItem("access_token");
if (access_token) {
config.headers.Authorization = `Bearer ${access_token}`;
}
return config;
});
// handling token refresh on 401 Unauthorized errors
axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
const originalRequest = error.config;
const refresh_token = localStorage.getItem("refresh_token");
// Check if the error is due to 401 and a refresh token is available
if (error.response && error.response.status === 401) {
if (refresh_token) {
return axiosInstance
.post("/token/refresh/", { refresh: refresh_token })
.then((response) => {
localStorage.setItem("access_token", response.data.access);
axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
return axiosInstance(originalRequest);
})
.catch((err) => {
console.log("Interceptors error: ", err);
});
} else {
redirect("/login");
}
}
return Promise.reject(error);
}
);

44
frontend/src/api/TaskApi.jsx
View File

@ -1,21 +1,21 @@
import axiosInstance from "./configs/AxiosConfig";
import { axiosInstance } from "src/api/AxiosConfig";
const baseURL = "";
const baseURL = import.meta.env.VITE_BASE_URL;
export const createTask = (endpoint, data) => {
return axiosInstance
.post(`${baseURL}${endpoint}/`, data)
.then(response => response.data)
.catch(error => {
.then((response) => response.data)
.catch((error) => {
throw error;
});
};
export const readTasks = endpoint => {
export const readTasks = (endpoint) => {
return axiosInstance
.get(`${baseURL}${endpoint}/`)
.then(response => response.data)
.catch(error => {
.then((response) => response.data)
.catch((error) => {
throw error;
});
};
@ -23,8 +23,8 @@ export const readTasks = endpoint => {
export const readTaskByID = (endpoint, id) => {
return axiosInstance
.get(`${baseURL}${endpoint}/${id}/`)
.then(response => response.data)
.catch(error => {
.then((response) => response.data)
.catch((error) => {
throw error;
});
};
@ -32,8 +32,8 @@ export const readTaskByID = (endpoint, id) => {
export const updateTask = (endpoint, id, data) => {
return axiosInstance
.put(`${baseURL}${endpoint}/${id}/`, data)
.then(response => response.data)
.catch(error => {
.then((response) => response.data)
.catch((error) => {
throw error;
});
};
@ -41,16 +41,16 @@ export const updateTask = (endpoint, id, data) => {
export const deleteTask = (endpoint, id) => {
return axiosInstance
.delete(`${baseURL}${endpoint}/${id}/`)
.then(response => response.data)
.catch(error => {
.then((response) => response.data)
.catch((error) => {
throw error;
});
};
// Create
export const createTodoTask = data => createTask("todo", data);
export const createRecurrenceTask = data => createTask("daily", data);
export const createHabitTask = data => createTask("habit", data);
export const createTodoTask = (data) => createTask("todo", data);
export const createRecurrenceTask = (data) => createTask("daily", data);
export const createHabitTask = (data) => createTask("habit", data);
// Read
export const readTodoTasks = () => readTasks("todo");
@ -58,9 +58,9 @@ export const readRecurrenceTasks = () => readTasks("daily");
export const readHabitTasks = () => readTasks("habit");
// Read by ID
export const readTodoTaskByID = id => readTaskByID("todo", id);
export const readRecurrenceTaskByID = id => readTaskByID("daily", id);
export const readHabitTaskByID = id => readTaskByID("habit", id);
export const readTodoTaskByID = (id) => readTaskByID("todo", id);
export const readRecurrenceTaskByID = (id) => readTaskByID("daily", id);
export const readHabitTaskByID = (id) => readTaskByID("habit", id);
// Update
export const updateTodoTask = (id, data) => updateTask("todo", id, data);
@ -68,6 +68,6 @@ export const updateRecurrenceTask = (id, data) => updateTask("daily", id, data);
export const updateHabitTask = (id, data) => updateTask("habit", id, data);
// Delete
export const deleteTodoTask = id => deleteTask("todo", id);
export const deleteRecurrenceTask = id => deleteTask("daily", id);
export const deleteHabitTask = id => deleteTask("habit", id);
export const deleteTodoTask = (id) => deleteTask("todo", id);
export const deleteRecurrenceTask = (id) => deleteTask("daily", id);
export const deleteHabitTask = (id) => deleteTask("habit", id);

6
frontend/src/api/UserProfileApi.jsx
View File

@ -1,8 +1,10 @@
import axios from "axios";
const ApiUpdateUserProfile = async formData => {
const baseURL = import.meta.env.VITE_BASE_URL;
const ApiUpdateUserProfile = async (formData) => {
try {
const response = await axios.post("http://127.0.1:8000/api/user/update/", formData, {
const response = await axios.post(`${baseURL}user/update/`, formData, {
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
"Content-Type": "multipart/form-data",

45
frontend/src/api/configs/AxiosConfig.jsx
View File

@ -1,45 +0,0 @@
import axios from "axios";
import { redirect } from "react-router-dom";
const axiosInstance = axios.create({
baseURL: "http://127.0.0.1:8000/api/",
timeout: 5000,
headers: {
Authorization: "Bearer " + localStorage.getItem("access_token"),
"Content-Type": "application/json",
accept: "application/json",
},
});
// handling token refresh on 401 Unauthorized errors
axiosInstance.interceptors.response.use(
response => response,
error => {
const originalRequest = error.config;
const refresh_token = localStorage.getItem("refresh_token");
// Check if the error is due to 401 and a refresh token is available
if (
error.response.status === 401 &&
error.response.statusText === "Unauthorized" &&
refresh_token !== "undefined"
) {
return axiosInstance
.post("/token/refresh/", { refresh: refresh_token })
.then(response => {
localStorage.setItem("access_token", response.data.access);
axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
return axiosInstance(originalRequest);
})
.catch(err => {
console.log("Interceptors error: ", err);
});
}
return Promise.reject(error);
}
);
export default axiosInstance;

BIN
frontend/src/assets/calendar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
frontend/src/assets/home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 KiB

BIN
frontend/src/assets/pie-chart.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
frontend/src/assets/planning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
frontend/src/assets/plus.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.6 KiB

1
frontend/src/assets/react.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

24
frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
View File

@ -1,14 +1,14 @@
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
import { readTodoTasks } from "../../api/TaskApi";
import axiosInstance from "../../api/configs/AxiosConfig";
import { axiosInstance } from "src/api/AxiosConfig";
function EachBlog({ name, colorCode, contentList, icon }) {
const [tasks, setTasks] = useState(contentList);
const handleCheckboxChange = async index => {
const handleCheckboxChange = async (index) => {
try {
setTasks(contentList)
setTasks(contentList);
const updatedTasks = [...tasks];
const taskId = updatedTasks[index].id;
@ -55,17 +55,17 @@ function EachBlog({ name, colorCode, contentList, icon }) {
);
}
function Eisenhower() {
export function Eisenhower() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
readTodoTasks()
.then(data => {
.then((data) => {
console.log(data);
const contentList_ui = data.filter(task => task.priority === 1);
const contentList_uni = data.filter(task => task.priority === 2);
const contentList_nui = data.filter(task => task.priority === 3);
const contentList_nuni = data.filter(task => task.priority === 4);
const contentList_ui = data.filter((task) => task.priority === 1);
const contentList_uni = data.filter((task) => task.priority === 2);
const contentList_nui = data.filter((task) => task.priority === 3);
const contentList_nuni = data.filter((task) => task.priority === 4);
setTasks({
contentList_ui,
@ -74,7 +74,7 @@ function Eisenhower() {
contentList_nuni,
});
})
.catch(error => console.error("Error fetching tasks:", error));
.catch((error) => console.error("Error fetching tasks:", error));
}, []);
return (
@ -108,5 +108,3 @@ function Eisenhower() {
</div>
);
}
export default Eisenhower;

84
frontend/src/components/FlaotingParticles.jsx Normal file
View File

@ -0,0 +1,84 @@
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
export function FloatingParticles() {
const particlesInit = useCallback(async (engine) => {
await loadFull(engine);
}, []);
return (
<div style={{ width: "0%", height: "100vh" }}>
<Particles
id="particles"
init={particlesInit}
className="-z-10"
options={{
fpsLimit: 240,
smooth: true,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#4f46e5",
},
links: {
color: "#818cf8",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 2,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 40,
},
opacity: {
value: 0.5,
},
shape: {
type: "square",
},
size: {
value: { min: 4, max: 5 },
},
},
detectRetina: true,
}}
/>
</div>
);
}

270
frontend/src/components/authentication/LoginPage.jsx
View File

@ -1,27 +1,19 @@
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useNavigate, redirect } from "react-router-dom";
import { useGoogleLogin } from "@react-oauth/google";
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import refreshAccessToken from "./refreshAcesstoken";
import axiosapi from "../../api/AuthenticationApi";
import { useAuth } from "../../hooks/authentication/IsAuthenticated";
import { FcGoogle } from "react-icons/fc";
import { useAuth } from "src/hooks/AuthHooks";
import { FloatingParticles } from "../FlaotingParticles";
import { NavPreLogin } from "../navigations/NavPreLogin";
import { apiUserLogin, googleLogin } from "src/api/AuthenticationApi";
function LoginPage() {
export function LoginPage() {
const { setIsAuthenticated } = useAuth();
const Navigate = useNavigate();
const { isAuthenticated, setIsAuthenticated } = useAuth();
useEffect(() => {
if (!refreshAccessToken()) {
Navigate("/");
}
}, []);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState(null);
const handleEmailChange = (event) => {
setEmail(event.target.value);
@ -30,28 +22,23 @@ function LoginPage() {
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
// Send a POST request to the authentication API
axiosapi
.apiUserLogin({
email: email,
password: password,
})
apiUserLogin({
email: email,
password: password,
})
.then((res) => {
// On successful login, store tokens and set the authorization header
localStorage.setItem("access_token", res.data.access);
localStorage.setItem("refresh_token", res.data.refresh);
axiosapi.axiosInstance.defaults.headers["Authorization"] =
"Bearer " + res.data.access;
setIsAuthenticated(true);
Navigate("/");
redirect("/");
})
.catch((err) => {
console.log("Login failed");
console.log(err);
setIsAuthenticated(false);
setError("Incorrect username or password");
});
};
@ -60,7 +47,7 @@ function LoginPage() {
redirect_uri: "postmessage",
onSuccess: async (response) => {
try {
const loginResponse = await axiosapi.googleLogin(response.code);
const loginResponse = await googleLogin(response.code);
if (loginResponse && loginResponse.data) {
const { access_token, refresh_token } = loginResponse.data;
@ -71,157 +58,96 @@ function LoginPage() {
}
} catch (error) {
console.error("Error with the POST request:", error);
setIsAuthenticated(false);
}
},
onError: (errorResponse) => console.log(errorResponse),
});
{
/* Particles Loader*/
}
const particlesInit = useCallback(async (engine) => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
console.log(container);
}, []);
return (
<div
data-theme="night"
className="h-screen flex items-center justify-center"
>
{/* Particles Container */}
<div style={{ width: "0%", height: "100vh" }}>
<Particles
id="particles"
init={particlesInit}
loaded={particlesLoaded}
className="-z-10"
options={{
fpsLimit: 240,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#008000",
},
links: {
color: "#00ff00",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 4,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 50,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 4, max: 5 },
},
},
detectRetina: true,
}}
/>
</div>
{/* Login Box */}
<div className="w-1/4 flex items-center justify-center">
<div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
<h2 className="text-3xl font-bold text-center">Login</h2>
{/* Email Input */}
<div className="form-control ">
<label className="label" htmlFor="email">
<p className="text-bold">
Email<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="email"
id="email"
placeholder="Enter your email"
onChange={handleEmailChange}
/>
</div>
{/* Password Input */}
<div className="form-control">
<label className="label" htmlFor="password">
<p className="text-bold">
Password<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="password"
id="password"
placeholder="Enter your password"
onChange={handlePasswordChange}
/>
</div>
{/* Login Button */}
<button className="btn btn-success w-full " onClick={handleSubmit}>
Login
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button
className="btn btn-outline btn-secondary w-full "
onClick={() => googleLoginImplicit()}
>
<FcGoogle className="rounded-full bg-white"/>Login with Google
</button>
{/* Forgot Password Link */}
<div className="justify-left">
<a href="#" className="text-blue-500 text-sm text-left">
Forgot your password?
</a>
<div>
<NavPreLogin
text="Don't have account?"
btn_text="Sign Up"
link="/signup"
/>
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
{/* Particles Container */}
<FloatingParticles />
{/* Login Box */}
<div className="flex items-center justify-center flex-1 z-50">
<div className="w-100 bg-white border-solid rounded-lg p-8 shadow space-y-4">
<h2 className="text-3xl font-bold">Log in to your account</h2>
{/* Error Message */}
{error && (
<div role="alert" className="alert alert-error">
<svg
xmlns="http://www.w3.org/2000/svg"
className="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>{error}</span>
</div>
)}
{/* Email Input */}
<div className="form-control ">
<label className="label" htmlFor="email">
<p className="text-bold">
Email<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="email"
id="email"
placeholder="Enter your email"
value={email}
onChange={handleEmailChange}
/>
</div>
{/* Password Input */}
<div className="form-control">
<label className="label" htmlFor="password">
<p className="text-bold">
Password<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="password"
id="password"
placeholder="Enter your password"
value={password}
onChange={handlePasswordChange}
/>
</div>
{/* Login Button */}
<button
className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold"
onClick={handleSubmit}
>
Login
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button
className="btn bg-gray-200 btn-outline w-full "
onClick={() => googleLoginImplicit()}
>
<FcGoogle className="rounded-full bg-white" />
Login with Google
</button>
</div>
</div>
</div>
</div>
);
}
export default LoginPage;

287
frontend/src/components/authentication/SignUpPage.jsx
View File

@ -1,31 +1,15 @@
import React, { useState } from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import axiosapi from "../../api/AuthenticationApi";
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { FcGoogle } from "react-icons/fc";
import { useGoogleLogin } from "@react-oauth/google";
import { NavPreLogin } from "../navigations/NavPreLogin";
import { useAuth } from "src/hooks/AuthHooks";
import { createUser, googleLogin } from "src/api/AuthenticationApi";
import { FloatingParticles } from "../FlaotingParticles";
function Copyright(props) {
return (
<div className="text-center text-sm text-gray-500" {...props}>
{"Copyright © "}
<a
href="https://github.com/TurTaskProject/TurTaskWeb"
className="text-blue-500 hover:underline"
>
TurTask
</a>{" "}
{new Date().getFullYear()}
{"."}
</div>
);
}
export default function SignUp() {
export function SignUp() {
const Navigate = useNavigate();
const { setIsAuthenticated } = useAuth();
const [formData, setFormData] = useState({
email: "",
@ -40,47 +24,48 @@ export default function SignUp() {
setIsSubmitting(true);
setError(null);
const delay = (ms) => new Promise((res) => setTimeout(res, ms));
try {
axiosapi.createUser(formData);
const data = await createUser(formData);
localStorage.setItem("access_token", data.access_token);
localStorage.setItem("refresh_token", data.refresh_token);
await delay(200);
setIsAuthenticated(true);
Navigate("/");
} catch (error) {
console.error("Error creating user:", error);
setError("Registration failed. Please try again.");
} finally {
setIsSubmitting(false);
}
Navigate("/login");
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
console.log(formData);
const handleEmailChange = (e) => {
setFormData({ ...formData, email: e.target.value });
};
{
/* Particles Loader*/
}
const particlesInit = useCallback(async (engine) => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
console.log(container);
}, []);
const handleUsernameChange = (e) => {
setFormData({ ...formData, username: e.target.value });
};
const handlePasswordChange = (e) => {
setFormData({ ...formData, password: e.target.value });
};
const googleLoginImplicit = useGoogleLogin({
flow: "auth-code",
redirect_uri: "postmessage",
onSuccess: async (response) => {
try {
const loginResponse = await axiosapi.googleLogin(response.code);
const loginResponse = await googleLogin(response.code);
if (loginResponse && loginResponse.data) {
const { access_token, refresh_token } = loginResponse.data;
localStorage.setItem("access_token", access_token);
localStorage.setItem("refresh_token", refresh_token);
setIsAuthenticated(true);
Navigate("/");
Navigate("/profile");
}
} catch (error) {
console.error("Error with the POST request:", error);
@ -91,153 +76,83 @@ export default function SignUp() {
});
return (
<div
data-theme="night"
className="h-screen flex items-center justify-center"
>
{/* Particles Container */}
<div style={{ width: "0%", height: "100vh" }}>
<Particles
id="particles"
init={particlesInit}
loaded={particlesLoaded}
className="-z-10"
options={{
fpsLimit: 240,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#023020",
},
links: {
color: "#228B22",
distance: 150,
enable: true,
opacity: 1,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 4,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 50,
},
opacity: {
value: 0.6,
},
shape: {
type: "circle",
},
size: {
value: { min: 6, max: 8 },
},
},
detectRetina: true,
}}
/>
</div>
<div className="w-1/4 h-1 flex items-center justify-center">
<div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
{/* Register Form */}
<h2 className="text-3xl font-bold text-center">Signup</h2>
{/* Email Input */}
<div className="form-control ">
<label className="label" htmlFor="email">
<p className="text-bold">
Email<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="email"
id="email"
placeholder="Enter your email"
onChange={handleChange}
/>
</div>
{/* Username Input */}
<div className="form-control">
<label className="label" htmlFor="Username">
<p className="text-bold">
Username<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="text"
id="Username"
placeholder="Enter your username"
onChange={handleChange}
/>
</div>
{/* Password Input */}
<div className="form-control">
<label className="label" htmlFor="password">
<p className="text-bold">
Password<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="password"
id="password"
placeholder="Enter your password"
onChange={handleChange}
/>
</div>
<br></br>
<div>
<NavPreLogin
text="Already have an account?"
btn_text="Log In"
link="/login"
/>
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
<FloatingParticles />
<div className="w-1/4 h-1 flex items-center justify-center z-10">
<div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
{/* Register Form */}
<h2 className="text-3xl font-bold text-center">Signup</h2>
{/* Email Input */}
<div className="form-control ">
<label className="label" htmlFor="email">
<p className="text-bold">
Email<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="email"
id="email"
placeholder="Enter your email"
onChange={handleEmailChange}
/>
</div>
{/* Username Input */}
<div className="form-control">
<label className="label" htmlFor="Username">
<p className="text-bold">
Username<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="text"
id="Username"
placeholder="Enter your username"
onChange={handleUsernameChange}
/>
</div>
{/* Password Input */}
<div className="form-control">
<label className="label" htmlFor="password">
<p className="text-bold">
Password<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input
className="input"
type="password"
id="password"
placeholder="Enter your password"
onChange={handlePasswordChange}
/>
</div>
<br></br>
{/* Signups Button */}
<button className="btn btn-success w-full " onClick={handleSubmit}>
Signup
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button
className="btn btn-outline btn-secondary w-full "
onClick={() => googleLoginImplicit()}
>
<FcGoogle className="rounded-full bg-white"/>Login with Google
</button>
{/* Already have an account? */}
<div className="text-blue-500 flex justify-center text-sm">
<a href="login">
Already have an account?
</a>
{/* Signups Button */}
<button className="btn btn-success w-full " onClick={handleSubmit}>
Signup
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button
className="btn btn-outline btn-secondary w-full "
onClick={() => googleLoginImplicit()}
>
<FcGoogle className="rounded-full bg-white" />
Login with Google
</button>
{/* Already have an account? */}
<div className="text-blue-500 flex justify-center text-sm">
<a href="login">Already have an account?</a>
</div>
</div>
<Copyright />
</div>
</div>
</div>

37
frontend/src/components/authentication/refreshAcessToken.jsx
View File

@ -1,37 +0,0 @@
import axios from "axios";
async function refreshAccessToken() {
const refresh_token = localStorage.getItem("refresh_token");
const access_token = localStorage.getItem("access_token");
if (access_token) {
return true;
}
if (!refresh_token) {
return false;
}
const refreshUrl = "http://127.0.0.1:8000/api/token/refresh/";
try {
const response = await axios.post(refreshUrl, { refresh: refresh_token });
if (response.status === 200) {
// Successful refresh - save the new access token and refresh token
const newAccessToken = response.data.access;
const newRefreshToken = response.data.refresh;
localStorage.setItem("access_token", newAccessToken);
localStorage.setItem("refresh_token", newRefreshToken);
return true;
} else {
return false;
}
} catch (error) {
return false;
}
}
export default refreshAccessToken;

6
frontend/src/components/calendar/TaskDataHandler.jsx
View File

@ -1,9 +1,9 @@
import { readTodoTasks } from "../../api/TaskApi";
import { readTodoTasks } from "src/api/TaskApi";
let eventGuid = 0;
const mapResponseToEvents = response => {
return response.map(item => ({
const mapResponseToEvents = (response) => {
return response.map((item) => ({
id: item.id,
title: item.title,
start: item.start_event,

26
frontend/src/components/calendar/calendar.jsx
View File

@ -1,13 +1,13 @@
import React, { useState } from "react";
import React from "react";
import { formatDate } from "@fullcalendar/core";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { getEvents, createEventId } from "./TaskDataHandler";
import axiosInstance from "../../api/configs/AxiosConfig";
import { axiosInstance } from "src/api/AxiosConfig";
export default class Calendar extends React.Component {
export class Calendar extends React.Component {
state = {
weekendsVisible: true,
currentEvents: [],
@ -83,7 +83,7 @@ export default class Calendar extends React.Component {
});
};
handleDateSelect = selectInfo => {
handleDateSelect = (selectInfo) => {
let title = prompt("Please enter a new title for your event");
let calendarApi = selectInfo.view.calendar;
@ -100,20 +100,20 @@ export default class Calendar extends React.Component {
}
};
handleEventClick = clickInfo => {
handleEventClick = (clickInfo) => {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
axiosInstance
.delete(`todo/${clickInfo.event.id}/`)
.then(response => {
clickInfo.event.remove();
})
.catch(error => {
console.error("Error deleting Task:", error);
});
.delete(`todo/${clickInfo.event.id}/`)
.then((response) => {
clickInfo.event.remove();
})
.catch((error) => {
console.error("Error deleting Task:", error);
});
}
};
handleEvents = events => {
handleEvents = (events) => {
this.setState({
currentEvents: events,
});

131
frontend/src/components/dashboard/Areachart.jsx
View File

@ -1,103 +1,36 @@
import { AreaChart, Title } from "@tremor/react";
import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig";
import { useState, useEffect } from "react";
import { axiosInstance } from "src/api/AxiosConfig";
const fetchAreaChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/");
console.log(res.data);
// const areaChartData = [
// {
// date: "Mon",
// "This Week": res.data[0]["This Week"],
// "Last Week": res.data[0]["Last Week"],
// },
// {
// date: "Tue",
// "This Week": res.data[1]["This Week"],
// "Last Week": res.data[1]["Last Week"],
// },
// {
// date: "Wed",
// "This Week": res.data[2]["This Week"],
// "Last Week": res.data[2]["Last Week"],
// },
// {
// date: "Th",
// "This Week": res.data[3]["This Week"],
// "Last Week": res.data[3]["Last Week"],
// },
// {
// date: "Fri",
// "This Week": res.data[4]["This Week"],
// "Last Week": res.data[4]["Last Week"],
// },
// {
// date: "Sat",
// "This Week": res.data[5]["This Week"],
// "Last Week": res.data[5]["Last Week"],
// },
// {
// date: "Sun",
// "This Week": res.data[6]["This Week"],
// "Last Week": res.data[6]["Last Week"],
// },
// ];
const areaChartData = [
{
date: "Mon",
"This Week": 1,
"Last Week": 2,
},
{
date: "Tue",
"This Week": 5,
"Last Week": 2,
},
{
date: "Wed",
"This Week": 7,
"Last Week": 9,
},
{
date: "Th",
"This Week": 10,
"Last Week": 3,
},
{
date: "Fri",
"This Week": 5,
"Last Week": 1,
},
{
date: "Sat",
"This Week": 7,
"Last Week": 8,
},
{
date: "Sun",
"This Week": 3,
"Last Week": 8,
},
];
return areaChartData;
}
const areaChartDataArray = await fetchAreaChartData();
export const AreaChartGraph = () => {
const [value, setValue] = React.useState(null);
return (
<>
<Title>Number of tasks statistics vs. last week</Title>
<AreaChart
className="mt-6"
data={areaChartDataArray}
index="date"
categories={["This Week", "Last Week"]}
colors={["neutral", "indigo"]}
yAxisWidth={30}
onValueChange={(v) => setValue(v)}
showAnimation
/>
</>
);
const [areaChartDataArray, setAreaChartDataArray] = useState([]);
useEffect(() => {
const fetchAreaChartData = async () => {
try {
const response = await axiosInstance.get("/dashboard/weekly/");
const areaChartData = response.data;
setAreaChartDataArray(areaChartData);
} catch (error) {
console.error("Error fetching area chart data:", error);
}
};
fetchAreaChartData();
}, []);
return (
<>
<Title>Number of tasks statistics vs. last week</Title>
<AreaChart
className="mt-6"
data={areaChartDataArray}
index="date"
categories={["This Week", "Last Week"]}
colors={["neutral", "indigo"]}
yAxisWidth={30}
showAnimation
/>
</>
);
};

102
frontend/src/components/dashboard/Barchart.jsx
View File

@ -1,89 +1,24 @@
import { BarChart, Title } from "@tremor/react";
import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig";
import { useState, useEffect } from "react";
import { axiosInstance } from "src/api/AxiosConfig";
const fetchBarChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/");
console.log(res.data);
// const barchartData = [
// {
// date: "Mon",
// "This Week": res.data[0]["Completed This Week"],
// "Last Week": res.data[0]["Completed Last Week"],
// },
// {
// date: "Tue",
// "This Week": res.data[1]["Completed This Week"],
// "Last Week": res.data[1]["Completed Last Week"],
// },
// {
// date: "Wed",
// "This Week": res.data[2]["Completed This Week"],
// "Last Week": res.data[2]["Completed Last Week"],
// },
// {
// date: "Th",
// "This Week": res.data[3]["Completed This Week"],
// "Last Week": res.data[3]["Completed Last Week"],
// },
// {
// date: "Fri",
// "This Week": res.data[4]["Completed This Week"],
// "Last Week": res.data[4]["Completed Last Week"],
// },
// {
// date: "Sat",
// "This Week": res.data[5]["Completed This Week"],
// "Last Week": res.data[5]["Completed Last Week"],
// },
// {
// date: "Sun",
// "This Week": res.data[6]["Completed This Week"],
// "Last Week": res.data[6]["Completed Last Week"],
// },
// ];
const barchartData = [
{
date: "Mon",
"This Week": 1,
"Last Week": 2,
},
{
date: "Tue",
"This Week": 5,
"Last Week": 2,
},
{
date: "Wed",
"This Week": 7,
"Last Week": 9,
},
{
date: "Th",
"This Week": 10,
"Last Week": 3,
},
{
date: "Fri",
"This Week": 5,
"Last Week": 1,
},
{
date: "Sat",
"This Week": 7,
"Last Week": 8,
},
{
date: "Sun",
"This Week": 3,
"Last Week": 8,
},
];
return barchartData;
};
const barchartDataArray = await fetchBarChartData();
export const BarChartGraph = () => {
const [value, setValue] = React.useState(null);
const [barchartDataArray, setBarChartDataArray] = useState([]);
useEffect(() => {
const fetchAreaChartData = async () => {
try {
const response = await axiosInstance.get("/dashboard/weekly/");
const barchartDataArray = response.data;
setBarChartDataArray(barchartDataArray);
} catch (error) {
console.error("Error fetching area chart data:", error);
}
};
fetchAreaChartData();
}, []);
return (
<>
<Title>Task completed statistics vs. last week</Title>
@ -94,7 +29,6 @@ export const BarChartGraph = () => {
categories={["This Week", "Last Week"]}
colors={["neutral", "indigo"]}
yAxisWidth={30}
onValueChange={(v) => setValue(v)}
showAnimation
/>
</>

53
frontend/src/components/dashboard/DonutChart.jsx
View File

@ -1,40 +1,37 @@
import { DonutChart } from "@tremor/react";
import axiosInstance from "../../api/configs/AxiosConfig";
import { axiosInstance } from "src/api/AxiosConfig";
import { useState, useEffect } from "react";
const fetchDonutData = async () => {
try {
let res = await axiosInstance.get("/dashboard/stats/");
// let todoCount = res.data.todo_count;
// let recurrenceCount = res.data.recurrence_count;
let todoCount = 10;
let recurrenceCount = 15;
if (todoCount === undefined) {
todoCount = 0;
}
if (recurrenceCount === undefined) {
recurrenceCount = 0;
}
const donutData = [
{ name: "Todo", count: todoCount },
{ name: "Recurrence", count: recurrenceCount },
];
return donutData;
} catch (error) {
console.error("Error fetching donut data:", error);
return [];
}
};
export function DonutChartGraph() {
const [donutData, setDonutData] = useState([]);
useEffect(() => {
const fetchDonutData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const todoCount = response.data.todo_count || 0;
const recurrenceCount = response.data.recurrence_count || 0;
const donutData = [
{ name: "Todo", count: todoCount },
{ name: "Recurrence", count: recurrenceCount },
];
setDonutData(donutData);
} catch (error) {
console.error("Error fetching donut data:", error);
}
};
fetchDonutData();
}, []);
const donutDataArray = await fetchDonutData();
export default function DonutChartGraph() {
return (
<DonutChart
className="mt-6"
data={donutDataArray}
data={donutData}
category="count"
index="name"
colors={["rose", "yellow", "orange"]}
onValueChange={(v) => setValue(v)}
showAnimation
radius={25}
/>

67
frontend/src/components/dashboard/KpiCard.jsx
View File

@ -1,42 +1,57 @@
import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig";
import { useEffect, useState } from "react";
import { axiosInstance } from "src/api/AxiosConfig";
const fetchKpiCardData = async () => {
let res = await axiosInstance.get("/dashboard/stats/");
// let completedThisWeek = res.data["completed_this_week"];
// let completedLastWeek = res.data["completed_last_week"];
let completedThisWeek = 4;
let completedLastWeek = 23;
let percentage = (completedThisWeek / completedLastWeek)*100;
let incOrdec = undefined;
if (completedThisWeek <= completedLastWeek) {
incOrdec = "moderateDecrease";
}
if (completedThisWeek > completedLastWeek) {
incOrdec = "moderateIncrease";
}
return {completedThisWeek, completedLastWeek, incOrdec, percentage};
}
export function KpiCard() {
const [kpiCardData, setKpiCardData] = useState({
completedThisWeek: 0,
completedLastWeek: 0,
incOrdec: undefined,
percentage: 0,
});
const {kpiCardDataArray, completedThisWeek ,completedLastWeek, incOrdec, percentage} = await fetchKpiCardData();
useEffect(() => {
const fetchKpiCardData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const completedThisWeek = response.data.completed_this_week || 0;
const completedLastWeek = response.data.completed_last_week || 0;
const percentage = (completedThisWeek / completedLastWeek) * 100;
let incOrdec = undefined;
if (completedThisWeek <= completedLastWeek) {
incOrdec = "moderateDecrease";
}
if (completedThisWeek > completedLastWeek) {
incOrdec = "moderateIncrease";
}
setKpiCardData({
completedThisWeek,
completedLastWeek,
incOrdec,
percentage,
});
} catch (error) {
console.error("Error fetching KPI card data:", error);
}
};
fetchKpiCardData();
}, []);
export default function KpiCard() {
return (
<Card className="max-w-lg mx-auto">
<Flex alignItems="start">
<div>
<Metric>{completedThisWeek}</Metric>
<Metric>{kpiCardData.completedThisWeek}</Metric>
</div>
<BadgeDelta deltaType={incOrdec}>{percentage.toFixed(0)}%</BadgeDelta>
<BadgeDelta deltaType={kpiCardData.incOrdec}>{kpiCardData.percentage.toFixed(0)}%</BadgeDelta>
</Flex>
<Flex className="mt-4">
<Text className="truncate">vs. {completedLastWeek} (last week)</Text>
<Text className="truncate">vs. {kpiCardData.completedLastWeek} (last week)</Text>
</Flex>
<ProgressBar value={percentage} className="mt-2" />
<ProgressBar value={kpiCardData.percentage} className="mt-2" />
</Card>
);
}

61
frontend/src/components/dashboard/ProgressCircle.jsx
View File

@ -1,38 +1,39 @@
import { Card, Flex, ProgressCircle, Text, } from "@tremor/react";
import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig";
import { Card, Flex, ProgressCircle } from "@tremor/react";
import { useState, useEffect } from "react";
import { axiosInstance } from "src/api/AxiosConfig";
const fetchProgressData = async () => {
try {
let res = await axiosInstance.get("/dashboard/stats/");
// let completedLastWeek = res.data.completed_last_week;
// let assignLastWeek = res.data.tasks_assigned_last_week;
let completedLastWeek = 15;
let assignLastWeek = 35;
if (completedLastWeek === undefined) {
completedLastWeek = 0;
}
if (assignLastWeek === undefined) {
assignLastWeek = 0;
}
return (completedLastWeek / assignLastWeek) * 100;
} catch (error) {
console.error("Error fetching progress data:", error);
return 0;
}
};
export function ProgressCircleChart() {
const [progressData, setProgressData] = useState(0);
useEffect(() => {
const fetchProgressData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
let completedLastWeek = response.data.completed_last_week || 0;
let assignLastWeek = response.data.tasks_assigned_last_week || 0;
if (completedLastWeek === undefined) {
completedLastWeek = 0;
}
if (assignLastWeek === undefined) {
assignLastWeek = 0;
}
const progress = (completedLastWeek / assignLastWeek) * 100;
setProgressData(progress);
} catch (error) {
console.error("Error fetching progress data:", error);
}
};
fetchProgressData();
}, []);
const progressData = await fetchProgressData();
export default function ProgressCircleChart() {
return (
<Card className="max-w-lg mx-auto">
<Flex className="flex-col items-center">
<ProgressCircle
className="mt-6" value={progressData}
size={200}
strokeWidth={10}
radius={60}
color="indigo">
<ProgressCircle className="mt-6" value={progressData} size={200} strokeWidth={10} radius={60} color="indigo">
<span className="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center text-sm text-indigo-500 font-medium">
{progressData.toFixed(0)} %
</span>

37
frontend/src/components/dashboard/dashboard.jsx
View File

@ -1,46 +1,22 @@
import {
Card,
Grid,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
Text,
Title,
Legend,
DateRangePicker,
} from "@tremor/react";
import KpiCard from "./kpiCard";
import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, Legend } from "@tremor/react";
import { KpiCard } from "./KpiCard";
import { BarChartGraph } from "./Barchart";
import DonutChartGraph from "./DonutChart";
import { DonutChartGraph } from "./DonutChart";
import { AreaChartGraph } from "./Areachart";
import ProgressCircleChart from "./ProgressCircle";
import { ProgressCircleChart } from "./ProgressCircle";
import { useState } from "react";
const valueFormatter = (number) =>
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
export default function Dashboard() {
export function Dashboard() {
const [value, setValue] = useState({
from: new Date(2021, 0, 1),
to: new Date(2023, 0, 7),
});
console.log(value);
return (
<div className="flex flex-col p-12">
<div>
<Title>Dashboard</Title>
<Text>All of your progress will be shown right here.</Text>
<br />
<Text className="mr-3">Select Date Range:</Text>
<DateRangePicker
value={value}
onChange={setValue}
className="inline-block"
maxDate={new Date()}
>
</DateRangePicker>
</div>
<div>
@ -64,8 +40,7 @@ export default function Dashboard() {
<Legend
className="mt-3 mx-auto w-1/2"
categories={["Completed Tasks", "Assigned Tasks"]}
colors={["indigo"]}
></Legend>
colors={["indigo"]}></Legend>
</Card>
<Card>
<BarChartGraph />

14
frontend/src/components/kanbanBoard/columnContainer.jsx
View File

@ -3,13 +3,13 @@ import { BsFillTrashFill } from "react-icons/bs";
import { AiOutlinePlusCircle } from "react-icons/ai";
import { CSS } from "@dnd-kit/utilities";
import { useMemo, useState } from "react";
import TaskCard from "./taskCard";
import { TaskCard } from "./taskCard";
function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
export function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
const [editMode, setEditMode] = useState(false);
const tasksIds = useMemo(() => {
return tasks.map(task => task.id);
return tasks.map((task) => task.id);
}, [tasks]);
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
@ -78,12 +78,12 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
<input
className="bg-gray-200 focus:border-blue-500 border rounded-md outline-none px-2"
value={column.title}
onChange={e => updateColumn(column.id, e.target.value)}
onChange={(e) => updateColumn(column.id, e.target.value)}
autoFocus
onBlur={() => {
setEditMode(false);
}}
onKeyDown={e => {
onKeyDown={(e) => {
if (e.key !== "Enter") return;
setEditMode(false);
}}
@ -109,7 +109,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
{/* Column task container */}
<div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
<SortableContext items={tasksIds}>
{tasks.map(task => (
{tasks.map((task) => (
<TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />
))}
</SortableContext>
@ -126,5 +126,3 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
</div>
);
}
export default ColumnContainer;

6
frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
View File

@ -1,6 +1,6 @@
import ColumnContainer from "./columnContainer";
import { ColumnContainer } from "./columnContainer";
function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
export function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
return (
<div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
<ColumnContainer
@ -15,5 +15,3 @@ function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, t
</div>
);
}
export default ColumnContainerCard;

164
frontend/src/components/kanbanBoard/kanbanBoard.jsx
View File

@ -1,15 +1,14 @@
import { useMemo, useState, useEffect } from "react";
import ColumnContainerCard from "./columnContainerWrapper";
import { ColumnContainerCard } from "./columnContainerWrapper";
import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import { createPortal } from "react-dom";
import TaskCard from "./taskCard";
import { AiOutlinePlusCircle } from "react-icons/ai";
import axiosInstance from "../../api/configs/AxiosConfig";
import { TaskCard } from "./taskCard";
import { axiosInstance } from "src/api/AxiosConfig";
function KanbanBoard() {
export function KanbanBoard() {
const [columns, setColumns] = useState([]);
const columnsId = useMemo(() => columns.map(col => col.id), [columns]);
const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
const [boardId, setBoardData] = useState();
const [tasks, setTasks] = useState([]);
@ -26,54 +25,19 @@ function KanbanBoard() {
})
);
// Example
// {
// "id": 95,
// "title": "Test Todo",
// "notes": "Test TodoTest TodoTest Todo",
// "importance": 1,
// "difficulty": 1,
// "challenge": false,
// "fromSystem": false,
// "creation_date": "2023-11-20T19:50:16.369308Z",
// "last_update": "2023-11-20T19:50:16.369308Z",
// "is_active": true,
// "is_full_day_event": false,
// "start_event": "2023-11-20T19:49:49Z",
// "end_event": "2023-11-23T18:00:00Z",
// "google_calendar_id": null,
// "completed": true,
// "completion_date": "2023-11-20T19:50:16.369308Z",
// "priority": 3,
// "user": 1,
// "list_board": 1,
// "tags": []
// }
// ]
// [
// {
// "id": 8,
// "name": "test",
// "position": 2,
// "board": 3
// }
// ]
useEffect(() => {
const fetchData = async () => {
try {
const tasksResponse = await axiosInstance.get("/todo");
// Transform
const transformedTasks = tasksResponse.data.map(task => ({
const transformedTasks = tasksResponse.data.map((task) => ({
id: task.id,
columnId: task.list_board,
content: task.title,
difficulty: task.difficulty,
notes: task.notes,
importance: task.importance,
difficulty: task.difficulty,
challenge: task.challenge,
fromSystem: task.fromSystem,
creation_date: task.creation_date,
@ -95,7 +59,7 @@ function KanbanBoard() {
const columnsResponse = await axiosInstance.get("/lists");
// Transform
const transformedColumns = columnsResponse.data.map(column => ({
const transformedColumns = columnsResponse.data.map((column) => ({
id: column.id,
title: column.name,
}));
@ -135,7 +99,7 @@ function KanbanBoard() {
<div className="ml-2 flex gap-4">
<div className="flex gap-4">
<SortableContext items={columnsId}>
{columns.map(col => (
{columns.map((col) => (
<ColumnContainerCard
key={col.id}
column={col}
@ -144,36 +108,11 @@ function KanbanBoard() {
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
tasks={tasks.filter(task => task.columnId === col.id)}
tasks={tasks.filter((task) => task.columnId === col.id)}
/>
))}
</SortableContext>
</div>
{/* create new column */}
<button
onClick={() => {
createNewColumn();
}}
className="
h-[60px]
w-[268px]
max-w-[268px]
cursor-pointer
rounded-xl
bg-[#f1f2f4]
border-2
p-4
hover:bg-gray-200
flex
gap-2
my-2
bg-opacity-60
">
<div className="my-1">
<AiOutlinePlusCircle />
</div>
Add Column
</button>
</div>
{createPortal(
@ -186,7 +125,7 @@ function KanbanBoard() {
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
tasks={tasks.filter(task => task.columnId === activeColumn.id)}
tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
/>
)}
{activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
@ -213,35 +152,34 @@ function KanbanBoard() {
axiosInstance
.post("todo/", newTaskData)
.then(response => {
.then((response) => {
const newTask = {
id: response.data.id,
columnId,
content: response.data.title,
};
})
.catch(error => {
.catch((error) => {
console.error("Error creating task:", error);
});
setTasks(tasks => [...tasks, newTask]);
}
setTasks((tasks) => [...tasks, newTask]);
}
function deleteTask(id) {
const newTasks = tasks.filter(task => task.id !== id);
const newTasks = tasks.filter((task) => task.id !== id);
axiosInstance
.delete(`todo/${id}/`)
.then(response => {
.then((response) => {
setTasks(newTasks);
})
.catch(error => {
.catch((error) => {
console.error("Error deleting Task:", error);
});
setTasks(newTasks);
setTasks(newTasks);
}
function updateTask(id, content) {
const newTasks = tasks.map(task => {
const newTasks = tasks.map((task) => {
if (task.id !== id) return task;
return { ...task, content };
});
@ -252,15 +190,15 @@ function KanbanBoard() {
function createNewColumn() {
axiosInstance
.post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id })
.then(response => {
.then((response) => {
const newColumn = {
id: response.data.id,
title: response.data.name,
};
setColumns(prevColumns => [...prevColumns, newColumn]);
setColumns((prevColumns) => [...prevColumns, newColumn]);
})
.catch(error => {
.catch((error) => {
console.error("Error creating ListBoard:", error);
});
}
@ -268,22 +206,22 @@ function KanbanBoard() {
function deleteColumn(id) {
axiosInstance
.delete(`lists/${id}/`)
.then(response => {
setColumns(prevColumns => prevColumns.filter(col => col.id !== id));
.then((response) => {
setColumns((prevColumns) => prevColumns.filter((col) => col.id !== id));
})
.catch(error => {
.catch((error) => {
console.error("Error deleting ListBoard:", error);
});
const tasksToDelete = tasks.filter(t => t.columnId === id);
const tasksToDelete = tasks.filter((t) => t.columnId === id);
tasksToDelete.forEach(task => {
tasksToDelete.forEach((task) => {
axiosInstance
.delete(`todo/${task.id}/`)
.then(response => {
setTasks(prevTasks => prevTasks.filter(t => t.id !== task.id));
.then((response) => {
setTasks((prevTasks) => prevTasks.filter((t) => t.id !== task.id));
})
.catch(error => {
.catch((error) => {
console.error("Error deleting Task:", error);
});
});
@ -293,10 +231,10 @@ function KanbanBoard() {
// Update the column
axiosInstance
.patch(`lists/${id}/`, { name: title }) // Adjust the payload based on your API requirements
.then(response => {
setColumns(prevColumns => prevColumns.map(col => (col.id === id ? { ...col, title } : col)));
.then((response) => {
setColumns((prevColumns) => prevColumns.map((col) => (col.id === id ? { ...col, title } : col)));
})
.catch(error => {
.catch((error) => {
console.error("Error updating ListBoard:", error);
});
}
@ -330,9 +268,9 @@ function KanbanBoard() {
// Reorder columns if the dragged item is a column
if (isActiveAColumn && isOverAColumn) {
setColumns(columns => {
const activeColumnIndex = columns.findIndex(col => col.id === activeId);
const overColumnIndex = columns.findIndex(col => col.id === overId);
setColumns((columns) => {
const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
const overColumnIndex = columns.findIndex((col) => col.id === overId);
const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex);
@ -342,9 +280,9 @@ function KanbanBoard() {
// Reorder tasks within the same column
if (isActiveATask && isOverATask) {
setTasks(tasks => {
const activeIndex = tasks.findIndex(t => t.id === activeId);
const overIndex = tasks.findIndex(t => t.id === overId);
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
const overIndex = tasks.findIndex((t) => t.id === overId);
const reorderedTasks = arrayMove(tasks, activeIndex, overIndex);
@ -354,15 +292,15 @@ function KanbanBoard() {
// Move tasks between columns and update columnId
if (isActiveATask && isOverAColumn) {
setTasks(tasks => {
const activeIndex = tasks.findIndex(t => t.id === activeId);
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
tasks[activeIndex].columnId = overId;
axiosInstance
.put(`todo/change_task_list_board/`, { todo_id: activeId, new_list_board_id: overId, new_index: 0 })
.then(response => {})
.catch(error => {
.then((response) => {})
.catch((error) => {
console.error("Error updating task columnId:", error);
});
@ -386,9 +324,9 @@ function KanbanBoard() {
if (!isActiveATask) return;
if (isActiveATask && isOverATask) {
setTasks(tasks => {
const activeIndex = tasks.findIndex(t => t.id === activeId);
const overIndex = tasks.findIndex(t => t.id === overId);
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
const overIndex = tasks.findIndex((t) => t.id === overId);
if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
tasks[activeIndex].columnId = tasks[overIndex].columnId;
@ -402,18 +340,12 @@ function KanbanBoard() {
const isOverAColumn = over.data.current?.type === "Column";
if (isActiveATask && isOverAColumn) {
setTasks(tasks => {
const activeIndex = tasks.findIndex(t => t.id === activeId);
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
tasks[activeIndex].columnId = overId;
return arrayMove(tasks, activeIndex, activeIndex);
});
}
}
function generateId() {
return Math.floor(Math.random() * 10001);
}
}
export default KanbanBoard;

19
frontend/src/components/kanbanBoard/kanbanPage.jsx
View File

@ -1,12 +1,12 @@
import KanbanBoard from "./kanbanBoard";
import React, { useState } from 'react';
import { KanbanBoard } from "./kanbanBoard";
import { useState } from "react";
const KanbanPage = () => {
const [activeTab, setActiveTab] = useState('kanban');
export const KanbanPage = () => {
const [activeTab, setActiveTab] = useState("kanban");
const handleTabClick = (tabId) => {
setActiveTab(tabId);
};
const handleTabClick = (tabId) => {
setActiveTab(tabId);
};
return (
<div className="flex flex-col">
@ -29,10 +29,7 @@ const KanbanPage = () => {
</div>
</div>
<KanbanBoard />
<div className="flex justify-center border-2 ">
</div>
<div className="flex justify-center border-2 "></div>
</div>
);
};
export default KanbanPage;

9
frontend/src/components/kanbanBoard/taskCard.jsx
View File

@ -2,9 +2,9 @@ import { useState } from "react";
import { BsFillTrashFill } from "react-icons/bs";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import TaskDetailModal from "./taskDetailModal";
import { TaskDetailModal } from "./taskDetailModal";
function TaskCard({ task, deleteTask, updateTask}) {
export function TaskCard({ task, deleteTask, updateTask }) {
const [mouseIsOver, setMouseIsOver] = useState(false);
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
@ -15,7 +15,6 @@ function TaskCard({ task, deleteTask, updateTask}) {
},
});
const style = {
transition,
transform: CSS.Transform.toString(transform),
@ -45,7 +44,7 @@ function TaskCard({ task, deleteTask, updateTask}) {
description={task.description}
tags={task.tags}
difficulty={task.difficulty}
challenge={task.challenge}
f challenge={task.challenge}
importance={task.importance}
/>
<div
@ -79,5 +78,3 @@ function TaskCard({ task, deleteTask, updateTask}) {
</div>
);
}
export default TaskCard;

13
frontend/src/components/kanbanBoard/taskDetailModal.jsx
View File

@ -1,9 +1,9 @@
import React, { useState } from "react";
import { useState } from "react";
import { FaTasks, FaRegListAlt } from "react-icons/fa";
import { FaPlus } from "react-icons/fa6";
import { TbChecklist } from "react-icons/tb";
function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) {
export function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) {
const [isChallengeChecked, setChallengeChecked] = useState(challenge);
const [isImportantChecked, setImportantChecked] = useState(importance);
const [currentDifficulty, setCurrentDifficulty] = useState(difficulty);
@ -28,7 +28,8 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo
<div className="flex flex-col">
<h3 className="font-bold text-lg">
<span className="flex gap-2">
{<FaTasks className="my-2" />}{title}
{<FaTasks className="my-2" />}
{title}
</span>
</h3>
<p className="text-xs">{title}</p>
@ -45,13 +46,13 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo
<ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<li>
<a>
<input type="checkbox" checked="checked" className="checkbox checkbox-sm"/>
<input type="checkbox" checked="checked" className="checkbox checkbox-sm" />
Item 2
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="flex flex-nowrap overflow-x-auto"></div>
</div>
@ -144,5 +145,3 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo
</dialog>
);
}
export default TaskDetailModal;

44
frontend/src/components/landingPage/LandingPage.jsx Normal file
View File

@ -0,0 +1,44 @@
import { FloatingParticles } from "../FlaotingParticles";
export function LandingPage() {
return (
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
{/* Particles Container */}
<FloatingParticles />
{/* Navbar */}
<div className="relative" id="home">
<div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
<div className="relative pt-36 ml-auto">
<div className="lg:w-2/3 text-center mx-auto">
<h1 className="text-#143D6C font-bold text-5xl md:text-6xl xl:text-7xl">
Manage your task with{" "}
<span className="text-primary">
TurTask
<label className="swap swap-flip text-6xl">
<input type="checkbox" />
<div className="swap-on">😇</div>
<div className="swap-off">🥳</div>
</label>
</span>
</h1>
<p className="mt-8 text-#143D6C">
Unleash productivity with our personal task and project
management.
</p>
<div className="mt-8 flex flex-wrap justify-center gap-y-4 gap-x-6">
<a
href="/login"
className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
>
<span className="relative text-base font-semibold text-white">
Get started
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

18
frontend/src/components/navigations/IconSideNav.jsx
View File

@ -1,9 +1,9 @@
import { useState } from "react";
import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList, AiOutlinePieChart } from "react-icons/ai";
import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList } from "react-icons/ai";
import { PiStepsDuotone } from "react-icons/pi";
import { IoSettingsOutline } from "react-icons/io5";
import { AnimatePresence, motion } from "framer-motion";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
const menuItems = [
{ id: 0, path: "/", icon: <AiOutlineHome /> },
@ -13,20 +13,12 @@ const menuItems = [
{ id: 4, path: "/priority", icon: <PiStepsDuotone /> },
];
const IconSideNav = () => {
return (
<div className="bg-slate-900 text-slate-100 flex">
<SideNav />
</div>
);
};
const SideNav = () => {
export const SideNav = () => {
const [selected, setSelected] = useState(0);
return (
<nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0 z-50">
{menuItems.map(item => (
{menuItems.map((item) => (
<NavItem
key={item.id}
icon={item.icon}
@ -65,5 +57,3 @@ const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
</motion.button>
);
};
export default IconSideNav;

16
frontend/src/components/navigations/NavPreLogin.jsx Normal file
View File

@ -0,0 +1,16 @@
import { Link } from "react-router-dom";
export const NavPreLogin = ({ text, btn_text, link }) => {
return (
<div className="navbar bg-base-100 sticky top-0 z-50 border-2 border-neutral-400">
<div className="navbar-start"></div>
<div className="navbar-center hidden lg:flex"></div>
<div className="navbar-end space-x-3">
<p className="font-bold">{text}</p>
<Link to={link} className="btn bg-blue-700 hover:bg-blue-900 text-white font-bold">
{btn_text}
</Link>
</div>
</div>
);
};

15
frontend/src/components/navigations/Navbar.jsx
View File

@ -1,20 +1,18 @@
import * as React from "react";
import { useNavigate } from "react-router-dom";
import axiosapi from "../../api/AuthenticationApi";
import { useAuth } from "../../hooks/authentication/IsAuthenticated";
import { apiUserLogout } from "src/api/AuthenticationApi";
import { useAuth } from "src/hooks/AuthHooks";
const settings = {
Profile: '/profile',
Account: '/account',
Profile: "/profile",
Account: "/account",
};
function NavBar() {
export function NavBar() {
const Navigate = useNavigate();
const { isAuthenticated, setIsAuthenticated } = useAuth();
const logout = () => {
axiosapi.apiUserLogout();
apiUserLogout();
setIsAuthenticated(false);
Navigate("/");
};
@ -67,4 +65,3 @@ function NavBar() {
</div>
);
}
export default NavBar;

16
frontend/src/components/ProfileUpdateComponent.jsx → frontend/src/components/profile/ProfileUpdateComponent.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useRef } from "react";
import { ApiUpdateUserProfile } from "../api/UserProfileApi";
import { useState, useRef } from "react";
import { ApiUpdateUserProfile } from "src/api/UserProfileApi";
function ProfileUpdateComponent() {
export function ProfileUpdateComponent() {
const [file, setFile] = useState(null);
const [username, setUsername] = useState("");
const [fullName, setFullName] = useState("");
@ -15,7 +15,7 @@ function ProfileUpdateComponent() {
}
};
const handleFileChange = e => {
const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (selectedFile) {
setFile(selectedFile);
@ -66,7 +66,7 @@ function ProfileUpdateComponent() {
placeholder="Enter your username"
className="input w-full"
value={username}
onChange={e => setUsername(e.target.value)}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
@ -78,7 +78,7 @@ function ProfileUpdateComponent() {
placeholder="Enter your full name"
className="input w-full"
value={fullName}
onChange={e => setFullName(e.target.value)}
onChange={(e) => setFullName(e.target.value)}
/>
</div>
@ -89,7 +89,7 @@ function ProfileUpdateComponent() {
placeholder="Tell us about yourself"
className="textarea w-full h-32"
value={about}
onChange={e => setAbout(e.target.value)}
onChange={(e) => setAbout(e.target.value)}
/>
</div>
@ -100,5 +100,3 @@ function ProfileUpdateComponent() {
</div>
);
}
export default ProfileUpdateComponent;

38
frontend/src/components/profilePage.jsx → frontend/src/components/profile/profilePage.jsx
View File

@ -1,7 +1,6 @@
import * as React from "react";
import ProfileUpdateComponent from "./ProfileUpdateComponent";
import { ProfileUpdateComponent } from "./ProfileUpdateComponent";
function ProfileUpdatePage() {
export function ProfileUpdatePage() {
return (
<div>
<div className="stats shadow mt-3">
@ -47,7 +46,7 @@ function ProfileUpdatePage() {
</div>
</div>
<div className="stat-desc py-2">3213/321312321 points</div>
<progress class="progress progress-info w-36" value="10" max="100"></progress>
<progress className="progress progress-info w-36" value="10" max="100"></progress>
</div>
<div className="stat">
@ -75,10 +74,10 @@ function ProfileUpdatePage() {
</div>
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">About me</h2>
<div class="card-actions justify-end"></div>
<textarea class="textarea textarea-bordered textarea-lg w-full" disabled>
<div className="card-body">
<h2 className="card-title">About me</h2>
<div className="card-actions justify-end"></div>
<textarea className="textarea textarea-bordered textarea-lg w-full" disabled>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolores recusandae, officiis consequuntur
nam, non ab commodi totam mollitia iusto nemo voluptatum error aliquam similique perspiciatis, eligendi
nulla. Animi, sit?
@ -89,31 +88,31 @@ function ProfileUpdatePage() {
<div className="grid grid-cols-2 grid-rows-2 gap-4 my-2">
<div className="col-span-full">
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Overall Statistics</h2>
<div class="card-actions justify-end"></div>
<div className="card-body">
<h2 className="card-title">Overall Statistics</h2>
<div className="card-actions justify-end"></div>
</div>
</div>
</div>
<div className="col-start-2 row-start-2">
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Achievements</h2>
<div class="card-actions justify-end"></div>
<div className="card-body">
<h2 className="card-title">Achievements</h2>
<div className="card-actions justify-end"></div>
</div>
</div>
</div>
<div className="col-start-1 row-start-2">
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Friends</h2>
<div class="card-actions justify-end"></div>
<div className="card-body">
<h2 className="card-title">Friends</h2>
<div className="card-actions justify-end"></div>
</div>
</div>
</div>
</div>
<div class="fixed bottom-4 right-4">
<div className="fixed bottom-4 right-4">
<ul className="menu menu-horizontal bg-base-200 rounded-box">
<li>
<a onClick={() => document.getElementById("my_modal_4").showModal()}>
@ -136,11 +135,10 @@ function ProfileUpdatePage() {
<div className="modal-box w-11/12 max-w-5xl flex flex-col">
<form method="dialog">
<ProfileUpdateComponent />
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
</div>
</dialog>
</div>
);
}
export default ProfileUpdatePage;

115
frontend/src/components/signup.jsx
View File

@ -1,115 +0,0 @@
import React, { useState } from "react";
import axiosapi from "../api/axiosapi";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import CssBaseline from "@material-ui/core/CssBaseline";
import Container from "@material-ui/core/Container";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
// Styles for various elements
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center",
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%",
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
const Signup = () => {
const classes = useStyles();
const [formData, setFormData] = useState({
email: "",
username: "",
password: "",
});
const [error, setError] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async e => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
try {
axiosapi.createUser(formData);
} catch (error) {
console.error("Error creating user:", error);
setError("Registration failed. Please try again."); // Set an error message
} finally {
setIsSubmitting(false);
}
};
const handleChange = e => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Sign Up
</Typography>
<form className={classes.form} onSubmit={handleSubmit}>
<TextField
variant="outlined"
margin="normal"
type="email"
name="email"
fullWidth
value={formData.email}
onChange={handleChange}
label="Email"
/>
<TextField
variant="outlined"
margin="normal"
type="text"
name="username"
fullWidth
value={formData.username}
onChange={handleChange}
label="Username"
/>
<TextField
variant="outlined"
margin="normal"
type="password"
name="password"
fullWidth
value={formData.password}
onChange={handleChange}
label="Password"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isSubmitting}>
{isSubmitting ? "Signing up..." : "Sign Up"}
</Button>
</form>
{error && <Typography color="error">{error}</Typography>}
</div>
</Container>
);
};
export default Signup;

65
frontend/src/components/signup/Signup.jsx
View File

@ -1,39 +1,36 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
function Signup() {
return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
<h1 className="text-4xl font-semibold mb-6">Create your account</h1>
<p className="text-gray-700 mb-6 text-lg">
Start spending more time on your own table.
</p>
<div className='font-bold'>
<div className="mb-4">
<button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg">
<span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span>
Sign Up with Google
</button>
</div>
export function Signup() {
return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
<h1 className="text-4xl font-semibold mb-6">Create your account</h1>
<p className="text-gray-700 mb-6 text-lg">Start spending more time on your own table.</p>
<div className="font-bold">
<div className="mb-4">
<button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg">
<span className="mr-3">
<FontAwesomeIcon icon={faGoogle} />
</span>
Sign Up with Google
</button>
</div>
<div className="mb-4">
<button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg">
<span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span>
Sign Up with Github
</button>
</div>
<div className="mb-4">
<button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg">
<span className="mr-3">
<FontAwesomeIcon icon={faGithub} />
</span>
Sign Up with Github
</button>
</div>
<div>
<button className="bg-green-500 text-white px-14 py-3 rounded-lg">
Sign Up with your email.
</button>
</div>
</div>
</div>
<div>
<button className="bg-green-500 text-white px-14 py-3 rounded-lg">Sign Up with your email.</button>
</div>
</div>
);
</div>
</div>
);
}
export default Signup;

47
frontend/src/components/testAuth.jsx
View File

@ -1,47 +0,0 @@
import React, { useState, useEffect } from "react";
import axiosapi from "../api/AuthenticationApi";
import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
function TestAuth() {
let Navigate = useNavigate();
const [message, setMessage] = useState("");
useEffect(() => {
// Fetch the "hello" data from the server when the component mounts
axiosapi
.getGreeting()
.then(res => {
console.log(res.data);
setMessage(res.data.user);
})
.catch(err => {
console.log(err);
setMessage("");
});
}, []);
const logout = () => {
// Log out the user, clear tokens, and navigate to the "/testAuth" route
axiosapi.apiUserLogout();
Navigate("/testAuth");
};
return (
<div>
{message !== "" && (
<div>
<h1 class="text-xl font-bold">Login! Hello!</h1>
<h2>{message}</h2>
<Button variant="contained" onClick={logout}>
Logout
</Button>
</div>
)}
{message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
</div>
);
}
export default TestAuth;

29
frontend/src/contexts/AuthContextProvider.jsx Normal file
View File

@ -0,0 +1,29 @@
import { useEffect } from "react";
import PropTypes from "prop-types";
import { createContext, useState } from "react";
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
const accessToken = localStorage.getItem("access_token");
if (accessToken) {
setIsAuthenticated(true);
}
}, []);
const contextValue = {
isAuthenticated,
setIsAuthenticated,
};
return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
};
AuthProvider.propTypes = {
children: PropTypes.node.isRequired,
};
export default AuthContext;

36
frontend/src/hooks/AuthHooks.jsx Normal file
View File

@ -0,0 +1,36 @@
import { useContext } from "react";
import AuthContext from "src/contexts/AuthContextProvider";
/**
* useAuth - Custom React Hook for Accessing Authentication Context
*
* @returns {Object} An object containing:
* - {boolean} isAuthenticated: A boolean indicating whether the user is authenticated.
* - {function} setIsAuthenticated: A function to set the authentication status manually.
*
* @throws {Error} If used outside the context of an AuthProvider.
*
* @example
* // Import the hook
* import useAuth from './AuthHooks';
*
* // Inside a functional component
* const { isAuthenticated, setIsAuthenticated } = useAuth();
*
* // Check authentication status
* if (isAuthenticated) {
* // User is authenticated
* } else {
* // User is not authenticated
* }
*
* // Manually set authentication status
* setIsAuthenticated(true);
*/
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
};

39
frontend/src/hooks/authentication/IsAuthenticated.jsx
View File

@ -1,39 +0,0 @@
import React, { createContext, useContext, useState, useEffect } from "react";
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(() => {
const access_token = localStorage.getItem("access_token");
return !!access_token;
});
useEffect(() => {
const handleTokenChange = () => {
const newAccessToken = localStorage.getItem("access_token");
setIsAuthenticated(!!newAccessToken);
};
handleTokenChange();
window.addEventListener("storage", handleTokenChange);
return () => {
window.removeEventListener("storage", handleTokenChange);
};
}, []);
return (
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
};

6
frontend/src/main.jsx
View File

@ -1,9 +1,9 @@
import React, { Fragment } from "react";
import { Fragment } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "./hooks/authentication/IsAuthenticated";
import { AuthProvider } from "./contexts/AuthContextProvider";
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
@ -12,7 +12,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
<BrowserRouter>
<Fragment>
<AuthProvider>
<App />
<App />
</AuthProvider>
</Fragment>
</BrowserRouter>

17
frontend/tailwind.config.js
View File

@ -3,17 +3,14 @@
const defaultTheme = require("tailwindcss/defaultTheme");
export default {
content: [
"./src/**/*.{js,jsx}",
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
],
content: ["./src/**/*.{js,jsx}", "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
},
colors:{
colors: {
tremor: {
brand: {
faint: "#eff6ff", // blue-50
@ -42,10 +39,9 @@ export default {
strong: "#111827", // gray-900
inverted: "#ffffff", // white
},
},
},
boxShadow:{
boxShadow: {
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
@ -92,12 +88,7 @@ export default {
/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
],
plugins: [
require("daisyui"),
require("@tailwindcss/typography"),
require("daisyui"),
require("@headlessui/tailwindcss"),
],
plugins: [require("daisyui"), require("@tailwindcss/typography"), require("@headlessui/tailwindcss")],
daisyui: {
themes: ["light", "night"],
},

15
frontend/vite.config.js
View File

@ -1,7 +1,14 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
resolve: {
alias: {
src: "/src",
},
},
define: {
__APP_ENV__: process.env.VITE_VERCEL_ENV,
},
});