Merge branch 'frontend-devel' into devel

client/src/pages/Projects/index.tsx

-
-import Navigation from 'components/ui/Navigation';
 import './projects.scss';
+import Page from 'components/ui/Page';
 
 export default function Tasks() {
     return (
-        <div className="projects-page">
-            <Navigation />
-            <main>
-                <h1>Projects</h1>
-            </main>
-        </div>
+        <Page className="projects-page">
+            <div className="content-container">
+                <h1 className="underlined">Projects</h1>
+            </div>
+        </Page>
     );
-}
+}
\ No newline at end of file

client/src/pages/Register/index.tsx

 
+import { useCallback } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+
+import Page from 'components/ui/Page';
+import RegisterForm from 'components/forms/RegisterForm';
+import { register } from 'adapters/auth';
+
 import './register.scss';
 
 export default function Register() {
+    const history = useHistory();
+
+    const handleSubmit = useCallback(async (username: string, password: string) => {
+        try {
+            if (await register(username, password)) {
+                history.push('/tasks');
+            }
+        } catch (e) { }
+    }, [history]);
+
     return (
-        <div>
-            register
+        <div className="register-page-container">
+            <Page className="register-page">
+                <div className="content-container">
+                    <h1 className="underlined">Register</h1>
+                    <RegisterForm onSubmit={handleSubmit} />
+                    <Link className="link" to="/login">You already have an account?</Link>
+                </div>
+            </Page>
+            <div className="background-container">
+                <div className="bubble primary" style={{ top: '-10%', right: '-20%' }}></div>
+                <div className="bubble secondary" style={{ bottom: '-20%', left: '-20%' }}></div>
+            </div>
         </div>
     );
-}
+}
\ No newline at end of file
+

client/src/pages/Register/register.scss

+@use 'styles/settings.scss'as s;
+@use 'styles/mixins.scss'as mx;
 
+.register-page-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+
+    .register-page {
+        max-width: 700px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        @include mx.breakpoint(medium) {
+            min-height: auto;
+            padding: 60px;
+            border-radius: 25px;
+        }
+
+        .link {
+            display: block;
+            text-decoration: underline;
+            margin-top: 20px;
+            text-align: center;
+        }
+    }
+}

client/src/pages/Settings/index.tsx

+import './settings.scss';
+import Page from 'components/ui/Page';
+
+export default function Settings() {
+    return (
+        <Page className="settings-page">
+            <div className="content-container">
+                <h1 className="underlined">Settings</h1>
+            </div>
+        </Page>
+    )
+}
\ No newline at end of file

client/src/pages/Stats/index.tsx

-
-import Navigation from 'components/ui/Navigation';
+import Page from 'components/ui/Page';
 import './stats.scss';
 
 export default function Tasks() {
     return (
-        <div className="stats-page">
-            <Navigation />
-            <main>
-                <h1>Stats</h1>
-            </main>
-        </div>
+        <Page className="stats-page">
+            <div className="content-container">
+                <h1 className="underlined">Stats</h1>
+            </div>
+        </Page>
     );
-}
+}
\ No newline at end of file

client/src/pages/Tasks/TaskDetail/index.tsx

+import './task-detail.scss';
+import Page from 'components/ui/Page';
+
+export default function TaskDetail() {
+    
+    return (
+        <Page className="tasks-detail-page">
+            <div className="content-container">
+                <h1>Task</h1>
+            </div>
+        </Page>
+    );
+}
\ No newline at end of file

client/src/pages/Tasks/index.tsx

+import Page from 'components/ui/Page';
+import Task from 'components/ui/Task';
 import './tasks.scss';
 
 export default function Tasks() {
     return (
         <>
-            <div className="tasks-page page-container">
+            <Page className="tasks-page">
                 <main className="content-container">
-                    <h1>Tasks</h1>
-                    <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
+                    <section className="intro-section">
+                        <h1 className="underlined">Tasks</h1>
+                        <p>Hey Daniel, you have <strong>10 tasks</strong> for today.</p>
+                    </section>
+                    <section className="tasks-container">
+                        <h2>Today</h2>
+                        <div className="task-group">
+                            <h3>09:00</h3>
+                            <div className="tasks-list">
+                                <Task task={{
+                                    uuid: 'asdf',
+                                    name: 'Create API Routes',
+                                    icon: '🌎',
+                                    start: 1619074800000,
+                                    end: 1619076600000,
+                                    description: 'Create the API routes and implement them into the FrontEnd, by adding them into the controls.'
+                                }} />
+                                <Task task={{
+                                    uuid: 'asdfds',
+                                    name: 'Create API Routes',
+                                    icon: '🌎',
+                                    start: 1619074800000,
+                                    end: 1619076600000,
+                                    description: 'Create the API routes and implement them into the FrontEnd, by adding them into the controls.'
+                                }} />
+                            </div>
+                        </div>
+                    </section>
                 </main>
+            </Page>
+            <div className="background-container">
+                <div className="bubble primary" style={{ top: '-20%', right: '-20%' }}></div>
+                <div className="bubble secondary" style={{ bottom: '-20%', left: '20%' }}></div>
             </div>
         </>
     );
-}
+}
\ No newline at end of file
+

