From ca5110e4f75251facbf17d43a86adaffce843804 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 15:11:24 +0200
Subject: [PATCH 01/11] feat: init new modal

---
 .../course/[courseid]/edit/page.tsx           |  48 ++--
 front/components/Drags/Chapter.tsx            |   3 +
 .../Modals/CourseEdit/NewActivity.tsx         |  14 +-
 .../Modals/CourseEdit/NewChapter.tsx          |   6 +-
 front/components/UI/Modal/Modal.tsx           | 226 ++++++++++++++++++
 front/package-lock.json                       |  11 +
 front/package.json                            |   1 +
 7 files changed, 283 insertions(+), 26 deletions(-)
 create mode 100644 front/components/UI/Modal/Modal.tsx

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index d4be427d..1b2a686a 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -14,6 +14,7 @@ import NewChapterModal from "@components/Modals/CourseEdit/NewChapter";
 import NewActivityModal from "@components/Modals/CourseEdit/NewActivity";
 import { createActivity, createFileActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import Modal from "@components/UI/Modal/Modal";
 
 function CourseEdit(params: any) {
   const router = useRouter();
@@ -32,7 +33,7 @@ function CourseEdit(params: any) {
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
 
-  
+
 
   async function getCourseChapters() {
     const courseChapters = await getCourseChaptersMetadata(courseid);
@@ -123,6 +124,8 @@ function CourseEdit(params: any) {
   };
 
   const closeNewActivityModal = () => {
+    console.log("closeNewActivityModal");
+    
     setNewActivityModal(false);
   };
 
@@ -233,13 +236,22 @@ function CourseEdit(params: any) {
       <Page>
         <Title>
           Edit Course {" "}
-          <button
-            onClick={() => {
-              setNewChapterModal(true);
-            }}
-          >
-            Add chapter +
-          </button>
+          <Modal
+            isDialogOpen={newChapterModal}
+            onOpenChange={setNewChapterModal}
+            minHeight="sm"
+            dialogContent={<NewChapterModal
+              closeModal={closeNewChapterModal}
+              submitChapter={submitChapter}
+            ></NewChapterModal>}
+            dialogTitle="Create chapter"
+            dialogDescription="Add a new chapter to the course"
+            dialogTrigger={
+              <button> Add chapter +
+              </button>
+            }
+          />
+
           <button
             onClick={() => {
               updateChapters();
@@ -247,16 +259,22 @@ function CourseEdit(params: any) {
           >
             Save
           </button>
-        </Title>
-        {newChapterModal && <NewChapterModal closeModal={closeNewChapterModal} submitChapter={submitChapter}></NewChapterModal>}
-        {newActivityModal && (
-          <NewActivityModal
+        </Title>-
+          
+          <Modal
+          isDialogOpen={newActivityModal}
+          onOpenChange={setNewActivityModal}
+          minHeight="md"
+          dialogContent={<NewActivityModal
             closeModal={closeNewActivityModal}
             submitFileActivity={submitFileActivity}
             submitActivity={submitActivity}
             chapterId={newActivityModalData}
-          ></NewActivityModal>
-        )}
+          ></NewActivityModal>}
+          dialogTitle="Create Activity"
+          dialogDescription="Choose between types of activities to add to the course"
+          
+        />
 
         <br />
         {winReady && (
@@ -287,7 +305,7 @@ function CourseEdit(params: any) {
             </DragDropContext>
           </ChapterlistWrapper>
         )}
-      </Page>
+      </Page >
     </>
   );
 }
diff --git a/front/components/Drags/Chapter.tsx b/front/components/Drags/Chapter.tsx
index f4253593..850e189a 100644
--- a/front/components/Drags/Chapter.tsx
+++ b/front/components/Drags/Chapter.tsx
@@ -21,8 +21,11 @@ function Chapter(props: any) {
                 props.openNewActivityModal(props.info.list.chapter.id);
               }}
             >
+              
               Create Activity
             </button>
+
+            
             <button
               onClick={() => {
                 props.deleteChapter(props.info.list.chapter.id);
diff --git a/front/components/Modals/CourseEdit/NewActivity.tsx b/front/components/Modals/CourseEdit/NewActivity.tsx
index f82d4d50..063424a0 100644
--- a/front/components/Modals/CourseEdit/NewActivity.tsx
+++ b/front/components/Modals/CourseEdit/NewActivity.tsx
@@ -9,20 +9,18 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
   const [selectedView, setSelectedView] = useState("home");
 
   return (
-    <Modal>
-      <button onClick={ () => {setSelectedView("home")}}>
+    <div>
+      <button onClick={() => { setSelectedView("home") }}>
         <ArrowLeftIcon />
       </button>
       <button onClick={closeModal}>
         <Cross1Icon />
       </button>
-      <h1>Add New Activity</h1>
-      <br />
 
       {selectedView === "home" && (
         <ActivityChooserWrapper>
-          <ActivityButton onClick={() => {setSelectedView("dynamic")}}>✨📄</ActivityButton>
-          <ActivityButton onClick={() => {setSelectedView("video")}}>📹</ActivityButton>
+          <ActivityButton onClick={() => { setSelectedView("dynamic") }}>✨📄</ActivityButton>
+          <ActivityButton onClick={() => { setSelectedView("video") }}>📹</ActivityButton>
         </ActivityChooserWrapper>
       )}
 
@@ -33,8 +31,8 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
       {selectedView === "video" && (
         <VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
       )}
-      
-    </Modal>
+
+    </div>
   );
 }
 
diff --git a/front/components/Modals/CourseEdit/NewChapter.tsx b/front/components/Modals/CourseEdit/NewChapter.tsx
index 1910ebde..aa7549ca 100644
--- a/front/components/Modals/CourseEdit/NewChapter.tsx
+++ b/front/components/Modals/CourseEdit/NewChapter.tsx
@@ -20,13 +20,13 @@ function NewChapterModal({ submitChapter , closeModal }: any) {
   };
 
   return (
-    <Modal>
-      <h1>Add New Chapter <button onClick={closeModal}>X</button></h1>
+    <div>
+      <button onClick={closeModal}>X</button>
       <input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
       <input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
       <br />
       <button onClick={handleSubmit}>Add Chapter</button>
-    </Modal>
+    </div>
   );
 }
 
diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx
new file mode 100644
index 00000000..ff49fadd
--- /dev/null
+++ b/front/components/UI/Modal/Modal.tsx
@@ -0,0 +1,226 @@
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { styled, keyframes } from '@stitches/react';
+import { violet, blackA, mauve, green } from '@radix-ui/colors';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+type ModalParams = {
+    dialogTitle: string;
+    dialogDescription: string;
+    dialogContent: React.ReactNode;
+    dialogClose?: React.ReactNode | null;
+    dialogTrigger?: React.ReactNode;
+    onOpenChange: any;
+    isDialogOpen?: boolean;
+    minHeight?: "sm" | "md" | "lg" | "xl"
+};
+
+const Modal = (params: ModalParams) => (
+    <Dialog.Root open={params.isDialogOpen} onOpenChange={params.onOpenChange}>
+        {params.dialogTrigger ? (
+            <Dialog.Trigger asChild>
+                {params.dialogTrigger}
+            </Dialog.Trigger>
+        ) : null}
+        
+        <Dialog.Portal>
+            <DialogOverlay />
+            <DialogContent minHeight={params.minHeight}>
+                <DialogTopBar>
+                    <DialogTitle>{params.dialogTitle}</DialogTitle>
+                    <DialogDescription>
+                        {params.dialogDescription}
+                    </DialogDescription>
+                </DialogTopBar>
+                {params.dialogContent}
+                <Dialog.Close asChild>
+                    {params.dialogClose}
+                </Dialog.Close>
+            </DialogContent>
+        </Dialog.Portal>
+    </Dialog.Root>
+);
+
+const overlayShow = keyframes({
+    '0%': { opacity: 0 },
+    '100%': { opacity: 1 },
+});
+
+const overlayClose = keyframes({
+    '0%': { opacity: 1 },
+    '100%': { opacity: 0 },
+});
+
+const contentShow = keyframes({
+    '0%': { opacity: 0, transform: 'translate(-50%, -50%) scale(.96)' },
+    '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+});
+
+const contentClose = keyframes({
+    '0%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+    '100%': { opacity: 0, transform: 'translate(-50%, -52%) scale(.96)' },
+});
+
+const DialogOverlay = styled(Dialog.Overlay, {
+    backgroundColor: blackA.blackA9,
+    position: 'fixed',
+
+    inset: 0,
+    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    '&[data-state="closed"]': {
+        animation: `${overlayClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    },
+});
+
+const DialogContent = styled(Dialog.Content, {
+
+    variants: {
+        minHeight: {
+            'sm': {
+                minHeight: '300px',
+            },
+            'md': {
+                minHeight: '500px',
+            },
+            'lg': {
+                minHeight: '700px',
+            },
+            'xl': {
+                minHeight: '900px',
+            },
+        },
+    },
+
+    backgroundColor: 'white',
+    borderRadius: 18,
+    boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '90vw',
+    overflow: 'hidden',
+    maxHeight: '85vh',
+    minHeight: '300px',
+    maxWidth: '600px',
+    padding: 11,
+    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    '&:focus': { outline: 'none' },
+
+    '&[data-state="closed"]': {
+        animation: `${contentClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    },
+    transition: "max-height 0.3s ease-out",
+});
+
+const DialogTopBar = styled('div', {
+    background: "#F7F7F7",
+    padding: "8px 14px ",
+    borderRadius: 14,
+});
+const DialogTitle = styled(Dialog.Title, {
+    margin: 0,
+    fontWeight: 700,
+    letterSpacing: "-0.05em",
+    padding: 0,
+    color: mauve.mauve12,
+    fontSize: 21,
+});
+
+const DialogDescription = styled(Dialog.Description, {
+    color: mauve.mauve11,
+    letterSpacing: "-0.03em",
+    fontSize: 15,
+    padding: 0,
+    margin: 0,
+});
+
+const Flex = styled('div', { display: 'flex' });
+
+const Button = styled('button', {
+    all: 'unset',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    padding: '0 15px',
+    fontSize: 15,
+    lineHeight: 1,
+    fontWeight: 500,
+    height: 35,
+
+    variants: {
+        variant: {
+            violet: {
+                backgroundColor: 'white',
+                color: violet.violet11,
+                boxShadow: `0 2px 10px ${blackA.blackA7}`,
+                '&:hover': { backgroundColor: mauve.mauve3 },
+                '&:focus': { boxShadow: `0 0 0 2px black` },
+            },
+            green: {
+                backgroundColor: green.green4,
+                color: green.green11,
+                '&:hover': { backgroundColor: green.green5 },
+                '&:focus': { boxShadow: `0 0 0 2px ${green.green7}` },
+            },
+        },
+    },
+
+    defaultVariants: {
+        variant: 'violet',
+    },
+});
+
+const IconButton = styled('button', {
+    all: 'unset',
+    fontFamily: 'inherit',
+    borderRadius: '100%',
+    height: 25,
+    width: 25,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: violet.violet11,
+    position: 'absolute',
+    top: 10,
+    right: 10,
+
+    '&:hover': { backgroundColor: violet.violet4 },
+    '&:focus': { boxShadow: `0 0 0 2px ${violet.violet7}` },
+});
+
+const Fieldset = styled('fieldset', {
+    all: 'unset',
+    display: 'flex',
+    gap: 20,
+    alignItems: 'center',
+    marginBottom: 15,
+});
+
+const Label = styled('label', {
+    fontSize: 15,
+    color: violet.violet11,
+    width: 90,
+    textAlign: 'right',
+});
+
+const Input = styled('input', {
+    all: 'unset',
+    width: '100%',
+    flex: '1',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    padding: '0 10px',
+    fontSize: 15,
+    lineHeight: 1,
+    color: violet.violet11,
+    boxShadow: `0 0 0 1px ${violet.violet7}`,
+    height: 35,
+
+    '&:focus': { boxShadow: `0 0 0 2px ${violet.violet8}` },
+});
+
+export default Modal;
\ No newline at end of file
diff --git a/front/package-lock.json b/front/package-lock.json
index 749c6bb9..b562f2b7 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,6 +8,7 @@
       "name": "learnhouse",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-dialog": "^1.0.2",
         "@radix-ui/react-icons": "^1.1.1",
         "@stitches/react": "^1.2.8",
@@ -2352,6 +2353,11 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@radix-ui/colors": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-0.1.8.tgz",
+      "integrity": "sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
@@ -8906,6 +8912,11 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@radix-ui/colors": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-0.1.8.tgz",
+      "integrity": "sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw=="
+    },
     "@radix-ui/primitive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
diff --git a/front/package.json b/front/package.json
index 50b1bf6c..f7ab0554 100644
--- a/front/package.json
+++ b/front/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-icons": "^1.1.1",
     "@stitches/react": "^1.2.8",

From d6289edb29a1ebe0c08666b20db9d60f2c10858b Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 15:54:02 +0200
Subject: [PATCH 02/11] chore: refactor components

---
 .../[courseid]/activity/[activityid]/page.tsx |  4 +-
 .../course/[courseid]/edit/page.tsx           | 16 ++---
 front/app/layout.tsx                          |  2 +-
 front/app/organizations/new/page.tsx          |  5 +-
 front/app/signup/page.tsx                     |  7 +-
 front/components/Modals/Modal.tsx             | 54 ---------------
 .../Activities}/DynamicCanva/DynamicCanva.tsx |  0
 .../Activities}/Video/Video.tsx               |  0
 .../CourseEdit/Draggables}/Activity.tsx       |  0
 .../CourseEdit/Draggables}/Chapter.tsx        |  0
 .../CourseEdit/Draggables}/data.ts            |  0
 .../CourseEdit/NewActivity.tsx                |  1 -
 .../NewActivityModal/DynamicCanva.tsx         |  0
 .../CourseEdit/NewActivityModal/Video.tsx     |  0
 .../CourseEdit/NewChapter.tsx                 |  1 -
 front/components/UI/Elements/Menu.tsx         |  6 +-
 front/components/UI/Header.tsx                | 13 ----
 front/components/UI/Layout.tsx                | 66 -------------------
 front/components/UI/Modal/Modal.tsx           |  1 -
 .../{lib => UI/libs}/styled-registry.tsx      |  0
 front/services/courses/chapters.ts            |  2 +-
 21 files changed, 13 insertions(+), 165 deletions(-)
 delete mode 100644 front/components/Modals/Modal.tsx
 rename front/components/{ActivityViews => Pages/Activities}/DynamicCanva/DynamicCanva.tsx (100%)
 rename front/components/{ActivityViews => Pages/Activities}/Video/Video.tsx (100%)
 rename front/components/{Drags => Pages/CourseEdit/Draggables}/Activity.tsx (100%)
 rename front/components/{Drags => Pages/CourseEdit/Draggables}/Chapter.tsx (100%)
 rename front/components/{Drags => Pages/CourseEdit/Draggables}/data.ts (100%)
 rename front/components/{Modals => Pages}/CourseEdit/NewActivity.tsx (98%)
 rename front/components/{Modals => Pages}/CourseEdit/NewActivityModal/DynamicCanva.tsx (100%)
 rename front/components/{Modals => Pages}/CourseEdit/NewActivityModal/Video.tsx (100%)
 rename front/components/{Modals => Pages}/CourseEdit/NewChapter.tsx (97%)
 delete mode 100644 front/components/UI/Header.tsx
 delete mode 100644 front/components/UI/Layout.tsx
 rename front/components/{lib => UI/libs}/styled-registry.tsx (100%)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
index 1ba17cb3..7156f041 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
@@ -5,10 +5,10 @@ import React, { useMemo } from "react";
 import Layout from "@components/UI/Layout";
 import { getActivity } from "@services/courses/activities";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
-import Canva from "@components/ActivityViews/DynamicCanva/DynamicCanva";
+import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
 import styled from "styled-components"; 
 import { getCourse } from "@services/courses/courses";
-import VideoActivity from "@components/ActivityViews/Video/Video";
+import VideoActivity from "@components/Pages/Activities/Video/Video";
 import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { swrFetcher } from "@services/utils/requests";
diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index 1b2a686a..cafe8d37 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -2,23 +2,19 @@
 import React from "react";
 import { useState, useEffect } from "react";
 import styled from "styled-components";
-import { Header } from "@components/UI/Header";
-import Layout from "@components/UI/Layout";
 import { Title } from "@components/UI/Elements/Styles/Title";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
-import { initialData, initialData2 } from "@components/Drags/data";
-import Chapter from "@components/Drags/Chapter";
+import { initialData, initialData2 } from "@components/Pages/CourseEdit/Draggables/data";
+import Chapter from "@components/Pages/CourseEdit/Draggables/Chapter";
 import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "@services/courses/chapters";
 import { useRouter } from "next/navigation";
-import NewChapterModal from "@components/Modals/CourseEdit/NewChapter";
-import NewActivityModal from "@components/Modals/CourseEdit/NewActivity";
+import NewChapterModal from "@components/Pages/CourseEdit/NewChapter";
+import NewActivityModal from "@components/Pages/CourseEdit/NewActivity";
 import { createActivity, createFileActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 import Modal from "@components/UI/Modal/Modal";
 
 function CourseEdit(params: any) {
-  const router = useRouter();
-
   // Initial Course State
   const [data, setData] = useState(initialData2) as any;
 
@@ -33,8 +29,6 @@ function CourseEdit(params: any) {
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
 
-
-
   async function getCourseChapters() {
     const courseChapters = await getCourseChaptersMetadata(courseid);
     setData(courseChapters);
@@ -107,9 +101,7 @@ function CourseEdit(params: any) {
   };
 
   /* 
-  
   Modals
-
   */
 
   const openNewActivityModal = async (chapterId: any) => {
diff --git a/front/app/layout.tsx b/front/app/layout.tsx
index fc7645c4..dfad1471 100644
--- a/front/app/layout.tsx
+++ b/front/app/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 import "../styles/globals.css";
-import StyledComponentsRegistry from "../components/lib/styled-registry";
+import StyledComponentsRegistry from "../components/UI/libs/styled-registry";
 import { motion } from "framer-motion";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/front/app/organizations/new/page.tsx b/front/app/organizations/new/page.tsx
index a645e3d8..6fa3dcb3 100644
--- a/front/app/organizations/new/page.tsx
+++ b/front/app/organizations/new/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import Layout from "../../../components/UI/Layout";
 import { Title } from "../../../components/UI/Elements/Styles/Title";
 import { createNewOrganization } from "../../../services/organizations/orgs";
 
@@ -34,7 +33,7 @@ const Organizations = () => {
   };
 
   return (
-    <Layout>
+    <div>
       <Title>New Organization</Title>
       Name: <input onChange={handleNameChange} type="text" />
       <br />
@@ -45,7 +44,7 @@ const Organizations = () => {
       Email Address: <input onChange={handleEmailChange} type="text" />
       <br />
       <button onClick={handleSubmit}>Create</button>
-    </Layout>
+    </div>
   );
 };
 
diff --git a/front/app/signup/page.tsx b/front/app/signup/page.tsx
index 6c30f89d..2860c4d8 100644
--- a/front/app/signup/page.tsx
+++ b/front/app/signup/page.tsx
@@ -1,7 +1,5 @@
 "use client";
 import React from "react";
-import { Header } from "../../components/UI/Header";
-import Layout from "../../components/UI/Layout";
 import { Title } from "../../components/UI/Elements/Styles/Title";
 import { signup } from "../../services/auth/auth";
 
@@ -31,8 +29,7 @@ const SignUp = () => {
 
   return (
     <div>
-      <Layout title="Sign up">
-      <Header></Header>
+      <div title="Sign up">
         <Title>Sign up </Title>
 
         <form>
@@ -43,7 +40,7 @@ const SignUp = () => {
             Sign up
           </button>
         </form>
-      </Layout>
+      </div>
     </div>
   );
 };
diff --git a/front/components/Modals/Modal.tsx b/front/components/Modals/Modal.tsx
deleted file mode 100644
index 7923df5b..00000000
--- a/front/components/Modals/Modal.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { motion, AnimatePresence } from "framer-motion";
-
-function Modal(props: any) {
-  return (
-    <div>
-      <Overlay>
-        <AnimatePresence>
-          <motion.div
-            initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
-            animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
-            key="modal"
-            transition={{
-              type: "spring",
-              stiffness: 360,
-              damping: 70,
-              delay: 0.02,
-            }}
-            exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
-          >
-            <Content>{props.children}</Content>
-          </motion.div>
-        </AnimatePresence>
-      </Overlay>
-    </div>
-  );
-}
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  background-color: #00000029;
-  backdrop-filter: blur(1px);
-
-`;
-
-const Content = styled.div`
-  background-color: white;
-  border-radius: 5px;
-  padding: 20px;
-  width: 500px;
-  height: 500px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
-`;
-export default Modal;
diff --git a/front/components/ActivityViews/DynamicCanva/DynamicCanva.tsx b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
similarity index 100%
rename from front/components/ActivityViews/DynamicCanva/DynamicCanva.tsx
rename to front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
diff --git a/front/components/ActivityViews/Video/Video.tsx b/front/components/Pages/Activities/Video/Video.tsx
similarity index 100%
rename from front/components/ActivityViews/Video/Video.tsx
rename to front/components/Pages/Activities/Video/Video.tsx
diff --git a/front/components/Drags/Activity.tsx b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
similarity index 100%
rename from front/components/Drags/Activity.tsx
rename to front/components/Pages/CourseEdit/Draggables/Activity.tsx
diff --git a/front/components/Drags/Chapter.tsx b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
similarity index 100%
rename from front/components/Drags/Chapter.tsx
rename to front/components/Pages/CourseEdit/Draggables/Chapter.tsx
diff --git a/front/components/Drags/data.ts b/front/components/Pages/CourseEdit/Draggables/data.ts
similarity index 100%
rename from front/components/Drags/data.ts
rename to front/components/Pages/CourseEdit/Draggables/data.ts
diff --git a/front/components/Modals/CourseEdit/NewActivity.tsx b/front/components/Pages/CourseEdit/NewActivity.tsx
similarity index 98%
rename from front/components/Modals/CourseEdit/NewActivity.tsx
rename to front/components/Pages/CourseEdit/NewActivity.tsx
index 063424a0..fa67bc86 100644
--- a/front/components/Modals/CourseEdit/NewActivity.tsx
+++ b/front/components/Pages/CourseEdit/NewActivity.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
-import Modal from "../Modal";
 import styled from "styled-components";
 import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
 import VideoModal from "./NewActivityModal/Video";
diff --git a/front/components/Modals/CourseEdit/NewActivityModal/DynamicCanva.tsx b/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
similarity index 100%
rename from front/components/Modals/CourseEdit/NewActivityModal/DynamicCanva.tsx
rename to front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
diff --git a/front/components/Modals/CourseEdit/NewActivityModal/Video.tsx b/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
similarity index 100%
rename from front/components/Modals/CourseEdit/NewActivityModal/Video.tsx
rename to front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
diff --git a/front/components/Modals/CourseEdit/NewChapter.tsx b/front/components/Pages/CourseEdit/NewChapter.tsx
similarity index 97%
rename from front/components/Modals/CourseEdit/NewChapter.tsx
rename to front/components/Pages/CourseEdit/NewChapter.tsx
index aa7549ca..11cb2927 100644
--- a/front/components/Modals/CourseEdit/NewChapter.tsx
+++ b/front/components/Pages/CourseEdit/NewChapter.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import Modal from "../Modal";
 
 function NewChapterModal({ submitChapter , closeModal }: any) {
   const [chapterName, setChapterName] = useState("");
diff --git a/front/components/UI/Elements/Menu.tsx b/front/components/UI/Elements/Menu.tsx
index 7b9d7629..c0907232 100644
--- a/front/components/UI/Elements/Menu.tsx
+++ b/front/components/UI/Elements/Menu.tsx
@@ -6,13 +6,9 @@ import learnhouseIcon from "public/learnhouse_icon.png";
 import learnhouseLogo from "public/learnhouse_logo.png";
 import Link from "next/link";
 import Image from "next/image";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { headers } from "next/headers";
-import { getOrgFromUri, getUriWithOrg } from "@services/config/config";
+import { getUriWithOrg } from "@services/config/config";
 
 export const Menu = (props : any ) => {
-  const router = useRouter();
-  const pathname = usePathname();
   const orgslug = props.orgslug;
   
   
diff --git a/front/components/UI/Header.tsx b/front/components/UI/Header.tsx
deleted file mode 100644
index 012a2dfb..00000000
--- a/front/components/UI/Header.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import Link from 'next/link'
-import styled from "styled-components";
-
-
-export const Header = () => {
-  return (
-    <div>
-    </div>
-  );
-};
-
-
diff --git a/front/components/UI/Layout.tsx b/front/components/UI/Layout.tsx
deleted file mode 100644
index 070eea57..00000000
--- a/front/components/UI/Layout.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-import React from "react";
-import Head from "next/head";
-import styled from "styled-components";
-import AuthProvider from "../Security/AuthProvider";
-import { motion } from "framer-motion";
-import { Menu } from "./Elements/Menu";
-
-const Layout = (props: any) => {
-  const variants = {
-    hidden: { opacity: 0, x: 0, y: 0 },
-    enter: { opacity: 1, x: 0, y: 0 },
-    exit: { opacity: 0, x: 0, y: 0 },
-  };
-
-  return (
-      <AuthProvider>
-        <ProjectPhaseLabel>🚧 Dev Phase</ProjectPhaseLabel>
-        <Menu orgslug={props.orgslug}></Menu>
-        <motion.main
-          variants={variants} // Pass the variant object into Framer Motion
-          initial="hidden" // Set the initial state to variants.hidden
-          animate="enter" // Animated state to variants.enter
-          exit="exit" // Exit state (used later) to variants.exit
-          transition={{ type: "linear" }} // Set the transition to linear
-          className=""
-        >
-          <Main className="min-h-screen">{props.children}</Main>
-        </motion.main>
-        <Footer>
-          <p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
-        </Footer>
-      </AuthProvider>
-  );
-};
-
-const Main = styled.main`
-  min-height: 100vh;
-`;
-
-const Footer = styled.footer`
-  display: flex;
-  justify-content: center;
-  margin: 20px;
-  font-size: 16px;
-
-  img {
-    width: 20px;
-    opacity: 0.4;
-    display: inline;
-  }
-`;
-
-export const ProjectPhaseLabel = styled.div`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  padding: 9px;
-  background-color: #080501;
-  color: white;
-  font-size: 19px;
-  font-weight: bold;
-  border-radius: 5px 0 0 0px;
-`;
-
-export default Layout;
diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx
index ff49fadd..6eae03de 100644
--- a/front/components/UI/Modal/Modal.tsx
+++ b/front/components/UI/Modal/Modal.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';
 import { violet, blackA, mauve, green } from '@radix-ui/colors';
-import { Cross2Icon } from '@radix-ui/react-icons';
 
 type ModalParams = {
     dialogTitle: string;
diff --git a/front/components/lib/styled-registry.tsx b/front/components/UI/libs/styled-registry.tsx
similarity index 100%
rename from front/components/lib/styled-registry.tsx
rename to front/components/UI/libs/styled-registry.tsx
diff --git a/front/services/courses/chapters.ts b/front/services/courses/chapters.ts
index 5cf8077c..86ad056f 100644
--- a/front/services/courses/chapters.ts
+++ b/front/services/courses/chapters.ts
@@ -1,4 +1,4 @@
-import { initialData } from "../../components/Drags/data";
+import { initialData } from "../../components/Pages/CourseEdit/Draggables/data";
 import { getAPIUrl } from "@services/config/config";
 import { RequestBody } from "@services/utils/requests";
 

From a10fcbd9a077b803120e56cf5022b1568b25c38a Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 16:24:06 +0200
Subject: [PATCH 03/11] chore : remove deprecated imports

---
 front/app/login/page.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/front/app/login/page.tsx b/front/app/login/page.tsx
index 19bf4ba7..50698b2a 100644
--- a/front/app/login/page.tsx
+++ b/front/app/login/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { useRouter } from 'next/navigation';
 import React from "react";
-import { Header } from "../../components/UI/Header";
-import Layout from "../../components/UI/Layout";
 import { Title } from "../../components/UI/Elements/Styles/Title";
 import { loginAndGetToken } from "../../services/auth/auth";
 
@@ -35,7 +33,6 @@ const Login = () => {
   return (
     <div>
       < >
-      <Header></Header>
         <Title>Login</Title>
 
         <form>

From 5eabb0b16a587383602b89bd411bb9e93788f01c Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 18:11:09 +0200
Subject: [PATCH 04/11] feat: add Forms component

---
 .../Pages/CourseEdit/NewChapter.tsx           |  41 +++++--
 front/components/UI/Form/Form.tsx             |  86 +++++++++++++++
 front/components/UI/Modal/Modal.tsx           |  13 ++-
 front/package-lock.json                       | 103 ++++++++++++++++++
 front/package.json                            |   1 +
 5 files changed, 231 insertions(+), 13 deletions(-)
 create mode 100644 front/components/UI/Form/Form.tsx

diff --git a/front/components/Pages/CourseEdit/NewChapter.tsx b/front/components/Pages/CourseEdit/NewChapter.tsx
index 11cb2927..8e03201c 100644
--- a/front/components/Pages/CourseEdit/NewChapter.tsx
+++ b/front/components/Pages/CourseEdit/NewChapter.tsx
@@ -1,6 +1,9 @@
+import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/UI/Form/Form";
+import { FormMessage } from "@radix-ui/react-form";
+import * as Form from '@radix-ui/react-form';
 import React, { useState } from "react";
 
-function NewChapterModal({ submitChapter , closeModal }: any) {
+function NewChapterModal({ submitChapter, closeModal }: any) {
   const [chapterName, setChapterName] = useState("");
   const [chapterDescription, setChapterDescription] = useState("");
 
@@ -15,17 +18,37 @@ function NewChapterModal({ submitChapter , closeModal }: any) {
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     console.log({ chapterName, chapterDescription });
-    submitChapter({ name : chapterName, description : chapterDescription , activities : [] });
+    submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
   };
 
   return (
-    <div>
-      <button onClick={closeModal}>X</button>
-      <input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
-      <input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
-      <br />
-      <button onClick={handleSubmit}>Add Chapter</button>
-    </div>
+
+    <FormLayout onSubmit={handleSubmit}>
+      <FormField name="chapter-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Chapter name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a chapter name</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleChapterNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="chapter-desc">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Chapter description</FormLabel>
+          <FormMessage match="valueMissing">Please provide a chapter description</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Textarea onChange={handleChapterDescriptionChange} required />
+        </Form.Control>
+      </FormField>
+
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create chapter</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 
diff --git a/front/components/UI/Form/Form.tsx b/front/components/UI/Form/Form.tsx
new file mode 100644
index 00000000..d904e185
--- /dev/null
+++ b/front/components/UI/Form/Form.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import * as Form from '@radix-ui/react-form';
+import { styled, keyframes } from '@stitches/react';
+import { blackA, violet, mauve } from '@radix-ui/colors';
+
+const FormLayout = (props: any, onSubmit : any ) => (
+    <FormRoot onSubmit={props.onSubmit}>
+        {props.children}
+    </FormRoot>
+);
+
+export const FormRoot = styled(Form.Root, {
+    margin: 7
+});
+
+export const FormField = styled(Form.Field, {
+    display: 'grid',
+    marginBottom: 10,
+});
+
+export const FormLabel = styled(Form.Label, {
+    fontSize: 15,
+    fontWeight: 500,
+    lineHeight: '35px',
+    color: 'black',
+});
+
+export const FormMessage = styled(Form.Message, {
+    fontSize: 13,
+    color: 'white',
+    opacity: 0.8,
+});
+
+export const Flex = styled('div', { display: 'flex' });
+
+export const inputStyles = {
+    all: 'unset',
+    boxSizing: 'border-box',
+    width: '100%',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    fontSize: 15,
+    color: '#7c7c7c',
+    background: "#F9FAFB",
+    boxShadow: `0 0 0 1px #edeeef`,
+    '&:hover': { boxShadow: `0 0 0 1px #edeeef` },
+    '&:focus': { boxShadow: `0 0 0 2px #edeeef` },
+    '&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
+    
+};
+
+export const Input = styled('input', {
+    ...inputStyles,
+    height: 35,
+    lineHeight: 1,
+    padding: '0 10px',
+    border: 'none',
+});
+
+export const Textarea = styled('textarea', {
+    ...inputStyles,
+    resize: 'none',
+    padding: 10,
+});
+
+export const ButtonBlack = styled('button', {
+    all: 'unset',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+    padding: '0 15px',
+    fontSize: 15,
+    lineHeight: 1,
+    fontWeight: 500,
+    height: 35,
+
+    background: "#000000",
+    color: "#FFFFFF",
+    '&:hover': { backgroundColor: "#181818" , cursor: "pointer"},
+    '&:focus': { boxShadow: `0 0 0 2px black` },
+});
+
+export default FormLayout;
\ No newline at end of file
diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx
index 6eae03de..1f95d535 100644
--- a/front/components/UI/Modal/Modal.tsx
+++ b/front/components/UI/Modal/Modal.tsx
@@ -21,7 +21,7 @@ const Modal = (params: ModalParams) => (
                 {params.dialogTrigger}
             </Dialog.Trigger>
         ) : null}
-        
+
         <Dialog.Portal>
             <DialogOverlay />
             <DialogContent minHeight={params.minHeight}>
@@ -32,10 +32,15 @@ const Modal = (params: ModalParams) => (
                     </DialogDescription>
                 </DialogTopBar>
                 {params.dialogContent}
-                <Dialog.Close asChild>
-                    {params.dialogClose}
-                </Dialog.Close>
+                {params.dialogClose ? (
+                    <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                        <Dialog.Close asChild>
+                            {params.dialogClose}
+                        </Dialog.Close>
+                    </Flex>
+                ) : null}
             </DialogContent>
+
         </Dialog.Portal>
     </Dialog.Root>
 );
diff --git a/front/package-lock.json b/front/package-lock.json
index b562f2b7..3f2c5121 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-dialog": "^1.0.2",
+        "@radix-ui/react-form": "^0.0.2",
         "@radix-ui/react-icons": "^1.1.1",
         "@stitches/react": "^1.2.8",
         "@tiptap/extension-collaboration": "^2.0.0-beta.199",
@@ -2457,6 +2458,37 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.2.tgz",
+      "integrity": "sha512-+WQU4Gs4MqjYsHwh5d19Ka4CMcWeXd7WPuWYCYGtNbDRMHFG2TtgM9PlEK4Yrk7wG1f5/da6Bgtteky2ggDXUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-label": "2.0.1",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-icons": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
@@ -2477,6 +2509,32 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.1.tgz",
+      "integrity": "sha512-qcfbS3B8hTYmEO44RNcXB6pegkxRsJIbdxTMu0PEX0Luv5O2DvTIwwVYxQfUwLpM88EL84QRPLOLgwUSApMsLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
@@ -8995,6 +9053,31 @@
         "@radix-ui/react-use-callback-ref": "1.0.0"
       }
     },
+    "@radix-ui/react-form": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.2.tgz",
+      "integrity": "sha512-+WQU4Gs4MqjYsHwh5d19Ka4CMcWeXd7WPuWYCYGtNbDRMHFG2TtgM9PlEK4Yrk7wG1f5/da6Bgtteky2ggDXUg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-label": "2.0.1",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "dependencies": {
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-icons": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
@@ -9010,6 +9093,26 @@
         "@radix-ui/react-use-layout-effect": "1.0.0"
       }
     },
+    "@radix-ui/react-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.1.tgz",
+      "integrity": "sha512-qcfbS3B8hTYmEO44RNcXB6pegkxRsJIbdxTMu0PEX0Luv5O2DvTIwwVYxQfUwLpM88EL84QRPLOLgwUSApMsLQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "dependencies": {
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-portal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
diff --git a/front/package.json b/front/package.json
index f7ab0554..eea65ed2 100644
--- a/front/package.json
+++ b/front/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.1.1",
     "@stitches/react": "^1.2.8",
     "@tiptap/extension-collaboration": "^2.0.0-beta.199",

From 7202baa12260f5f098fcb88a015c4eb06fb7968c Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 20:28:51 +0200
Subject: [PATCH 05/11] feat: improve activity type chooser UI

---
 .../course/[courseid]/edit/page.tsx           |   3 +-
 .../Pages/CourseEdit/NewActivity.tsx          | 107 +++++++++++++-----
 .../NewActivityModal/DynamicCanva.tsx         |  36 ++++--
 .../CourseEdit/NewActivityModal/Video.tsx     |  38 +++++--
 front/components/UI/Modal/Modal.tsx           |  15 ++-
 .../dynamic-page-activity.png                 | Bin 0 -> 512 bytes
 .../activities_types/video-page-activity.png  | Bin 0 -> 586 bytes
 7 files changed, 149 insertions(+), 50 deletions(-)
 create mode 100644 front/public/activities_types/dynamic-page-activity.png
 create mode 100644 front/public/activities_types/video-page-activity.png

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index cafe8d37..84e237b4 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -256,7 +256,8 @@ function CourseEdit(params: any) {
           <Modal
           isDialogOpen={newActivityModal}
           onOpenChange={setNewActivityModal}
-          minHeight="md"
+          minHeight="no-min"
+          addDefCloseButton={false}
           dialogContent={<NewActivityModal
             closeModal={closeNewActivityModal}
             submitFileActivity={submitFileActivity}
diff --git a/front/components/Pages/CourseEdit/NewActivity.tsx b/front/components/Pages/CourseEdit/NewActivity.tsx
index fa67bc86..9062e2ba 100644
--- a/front/components/Pages/CourseEdit/NewActivity.tsx
+++ b/front/components/Pages/CourseEdit/NewActivity.tsx
@@ -1,25 +1,38 @@
 import React, { useState } from "react";
 import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
-import styled from "styled-components";
+import DynamicPageActivityImage from "public/activities_types/dynamic-page-activity.png";
+import VideoPageActivityImage from "public//activities_types/video-page-activity.png";
+import { styled, keyframes } from '@stitches/react';
 import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
 import VideoModal from "./NewActivityModal/Video";
+import Image from "next/image";
 
 function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chapterId }: any) {
   const [selectedView, setSelectedView] = useState("home");
 
+  
   return (
     <div>
-      <button onClick={() => { setSelectedView("home") }}>
-        <ArrowLeftIcon />
-      </button>
-      <button onClick={closeModal}>
-        <Cross1Icon />
-      </button>
-
       {selectedView === "home" && (
         <ActivityChooserWrapper>
-          <ActivityButton onClick={() => { setSelectedView("dynamic") }}>✨📄</ActivityButton>
-          <ActivityButton onClick={() => { setSelectedView("video") }}>📹</ActivityButton>
+          <ActivityOption onClick={() => { setSelectedView("dynamic") }}>
+            <ActivityTypeImage>
+              <Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
+            </ActivityTypeImage>
+            <ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
+          </ActivityOption>
+          <ActivityOption onClick={() => { setSelectedView("video") }}>
+            <ActivityTypeImage>
+              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
+            </ActivityTypeImage>
+            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
+          </ActivityOption>
+          <ActivityOption onClick={() => { setSelectedView("video") }}>
+            <ActivityTypeImage>
+              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
+            </ActivityTypeImage>
+            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
+          </ActivityOption>
         </ActivityChooserWrapper>
       )}
 
@@ -30,30 +43,64 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
       {selectedView === "video" && (
         <VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
       )}
-
     </div>
   );
 }
 
-const ActivityChooserWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-`;
+const ActivityChooserWrapper = styled("div", {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "start",
+  marginTop: 10,
+});
 
-const ActivityButton = styled.button`
-  padding: 40px;
-  border-radius: 10px !important;
-  border: none;
-  font-size: 80px !important;
-  margin: 40px;
-  background-color: #8c949c33 !important;
-  cursor: pointer;
-  &:hover {
-    background-color: #8c949c7b;
-  }
-`;
+const ActivityOption = styled("div", {
+  width: "180px",
+  textAlign: "center",
+  borderRadius: 10,
+  background: "#F6F6F6",
+  border: "4px solid #F5F5F5",
+  margin: "auto",
+
+  // hover 
+  "&:hover": {
+    cursor: "pointer",
+    background: "#ededed",
+    border: "4px solid #ededed",
+
+    transition: "background 0.2s ease-in-out, border 0.2s ease-in-out",
+  },
+});
+
+const ActivityTypeImage = styled("div", {
+  height: 80,
+  borderRadius: 8,
+  margin: 2,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "end",
+  textAlign: "center",
+  background: "#ffffff",
+
+  // hover 
+  "&:hover": {
+    cursor: "pointer",
+  },
+});
+
+const ActivityTypeTitle = styled("div", {
+  display: "flex",
+  fontSize: 12,
+  height: "20px",
+  fontWeight: 500,
+  color: "rgba(0, 0, 0, 0.38);",
+
+  // center text vertically
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+
+});
 
 export default NewActivityModal;
diff --git a/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx b/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
index e53052d3..1f92fa30 100644
--- a/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
+++ b/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
@@ -1,4 +1,6 @@
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
 import React, { useState } from "react";
+import * as Form from '@radix-ui/react-form';
 
 function DynamicCanvaModal({ submitActivity, chapterId }: any) {
   const [activityName, setActivityName] = useState("");
@@ -22,14 +24,32 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
     });
   };
   return (
-    <div>
-      <div>
-        <input type="text" onChange={handleActivityNameChange} placeholder="Activity Name" /> <br />
-        <input type="text" onChange={handleActivityDescriptionChange} placeholder="Activity Description" />
-        <br />
-        <button onClick={handleSubmit}>Add Activity</button>
-      </div>
-    </div>
+    <FormLayout onSubmit={handleSubmit}>
+      <FormField name="dynamic-activity-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Activity name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a name for your activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleActivityNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="dynamic-activity-desc">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Activity description</FormLabel>
+          <FormMessage match="valueMissing">Please provide a description for your activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Textarea onChange={handleActivityDescriptionChange} required />
+        </Form.Control>
+      </FormField>
+
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 
diff --git a/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx b/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
index 1c8f03ae..52d133fe 100644
--- a/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
+++ b/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
+import React, { useState } from "react";
+import * as Form from '@radix-ui/react-form';
 
 function VideoModal({ submitFileActivity, chapterId }: any) {
   const [video, setVideo] = React.useState(null) as any;
@@ -21,16 +23,32 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
    and the actual upload isn't happening here anyway, it's in the submitFileActivity function */
 
   return (
-    <div>
-      <input type="text" placeholder="video title" onChange={handleNameChange} />
-      <br />
-      <br />
-      <input type="file" onChange={handleVideoChange} name="video" id="" />
-      <br />
+      <FormLayout onSubmit={handleSubmit}>
+      <FormField name="video-activity-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Video name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a name for your video activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="video-activity-file">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Video file</FormLabel>
+          <FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <input type="file" onChange={handleVideoChange} required />
+        </Form.Control>
+      </FormField>
 
-      <br />
-      <button onClick={handleSubmit}>Send</button>
-    </div>
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 
diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx
index 1f95d535..af857bc1 100644
--- a/front/components/UI/Modal/Modal.tsx
+++ b/front/components/UI/Modal/Modal.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';
 import { violet, blackA, mauve, green } from '@radix-ui/colors';
+import { ButtonBlack } from '../Form/Form';
 
 type ModalParams = {
     dialogTitle: string;
@@ -9,9 +10,10 @@ type ModalParams = {
     dialogContent: React.ReactNode;
     dialogClose?: React.ReactNode | null;
     dialogTrigger?: React.ReactNode;
+    addDefCloseButton?: boolean;
     onOpenChange: any;
     isDialogOpen?: boolean;
-    minHeight?: "sm" | "md" | "lg" | "xl"
+    minHeight?: "sm" | "md" | "lg" | "xl" | "no-min";
 };
 
 const Modal = (params: ModalParams) => (
@@ -39,6 +41,14 @@ const Modal = (params: ModalParams) => (
                         </Dialog.Close>
                     </Flex>
                 ) : null}
+                {params.addDefCloseButton ? (
+                    <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                        <Dialog.Close asChild>
+                        <ButtonBlack type="submit" css={{ marginTop: 10 }}>Close</ButtonBlack>
+                        </Dialog.Close>
+                    </Flex>
+                ) : null}
+
             </DialogContent>
 
         </Dialog.Portal>
@@ -80,6 +90,9 @@ const DialogContent = styled(Dialog.Content, {
 
     variants: {
         minHeight: {
+            'no-min': {
+                minHeight: '0px',
+            },
             'sm': {
                 minHeight: '300px',
             },
diff --git a/front/public/activities_types/dynamic-page-activity.png b/front/public/activities_types/dynamic-page-activity.png
new file mode 100644
index 0000000000000000000000000000000000000000..3af83760b5110f4df8a0cfdfdde0559b864599b7
GIT binary patch
literal 512
zcmeAS@N?(olHy`uVBq!ia0vp^=|F7H!3HG%&bgKhq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{TfpSwlT^vIy7~kIY%{t^D(f+aA$*gIC9?NuF
zr@fx*FA0C;*lPZP?XBRhlI2Ycn$DEOz1$|r)%H_*zC4SIip2aHUmlf+G8?)1P8|6^
zpBB$s);23lbLsVq8DC`U4%bKpraY0`E%DfB&iUuxV_qFykS6Q5JlN>O$F<81Jx*0`
z)+}rhbeDh=5z)U6q;1~m*PpR5B4&A1SM<5XZG~H>@0D2oY*uje+tlZudJX(IkhJjT
z2}D&tsPJx<ZsE(k5YuBk|NPr|cW!@wdq^QfLY?JMhjNbv645n1pRc_+cYAcVp;X@T
z-00apYG!i%|Nr<Dp1%41d&|p%Pm6Z0`x4t#SflpBJ#*>v8K~OPOha(H3TL&|)qdQ+
zYPU%J&zm`6b2$H<53kzazJS|&6L<1_RTM|qoI9s*@^OvilOq!L71J7*#d>Al{Bc?B
nk853W>WZ`chS~2Q#?~<$o>_i1A<)wR7-0;au6{1-oD!M<7hu|5

literal 0
HcmV?d00001

diff --git a/front/public/activities_types/video-page-activity.png b/front/public/activities_types/video-page-activity.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdacec09344a8446b5774ac7c36b4afe6ccc70d1
GIT binary patch
literal 586
zcmeAS@N?(olHy`uVBq!ia0vp^=|F7H!3HG%&bgKhq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{TfpYgfT^vIy7~kIY&N>tza_r+|fg{@spKS47
zVf`{}*CM@zW$f=3#5$?-$#euB5iiPr&&kVC>+|>A$KQ<-#*^(U?+739nRNK!hY6`S
zy>Hd{tPgrIEzR)QbHC-EXV$h?in}#VtO`+V$t<&)8yCD%UD4$8n+h8@MT@F0Pn;%P
zy16DrCZUJ9r?A10&)^v2F^dBd>=KU|k}(8loV1vJ+V$M?%@yGtic+atqdcpsqU-g#
zoYW?J{(U!b<?$<0Y1?oAy>b8j_f!+9o!u#~ZvPQmc60yz_o)^#*Cy^MD0UWbny_kB
z%EpL4k{6}Q%d^jxX6}r+c6-{+y;HBvX0z?O_Ihi?)4I8v@8+d$zS-egzLDdqgIJ*x
z!yCOvFRV@|eJ?C|Yb@7)RB3*3|B}0T*SUjgx1WlYk$w1L;-$A`N3F~YKiNz_m=G}k
zSjlbX;KDB=SACYO|5|0MdHT}b2bZseL>)K0o-E0Ked_-ie^O`LWn2!Pe*L)x@8tXI
zu4bLIebB;y)!TRleIAE6O)xpvE-**nko5o448fwwbDsUm7v43o>`Y6ZufAdN+l8_F
Z82*XR&bBsh763*)gQu&X%Q~loCII)w0WSam

literal 0
HcmV?d00001


From 88b064410f876fbf73cc61dce85f2194cd3afece Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 22:49:31 +0200
Subject: [PATCH 06/11] fix: chapters deletion bug

---
 src/services/courses/chapters.py | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/services/courses/chapters.py b/src/services/courses/chapters.py
index 46512220..92b82b71 100644
--- a/src/services/courses/chapters.py
+++ b/src/services/courses/chapters.py
@@ -113,8 +113,14 @@ async def delete_coursechapter(request: Request, coursechapter_id: str,  current
         # verify course rights
         await verify_rights(request, course["course_id"], current_user, "delete")
 
-        courses.update_one({"chapters_content.coursechapter_id": coursechapter_id}, {
+        # Remove coursechapter from course
+        res = await courses.update_one({"course_id": course["course_id"]}, {
+            "$pull": {"chapters": coursechapter_id}})
+
+        await courses.update_one({"chapters_content.coursechapter_id": coursechapter_id}, {
             "$pull": {"chapters_content": {"coursechapter_id": coursechapter_id}}})
+        
+        
 
         return {"message": "Coursechapter deleted"}
 

From 46f13fac872dd6b782cf9975994de4d74d7ae151 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 23:23:07 +0200
Subject: [PATCH 07/11] feat: init public endpoints

---
 src/routers/courses/courses.py      |  2 +-
 src/security/auth.py                | 16 ++++++++++------
 src/security/security.py            | 12 ++++++++++++
 src/services/courses/courses.py     |  6 +++++-
 src/services/users/schemas/users.py |  5 +++++
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/routers/courses/courses.py b/src/routers/courses/courses.py
index 6bd0d20e..bb6252e4 100644
--- a/src/routers/courses/courses.py
+++ b/src/routers/courses/courses.py
@@ -14,7 +14,7 @@ async def api_create_course(request: Request, org_id: str, name: str = Form(), m
     Create new Course
     """
     course = Course(name=name, mini_description=mini_description, description=description,
-                    org_id=org_id, public=public, thumbnail="", chapters=[], learnings=[])
+                    org_id=org_id, public=public, thumbnail="", chapters=[], chapters_content=[], learnings=[])
     return await create_course(request, course, org_id,  current_user, thumbnail)
 
 
diff --git a/src/security/auth.py b/src/security/auth.py
index 60a1487a..c075ab92 100644
--- a/src/security/auth.py
+++ b/src/security/auth.py
@@ -4,6 +4,7 @@ from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
 from passlib.context import CryptContext
 from jose import JWTError, jwt
 from datetime import datetime, timedelta
+from src.services.users.schemas.users import AnonymousUser
 from src.services.users.users import *
 from fastapi import Cookie, FastAPI
 from src.security.security import *
@@ -76,14 +77,17 @@ async def get_current_user(request: Request, Authorize: AuthJWT = Depends()):
     )
     
     try:
-        Authorize.jwt_required()
-        username = Authorize.get_jwt_subject()
+        Authorize.jwt_optional()
+        username = Authorize.get_jwt_subject() or None
         token_data = TokenData(username=username)  # type: ignore
     except JWTError:
         raise credentials_exception
-    user = await security_get_user(request, email=token_data.username) # type: ignore # treated as an email 
-    if user is None:
-        raise credentials_exception
-    return PublicUser(**user.dict())
+    if username: 
+        user = await security_get_user(request, email=token_data.username) # type: ignore # treated as an email 
+        if user is None:
+            raise credentials_exception
+        return PublicUser(**user.dict())
+    else:
+        return AnonymousUser()
     
     
\ No newline at end of file
diff --git a/src/security/security.py b/src/security/security.py
index 5613873c..a5b48170 100644
--- a/src/security/security.py
+++ b/src/security/security.py
@@ -38,6 +38,18 @@ async def verify_user_rights_with_roles(request: Request, action: str, user_id:
     roles = request.app.db["roles"]
     users = request.app.db["users"]
 
+    user = await users.find_one({"user_id": user_id})
+
+    # Check if user is available
+    if not user and user_id != "anonymous":
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND, detail="User not found")
+    
+    # Check if user is anonymous
+    if user_id == "anonymous":
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN, detail="The ressource you are trying to access is not publicly available")
+
     # Check if the user is an admin
     user: UserInDB = UserInDB(**await users.find_one({"user_id": user_id}))
 
diff --git a/src/services/courses/courses.py b/src/services/courses/courses.py
index d4ea6b4e..d8dee31a 100644
--- a/src/services/courses/courses.py
+++ b/src/services/courses/courses.py
@@ -4,6 +4,7 @@ from uuid import uuid4
 from pydantic import BaseModel
 from src.services.courses.activities.activities import ActivityInDB
 from src.services.courses.thumbnails import upload_thumbnail
+from src.services.users.schemas.users import AnonymousUser
 from src.services.users.users import PublicUser
 from src.security.security import *
 from fastapi import HTTPException, status, UploadFile
@@ -282,11 +283,14 @@ async def get_courses_orgslug(request: Request, page: int = 1, limit: int = 10,
 #### Security ####################################################
 
 
-async def verify_rights(request: Request, course_id: str, current_user: PublicUser, action: str):
+async def verify_rights(request: Request, course_id: str, current_user: PublicUser | AnonymousUser, action: str):
     courses = request.app.db["courses"]
 
     course = await courses.find_one({"course_id": course_id})
 
+    if current_user.user_id == "anonymous" and course["public"] == True:
+        return True
+
     if not course:
         raise HTTPException(
             status_code=status.HTTP_409_CONFLICT, detail=f"Course/CourseChapter does not exist")
diff --git a/src/services/users/schemas/users.py b/src/services/users/schemas/users.py
index 974d1472..7bb24865 100644
--- a/src/services/users/schemas/users.py
+++ b/src/services/users/schemas/users.py
@@ -43,6 +43,11 @@ class PublicUser(User):
     creation_date: str
     update_date: str
 
+class AnonymousUser(BaseModel):
+    user_id: str = "anonymous"
+    username: str = "anonymous"
+    
+
 
 # Forms ####################################################
 

From 8f8257b9e74def87b2fe731a6f62b3cb816da672 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 9 Apr 2023 00:07:59 +0200
Subject: [PATCH 08/11] feat: make edit course page private

---
 .../course/[courseid]/edit/page.tsx           | 10 ++++----
 front/app/organizations/page.tsx              |  3 ++-
 front/components/Security/AuthProvider.tsx    | 24 +++++++++++++++----
 src/routers/auth.py                           | 23 ------------------
 4 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index 84e237b4..afc7840e 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -13,6 +13,7 @@ import NewActivityModal from "@components/Pages/CourseEdit/NewActivity";
 import { createActivity, createFileActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 import Modal from "@components/UI/Modal/Modal";
+import AuthProvider from "@components/Security/AuthProvider";
 
 function CourseEdit(params: any) {
   // Initial Course State
@@ -117,7 +118,7 @@ function CourseEdit(params: any) {
 
   const closeNewActivityModal = () => {
     console.log("closeNewActivityModal");
-    
+
     setNewActivityModal(false);
   };
 
@@ -225,6 +226,7 @@ function CourseEdit(params: any) {
 
   return (
     <>
+      <AuthProvider />
       <Page>
         <Title>
           Edit Course {" "}
@@ -252,8 +254,8 @@ function CourseEdit(params: any) {
             Save
           </button>
         </Title>-
-          
-          <Modal
+
+        <Modal
           isDialogOpen={newActivityModal}
           onOpenChange={setNewActivityModal}
           minHeight="no-min"
@@ -266,7 +268,7 @@ function CourseEdit(params: any) {
           ></NewActivityModal>}
           dialogTitle="Create Activity"
           dialogDescription="Choose between types of activities to add to the course"
-          
+
         />
 
         <br />
diff --git a/front/app/organizations/page.tsx b/front/app/organizations/page.tsx
index 93ef7e4d..ba286b4c 100644
--- a/front/app/organizations/page.tsx
+++ b/front/app/organizations/page.tsx
@@ -1,12 +1,12 @@
 "use client"; //todo: use server components
 import Link from "next/link";
 import React from "react";
-import Layout from "../../components/UI/Layout";
 import { Title } from "../../components/UI/Elements/Styles/Title";
 import { deleteOrganizationFromBackend } from "@services/organizations/orgs";
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/requests";
 import { getAPIUrl, getUriWithOrg } from "@services/config/config";
+import AuthProvider from "@components/Security/AuthProvider";
 
 const Organizations = () => {
   const { data : organizations , error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
@@ -18,6 +18,7 @@ const Organizations = () => {
 
   return (
     <>
+    <AuthProvider/>
       <Title>
         Your Organizations{" "}
         <Link href={"/organizations/new"}>
diff --git a/front/components/Security/AuthProvider.tsx b/front/components/Security/AuthProvider.tsx
index e9d82bd1..3fc11e39 100644
--- a/front/components/Security/AuthProvider.tsx
+++ b/front/components/Security/AuthProvider.tsx
@@ -5,7 +5,9 @@ import { useRouter, usePathname } from "next/navigation";
 
 export const AuthContext: any = React.createContext({});
 
-const NON_AUTHENTICATED_ROUTES = ["/login", "/signup"];
+const PRIVATE_ROUTES = ["/course/*/edit",];
+const NON_AUTHENTICATED_ROUTES = ["/login", "/register"];
+
 export interface Auth {
   access_token: string;
   isAuthenticated: boolean;
@@ -15,6 +17,8 @@ export interface Auth {
 
 const AuthProvider = ({ children }: any) => {
   const router = useRouter();
+  const pathname = usePathname();
+
   const [auth, setAuth] = React.useState<Auth>({ access_token: "", isAuthenticated: false, userInfo: {}, isLoading: true });
 
   async function checkRefreshToken() {
@@ -24,6 +28,7 @@ const AuthProvider = ({ children }: any) => {
     }
   }
 
+
   async function checkAuth() {
     try {
       let access_token = await checkRefreshToken();
@@ -34,13 +39,24 @@ const AuthProvider = ({ children }: any) => {
         userInfo = await getUserInfo(access_token);
         setAuth({ access_token, isAuthenticated: true, userInfo, isLoading });
 
-        
+        // Redirect to home if user is trying to access a NON_AUTHENTICATED_ROUTES route
+
+        if (NON_AUTHENTICATED_ROUTES.some((route) => new RegExp(`^${route.replace("*", ".*")}$`).test(pathname))) {
+          router.push("/");
+        }
+
+
       } else {
         setAuth({ access_token, isAuthenticated: false, userInfo, isLoading });
-        //router.push("/login");
+        
+        // Redirect to login if user is trying to access a private route
+        if (PRIVATE_ROUTES.some((route) => new RegExp(`^${route.replace("*", ".*")}$`).test(pathname))) {
+          router.push("/login");
+        }
+
       }
     } catch (error) {
-      router.push("/");
+      
     }
   }
 
diff --git a/src/routers/auth.py b/src/routers/auth.py
index 27dd78cf..7505b26a 100644
--- a/src/routers/auth.py
+++ b/src/routers/auth.py
@@ -9,29 +9,6 @@ from fastapi.responses import JSONResponse
 
 router = APIRouter()
 
-# DEPRECATED
-@router.post("/token", response_model=Token)
-async def login_for_access_token(request: Request, form_data: OAuth2PasswordRequestForm = Depends()):
-    """
-    OAuth2 compatible token login, get access token for future requests
-    """
-    user = await authenticate_user(request, form_data.username, form_data.password)
-    if not user:
-        raise HTTPException(
-            status_code=status.HTTP_401_UNAUTHORIZED,
-            detail="Incorrect Email or password",
-            headers={"WWW-Authenticate": "Bearer"},
-        )
-    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
-    access_token = create_access_token(
-        data={"sub": user.username}, expires_delta=access_token_expires
-    )
-    
-    response = JSONResponse(content={"access_token" : access_token ,"token_type": "bearer"})
-    response.set_cookie(key="user_token", value=access_token, httponly=True, expires=3600,secure=True)
-    
-    return response
-
 @router.post('/refresh')
 def refresh(Authorize: AuthJWT = Depends()):
     """

From 6137c907d2caa16a592b8509aca45917644fb8ef Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 9 Apr 2023 01:36:47 +0200
Subject: [PATCH 09/11] feat: better err reporting & init private endpoint

---
 .../(withmenu)/course/[courseid]/edit/page.tsx    | 15 +++++++++++----
 front/services/courses/chapters.ts                | 13 +++++++++----
 src/security/auth.py                              |  4 +++-
 src/services/courses/chapters.py                  |  7 +++++++
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index afc7840e..45f0d10f 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+
 import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { Title } from "@components/UI/Elements/Styles/Title";
@@ -16,6 +17,8 @@ import Modal from "@components/UI/Modal/Modal";
 import AuthProvider from "@components/Security/AuthProvider";
 
 function CourseEdit(params: any) {
+
+  const router = useRouter();
   // Initial Course State
   const [data, setData] = useState(initialData2) as any;
 
@@ -31,9 +34,14 @@ function CourseEdit(params: any) {
   const orgslug = params.params.orgslug;
 
   async function getCourseChapters() {
-    const courseChapters = await getCourseChaptersMetadata(courseid);
-    setData(courseChapters);
-    console.log("courseChapters", courseChapters);
+    try {
+      const courseChapters = await getCourseChaptersMetadata(courseid);
+      setData(courseChapters);
+    } catch (error: any) {
+      if (error.status === 401) {
+        router.push("/login");
+      }
+    }
   }
 
   useEffect(() => {
@@ -226,7 +234,6 @@ function CourseEdit(params: any) {
 
   return (
     <>
-      <AuthProvider />
       <Page>
         <Title>
           Edit Course {" "}
diff --git a/front/services/courses/chapters.ts b/front/services/courses/chapters.ts
index 86ad056f..8bdc85e2 100644
--- a/front/services/courses/chapters.ts
+++ b/front/services/courses/chapters.ts
@@ -9,10 +9,15 @@ import { RequestBody } from "@services/utils/requests";
 
 //TODO : depreciate this function
 export async function getCourseChaptersMetadata(course_id: any) {
-  const data: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("GET", null))
-    .then((result) => result.json())
-    .catch((error) => console.log("error", error));
+  const response = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("GET", null));
 
+  if (!response.ok) {
+    const error: any = new Error(`Error ${response.status}: ${response.statusText}`, {});
+    error.status = response.status;
+    throw error;
+  }
+
+  const data = await response.json();
   return data;
 }
 
@@ -20,7 +25,7 @@ export async function updateChaptersMetadata(course_id: any, data: any) {
   const result: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("PUT", data))
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
-    
+
   return result;
 }
 
diff --git a/src/security/auth.py b/src/security/auth.py
index c075ab92..fe61fe24 100644
--- a/src/security/auth.py
+++ b/src/security/auth.py
@@ -90,4 +90,6 @@ async def get_current_user(request: Request, Authorize: AuthJWT = Depends()):
     else:
         return AnonymousUser()
     
-    
\ No newline at end of file
+async def non_public_endpoint(current_user: PublicUser ):
+    if isinstance(current_user, AnonymousUser):
+        raise HTTPException(status_code=401, detail="Not authenticated")
\ No newline at end of file
diff --git a/src/services/courses/chapters.py b/src/services/courses/chapters.py
index 92b82b71..94cdd195 100644
--- a/src/services/courses/chapters.py
+++ b/src/services/courses/chapters.py
@@ -4,6 +4,7 @@ import pprint
 from typing import List
 from uuid import uuid4
 from pydantic import BaseModel
+from src.security.auth import non_public_endpoint
 from src.services.courses.courses import Course, CourseInDB
 from src.services.courses.activities.activities import Activity, ActivityInDB
 from src.security.security import verify_user_rights_with_roles
@@ -149,10 +150,16 @@ async def get_coursechapters_meta(request: Request, course_id: str, current_user
     courses = request.app.db["courses"]
     activities = request.app.db["activities"]
 
+    await non_public_endpoint(current_user)
+
     coursechapters = await courses.find_one({"course_id": course_id}, {"chapters": 1, "chapters_content": 1, "_id": 0})
 
     coursechapters = coursechapters
 
+    if not coursechapters:
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT, detail="Course does not exist")
+
     # activities
     coursechapter_activityIds_global = []
 

From b4bd9f8cd344bdc9aee584e2d505a5c432be1218 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 9 Apr 2023 01:45:57 +0200
Subject: [PATCH 10/11] feat: add settings page to private routes

---
 front/app/_orgs/[orgslug]/settings/layout.tsx | 8 +++-----
 front/components/Security/AuthProvider.tsx    | 6 +++---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/settings/layout.tsx b/front/app/_orgs/[orgslug]/settings/layout.tsx
index 6ea3bb6b..ce669246 100644
--- a/front/app/_orgs/[orgslug]/settings/layout.tsx
+++ b/front/app/_orgs/[orgslug]/settings/layout.tsx
@@ -3,18 +3,16 @@ import React, { createContext, useState } from 'react'
 import { styled } from '@stitches/react';
 import Link from 'next/link';
 import LearnHouseWhiteLogo from '@public/learnhouse_text_white.png';
-import { AuthContext } from '@components/Security/AuthProvider';
+import AuthProvider, { AuthContext } from '@components/Security/AuthProvider';
 import Avvvatars from 'avvvatars-react';
 import Image from 'next/image';
 
-
-
-
 function SettingsLayout({ children, params }: { children: React.ReactNode, params: any }) {
     const auth: any = React.useContext(AuthContext);
 
     return (
-        <>
+        <>  
+        <AuthProvider/>
             <Main>
                 <LeftWrapper>
                     <LeftTopArea>
diff --git a/front/components/Security/AuthProvider.tsx b/front/components/Security/AuthProvider.tsx
index 3fc11e39..81222a66 100644
--- a/front/components/Security/AuthProvider.tsx
+++ b/front/components/Security/AuthProvider.tsx
@@ -5,7 +5,7 @@ import { useRouter, usePathname } from "next/navigation";
 
 export const AuthContext: any = React.createContext({});
 
-const PRIVATE_ROUTES = ["/course/*/edit",];
+const PRIVATE_ROUTES = ["/course/*/edit", "/settings*"];
 const NON_AUTHENTICATED_ROUTES = ["/login", "/register"];
 
 export interface Auth {
@@ -48,7 +48,7 @@ const AuthProvider = ({ children }: any) => {
 
       } else {
         setAuth({ access_token, isAuthenticated: false, userInfo, isLoading });
-        
+
         // Redirect to login if user is trying to access a private route
         if (PRIVATE_ROUTES.some((route) => new RegExp(`^${route.replace("*", ".*")}$`).test(pathname))) {
           router.push("/login");
@@ -56,7 +56,7 @@ const AuthProvider = ({ children }: any) => {
 
       }
     } catch (error) {
-      
+
     }
   }
 

From 080ddb85e23bd2eab730bc8f237bed83ebbea0e0 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 10 Apr 2023 19:00:00 +0200
Subject: [PATCH 11/11] feat: add trail to private pages

---
 .../(withmenu)/course/[courseid]/activity/[activityid]/page.tsx | 1 -
 front/app/_orgs/[orgslug]/(withmenu)/courses/new/page.tsx       | 2 --
 front/components/Security/AuthProvider.tsx                      | 2 +-
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
index 7156f041..480040f2 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
@@ -2,7 +2,6 @@
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import React, { useMemo } from "react";
-import Layout from "@components/UI/Layout";
 import { getActivity } from "@services/courses/activities";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
 import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
diff --git a/front/app/_orgs/[orgslug]/(withmenu)/courses/new/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/courses/new/page.tsx
index 435bbb24..a615e102 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/courses/new/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/courses/new/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { useRouter } from "next/navigation";
 import React from "react";
-import { Header } from "@components/UI/Header";
-import Layout from "@components/UI/Layout";
 import { Title } from "@components/UI/Elements/Styles/Title";
 import { createNewCourse } from "@services/courses/courses";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
diff --git a/front/components/Security/AuthProvider.tsx b/front/components/Security/AuthProvider.tsx
index 81222a66..c8bcee55 100644
--- a/front/components/Security/AuthProvider.tsx
+++ b/front/components/Security/AuthProvider.tsx
@@ -5,7 +5,7 @@ import { useRouter, usePathname } from "next/navigation";
 
 export const AuthContext: any = React.createContext({});
 
-const PRIVATE_ROUTES = ["/course/*/edit", "/settings*"];
+const PRIVATE_ROUTES = ["/course/*/edit", "/settings*", "/trail"];
 const NON_AUTHENTICATED_ROUTES = ["/login", "/register"];
 
 export interface Auth {