feat: implement elements authorization + bump next

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/page.tsx

@@ -1,3 +1,4 @@
+import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 import { getBackendUrl, getUriWithOrg } from "@services/config/config";
 import { getCollectionByIdWithAuthHeader } from "@services/courses/collections";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
@@ -38,7 +39,7 @@ const CollectionPage = async (params : any) => {
     }
 
 
-    return <div className="max-w-7xl mx-auto px-4 py-10" >
+    return <GeneralWrapperStyled>
         <h2 className="text-sm font-bold text-gray-400">Collection</h2>
         <h1 className="text-3xl font-bold">{col.name}</h1>
         <br />
@@ -56,7 +57,7 @@ const CollectionPage = async (params : any) => {
 
 
 
-    </div>;
+    </GeneralWrapperStyled>;
 };
 
 export default CollectionPage;

front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
 import { AuthContext } from '@components/Security/AuthProvider';
 import { getUriWithOrg } from '@services/config/config';
 import { deleteCollection } from '@services/courses/collections';
@@ -9,33 +10,7 @@ import { useRouter } from 'next/navigation';
 import React from 'react'
 
 const CollectionAdminEditsArea = (props: any) => {
-    const org_roles_values = ["admin", "owner"];
-    const user_roles_values = ["role_admin"];
     const router = useRouter();
-    const auth: any = React.useContext(AuthContext);
-
-
-    // this is amazingly terrible code, but gotta release that MVP
-    // TODO: fix this
-
-    function isAuthorized() {
-        const org_id = props.collection.org_id;
-        const org_roles = auth.userInfo.user_object.orgs;
-        const user_roles = auth.userInfo.user_object.roles;
-        const org_role = org_roles.find((org: any) => org.org_id == org_id);
-        const user_role = user_roles.find((role: any) => role.org_id == org_id);
-
-        if (org_role && user_role) {
-            if (org_roles_values.includes(org_role.org_role) && user_roles_values.includes(user_role.role_id)) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    }
 
     const deleteCollectionUI = async (collectionId: number) => {
         await deleteCollection(collectionId);
@@ -45,30 +20,15 @@ const CollectionAdminEditsArea = (props: any) => {
         router.push(getUriWithOrg(props.orgslug, "/collections"));
     }
 
-    // this is amazingly terrible code, but gotta release that MVP
-    // TODO: fix this
-
-    if (auth.isAuthenticated) {
-        if (isAuthorized()) {
-            return (
-                <div className="flex space-x-2 py-2">
-                    <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => deleteCollectionUI(props.collection_id)}>
-                        Delete <Trash size={10}></Trash>
-                    </button>
-
-                </div>
-            )
-        } else {
-            return (
-                <div></div>
-            )
-        }
-    }
-    else {
-        return (
-            <div></div>
-        )
-    }
+    return (
+        <AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
+            <div className="flex space-x-2 py-2">
+                <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => deleteCollectionUI(props.collection_id)}>
+                    Delete <Trash size={10}></Trash>
+                </button>
+            </div>
+        </AuthenticatedClientElement>
+    )
 }
 
 export default CollectionAdminEditsArea;

front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx

@@ -1,12 +1,10 @@
+import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement";
 import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
 import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 import { getBackendUrl, getUriWithOrg } from "@services/config/config";
 import { deleteCollection, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
-import { getCourseMetadataWithAuthHeader } from "@services/courses/courses";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
-import { revalidateTags } from "@services/utils/ts/requests";
 import { Metadata } from "next";
-import { revalidateTag } from "next/cache";
 import { cookies } from "next/headers";
 import Link from "next/link";
 import CollectionAdminEditsArea from "./admin";
@@ -46,9 +44,11 @@ const CollectionsPage = async (params: any) => {
         <GeneralWrapperStyled>
             <div className="flex justify-between" >
                 <TypeOfContentTitle title="Collections" type="col" />
+                <AuthenticatedClientElement checkMethod='authentication'>
                 <Link className="flex justify-center" href={getUriWithOrg(orgslug, "/collections/new")}>
                     <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Collection + </button>
                 </Link>
+                </AuthenticatedClientElement>
             </div>
             <div className="home_collections flex flex-wrap">
                 {collections.map((collection: any) => (

front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx

@@ -14,6 +14,7 @@ import { revalidateTags } from '@services/utils/ts/requests';
 import { useRouter } from 'next/navigation';
 import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
 import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
 
 interface CourseProps {
     orgslug: string;
@@ -47,28 +48,30 @@ function Courses(props: CourseProps) {
             <GeneralWrapperStyled>
                 <div className='flex flex-wrap justify-between'>
                     <TypeOfContentTitle title="Courses" type="cou" />
-                    <Modal
-                        isDialogOpen={newCourseModal}
-                        onOpenChange={setNewCourseModal}
-                        minHeight="md"
-                        dialogContent={<CreateCourseModal
-                            closeModal={closeNewCourseModal}
-                            orgslug={orgslug}
-                        ></CreateCourseModal>}
-                        dialogTitle="Create Course"
-                        dialogDescription="Create a new course"
-                        dialogTrigger={
-                            <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Course + </button>
-                        }
-                    />
+                    <AuthenticatedClientElement checkMethod='authentication'>
+                        <Modal
+                            isDialogOpen={newCourseModal}
+                            onOpenChange={setNewCourseModal}
+                            minHeight="md"
+                            dialogContent={<CreateCourseModal
+                                closeModal={closeNewCourseModal}
+                                orgslug={orgslug}
+                            ></CreateCourseModal>}
+                            dialogTitle="Create Course"
+                            dialogDescription="Create a new course"
+                            dialogTrigger={
+                                <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Course + </button>
+                            }
+                        />
+                    </AuthenticatedClientElement>
                 </div>
 
 
 
-                <div className="flex space-x-5">
+                <div className="flex flex-wrap">
                     {courses.map((course: any) => (
-                        <div key={course.course_id}>
-                            <AdminEditsArea course={course} orgslug={orgslug} course_id={course.course_id} deleteCourses={deleteCourses} />
+                        <div className="px-3" key={course.course_id}>
+                            <AdminEditsArea course={course} orgSlug={orgslug} courseId={course.course_id} deleteCourses={deleteCourses} />
                             <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
                                 <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}>
 
@@ -86,64 +89,20 @@ function Courses(props: CourseProps) {
     )
 }
 
-const AdminEditsArea = (props: any) => {
-    const org_roles_values = ["admin", "owner"];
-    const user_roles_values = ["role_admin"];
-
-    const auth: any = React.useContext(AuthContext);
-    console.log("auth: ", auth);
-
-
-    // this is amazingly terrible code, but gotta release that MVP
-    // TODO: fix this
-
-    function isAuthorized() {
-        const org_id = props.course.org_id;
-        const org_roles = auth.userInfo.user_object.orgs;
-        const user_roles = auth.userInfo.user_object.roles;
-        const org_role = org_roles.find((org: any) => org.org_id == org_id);
-        const user_role = user_roles.find((role: any) => role.org_id == org_id);
-
-        if (org_role && user_role) {
-            if (org_roles_values.includes(org_role.org_role) && user_roles_values.includes(user_role.role_id)) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    }
-
-    // this is amazingly terrible code, but gotta release that MVP
-    // TODO: fix this
-
-    if (auth.isAuthenticated) {
-        if (isAuthorized()) {
-            return (
-                <div className="flex space-x-2 py-2">
-                    <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => props.deleteCourses(props.course_id)}>
-                        Delete <Trash size={10}></Trash>
-                    </button>
-                    <Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course_id) + "/edit")}>
-                        <button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center">
-                            Edit <Edit2 size={10}></Edit2>
-                        </button>
-                    </Link>
-                </div>
-            )
-        } else {
-            return (
-                <div></div>
-            )
-        }
-    }
-    else {
-        return (
-            <div></div>
-        )
-    }
+const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => {
+    return (
+        <AuthenticatedClientElement checkMethod='roles' orgId={props.course.org_id}><div className="flex space-x-2 py-2">
+            <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => props.deleteCourses(props.courseId)}>
+                Delete <Trash size={10}></Trash>
+            </button>
+            <Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
+                <button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center">
+                    Edit <Edit2 size={10}></Edit2>
+                </button>
+            </Link>
+        </div>
+        </AuthenticatedClientElement>
+    )
 }