client/src/pages/Tasks/tasks.scss

+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
+@use 'styles/functions'as fn;
+
+.tasks-page {
+    .intro-section {
+        font-size: fn.toRem(18);
+    }
+
+    .tasks-container {
+        margin-top: 50px;
+
+        .task-group {
+            @include mx.breakpoint(medium) {
+                display: flex;
+                width: 100%;
+
+                h3 {
+                    width: 30%;
+                }
+
+                .tasks-list {
+                    flex-grow: 1;
+                }
+            }
+
+            .task {
+                margin-bottom: 30px;
+            }
+        }
+
+    }
+}
\ No newline at end of file

client/src/pages/Teams/index.tsx

+import './teams.scss';
+import Page from 'components/ui/Page';
+
+export default function Teams() {
+    return (
+        <Page className="teams-page">
+            <div className="content-container">
+                <h1 className="underlined">Teams</h1>
+            </div>
+        </Page>
+    )
+}
\ No newline at end of file

client/src/service-worker.ts

 /// <reference lib="webworker" />
 /* eslint-disable no-restricted-globals */
 
-import {clientsClaim} from 'workbox-core';
-import {ExpirationPlugin} from 'workbox-expiration';
-import {precacheAndRoute, createHandlerBoundToURL} from 'workbox-precaching';
-import {registerRoute} from 'workbox-routing';
-import {StaleWhileRevalidate} from 'workbox-strategies';
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
 
 declare const self: ServiceWorkerGlobalScope;
 
@@ -45,11 +45,10 @@ registerRoute(
     createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
 );
 
-// An example runtime caching route for requests that aren't handled by the
-// precache, in this case same-origin .png requests like those from in public/
+// Runtime caching route for images requests that aren't handled by the precache.
 registerRoute(
     // Add in any other file extensions or routing criteria as needed.
-    ({url}) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+    ({url}) => url.origin === self.location.origin && url.pathname.match(/.(png|jpg|jpeg|gif)$/),
     // Customize this strategy as needed, e.g., by changing to CacheFirst.
     new StaleWhileRevalidate({
         cacheName: 'images',

client/src/styles/settings.scss

 
 // Colors
 $primary: #AC42FF;
-$secondary: #F15154;
-$accent: #7DEFFF;
-$light: #f0f0f0;
-$dark: #1f1f1f;
+$secondary: #7DEFFF;
+$light: #F1F1F1;
+$dark: #180923;
+
+$light-gray: #F8F8F8;
 
 $white: #fff;
 $black: #000;
 
+$error-color: $secondary;
+
 $colors: (
    'primary': $primary,
    'secondary': $secondary,
@@ -16,8 +19,8 @@ $colors: (
    'dark': $dark
 );
 
-$linear-gradient: linear-gradient(to top, $primary, $secondary);
-$radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 100%);
+$linear-gradient: linear-gradient(to bottom, $primary, #930AFF);
+$radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, #930AFF 100%);
 
 $body-color: #3A5255;
 $body-font: 'Poppins', sans-serif;
@@ -28,6 +31,7 @@ $weight-regular: 400;
 $weight-medium: 500;
 $weight-semi-bold: 600;
 $weight-bold: 700;
+$weight-xbold: 800;
 
 // Breakpoints
 $breakpoints: (

server/package.json

@@ -8,8 +8,10 @@
     "private": true,
     "main": "src/index.ts",
     "dependencies": {
+        "@types/cors": "^2.8.10",
         "bcrypt": "^5.0.1",
         "body-parser": "^1.19.0",
+        "cors": "^2.8.5",
         "express": "^4.17.1",
         "express-fileupload": "^1.2.1",
         "jsonwebtoken": "^8.5.1",

server/src/index.ts

@@ -15,6 +15,7 @@ app.use(fileupload());
 
 app.use('/v1', v1);
 
+
 app.use((_req, res) => {
     res.status(404).json({
         status: 'error',