21 | 
22 |
23 | ) : (
24 |
29 | {user.full_name.substring(0, 1)}
30 |
31 | );
32 |
33 | ProfilePic.defaultProps = {
34 | large: false,
35 | };
36 |
37 | export default ProfilePic;
38 |
--------------------------------------------------------------------------------
/backend/users/serializers.py:
--------------------------------------------------------------------------------
1 | from rest_framework import serializers
2 | from .models import User
3 |
4 | class UserSerializer(serializers.ModelSerializer):
5 | class Meta:
6 | model = User
7 | fields = ('username', 'email', 'first_name', 'last_name', 'full_name', 'profile_pic', 'password')
8 | read_only_fields = ('full_name',)
9 | extra_kwargs = {'password': {'write_only': True},
10 | 'first_name': {'write_only': True},
11 | 'last_name': {'write_only': True}}
12 |
13 |
14 | def create(self, validated_data):
15 | user = User.objects.create(
16 | username = validated_data['username'],
17 | email = validated_data['email'],
18 | first_name = validated_data['first_name'],
19 | last_name = validated_data['last_name']
20 | )
21 |
22 | if 'profile_pic' in validated_data:
23 | user.profile_pic = validated_data['profile_pic']
24 |
25 | user.set_password(validated_data['password'])
26 | user.save()
27 |
28 | return user
--------------------------------------------------------------------------------
/backend/users/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | from django.contrib.auth.admin import UserAdmin as DjangoUserAdmin
3 |
4 | from .models import User
5 |
6 |
7 | class BoardsInline(admin.TabularInline):
8 | model = User.starred_boards.through
9 | verbose_name = "Starred Board"
10 | verbose_name_plural = "Starred Boards"
11 | extra = 0
12 |
13 |
14 | class UserAdmin(DjangoUserAdmin):
15 | fieldsets = (
16 | (('Basic Info'), {'fields': ('username', 'email', 'first_name',
17 | 'last_name', 'profile_pic', 'password')}),
18 | (('Permissions'), {'fields': ('is_active', 'is_staff', 'is_superuser',
19 | 'groups', 'user_permissions')}),
20 | (('Important dates'), {'fields': ('last_login', 'date_joined')}),
21 | )
22 |
23 | add_fieldsets = (
24 | (None, {'fields': ('username', 'email', 'first_name',
25 | 'last_name', 'profile_pic', 'password1', 'password2')}),
26 | )
27 |
28 | inlines = [BoardsInline]
29 |
30 |
31 | admin.site.register(User, UserAdmin)
32 |
--------------------------------------------------------------------------------
/frontend/src/components/modals/AuthError.js:
--------------------------------------------------------------------------------
1 | import React, {useEffect} from "react";
2 | import {modalBlurHandler} from "../../static/js/util";
3 |
4 | const capitalize = (s) => {
5 | return s[0].toUpperCase() + s.slice(1).toLowerCase();
6 | };
7 |
8 | const AuthError = ({ signup, msgs, position, setErrMsgs}) => {
9 | useEffect(modalBlurHandler(setErrMsgs), [])
10 |
11 | position.position = 'fixed';
12 | return (
13 |
14 |
28 | );
29 | };
30 |
31 | export default AuthError;
32 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Vikhyat Devireddy
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/frontend/src/pages/Landing.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import useDocumentTitle from "../hooks/useDocumentTitle";
4 |
5 | import bgImage from "../static/img/bg1.jpg";
6 |
7 | const Landing = () => {
8 | useDocumentTitle("Trello");
9 | return (
10 |
15 | { signup?
19 | Error Signing up
:Error Logging in
16 | } 17 | setErrMsgs({msgs: msgs, err: false})}> 18 |-
20 | { Object.keys(msgs).map((k,v) => (
21 |
- 22 | {capitalize(k.toString())}:{" "} 23 | {capitalize(msgs[k].toString())} 24 | 25 | ))} 26 |
11 | 
12 |
26 | );
27 | };
28 |
29 | export default Landing;
30 |
--------------------------------------------------------------------------------
/frontend/src/components/boards/DraggableCard.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Draggable } from "react-beautiful-dnd";
3 | import Card from "./Card";
4 |
5 | const DraggableCard = ({ card, list, index }) => {
6 | return (
7 |
13 |
25 | 14 | Trello lets you work more collaboratively and get more done 15 |
16 |17 | Trello's boards, lists, and cards enable you to organize and 18 | prioritize your projects in a fun, flexible, and rewarding 19 | way. 20 |
21 | 22 | Sign Up For Free 23 | 24 |
10 | 
11 |
12 |
13 |
14 |
32 |
33 | -
15 |
- 16 | 17 | Tour 18 | 19 | 20 |
- 21 | 22 | Pricing 23 | 24 | 25 |
- 26 | 27 | Learn 28 | 29 | 30 |
34 |
47 | -
35 |
- 36 | 37 | Login 38 | 39 | 40 |
- 41 | 42 | Sign Up 43 | 44 | 45 |
14 | 
15 |
34 | );
35 | };
36 |
37 | export default Error404;
38 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_landing.scss:
--------------------------------------------------------------------------------
1 | .landing-header {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | right: 0;
6 | z-index: 2;
7 | display: flex;
8 | align-items: center;
9 | justify-content: space-between;
10 | color: white;
11 | background: transparent;
12 |
13 | a {
14 | color: white;
15 | }
16 |
17 | &__logo {
18 | object-fit:cover;
19 | height: 35px;
20 | width: 114px;
21 | }
22 |
23 | &__section {
24 | margin: 1em 0;
25 |
26 | &:first-of-type {
27 | margin-left: 2em;
28 | }
29 |
30 | &:last-of-type {
31 | margin-right: 2em;
32 | }
33 | }
34 |
35 | &__list {
36 | display: flex;
37 | align-items: center;
38 | }
39 |
40 | &__li {
41 | margin: 0 0.75em;
42 |
43 | &:first-of-type {
44 | margin-left: 0;
45 | }
46 |
47 | &:last-of-type {
48 | margin-right: 0;
49 | }
50 | }
51 | }
52 |
53 | .landing-banner {
54 | position: relative; // So we can postion children absolutely
55 |
56 | &__image {
57 | object-fit: cover;
58 | width: 100vw;
59 | height: 100vh;
60 | filter: brightness(80%);
61 | }
62 |
63 | &__content {
64 | color: white;
65 | position:absolute;
66 | top:50%;
67 | left:50%;
68 | transform:translate(-50%, -50%);
69 | text-align: center;
70 | }
71 |
72 | &__title {
73 | font-size: 3rem;
74 | font-weight: 700;
75 | margin-bottom: 0.5em;
76 | }
77 |
78 | &__subtitle {
79 | width: 70%;
80 | margin: 0 auto 2em;
81 | }
82 | }
--------------------------------------------------------------------------------
/backend/boards/migrations/0006_auto_20201019_1644_squashed_0007_auto_20201019_1644.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 3.1.2 on 2020-10-19 16:44
2 |
3 | from django.conf import settings
4 | from django.db import migrations, models
5 | import django.db.models.deletion
6 |
7 |
8 | class Migration(migrations.Migration):
9 |
10 | replaces = [('boards', '0006_auto_20201019_1644'), ('boards', '0007_auto_20201019_1644')]
11 |
12 | dependencies = [
13 | migrations.swappable_dependency(settings.AUTH_USER_MODEL),
14 | ('boards', '0005_notification_squashed_0007_auto_20201014_0724'),
15 | ]
16 |
17 | operations = [
18 | migrations.AddField(
19 | model_name='notification',
20 | name='recipient',
21 | field=models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, related_name='notifications', to='users.user'),
22 | preserve_default=False,
23 | ),
24 | migrations.AlterField(
25 | model_name='board',
26 | name='description',
27 | field=models.TextField(),
28 | ),
29 | migrations.AlterField(
30 | model_name='board',
31 | name='owner_id',
32 | field=models.PositiveIntegerField(default=1),
33 | preserve_default=False,
34 | ),
35 | migrations.AlterField(
36 | model_name='board',
37 | name='description',
38 | field=models.TextField(blank=True),
39 | ),
40 | ]
41 |
--------------------------------------------------------------------------------
/backend/boards/signals.py:
--------------------------------------------------------------------------------
1 | from django.contrib.contenttypes.models import ContentType
2 | from django.db.models.signals import post_delete, post_save
3 | from django.dispatch import receiver
4 |
5 | from . import models
6 |
7 |
8 | label_colors = ["4680ff", "61bd4f", "ffab4a", "ff0000",
9 | "ffb64d", "c377e0", "ff80ce", "00c2e0", "51e898", "42548e"]
10 |
11 |
12 | @receiver(post_save, sender=models.Board)
13 | def create_board_labels(sender, instance, created, **kwargs):
14 | if created:
15 | for color in label_colors:
16 | models.Label.objects.create(board=instance, color=color)
17 |
18 |
19 | @receiver(post_save, sender=models.Comment)
20 | def create_comment_notification(sender, instance, created, **kwargs):
21 | if created:
22 | for user in instance.item.assigned_to.all():
23 | if instance.author == user: # Don't create notification if you comment
24 | continue
25 | models.Notification.objects.create(
26 | actor=instance.author, recipient=user,
27 | verb='commented', action_object=instance, target=instance.item)
28 |
29 |
30 | @receiver(post_delete, sender=models.Comment)
31 | def delete_comment_notification(sender, instance, **kwargs):
32 | models.Notification.objects.filter(
33 | action_object_model=ContentType.objects.get(model='comment'),
34 | action_object_id=instance.id).delete()
35 |
36 | # Handle other notifications in views as we need to know request.user
37 |
--------------------------------------------------------------------------------
/backend/projects/migrations/0004_auto_20200920_1853_squashed_0006_project_members.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 3.1.1 on 2020-09-21 12:17
2 |
3 | from django.conf import settings
4 | from django.db import migrations, models
5 | import django.db.models.deletion
6 |
7 |
8 | class Migration(migrations.Migration):
9 |
10 | replaces = [('projects', '0004_auto_20200920_1853'), ('projects', '0005_auto_20200921_1210'), ('projects', '0006_project_members')]
11 |
12 | dependencies = [
13 | migrations.swappable_dependency(settings.AUTH_USER_MODEL),
14 | ('projects', '0003_auto_20200920_1512'),
15 | ]
16 |
17 | operations = [
18 | migrations.AlterField(
19 | model_name='projectmembership',
20 | name='member',
21 | field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='memberships', to=settings.AUTH_USER_MODEL),
22 | ),
23 | migrations.AlterField(
24 | model_name='projectmembership',
25 | name='project',
26 | field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='memberships', to='projects.project'),
27 | ),
28 | migrations.AlterUniqueTogether(
29 | name='projectmembership',
30 | unique_together={('project', 'member')},
31 | ),
32 | migrations.AddField(
33 | model_name='project',
34 | name='members',
35 | field=models.ManyToManyField(through='projects.ProjectMembership', to=settings.AUTH_USER_MODEL),
36 | ),
37 | ]
38 |
--------------------------------------------------------------------------------
/frontend/src/components/modals/SearchModal.js:
--------------------------------------------------------------------------------
1 | import React, {useEffect} from 'react';
2 | import { v4 as uuidv4 } from 'uuid';
3 | import {modalBlurHandler} from '../../static/js/util';
4 | import useAxiosGet from '../../hooks/useAxiosGet'
5 |
6 | import Card from '../boards/Card';
7 | import SearchedBoard from '../boards/SearchedBoard';
8 |
9 | const getSearchSuggestionsPosition = (searchElem) => {
10 | if (!searchElem) return null;
11 | return {
12 | top: searchElem.getBoundingClientRect().y + searchElem.getBoundingClientRect().height + 10 + "px",
13 | left : searchElem.getBoundingClientRect().x + "px"
14 | }
15 | }
16 |
17 | const SearchModal = ({backendQuery, searchElem, setShowModal}) => {
18 | const {data:cards} = useAxiosGet(`/boards/items/?q=${backendQuery}`);
19 | const {data:boards} = useAxiosGet(`/boards/?q=${backendQuery}`);
20 |
21 | useEffect(modalBlurHandler(setShowModal), []);
22 |
23 | return (
24 |
16 |
33 | 17 | You look a little lost there 18 |
19 |20 | {!authUser ? ( 21 | <> 22 | This page may be private. You may be able to view it 23 | by{" "} 24 | 25 | logging in 26 | 27 | 28 | ) : ( 29 | "This page cannot be found" 30 | )} 31 |
32 |
25 |
39 | );
40 | }
41 |
42 | export default SearchModal;
--------------------------------------------------------------------------------
/backend/projects/models.py:
--------------------------------------------------------------------------------
1 | from boards.models import Board
2 | from django.contrib.contenttypes.fields import GenericRelation
3 | from django.db import models
4 | from django.utils import timezone
5 | from users.models import User
6 |
7 |
8 | class Project(models.Model):
9 | owner = models.ForeignKey(
10 | User, on_delete=models.CASCADE, related_name='owned_projects')
11 | title = models.CharField(max_length=255, blank=False, null=False)
12 | description = models.TextField(blank=True, null=False)
13 | created_at = models.DateTimeField(default=timezone.now)
14 | members = models.ManyToManyField(
15 | User, through='ProjectMembership', through_fields=('project', 'member'))
16 |
17 | boards = GenericRelation(
18 | Board, object_id_field='owner_id', content_type_field='owner_model')
19 |
20 | def __str__(self):
21 | return self.title
22 |
23 |
24 | class ProjectMembership(models.Model):
25 | class Access(models.IntegerChoices):
26 | MEMBER = 1 # Can view and create and move only own items
27 | ADMIN = 2 # Can remove members and modify project settings.
28 |
29 | project = models.ForeignKey(
30 | Project, on_delete=models.CASCADE)
31 | member = models.ForeignKey(
32 | User, on_delete=models.CASCADE)
33 | access_level = models.IntegerField(choices=Access.choices, default=1)
34 | created_at = models.DateTimeField(default=timezone.now)
35 |
36 | def __str__(self):
37 | return f'{self.member.full_name} , {self.project.title}'
38 |
39 | class Meta:
40 | unique_together = ('project', 'member')
41 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_notification.scss:
--------------------------------------------------------------------------------
1 | .notification {
2 | margin-bottom: 0.5em;
3 | font-weight: 400; // To override label-modal font-weight
4 | border-bottom: 1px solid $border-color;
5 | padding: 1em;
6 | padding-bottom: 1.75em;
7 |
8 | &:last-of-type {
9 | border: 0;
10 | padding-bottom: 1em;
11 | }
12 |
13 | &__card {
14 | border: 1px solid $border-color;
15 | border-radius: 5px;
16 | padding: 0.5em;
17 | margin-bottom: 0.875em;
18 | }
19 |
20 | &__header {
21 | display: flex;
22 | align-items: center;
23 | }
24 |
25 | &__name {
26 | font-weight: 500;
27 | margin-left: 0.5em;
28 | }
29 |
30 | &__subtitle {
31 | font-size: 0.875rem;
32 | font-weight: 300;
33 | color: $secondary-text;
34 | margin-left: 0.5em;
35 | }
36 |
37 | &__text {
38 | margin-top: 0.875em;
39 | line-height: 1.2;
40 | i {
41 | margin-right: 0.5em;
42 | }
43 | }
44 |
45 | &__none {
46 | height: 100px;
47 | }
48 | }
49 |
50 | .label-modal__filter {
51 | display: flex;
52 | justify-content: space-between;
53 | font-weight: 400;
54 | font-size: 0.875rem;
55 | color: $blue;
56 | margin-bottom: 0.875em;
57 |
58 | button {
59 | width: fit-content !important;
60 | }
61 | }
62 |
63 | .label-modal__no-notif {
64 | height: 250px;
65 | display: flex;
66 | flex-direction: column;
67 | justify-content: center;
68 | align-items: center;
69 |
70 | img {
71 | margin-bottom: 2em;
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/backend/projects/serializers.py:
--------------------------------------------------------------------------------
1 | from projects.models import Project, ProjectMembership
2 | from users.models import User
3 | from users.serializers import UserSerializer
4 | from rest_framework import serializers
5 |
6 |
7 | class ProjectMembershipSerializer(serializers.ModelSerializer):
8 | full_name = serializers.CharField(
9 | source='member.full_name', read_only=True)
10 | username = serializers.CharField(source='member.username', read_only=True)
11 | email = serializers.CharField(source='member.email', read_only=True)
12 | profile_pic = serializers.SerializerMethodField()
13 |
14 | def get_profile_pic(self, obj):
15 | if obj.member.profile_pic:
16 | return self.context['request'].build_absolute_uri(obj.member.profile_pic.url)
17 | return None
18 |
19 | class Meta:
20 | model = ProjectMembership
21 | fields = ['id', 'full_name', 'username',
22 | 'email', 'profile_pic', 'access_level']
23 |
24 |
25 | class ProjectSerializer(serializers.ModelSerializer):
26 | owner = UserSerializer(read_only=True)
27 | members = serializers.SerializerMethodField()
28 |
29 | def get_members(self, obj):
30 | queryset = ProjectMembership.objects.filter(project=obj)
31 | return ProjectMembershipSerializer(queryset, many=True, context={"request": self.context['request']}).data
32 |
33 | class Meta:
34 | model = Project
35 | fields = [
36 | 'id',
37 | 'owner',
38 | 'title',
39 | 'description',
40 | 'members'
41 | ]
42 | read_only_fields = ['owner']
43 |
44 |
45 | class ShortProjectSerializer(serializers.ModelSerializer):
46 | class Meta:
47 | model = Project
48 | fields = ['id', 'title']
49 |
--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
16 |
17 |
26 | Cards
26 |-
27 | {([]).map(card => (
28 |
Boards
33 |-
34 | {(boards || []).map(board => (
35 |
30 |
53 |
54 | );
55 | };
56 |
57 | export default LoginForm;
--------------------------------------------------------------------------------
/frontend/src/components/sidebars/HomeSidebar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import { v4 as uuidv4 } from "uuid";
4 |
5 | const HomeSidebar = ({ setShowTeamModal, projects }) => {
6 | return (
7 |
8 |
48 | );
49 | };
50 |
51 | export default HomeSidebar;
52 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_search.scss:
--------------------------------------------------------------------------------
1 | .search-suggestions {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | width: 650px;
6 | z-index: 4;
7 | border-radius: 5px;
8 | background: white;
9 | padding: 2em;
10 |
11 | &__title {
12 | font-weight: 500;
13 | font-size: 1.25rem;
14 | margin-bottom: 0.8em;
15 | }
16 |
17 | &__cards {
18 | margin-bottom: 2em;
19 |
20 | > li {
21 | margin-bottom: 1em;
22 | }
23 |
24 | .card {
25 | display: flex;
26 | width: 100%;
27 | padding-bottom: 0;
28 |
29 | &__image {
30 | flex: 3;
31 | margin: 0;
32 | margin-left: -0.75em;
33 | margin-top: -0.75em;
34 |
35 | img {
36 | border-radius: 5px 0 0 5px;
37 | width: 100%;
38 | height: 100%;
39 | object-fit: cover;
40 | max-height: 125px;
41 | }
42 | }
43 |
44 | > div:last-of-type {
45 | flex: 4;
46 | border: 0;
47 | margin-left: 1em;
48 |
49 | .card__members {
50 | position: absolute;
51 | margin-top: 0;
52 | bottom: 0.75em;
53 | right: 0.75em;
54 | }
55 | }
56 | }
57 | }
58 |
59 | &__boards {
60 | display: flex;
61 | justify-content: space-between;
62 |
63 | li {
64 | width: 48%;
65 | }
66 | }
67 | }
68 |
69 | .searched-board {
70 | border: 1px rgba($border-color, 0.55) solid;
71 | border-radius: 5px;
72 | padding: 0.75em;
73 | background: white;
74 | width: 47%;
75 | color: black;
76 |
77 | &:hover {
78 | background: darken(white, 2%);
79 | }
80 |
81 | &__subtitle {
82 | margin-top: 0.75em;
83 | font-weight: 300;
84 | font-size: 0.875rem;
85 | color: $secondary-text;
86 | display: flex;
87 |
88 | p {
89 | padding: 0 0.75em;
90 | &:first-of-type {
91 | padding-left: 0;
92 | border-right: 1px $border-color solid;
93 | }
94 | }
95 | }
96 |
97 | &--red {
98 | border-top: 3px $red solid;
99 | }
100 |
101 | &--blue {
102 | border-top: 3px $blue solid;
103 | }
104 |
105 | &--yellow {
106 | border-top: 3px $yellow solid;
107 | }
108 | }
--------------------------------------------------------------------------------
/frontend/src/pages/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import LoginForm from "../components/auth/LoginForm";
3 | import RegisterForm from "../components/auth/RegisterForm";
4 | import AuthError from "../components/modals/AuthError";
5 | import logo from "../static/img/logo2.png";
6 | import bg from "../static/img/slideshow-1.jpg";
7 | import useDocumentTitle from "../hooks/useDocumentTitle";
8 |
9 | const Login = ({ login }) => {
10 | useDocumentTitle(login ? "Login | Trello" : "Sign Up | Trello");
11 | const [errmsgs, setErrMsgs] = useState({ msgs: {}, err: false });
12 | return (
13 | <>
14 |
15 | {errmsgs.err ? (
16 | -
9 |
- 10 | 11 | Boards 12 | 13 | 14 |
- 15 | 16 | Templates 17 | 18 | 19 |
- 20 | 21 | Feed 22 | 23 | 24 |
27 |
34 | Projects
28 | 29 | 32 | 33 |-
35 |
- 36 | {projects.map((project) => ( 37 | 42 | {project.title} 43 | 44 | ))} 45 | 46 |
24 |
37 |
25 |
30 |
31 | {login ? (
32 |
38 |
46 |
47 | );
48 | };
49 |
50 | Login.defaultProps = {
51 | login: true,
52 | };
53 |
54 | export default Login;
55 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useAxiosGet.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { authAxios } from "../static/js/util";
3 | import { backendUrl } from "../static/js/const";
4 | import axios from "axios";
5 |
6 | const useAxiosGet = (url, onSite = true) => {
7 | const [data, setData] = useState(null);
8 | const [error, setError] = useState(false);
9 | const [errorMessage, setErrorMessage] = useState(null);
10 | const [loading, setLoading] = useState(true);
11 |
12 | useEffect(() => {
13 | let unmounted = false;
14 | const fetchData = async () => {
15 | const axiosUsed = onSite ? authAxios : axios;
16 | url = onSite ? backendUrl + url : url;
17 |
18 | try {
19 | const res = await axiosUsed.get(url);
20 | if (!unmounted) {
21 | setData(res.data);
22 | setLoading(false);
23 | }
24 | } catch (error) {
25 | if (!unmounted) {
26 | setError(true);
27 | setErrorMessage(error.message);
28 | setLoading(false);
29 | }
30 | }
31 | };
32 | fetchData();
33 | return () => {
34 | unmounted = true;
35 | };
36 | }, [url]);
37 |
38 | // Below three functions are only if data is an array
39 | const addItem = (item) => {
40 | setData((prevData) => [...prevData, item]);
41 | };
42 |
43 | const replaceItem = (newItem, key = "id") => {
44 | setData((prevData) =>
45 | prevData.map((item) => {
46 | if (item[key] === newItem[key]) return newItem;
47 | return item;
48 | })
49 | );
50 | };
51 |
52 | const removeItem = (id) => {
53 | setData((prevData) => prevData.filter((item) => item.id !== id));
54 | };
55 |
56 | return {
57 | data,
58 | setData,
59 | loading,
60 | error,
61 | errorMessage,
62 | addItem,
63 | replaceItem,
64 | removeItem,
65 | };
66 | };
67 |
68 | export default useAxiosGet;
69 |
--------------------------------------------------------------------------------
/frontend/src/context/GlobalProvider.js:
--------------------------------------------------------------------------------
1 | import React, { useReducer } from "react";
2 | import { useHistory } from "react-router-dom";
3 |
4 | import { backendUrl } from "../static/js/const";
5 | import { authAxios } from "../static/js/util";
6 | import globalContext from "./globalContext";
7 | import {
8 | globalReducer,
9 | LOGIN,
10 | LOGOUT,
11 | SET_BOARD_CONTEXT,
12 | } from "./globalReducer";
13 |
14 | const GlobalProvider = (props) => {
15 | const history = useHistory();
16 | const [globalState, dispatch] = useReducer(globalReducer, {
17 | authUser: null,
18 | checkedAuth: false,
19 | board: null,
20 | setBoard: null,
21 | });
22 |
23 | const login = async (resData) => {
24 | localStorage.setItem("accessToken", resData.access);
25 | localStorage.setItem("refreshToken", resData.refresh);
26 | const url = backendUrl + "/me/";
27 |
28 | // No try catch block so error bubbles up to LoginForm.js to be handled there
29 | const { data: user } = await authAxios.get(url);
30 | dispatch({ type: LOGIN, user });
31 | history.push("/");
32 | };
33 |
34 | const checkAuth = async () => {
35 | const url = backendUrl + "/me/";
36 | try {
37 | const { data: user } = await authAxios.get(url);
38 | dispatch({ type: LOGIN, user });
39 | } catch (err) {
40 | dispatch({ type: LOGOUT });
41 | }
42 | };
43 |
44 | const logout = () => {
45 | dispatch({ type: LOGOUT });
46 | history.push("/login");
47 | };
48 |
49 | const setBoardContext = (board, setBoard) => {
50 | dispatch({ type: SET_BOARD_CONTEXT, board, setBoard });
51 | };
52 |
53 | return (
54 |
39 |
40 |
41 |
42 |
45 | Plan your tasks
43 |Plan out your tasks and vacations using trello
44 |
42 | 
43 |
44 | )}
45 | 49 | {board.title} 50 |
51 | {board.members &&
59 | {members.slice(0, 3).map((member) => (
60 |
68 | );
69 | };
70 |
71 | export default HomeBoard;
72 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_createteam.scss:
--------------------------------------------------------------------------------
1 | .create-team {
2 | z-index: 4;
3 | background-color: white;
4 | border-radius: 5px;
5 | position: fixed;
6 | top: 50%;
7 | left: 50%;
8 | transform: translate(-50%, -50%);
9 | width: 925px;
10 |
11 | display: flex;
12 |
13 | &__form {
14 | flex: 1;
15 | padding: 3em 0 3em 3em;
16 |
17 | label {
18 | display: block;
19 | font-size: 0.75rem;
20 | font-weight: 500;
21 | margin-bottom: 0.3em;
22 | }
23 |
24 | input {
25 | padding: 0.5em;
26 | width: 80%;
27 | margin-bottom: 1.4em;
28 | border: 1px darken($border-color, 40%) solid;
29 |
30 | &:focus {
31 | border: 1px $blue solid;
32 | }
33 | }
34 |
35 | textarea {
36 | padding: 0.5em;
37 | width: 80%;
38 | height: 100px;
39 | resize: none;
40 | border: 1px darken($border-color, 40%) solid;
41 | margin-bottom: 1.4em;
42 |
43 | &:focus {
44 | border: 1px $blue solid;
45 | }
46 | }
47 |
48 | .btn {
49 | display: block;
50 | width: 80%;
51 | text-align: center;
52 | }
53 | }
54 |
55 | &__title {
56 | font-weight: 600;
57 | font-size: 1.5rem;
58 | margin-bottom: 0.75em;
59 | }
60 |
61 | &__subtitle {
62 | color: $secondary-text;
63 | margin-bottom: 1.5em;
64 | }
65 |
66 | &__bg {
67 | flex: 1;
68 | background-image: url("../img/teambg.svg");
69 | background-repeat: no-repeat;
70 | background-size: 100% 100%;
71 | background-position: right;
72 |
73 | position: relative;
74 | overflow: hidden;
75 |
76 | .fal {
77 | position: absolute;
78 | top: 20px;
79 | right: 20px;
80 | font-size: 1.25rem;
81 | }
82 | }
83 |
84 | &__img {
85 | margin: 0 auto;
86 | margin-top: 70px;
87 | }
88 |
89 | &__face {
90 | position: absolute;
91 | transition: all 100ms ease;
92 | height: 70px;
93 | width: 70px;
94 |
95 | &--1 {
96 | left: -100px;
97 | top: 460px;
98 | //Animate to
99 | //left: 60px;
100 | //top: 230px;
101 | }
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/backend/users/migrations/0001_initial.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 3.1.1 on 2020-09-20 12:50
2 |
3 | from django.db import migrations, models
4 | import django.utils.timezone
5 | import users.models
6 |
7 |
8 | class Migration(migrations.Migration):
9 |
10 | initial = True
11 |
12 | dependencies = [
13 | ('auth', '0012_alter_user_first_name_max_length'),
14 | ]
15 |
16 | operations = [
17 | migrations.CreateModel(
18 | name='User',
19 | fields=[
20 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
21 | ('password', models.CharField(max_length=128, verbose_name='password')),
22 | ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
23 | ('is_superuser', models.BooleanField(default=False, help_text='Designates that this user has all permissions without explicitly assigning them.', verbose_name='superuser status')),
24 | ('is_staff', models.BooleanField(default=False, help_text='Designates whether the user can log into this admin site.', verbose_name='staff status')),
25 | ('is_active', models.BooleanField(default=True, help_text='Designates whether this user should be treated as active. Unselect this instead of deleting accounts.', verbose_name='active')),
26 | ('date_joined', models.DateTimeField(default=django.utils.timezone.now, verbose_name='date joined')),
27 | ('username', models.CharField(max_length=15, unique=True)),
28 | ('email', models.EmailField(max_length=255, unique=True)),
29 | ('first_name', models.CharField(max_length=255)),
30 | ('last_name', models.CharField(max_length=255)),
31 | ('profile_pic', models.ImageField(blank=True, upload_to='profile_pics')),
32 | ('groups', models.ManyToManyField(blank=True, help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.', related_name='user_set', related_query_name='user', to='auth.Group', verbose_name='groups')),
33 | ('user_permissions', models.ManyToManyField(blank=True, help_text='Specific permissions for this user.', related_name='user_set', related_query_name='user', to='auth.Permission', verbose_name='user permissions')),
34 | ],
35 | options={
36 | 'verbose_name': 'user',
37 | 'verbose_name_plural': 'users',
38 | 'abstract': False,
39 | },
40 | managers=[
41 | ('objects', users.models.CustomUserManager()),
42 | ],
43 | ),
44 | ]
45 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_login.scss:
--------------------------------------------------------------------------------
1 | .slideshow {
2 | position: absolute;
3 | z-index: 1;
4 | position: fixed;
5 | left: 500px;
6 | height: 100%;
7 | width: 100%;
8 |
9 | &__img {
10 | object-fit: contain;
11 | height: auto;
12 | max-width: 100%;
13 | }
14 | }
15 |
16 | .splash-text {
17 | font-size: large;
18 | position: absolute;
19 | z-index: 2;
20 | color: white;
21 | bottom: 100px;
22 | left: 100px;
23 |
24 | &__h1 {
25 | font-size: 3.4rem;
26 | font-weight: 600;
27 | line-height: 5rem;
28 | }
29 | }
30 |
31 | .sidebar{
32 | position: fixed;
33 | width: 500px;
34 | height: 100%;
35 | overflow-x: hidden;
36 | overflow-y: auto;
37 | background: white;
38 | display: flex;
39 | flex-direction: column;
40 |
41 | &--left {
42 | left: 0;
43 | }
44 |
45 | &--right {
46 | right: 0;
47 | }
48 |
49 | &-logo {
50 | &__img{
51 | width: 7em;
52 | position: relative;
53 | margin: 12% 12%;
54 | left: 2em;
55 | }
56 | }
57 | }
58 |
59 | .sidebar-input {
60 | padding: 0.5em;
61 | margin: 0.5em auto;
62 | height: 3em;
63 | width: 80%;
64 | z-index: 1;
65 | font-size: 1rem;
66 | }
67 |
68 | .login {
69 | position: relative;
70 | width: 100%;
71 | margin: 8% auto;
72 |
73 | &-fieldset {
74 | display: flex;
75 | flex-direction: column;
76 | width: 81%;
77 | margin: auto;
78 | text-align: center;
79 |
80 | &__submit:hover{
81 | transform: scale(0.9);
82 | cursor: pointer;
83 | }
84 |
85 | &__submit {
86 | text-align: center;
87 | }
88 |
89 | > .btn {
90 | margin-top: 1.5em;
91 | margin-left: auto;
92 | margin-right: 10%;
93 | width: fit-content;
94 | }
95 | }
96 | }
97 |
98 | .border {
99 | &--gray{
100 | border: rgba($border-color, 0.7);
101 | border-style: solid;
102 | border-width: 1px;
103 | border-radius: 5px;
104 | }
105 |
106 | &--onHoverBlue:hover{
107 | border: $blue;
108 | border-style: solid;
109 | border-width: 1px;
110 | }
111 | }
112 |
113 | .buttons {
114 | display: flex;
115 | flex-direction: row;
116 | justify-items: space-evenly;
117 | margin-left: 10%;
118 | margin-right: 10%;
119 | margin-top: 15px;
120 | > .btn {
121 | flex: 1;
122 | }
123 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # trello-clone
2 | A Trello clone made using Django Rest Framework, SASS, React, and Redis.
3 |
4 | ## Features
5 | - Register and Login
6 | - JWT Authentication to connect DRF and React
7 | - Can login with username or email
8 | - Projects (Teams)
9 | - Create Projects
10 | - Invite members to join projects via one time link
11 | - Change member access level - Admin or Normal
12 | - Admin can edit project details, invite new members, and change other members' access levels.
13 | - Boards
14 | - Create personal boards or project boards
15 | - Recently Viewed Boards
16 | - Starred Boards
17 | - Create and reorder lists
18 | - Create, reorder, and change list of cards
19 | - Add labels to cards
20 | - Assign members to cards
21 | - Add attachments to cards
22 | - Add comments to cards
23 | - Search
24 | - Autocomplete (Debounced)
25 | - Unsplash API Integration
26 | - Set environment variable REACT_APP_UNSPLASH_API_ACCESS_KEY with access key
27 | - Automatically adapt header and board title styling based on brightness of board background
28 | - Notifications
29 | - When someone assigns you to a card
30 | - When someone comments on a card you're assigned to
31 | - When you're invited to a project
32 | - When someone makes you admin of a project
33 |
34 | ## Getting Started
35 | 1. Install [Python](https://www.python.org/downloads/), [Yarn](https://classic.yarnpkg.com/en/docs/install/), [Redis](https://redis.io/download).
36 | 2. Clone the repo
37 | ```
38 | $ git clone https://github.com/vdevired/trello-clone.git
39 | $ cd trello-clone
40 | ```
41 | 3. Install [pipenv](https://pypi.org/project/pipenv/), a python virtual environment manager. Install backend dependencies and run migrations to create database. Default database is SQLite.
42 | ```
43 | $ cd backend
44 | $ pipenv install
45 | $ pipenv run python manage.py migrate
46 | ```
47 | 4. Install frontend dependencies.
48 | ```
49 | $ cd frontend
50 | $ yarn install
51 | ```
52 | 5. Run redis on port 6380
53 | ```
54 | $ redis-server --port 6380
55 | ```
56 | 6. Run both frontend and backend servers with following commands in appropriate directories.
57 | ```
58 | $ pipenv run python manage.py runserver
59 | $ yarn start
60 | ```
61 |
62 | ## Screenshots
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 
72 |
73 | Design Inspiration: https://www.behance.net/gallery/47031411/Trello-Atlassian-Redesign
--------------------------------------------------------------------------------
/frontend/src/components/modals/InviteMembersModal.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { backendUrl } from "../../static/js/const";
3 | import { authAxios } from "../../static/js/util";
4 |
5 | const getInviteMembersPosition = () => {
6 | const inviteElem = document.querySelector(".team__members-header button");
7 | if (!inviteElem) return null;
8 | return {
9 | top:
10 | inviteElem.getBoundingClientRect().y +
11 | inviteElem.getBoundingClientRect().height +
12 | 10 +
13 | "px",
14 | left: inviteElem.getBoundingClientRect().x + "px",
15 | };
16 | };
17 |
18 | const InviteMembersModal = ({ project, setShowModal }) => {
19 | const [members, setMembers] = useState("");
20 |
21 | const handleInvite = async () => {
22 | const invitedMembers =
23 | members !== ""
24 | ? members.split(",").map((user) => user.trim()) // usernames and emails
25 | : [];
26 |
27 | try {
28 | await authAxios.post(
29 | backendUrl + `/projects/${project.id}/invite/`,
30 | {
31 | users: invitedMembers,
32 | }
33 | );
34 | } catch (error) {
35 | console.log(error);
36 | }
37 | setShowModal(false);
38 | };
39 |
40 | return (
41 | {`+${members.length - 3} other${ 64 | members.length - 3 === 1 ? "" : "s" 65 | }`}
66 | )} 67 |
45 |
75 | );
76 | };
77 |
78 | export default InviteMembersModal;
79 |
--------------------------------------------------------------------------------
/backend/boards/tests/test_models.py:
--------------------------------------------------------------------------------
1 | from ..models import Label
2 | import pytest
3 | from mixer.backend.django import mixer
4 | pytestmark = pytest.mark.django_db
5 |
6 |
7 | class TestBoard:
8 | def test_model(self):
9 | board = mixer.blend('boards.Board')
10 | assert board.pk == 1, 'Should create a Board instance'
11 |
12 | def test_str(self):
13 | board = mixer.blend('boards.Board')
14 | assert board.title == str(board), 'Should check the board name'
15 |
16 | def test_labels_signal(self):
17 | board = mixer.blend('boards.Board')
18 | assert Label.objects.filter(board=board).count() == 10
19 |
20 |
21 | class TestList:
22 | def test_str(self):
23 | list = mixer.blend('boards.List')
24 | assert list.title == str(list), 'Should check the List name'
25 |
26 | def test_save(self):
27 | board = mixer.blend('boards.Board')
28 | list1 = mixer.blend('boards.List', board=board)
29 | list2 = mixer.blend('boards.List', board=board)
30 | assert list1.order == 2 ** 16 - 1
31 | assert list1.order == list2.order - (2 ** 16 - 1)
32 | list3 = mixer.blend('boards.List', board=board)
33 | list4 = mixer.blend('boards.List', board=board)
34 | list1.delete()
35 | list5 = mixer.blend('boards.List', board=board)
36 | assert list5.order == 5 * (2 ** 16 - 1)
37 |
38 |
39 | class TestItem:
40 | def test_str(self):
41 | item = mixer.blend('boards.Item')
42 | assert item.title == str(item)
43 |
44 | def test_save(self):
45 | list = mixer.blend('boards.List')
46 | item1 = mixer.blend('boards.Item', list=list)
47 | item2 = mixer.blend('boards.Item', list=list)
48 | assert item1.order == (2 ** 16 -1)
49 | assert item1.order == item2.order - (2 ** 16 - 1)
50 | item3 = mixer.blend('boards.Item', list=list)
51 | item4 = mixer.blend('boards.Item', list=list)
52 | item1.delete()
53 | item2.delete()
54 | item5 = mixer.blend('boards.Item', list=list)
55 | assert item5.order == 5 * (2 ** 16 -1)
56 |
57 |
58 | class TestLabel:
59 | def test_model(self):
60 | board = mixer.blend('boards.Board')
61 | assert board.pk == 1, 'Should create a Label instance'
62 |
63 | def test_str(self):
64 | label = mixer.blend('boards.Label')
65 | assert label.title == str(label), 'Should check the Label name'
66 |
67 |
68 | class TestComment:
69 | def test_model(self):
70 | comment = mixer.blend('boards.Comment')
71 | assert comment.pk == 1, 'Should create a Comment instance'
72 |
73 |
74 | class TestAttachment:
75 | def test_model(self):
76 | attachment = mixer.blend('boards.Attachment')
77 | assert attachment.pk == 1, 'Should create a Attachment instance'
78 |
--------------------------------------------------------------------------------
/backend/users/models.py:
--------------------------------------------------------------------------------
1 | from django.apps import apps
2 | from django.contrib.auth.models import AbstractUser, UserManager
3 | from django.contrib.contenttypes.fields import GenericRelation
4 | from django.contrib.contenttypes.models import ContentType
5 | from django.core.validators import RegexValidator
6 | from django.db import models
7 |
8 |
9 | class CustomUserManager(UserManager):
10 | def get_by_natural_key(self, username):
11 | case_insensitive_username_field = '{}__iexact'.format(
12 | self.model.USERNAME_FIELD)
13 | return self.get(**{case_insensitive_username_field: username})
14 |
15 | def filter(self, **kwargs):
16 | if 'email' in kwargs:
17 | kwargs['email__iexact'] = kwargs['email']
18 | del kwargs['email']
19 |
20 | if 'username' in kwargs: # Get by natural key not usef while registering, filter is
21 | kwargs['username__iexact'] = kwargs['username']
22 | del kwargs['username']
23 | return super(CustomUserManager, self).filter(**kwargs)
24 |
25 | def get(self, **kwargs):
26 | if 'email' in kwargs:
27 | kwargs['email__iexact'] = kwargs['email']
28 | del kwargs['email']
29 |
30 | if 'username' in kwargs: # When we use .get() explicitly. Get by natural key used for logging in
31 | kwargs['username__iexact'] = kwargs['username']
32 | del kwargs['username']
33 | return super(CustomUserManager, self).get(**kwargs)
34 |
35 |
36 | username_validator = RegexValidator(
37 | r'^[a-zA-Z0-9_\.]*$', 'Only alphanumeric characters, underscores, and periods are allowed in your username.')
38 |
39 |
40 | class User(AbstractUser):
41 | username = models.CharField(
42 | max_length=15, blank=False, null=False, unique=True, validators=[username_validator])
43 | email = models.EmailField(
44 | max_length=255, blank=False, null=False, unique=True)
45 | first_name = models.CharField(max_length=255, blank=False, null=False)
46 | last_name = models.CharField(max_length=255, blank=False, null=False)
47 | profile_pic = models.ImageField(blank=True, upload_to='profile_pics')
48 |
49 | boards = GenericRelation(
50 | 'boards.Board', object_id_field='owner_id', content_type_field='owner_model')
51 | starred_boards = models.ManyToManyField('boards.Board', blank=True)
52 |
53 | objects = CustomUserManager()
54 |
55 | @property
56 | def full_name(self):
57 | return f'{self.first_name} {self.last_name}'
58 |
59 | def can_view_board(self, board):
60 | ProjectMembership = apps.get_model('projects', 'ProjectMembership')
61 |
62 | if board.owner_model == ContentType.objects.get(model='project'):
63 | try:
64 | pmem = ProjectMembership.objects.get(
65 | member=self, project__id=board.owner_id)
66 | except ProjectMembership.DoesNotExist:
67 | return False
68 | else:
69 | if board.owner_id != self.id:
70 | return False
71 | return True
72 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `yarn start`
8 |
9 | Runs the app in the development mode.
46 |
51 | Add Members
47 | 50 |
52 |
74 | 53 | 54 | Enter Email Address or Username 55 |
56 | setMembers(e.target.value)} 63 | /> 64 | {members.trim() !== "" ? ( 65 | 68 | ) : ( 69 | 72 | )} 73 |10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /frontend/src/static/css/components/_common.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: $blue; 3 | border-radius: 7px; 4 | padding: 0.75em 1.25em; 5 | color: white; 6 | 7 | &:hover { 8 | opacity: 0.9; 9 | } 10 | 11 | &--secondary { 12 | background-color: #f2f2f2; 13 | color: darken($secondary-text, 20%); 14 | 15 | &:hover { 16 | background-color: darken(#f2f2f2, 6%); 17 | } 18 | } 19 | 20 | &--transparent { 21 | background-color: transparent; 22 | color: darken($secondary-text, 20%); 23 | 24 | &:hover { 25 | background-color: darken(#f2f2f2, 6%); 26 | } 27 | } 28 | 29 | &--active { 30 | // For home sidebar, when you're on that page 31 | background-color: $light-blue; 32 | color: $blue; 33 | 34 | &:hover { 35 | background-color: $light-blue; 36 | color: $blue; 37 | } 38 | } 39 | 40 | &--medium { 41 | padding: 0.625em 1em; 42 | font-size: 0.875rem; 43 | } 44 | 45 | &--small { 46 | padding: 0.5em 0.75em; 47 | font-size: 0.875rem; 48 | } 49 | 50 | &--disabled { 51 | cursor: not-allowed; 52 | color: lighten(#42526e, 25%); 53 | background-color: $border-color; 54 | 55 | &:hover { 56 | color: lighten(#42526e, 25%); 57 | background-color: $border-color; 58 | opacity: 1; 59 | } 60 | } 61 | } 62 | 63 | .member { 64 | border: 0; 65 | font-weight: 600; 66 | border-radius: 4px; 67 | 68 | width: 30px; 69 | height: 30px; 70 | line-height: 30px; 71 | text-align: center; 72 | vertical-align: middle; 73 | margin: 0 0.125em; 74 | 75 | &:first-of-type { 76 | margin-left: 0; 77 | } 78 | 79 | &:last-of-type { 80 | margin-right: 0; 81 | } 82 | 83 | &--red { 84 | background-color: $light-red; 85 | color: $red; 86 | } 87 | 88 | &--blue { 89 | background-color: $light-blue; 90 | color: $blue; 91 | } 92 | 93 | &--yellow { 94 | background-color: $light-yellow; 95 | color: $yellow; 96 | } 97 | 98 | &--add { 99 | border: 1px rgba($border-color, 0.75) dashed; 100 | color: rgba($border-color, 0.85); 101 | font-weight: 400; 102 | } 103 | 104 | &--large { 105 | width: 35px; 106 | height: 35px; 107 | line-height: 35px; 108 | } 109 | 110 | &--image { 111 | > img { 112 | width: 100%; 113 | height: 100%; 114 | object-fit: cover; 115 | border-radius: 4px; 116 | } 117 | } 118 | } 119 | 120 | .labels { 121 | display: flex; 122 | margin-bottom: 1em; 123 | 124 | &__label { 125 | font-weight: 900; 126 | margin: 0 0.25em; 127 | line-height: 1px; 128 | 129 | &:first-of-type { 130 | margin-left: 0; 131 | } 132 | 133 | &:last-of-type { 134 | margin-right: 0; 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/react,django 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=react,django 4 | 5 | ### Django ### 6 | *.log 7 | *.pot 8 | *.pyc 9 | __pycache__/ 10 | local_settings.py 11 | db.sqlite3 12 | db.sqlite3-journal 13 | media 14 | 15 | # If your build process includes running collectstatic, then you probably don't need or want to include staticfiles/ 16 | # in your Git repository. Update and uncomment the following line accordingly. 17 | #
48 |
95 | );
96 | };
97 |
98 | export default ChangePermissionsModal;
99 |
--------------------------------------------------------------------------------
/backend/users/tests/test_views.py:
--------------------------------------------------------------------------------
1 | import pytest
2 | from mixer.backend.django import mixer
3 | from rest_framework.test import APIClient
4 |
5 | from ..models import User
6 |
7 | pytestmark = pytest.mark.django_db
8 |
9 | register_request_data = {
10 | 'username': 'john',
11 | 'email' : 'johndoe@gmail.com',
12 | 'first_name' : 'John',
13 | 'last_name' : 'Doe',
14 | 'password' : '}P-9(e,W'
15 | }
16 |
17 | class TestRegistration:
18 | def test_can_register(self):
19 | client = APIClient()
20 | response = client.post('/register/', register_request_data)
21 | assert response.status_code == 201
22 |
23 | def test_username_unique(self):
24 | client = APIClient()
25 | response = client.post('/register/', register_request_data)
26 | response = client.post('/register/', register_request_data)
27 | assert response.status_code == 400
28 | assert 'with this username already exists' in response.data['username'][0]
29 |
30 | def test_email_unique(self):
31 | client = APIClient()
32 | response = client.post('/register/', register_request_data)
33 | response = client.post('/register/', register_request_data)
34 | assert response.status_code == 400
35 | assert 'with this email already exists' in response.data['email'][0]
36 |
37 | def test_username_required(self):
38 | del register_request_data['username']
39 | client = APIClient()
40 | response = client.post('/register/', register_request_data)
41 | assert response.status_code == 400
42 | assert 'is required' in response.data['username'][0]
43 |
44 | def test_email_required(self):
45 | del register_request_data['email']
46 | client = APIClient()
47 | response = client.post('/register/', register_request_data)
48 | assert response.status_code == 400
49 | assert 'is required' in response.data['email'][0]
50 |
51 | def test_username_max_length(self):
52 | register_request_data['username'] = 'johnnyjohnsondoe'
53 | client = APIClient()
54 | response = client.post('/register/', register_request_data)
55 | assert response.status_code == 400
56 | assert 'no more than 15 characters' in response.data['username'][0]
57 |
58 | def test_username_regex(self):
59 | register_request_data['username'] = 'jdoe@gmail.com'
60 | client = APIClient()
61 | response = client.post('/register/', register_request_data)
62 | assert response.status_code == 400
63 | assert 'allowed in your username' in response.data['username'][0]
64 |
65 | login_request_data = {
66 | 'username': 'john',
67 | 'password' : '}P-9(e,W'
68 | }
69 |
70 | class TestLogin:
71 | def test_can_login(self):
72 | client = APIClient()
73 | user = mixer.blend(User, username=login_request_data['username'])
74 | user.set_password(login_request_data['password'])
75 | user.save()
76 | response = client.post('/token/', login_request_data)
77 | assert response.status_code == 200
78 |
79 | def test_can_login_with_email(self):
80 | client = APIClient()
81 | user = mixer.blend(User, username=login_request_data['username'], email='johndoe@gmail.com')
82 | user.set_password(login_request_data['password'])
83 | user.save()
84 | login_request_data['username'] = 'johndoe@gmail.com'
85 | response = client.post('/token/', login_request_data)
86 | assert response.status_code == 200
87 |
88 | def test_incorrect_password(self):
89 | client = APIClient()
90 | user = mixer.blend(User, username=login_request_data['username'])
91 | user.set_password('xdcftvygbh')
92 | user.save()
93 | response = client.post('/token/', login_request_data)
94 | assert response.status_code == 401
95 | assert 'No active account found' in response.data['detail']
96 |
--------------------------------------------------------------------------------
/frontend/src/static/img/greenface.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/frontend/src/components/modals/BoardBackground.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { v4 as uuidv4 } from "uuid";
3 |
4 | import {
5 | convertUnsplashToOptions,
6 | getAddBoardStyle,
7 | } from "../../static/js/util";
8 | import useAxiosGet from "../../hooks/useAxiosGet";
9 | import { colors } from "../../static/js/const";
10 |
11 | const BoardBackground = ({
12 | position,
13 | setShowBoardModal,
14 | extraBackground,
15 | setExtraBackground,
16 | setSelectedBackground,
17 | }) => {
18 | const accessKey = process.env.REACT_APP_UNSPLASH_API_ACCESS_KEY;
19 | const { data } = useAxiosGet(
20 | `https://api.unsplash.com/photos?client_id=${accessKey}&page=2`,
21 | false
22 | );
23 | const images = convertUnsplashToOptions(data);
24 | return (
25 |
49 |
54 | Change Permissions
50 | 53 |
55 |
94 |
56 | {member.access_level === 2 ? (
57 |
75 | 58 | Admin 59 | 60 |
61 | ) : ( 62 | 68 | )} 69 | 70 |71 | Can view, create and edit project boards, change project 72 | settings, and invite new members. 73 |
74 |
76 | {member.access_level === 1 ? (
77 |
93 | 78 | Normal 79 | 80 |
81 | ) : ( 82 | 88 | )} 89 |90 | Can view, create and edit project boards. 91 |
92 |
26 |
93 | );
94 | };
95 |
96 | export default BoardBackground;
97 |
--------------------------------------------------------------------------------
/frontend/src/components/modals/CreateTeamModal.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import board from "../../static/img/board.svg";
3 | import greenface from "../../static/img/greenface.svg";
4 | import { modalBlurHandler, authAxios } from "../../static/js/util";
5 | import { backendUrl } from "../../static/js/const";
6 |
7 | import { useForm } from "react-hook-form";
8 |
9 | const CreateTeamModal = ({ setShowModal, addProject }) => {
10 | useEffect(modalBlurHandler(setShowModal), []);
11 | const { register, handleSubmit, errors, watch } = useForm();
12 | const titleValue = watch("title", "");
13 |
14 | const animateFaces = () => {
15 | const face1 = document.querySelector(".create-team__face--1");
16 | if (titleValue !== "") {
17 | face1.style.top = "230px";
18 | face1.style.left = "60px";
19 | }
20 | };
21 |
22 | const onSubmit = async (data) => {
23 | const invitedMembers =
24 | data.members !== ""
25 | ? data.members.split(",").map((user) => user.trim()) // usernames and emails
26 | : [];
27 |
28 | try {
29 | const { data: resData } = await authAxios.post(
30 | backendUrl + "/projects/",
31 | data
32 | );
33 | if (invitedMembers.length !== 0) {
34 | await authAxios.post(
35 | backendUrl + `/projects/${resData.id}/invite/`,
36 | {
37 | users: invitedMembers,
38 | }
39 | );
40 | }
41 | addProject(resData);
42 | } catch (error) {
43 | console.log(error);
44 | }
45 | setShowModal(false);
46 | };
47 |
48 | return (
49 |
27 |
32 | Board Background
28 | 31 |
33 |
59 | Photos
34 |-
35 | {images.slice(0, 6).map((imageOption) => (
36 |
- 44 | 55 | 56 | ))} 57 |
60 |
92 | Colors
61 |-
62 | {colors.slice(0, 6).map((colorOption) => (
63 |
- 71 | 82 | 83 | ))} 84 |
- 88 | 89 | 90 |
50 |
104 | );
105 | };
106 |
107 | export default CreateTeamModal;
108 |
--------------------------------------------------------------------------------
/frontend/src/components/auth/RegisterForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import axios from "axios";
3 |
4 | import { useHistory } from "react-router-dom";
5 | import { backendUrl } from "../../static/js/const";
6 | import { useForm } from "react-hook-form";
7 |
8 | const TabOne = ({ display, register }) => {
9 | const style = display ? { display: "block" } : { display: "none" };
10 | return (
11 |
51 |
93 | Start a Project
52 |53 | Boost your productivity by making it easier for everyone to 54 | access boards in one location. 55 |
56 | 57 | 92 |
94 |
97 | 
98 | 
102 |
103 |
12 |
19 |
26 |
33 |
34 | );
35 | };
36 |
37 | const TabTwo = ({ display, register }) => {
38 | const style = display ? { display: "block" } : { display: "none" };
39 | return (
40 |
41 |
48 |
53 |
60 |
61 | );
62 | };
63 |
64 | const RegisterForm = ({setErrMsgs}) => {
65 | const { register, handleSubmit, watch } = useForm();
66 | const [isTabOne, setIsTabOne] = useState(true);
67 | const firstName = watch("first_name", "");
68 | const lastName = watch("last_name", "");
69 | const username = watch("username", "");
70 | const email = watch("email", "");
71 | const passw = watch("password", "");
72 | const history = useHistory();
73 |
74 | const onSubmit = async (data) => {
75 | const url = `${backendUrl}/register/`;
76 | try {
77 | await axios.post(url, data);
78 | history.push("/login");
79 | } catch (err) {
80 | if (err.response?.status === 400) {
81 | setErrMsgs({signup: true , err: true, msgs: err.response.data});
82 | }else {
83 | setErrMsgs({signup: false, err: true, msgs: { Connection: 'Refused', Server: 'Maybe Down'}});
84 | }
85 | }
86 | };
87 |
88 | const validTabContent = () => {
89 | if (isTabOne)
90 | return [firstName, lastName, username]
91 | .map((x) => x.trim() !== "")
92 | .reduce((a, b) => a && b, true);
93 | else return passw.trim() !== "" && passw.length >= 8 && email.trim() !== "";
94 | };
95 |
96 | const getClass = () => {
97 | let str = "btn";
98 | if (!validTabContent()) {
99 | str += " btn--disabled";
100 | }
101 | return str;
102 | };
103 |
104 | return (
105 | <>
106 |
132 |
133 | );
134 | };
135 |
136 | export default RegisterForm;
137 |
--------------------------------------------------------------------------------
/frontend/src/components/modals/NotificationsModal.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { backendUrl } from "../../static/js/const";
3 | import { authAxios, timeSince } from "../../static/js/util";
4 | import nonotif from "../../static/img/nonotif.svg";
5 | import ProfilePic from "../boards/ProfilePic";
6 | import Labels from "../boards/Labels";
7 |
8 | const getNotificationsPosition = () => {
9 | const bellElem = document.querySelector(".header__li--notifications");
10 | return {
11 | top:
12 | bellElem.getBoundingClientRect().y +
13 | bellElem.getBoundingClientRect().height +
14 | 10 +
15 | "px",
16 | right: "10px",
17 | left: "unset",
18 | };
19 | };
20 |
21 | const NotificationsModal = ({
22 | setShowModal,
23 | notifications,
24 | setNotifications,
25 | }) => {
26 | const [showAll, setShowAll] = useState(false); // See all or just unread?
27 |
28 | const notificationsToShow = showAll
29 | ? notifications || []
30 | : (notifications || []).filter(
31 | (notification) => notification.unread === true
32 | );
33 |
34 | const markAllRead = async () => {
35 | await authAxios.post(`${backendUrl}/notifications/`);
36 | const newNotifications = notifications.map((notification) => ({
37 | ...notification,
38 | unread: false,
39 | }));
40 |
41 | setNotifications(newNotifications);
42 | };
43 |
44 | return (
45 |
49 |
75 | );
76 | };
77 |
78 | const appendTargetTitleVerbs = [
79 | "assigned you to",
80 | "invited you to",
81 | "made you admin of",
82 | ];
83 |
84 | const formatNotification = (notification) => {
85 | if (appendTargetTitleVerbs.includes(notification.verb))
86 | return `${notification.verb} ${notification.target.title}`;
87 | else if (notification.verb === "commented")
88 | return `${notification.action_object.body}`;
89 | };
90 |
91 | const iconMap = {
92 | "assigned you to": "fal fa-user-plus",
93 | "invited you to": "fal fa-paper-plane",
94 | "made you admin of": "fal fa-arrow-up",
95 | commented: "fal fa-comment",
96 | };
97 |
98 | const Notification = ({ notification }) => {
99 | const { actor, verb, target, target_model, created_at } = notification;
100 |
101 | return (
102 |
50 |
55 | Notifications
51 | 54 |
56 |
74 |
57 |
60 | {!showAll && notificationsToShow.length !== 0 && (
61 |
62 | )}
63 |
64 | {notificationsToShow.map((notification) => (
65 |
69 | 
70 |
72 | )}
73 | No Notifications
71 |
103 | {target_model === "Item" && (
104 |
122 | );
123 | };
124 |
125 | export default NotificationsModal;
126 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_project.scss:
--------------------------------------------------------------------------------
1 | .team {
2 | &__header {
3 | padding: 100px 50px 0;
4 | background-color: $grey;
5 | width: 100%;
6 | border-bottom: 1px solid $border-color;
7 | }
8 |
9 | &__header-content {
10 | width: fit-content;
11 | margin: 0 auto;
12 | }
13 |
14 | &__header-top {
15 | display: flex;
16 | margin-bottom: 2em;
17 |
18 | img {
19 | border-radius: 5px;
20 | width: 80px;
21 | height: 80px;
22 | object-fit: cover;
23 | }
24 | }
25 |
26 | &__profile {
27 | margin-left: 1.5em;
28 | display: flex;
29 | flex-direction: column;
30 |
31 | p {
32 | font-size: 1.5rem;
33 | font-weight: 600;
34 | }
35 |
36 | button {
37 | margin-top: auto;
38 | }
39 | }
40 |
41 | &__header-bottom {
42 | display: flex;
43 | }
44 |
45 | &__tab {
46 | padding: 0.75em 1.25em;
47 | border-radius: 5px 5px 0 0;
48 | background-color: #dfe1e6;
49 | margin-right: 0.25em;
50 | font-weight: 500;
51 | cursor: pointer;
52 |
53 | &:hover {
54 | background-color: #c1c7d0;
55 | }
56 |
57 | &--active {
58 | background-color: white;
59 | cursor: default;
60 | border: 1px solid $border-color;
61 | border-bottom-color: white;
62 |
63 | position: relative;
64 | top: 1px;
65 |
66 | &:hover {
67 | background-color: white;
68 | }
69 | }
70 | }
71 |
72 | &__body {
73 | width: fit-content;
74 | margin: 0 auto;
75 | padding: 40px 100px 20px;
76 | }
77 |
78 | &__boards {
79 | width: 900px;
80 | display: flex;
81 | flex-wrap: wrap;
82 | margin-bottom: 1em;
83 | > .board-preview {
84 | color: black;
85 | margin: 0 1em 1.5em;
86 | width: calc(25% - 1.5em);
87 |
88 | &:nth-of-type(4n + 1) {
89 | margin-left: 0;
90 | }
91 |
92 | &:nth-of-type(4n) {
93 | margin-right: 0;
94 | }
95 | }
96 | }
97 |
98 | &__members-header {
99 | font-weight: 600;
100 | font-size: 1.125rem;
101 | display: flex;
102 | justify-content: space-between;
103 | width: 900px;
104 | margin-bottom: 2.5em;
105 |
106 | i {
107 | margin-right: 0.5em;
108 | }
109 | }
110 |
111 | &__member {
112 | display: flex;
113 | align-items: center;
114 | margin-bottom: 1.25em;
115 | }
116 |
117 | &__member-info {
118 | margin-left: 1em;
119 | }
120 |
121 | &__member-name {
122 | font-weight: 500;
123 | margin-bottom: 0.25em;
124 | }
125 |
126 | &__member-username {
127 | font-weight: 300;
128 | color: $secondary-text;
129 | font-size: 0.875rem;
130 | }
131 |
132 | &__member-buttons {
133 | display: flex;
134 | align-items: center;
135 | margin-left: auto;
136 | position: relative;
137 |
138 | p {
139 | right: calc(95px + 1em);
140 | position: absolute;
141 | min-width: 69px; // So admin and member are same width
142 | }
143 |
144 | button {
145 | text-align: left;
146 | margin-left: 1em;
147 |
148 | &:last-of-type {
149 | min-width: 95px; // So leave and remove are same width
150 | }
151 | }
152 |
153 | i {
154 | margin-right: 0.5em;
155 | }
156 | }
157 |
158 | &__edit-form {
159 | margin-left: 1.5em;
160 | width: 200px;
161 | label {
162 | display: block;
163 | font-size: 0.75rem;
164 | font-weight: 500;
165 | margin-bottom: 0.3em;
166 | color: darken($secondary-text, 20%);
167 | }
168 |
169 | input {
170 | width: 100%;
171 | padding: 0.5em;
172 | margin-bottom: 1.4em;
173 | border: 1px darken($border-color, 40%) solid;
174 |
175 | &:focus {
176 | border: 1px $blue solid;
177 | }
178 | }
179 |
180 | textarea {
181 | width: 100%;
182 | padding: 0.5em;
183 | height: 60px;
184 | resize: none;
185 | border: 1px darken($border-color, 40%) solid;
186 | margin-bottom: 1.4em;
187 |
188 | &:focus {
189 | border: 1px $blue solid;
190 | }
191 | }
192 |
193 | button {
194 | margin-right: 0.5em;
195 | }
196 | }
197 | }
198 |
--------------------------------------------------------------------------------
/backend/trello/settings.py:
--------------------------------------------------------------------------------
1 | """
2 | Django settings for trello project.
3 |
4 | Generated by 'django-admin startproject' using Django 3.1.1.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/3.1/topics/settings/
8 |
9 | For the full list of settings and their values, see
10 | https://docs.djangoproject.com/en/3.1/ref/settings/
11 | """
12 | import os
13 | from datetime import timedelta
14 |
15 | from pathlib import Path
16 |
17 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
18 | BASE_DIR = Path(__file__).resolve().parent.parent
19 |
20 |
21 | # Quick-start development settings - unsuitable for production
22 | # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
23 |
24 | # SECURITY WARNING: keep the secret key used in production secret!
25 | SECRET_KEY = 'u&3va&+ye)j2-m1@t^99tvw@tggdy#mtcayv76r_dj)9as4*5$'
26 |
27 | # SECURITY WARNING: don't run with debug turned on in production!
28 | DEBUG = True
29 |
30 | ALLOWED_HOSTS = []
31 |
32 |
33 | # Application definition
34 |
35 | INSTALLED_APPS = [
36 | 'django.contrib.admin',
37 | 'django.contrib.auth',
38 | 'django.contrib.contenttypes',
39 | 'django.contrib.sessions',
40 | 'django.contrib.messages',
41 | 'django.contrib.staticfiles',
42 | 'rest_framework',
43 | 'users',
44 | 'projects.apps.ProjectsConfig',
45 | 'boards.apps.BoardsConfig',
46 | 'drf_yasg',
47 | 'corsheaders'
48 | ]
49 |
50 | MIDDLEWARE = [
51 | 'corsheaders.middleware.CorsMiddleware',
52 | 'django.middleware.security.SecurityMiddleware',
53 | 'django.contrib.sessions.middleware.SessionMiddleware',
54 | 'django.middleware.common.CommonMiddleware',
55 | 'django.middleware.csrf.CsrfViewMiddleware',
56 | 'django.contrib.auth.middleware.AuthenticationMiddleware',
57 | 'django.contrib.messages.middleware.MessageMiddleware',
58 | 'django.middleware.clickjacking.XFrameOptionsMiddleware',
59 | ]
60 |
61 | ROOT_URLCONF = 'trello.urls'
62 |
63 | TEMPLATES = [
64 | {
65 | 'BACKEND': 'django.template.backends.django.DjangoTemplates',
66 | 'DIRS': [],
67 | 'APP_DIRS': True,
68 | 'OPTIONS': {
69 | 'context_processors': [
70 | 'django.template.context_processors.debug',
71 | 'django.template.context_processors.request',
72 | 'django.contrib.auth.context_processors.auth',
73 | 'django.contrib.messages.context_processors.messages',
74 | ],
75 | },
76 | },
77 | ]
78 |
79 | WSGI_APPLICATION = 'trello.wsgi.application'
80 |
81 |
82 | # Database
83 | # https://docs.djangoproject.com/en/3.1/ref/settings/#databases
84 |
85 | DATABASES = {
86 | 'default': {
87 | 'ENGINE': 'django.db.backends.sqlite3',
88 | 'NAME': BASE_DIR / 'db.sqlite3',
89 | }
90 | }
91 |
92 | AUTHENTICATION_BACKENDS = [
93 | 'django.contrib.auth.backends.ModelBackend', 'users.auth.EmailBackend']
94 |
95 | # Password validation
96 | # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
97 |
98 | AUTH_PASSWORD_VALIDATORS = [
99 | {
100 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
101 | },
102 | {
103 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
104 | },
105 | {
106 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
107 | },
108 | {
109 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
110 | },
111 | ]
112 |
113 |
114 | # Internationalization
115 | # https://docs.djangoproject.com/en/3.1/topics/i18n/
116 |
117 | LANGUAGE_CODE = 'en-us'
118 |
119 | TIME_ZONE = 'UTC'
120 |
121 | USE_I18N = True
122 |
123 | USE_L10N = True
124 |
125 | USE_TZ = True
126 |
127 |
128 | # Static files (CSS, JavaScript, Images)
129 | # https://docs.djangoproject.com/en/3.1/howto/static-files/
130 |
131 | EMAIL_BACKEND = 'django.core.mail.backends.locmem.EmailBackend'
132 |
133 | STATIC_URL = '/static/'
134 |
135 | MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
136 | MEDIA_URL = '/media/'
137 |
138 | AUTH_USER_MODEL = 'users.User'
139 |
140 | REST_FRAMEWORK = {
141 | 'DEFAULT_AUTHENTICATION_CLASSES': [
142 | 'rest_framework_simplejwt.authentication.JWTAuthentication',
143 | ],
144 | 'DEFAULT_PERMISSION_CLASSES': [
145 | 'rest_framework.permissions.IsAuthenticated',
146 | ]
147 | }
148 |
149 | SIMPLE_JWT = {
150 | 'ACCESS_TOKEN_LIFETIME': timedelta(days=1),
151 | 'REFRESH_TOKEN_LIFETIME': timedelta(days=360)
152 | }
153 |
154 |
155 | SWAGGER_SETTINGS = {
156 | 'token_type': 'Bearer',
157 | 'SECURITY_DEFINITIONS': {
158 | 'Bearer': {
159 | 'type': 'apiKey',
160 | 'name': 'Authorization',
161 | 'in': 'header'
162 | }
163 | }
164 | }
165 |
166 | CORS_ALLOWED_ORIGINS = ['http://localhost:3000']
167 |
168 | REDIS_HOST = 'localhost'
169 | REDIS_PORT = 6380
170 | REDIS_DB = 0
171 |
--------------------------------------------------------------------------------
/frontend/src/components/headers/Header.js:
--------------------------------------------------------------------------------
1 | import React, {
2 | useState,
3 | useRef,
4 | useEffect,
5 | useContext,
6 | useCallback,
7 | } from "react";
8 | import _ from "lodash";
9 | import logo from "../../static/img/logo2.png";
10 | import SearchModal from "../modals/SearchModal";
11 | import ProfilePic from "../boards/ProfilePic";
12 | import { Link } from "react-router-dom";
13 | import useAxiosGet from "../../hooks/useAxiosGet";
14 | import useBlurSetState from "../../hooks/useBlurSetState";
15 | import { handleBackgroundBrightness } from "../../static/js/util";
16 | import globalContext from "../../context/globalContext";
17 | import NotificationsModal from "../modals/NotificationsModal";
18 |
19 | const Header = (props) => {
20 | const { authUser, board } = useContext(globalContext);
21 |
22 | const [searchQuery, setSearchQuery] = useState(""); //This variable keeps track of what to show in the search bar
23 | const [backendQuery, setBackendQuery] = useState(""); //This variable is used to query the backend, debounced
24 | const delayedQuery = useCallback(
25 | _.debounce((q) => setBackendQuery(q), 500),
26 | []
27 | );
28 | const [showSearch, setShowSearch] = useState(false);
29 | const searchElem = useRef(null);
30 | const [showNotifications, setShowNotifications] = useState(false);
31 | useBlurSetState(".label-modal", showNotifications, setShowNotifications);
32 |
33 | useEffect(() => {
34 | if (searchQuery !== "") setShowSearch(true);
35 | else if (searchQuery === "" && showSearch) setShowSearch(false);
36 | }, [searchQuery]);
37 |
38 | const { data: notifications, setData: setNotifications } = useAxiosGet(
39 | "/notifications/"
40 | );
41 |
42 | const onBoardPage = props.location.pathname.split("/")[1] === "b";
43 | const [isBackgroundDark, setIsBackgroundDark] = useState(false);
44 | useEffect(handleBackgroundBrightness(board, setIsBackgroundDark), [board]);
45 |
46 | return (
47 | <>
48 |
105 |
108 | )}
109 | {target.title}
107 |
110 |
116 |
117 | {actor.full_name}
112 |113 | {timeSince(created_at)} 114 |
115 |118 | 119 | {formatNotification(notification)} 120 |
121 |
56 |
80 | -
57 |
- 58 | 59 | Boards 60 | 61 | 62 |
- 68 | {" "} 69 | { 73 | setSearchQuery(e.target.value); 74 | delayedQuery(e.target.value); 75 | }} 76 | /> 77 | 78 |
81 |
82 |
83 |
84 |
85 |
86 |
106 |
107 | -
87 |
-
88 |
89 | Hello, {authUser.full_name.replace(/ .*/, "")} 90 |
91 | - 92 | 95 | {(notifications || []).find( 96 | (notification) => notification.unread == true 97 | ) && } 98 | 99 |
- 100 | 101 | 102 | 103 | 104 |
82 |
118 |
119 |
145 |
146 | );
147 | };
148 |
149 | export default AddBoardModal;
150 |
--------------------------------------------------------------------------------
/frontend/src/static/css/components/_board.scss:
--------------------------------------------------------------------------------
1 | .board {
2 | background-color: $grey;
3 | height: 100vh;
4 | width: 100vw;
5 | overflow: hidden;
6 | padding: 100px 50px 40px;
7 | display: flex;
8 | flex-direction: column; // So we can make up lists take up remaining space
9 |
10 | &__title,
11 | &__title-edit {
12 | font-weight: 500;
13 | font-size: 1.25rem;
14 | height: 25px;
15 | }
16 |
17 | &__title {
18 | cursor: pointer;
19 | }
20 |
21 | &__title-edit {
22 | padding: 0.25em;
23 | border: 1px darken($border-color, 40%) solid;
24 |
25 | position: relative;
26 | top: -3px;
27 | left: -6px;
28 |
29 | &:focus {
30 | border: 1px $blue solid;
31 | }
32 | }
33 |
34 | &__subtitle {
35 | font-size: 0.875rem;
36 | color: $secondary-text;
37 | margin-bottom: 1.5em;
38 | }
39 |
40 | &__lists {
41 | flex: 1;
42 | display: flex;
43 | width: 100%;
44 | overflow-x: auto;
45 |
46 | & > .list {
47 | margin: 0.5em 1em 0;
48 |
49 | &:first-of-type {
50 | margin-left: 0;
51 | }
52 |
53 | &:last-of-type {
54 | margin-right: 0;
55 | }
56 | }
57 | }
58 |
59 | &__create-list {
60 | height: fit-content;
61 | width: 300px;
62 | min-width: 300px;
63 | margin-top: 0.5em;
64 | margin-left: 1em;
65 |
66 | i {
67 | margin-right: 0.5em;
68 | }
69 | }
70 |
71 | &__create-list-form {
72 | width: 300px;
73 | min-width: 300px;
74 | padding: 1em;
75 | margin-top: 0.5em;
76 | margin-left: 1em;
77 | background-color: white;
78 | height: fit-content;
79 | border-radius: 5px;
80 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
81 |
82 | & input {
83 | width: 100%;
84 | padding: 0.5em;
85 | display: block;
86 | margin-bottom: 0.5em;
87 | border: 1px darken($border-color, 40%) solid;
88 |
89 | &:focus {
90 | border: 1px $blue solid;
91 | }
92 | }
93 | }
94 | }
95 |
96 | .list {
97 | background-color: white;
98 | padding: 2em 1em 1em 1em;
99 | width: fit-content; // Use card width
100 | height: fit-content;
101 | max-height: 97%;
102 | border: 0;
103 | border-radius: 5px;
104 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
105 | display: flex; // So we can use margin-top: auto on add-card
106 | flex-direction: column;
107 |
108 | &__title {
109 | font-weight: 500;
110 | font-size: 1.25rem;
111 | display: flex;
112 | justify-content: space-between;
113 | align-items: center;
114 |
115 | p {
116 | height: 25px;
117 | }
118 |
119 | & > .far {
120 | color: $secondary-text;
121 | }
122 | }
123 |
124 | &__title-edit {
125 | width: 100%;
126 | margin-right: 1em;
127 | font-weight: 500;
128 | font-size: 1.25rem;
129 | padding: 0.25em;
130 | border: 1px darken($border-color, 40%) solid;
131 | height: 25px;
132 |
133 | position: relative;
134 | top: -3px;
135 | left: -6px;
136 |
137 | &:focus {
138 | border: 1px $blue solid;
139 | }
140 | }
141 |
142 | &__cards {
143 | margin: 1.125em 0 1em;
144 | max-height: calc(100% - 110px);
145 | min-height: calc(100% - 110px);
146 | overflow-y: auto;
147 |
148 | & > .card {
149 | margin: 1em 0;
150 |
151 | &:first-of-type {
152 | margin-top: 0;
153 | }
154 |
155 | &:last-of-type {
156 | margin-bottom: 0;
157 | }
158 | }
159 | }
160 |
161 | &__add-card {
162 | text-align: center;
163 | font-size: 0.875rem;
164 | width: 300px;
165 | padding: 0.75em 0;
166 | color: $secondary-text;
167 |
168 | &--active {
169 | color: white;
170 | }
171 | }
172 |
173 | &__add-card-form {
174 | margin-top: 1em;
175 |
176 | input {
177 | width: 100%;
178 | border: 1px solid rgba($border-color, 0.55);
179 | border-radius: 5px;
180 | padding: 0.75em;
181 | }
182 | }
183 | }
184 |
185 | .card {
186 | background: white;
187 | border: 1px rgba($border-color, 0.55) solid;
188 | border-radius: 5px;
189 | padding: 0.75em;
190 | width: 300px;
191 | position: relative;
192 | cursor: pointer;
193 |
194 | &__pen {
195 | position: absolute;
196 | top: 3px;
197 | right: 3px;
198 | font-size: 0.75rem;
199 | color: $secondary-text;
200 | padding: 0.5em;
201 | border-radius: 5px;
202 | display: none;
203 |
204 | &:hover {
205 | background: darken(white, 8%);
206 | color: darken($secondary-text, 16%);
207 | }
208 | }
209 |
210 | &:hover {
211 | background: darken(white, 2%);
212 |
213 | .card__pen {
214 | display: block;
215 | }
216 | }
217 |
218 | &__title {
219 | margin-top: 0.25em;
220 | }
221 |
222 | &__subtitle {
223 | margin-top: 0.75em;
224 | font-size: 0.75rem;
225 | color: $secondary-text;
226 | }
227 |
228 | &__members {
229 | display: flex;
230 | justify-content: flex-end;
231 | margin-top: 1.5em;
232 | }
233 |
234 | &__image,
235 | &__color {
236 | width: calc(100% + 1.5em); // + Twice parent's padding
237 | height: 65px;
238 | margin-left: -0.75em;
239 | margin-top: -0.75em;
240 | margin-bottom: 0.35em; // Too close to labels otherwise
241 | }
242 |
243 | &__image {
244 | height: 125px;
245 | img {
246 | border-radius: 5px 5px 0 0;
247 | width: 100%;
248 | height: 100%;
249 | object-fit: cover;
250 | }
251 | }
252 |
253 | &--image {
254 | .card__title {
255 | margin-top: 1em;
256 | }
257 |
258 | &:hover {
259 | .card__pen {
260 | background: darken(white, 2%);
261 | }
262 | }
263 | }
264 | }
265 |
--------------------------------------------------------------------------------
/backend/boards/models.py:
--------------------------------------------------------------------------------
1 | from django.contrib.contenttypes.fields import GenericForeignKey
2 | from django.contrib.contenttypes.models import ContentType
3 | from django.db import models
4 | from django.db.models import Max
5 | from django.utils import timezone
6 | from users.models import User
7 |
8 |
9 | class Board(models.Model):
10 | owner_model = models.ForeignKey(ContentType, blank=False, null=False,
11 | related_name='board',
12 | on_delete=models.CASCADE,
13 | limit_choices_to=models.Q(app_label='users', model='user') | models.Q(app_label='projects', model='project'))
14 | owner_id = models.PositiveIntegerField(null=False, blank=False)
15 | owner = GenericForeignKey('owner_model', 'owner_id')
16 |
17 | title = models.CharField(max_length=255, blank=False, null=False)
18 | description = models.TextField(blank=True, null=False)
19 |
20 | # Only one of the below will be used from the frontend
21 | image = models.ImageField(blank=True, upload_to='board_images')
22 | image_url = models.URLField(blank=True, null=False)
23 | color = models.CharField(blank=True, null=False, max_length=6) # Hex Code
24 |
25 | created_at = models.DateTimeField(default=timezone.now)
26 |
27 | def __str__(self):
28 | return self.title
29 |
30 |
31 | class List(models.Model):
32 | board = models.ForeignKey(
33 | Board, on_delete=models.CASCADE, related_name="lists")
34 | title = models.CharField(max_length=255, blank=False, null=False)
35 | order = models.DecimalField(max_digits=30, decimal_places=15 , blank=True, null=True)
36 | created_at = models.DateTimeField(default=timezone.now)
37 |
38 | def __str__(self):
39 | return self.title
40 |
41 | def save(self, *args, **kwargs):
42 | filtered_objects = List.objects.filter(board=self.board)
43 | if not self.order and filtered_objects.count() == 0:
44 | self.order = 2 ** 16 - 1
45 | elif not self.order:
46 | self.order = filtered_objects.aggregate(Max('order'))[
47 | 'order__max'] + 2 ** 16 - 1
48 | return super().save(*args, **kwargs)
49 |
50 |
51 | class Label(models.Model):
52 | board = models.ForeignKey(
53 | Board, on_delete=models.CASCADE, related_name='labels')
54 | title = models.CharField(max_length=255, blank=True, null=False)
55 | color = models.CharField(max_length=255, blank=False, null=False)
56 |
57 | def __str__(self):
58 | return self.title
59 |
60 |
61 | class Item(models.Model):
62 | list = models.ForeignKey(
63 | List, on_delete=models.CASCADE, related_name='items')
64 | title = models.CharField(max_length=255, blank=False, null=False)
65 | description = models.TextField(blank=True, null=False)
66 |
67 | # Only one of the below will be used from the frontend
68 | image = models.ImageField(blank=True, upload_to='item_images')
69 | image_url = models.URLField(blank=True, null=False)
70 | color = models.CharField(blank=True, null=False, max_length=6) # Hex Code
71 |
72 | order = models.DecimalField(max_digits=30,decimal_places=15, blank=True, null=True)
73 | labels = models.ManyToManyField(Label, blank=True)
74 | assigned_to = models.ManyToManyField(User, blank=True)
75 | due_date = models.DateTimeField(blank=True, null=True)
76 | created_at = models.DateTimeField(default=timezone.now)
77 |
78 | def __str__(self):
79 | return self.title
80 |
81 | def save(self, *args, **kwargs):
82 | filtered_objects = Item.objects.filter(list=self.list)
83 | if not self.order and filtered_objects.count() == 0:
84 | self.order = 2 ** 16 - 1
85 | elif not self.order:
86 | self.order = filtered_objects.aggregate(Max('order'))[
87 | 'order__max'] + 2 ** 16 - 1
88 | return super().save(*args, **kwargs)
89 |
90 |
91 | class Comment(models.Model):
92 | author = models.ForeignKey(
93 | User, on_delete=models.CASCADE, related_name='comments')
94 | item = models.ForeignKey(
95 | Item, on_delete=models.CASCADE, related_name='comments')
96 | body = models.TextField(blank=False, null=False)
97 | created_at = models.DateTimeField(default=timezone.now)
98 |
99 | def __str__(self):
100 | return f'{self.body[:50]}{"..." if len(self.body) > 50 else ""}'
101 |
102 |
103 | class Attachment(models.Model):
104 | item = models.ForeignKey(
105 | Item, on_delete=models.CASCADE, related_name='attachments')
106 | upload = models.FileField(upload_to='attachments')
107 |
108 |
109 | # https://help.trello.com/article/793-receiving-trello-notifications
110 | extra_word_dict = {'commented': 'on'}
111 |
112 |
113 | class Notification(models.Model):
114 | actor = models.ForeignKey(
115 | User, on_delete=models.CASCADE, related_name='actions')
116 | recipient = models.ForeignKey(
117 | User, on_delete=models.CASCADE, related_name='notifications')
118 | verb = models.CharField(max_length=255, blank=False, null=False)
119 | unread = models.BooleanField(default=True, blank=False, db_index=True)
120 |
121 | created_at = models.DateTimeField(default=timezone.now)
122 |
123 | # Optional,
120 | {options.map((option, index) => (
121 |
136 | ))}
137 |
143 |
144 |