Feat user roles frontend integration

src/backend/app/auth/auth_routes.py

@@ -17,17 +17,17 @@
 #
 
 """Auth routes, to login, logout, and get user details."""
+from datetime import datetime, timezone
 
 from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from fastapi.responses import JSONResponse
 from loguru import logger as log
+from sqlalchemy import text
 from sqlalchemy.orm import Session
 
 from app.auth.osm import AuthUser, init_osm_auth, login_required
 from app.config import settings
 from app.db import database
-from app.db.db_models import DbUser
-from app.users import user_crud
 
 router = APIRouter(
     prefix="/auth",
@@ -127,45 +127,104 @@ async def logout():
 async def get_or_create_user(
     db: Session,
     user_data: AuthUser,
-) -> DbUser:
+):
     """Get user from User table if exists, else create."""
-    existing_user = await user_crud.get_user(db, user_data.id)
-
-    if existing_user:
-        # Update an existing user
-        if user_data.img_url:
-            existing_user.profile_img = user_data.img_url
-        db.commit()
-        return existing_user
-
-    user_by_username = await user_crud.get_user_by_username(db, user_data.username)
-    if user_by_username:
-        raise HTTPException(
-            status_code=400,
-            detail=(
-                f"User with this username {user_data.username} already exists. "
-                "Please contact the administrator."
-            ),
+    try:
+        update_sql = text(
+            """
+        DO
+        $$
+        BEGIN
+            IF EXISTS (SELECT 1 FROM users WHERE id = :user_id) THEN
+                UPDATE users
+                SET profile_img = :profile_img
+                WHERE id = :user_id;
+            ELSIF EXISTS (SELECT 1 FROM users WHERE username = :username) THEN
+                -- Username already exists, raise an error
+                RAISE EXCEPTION
+                    '
+                    User with this username % already exists
+                    ', :username;
+            ELSE
+                INSERT INTO users (
+                    id, username, profile_img, role, mapping_level,
+                    is_email_verified, is_expert, tasks_mapped, tasks_validated,
+                    tasks_invalidated, date_registered, last_validation_date
+                    )
+                VALUES (
+                    :user_id, :username, :profile_img, :role,
+                    :mapping_level, FALSE, FALSE, 0, 0, 0,
+                    :current_date, :current_date
+                    );
+            END IF;
+        END
+        $$;
+
+        """
         )
 
-    # Add user to database
-    db_user = DbUser(
-        id=user_data.id,
-        username=user_data.username,
-        profile_img=user_data.img_url,
-        role=user_data.role,
-    )
-    db.add(db_user)
-    db.commit()
-
-    return db_user
-
+        db.execute(
+            update_sql,
+            {
+                "user_id": user_data.id,
+                "username": user_data.username,
+                "profile_img": user_data.img_url or None,
+                "role": "MAPPER",
+                "mapping_level": "BEGINNER",
+                "current_date": datetime.now(timezone.utc),
+            },
+        )
+        db.commit()
 
-@router.get("/me/", response_model=AuthUser)
+        get_sql = text(
+            """
+        SELECT users.*,
+            COALESCE(user_roles.project_id, Null) as project_id,
+            COALESCE(user_roles.role, 'MAPPER') as project_role,
+            COALESCE(organisation_managers.organisation_id, Null) as created_org
+        FROM users
+        LEFT JOIN user_roles ON users.id = user_roles.user_id
+        LEFT JOIN organisation_managers on users.id = organisation_managers.user_id
+        WHERE users.id = :user_id;
+        """
+        )
+        result = db.execute(
+            get_sql,
+            {"user_id": user_data.id},
+        )
+        db_user = result.fetchall()
+        user = [
+            {
+                "id": row.id,
+                "username": row.username,
+                "img_url": row.profile_img,
+                "role": row.role,
+                "project_id": row.project_id,
+                "project_role": row.project_role,
+                "created_org": row.created_org,
+            }
+            for row in db_user
+        ]
+        return user[0]
+
+    except Exception as e:
+        # Check if the exception is due to username already existing
+        if "already exists" in str(e):
+            raise HTTPException(
+                status_code=400,
+                detail=(
+                    f"User with this username {user_data.username} already exists."
+                ),
+            ) from e
+        else:
+            raise HTTPException(status_code=400, detail=str(e)) from e
+
+
+@router.get("/me/")
 async def my_data(
     db: Session = Depends(database.get_db),
     user_data: AuthUser = Depends(login_required),
-) -> AuthUser:
+):
     """Read access token and get user details from OSM.
 
     Args:

src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx

@@ -19,6 +19,7 @@ const ProjectOptions = () => {
   const downloadDataExtractLoading: boolean = CoreModules.useAppSelector(
     (state) => state.project.downloadDataExtractLoading,
   );
+  const token = CoreModules.useAppSelector((state) => state.login.loginToken);
 
   const encodedId: string = params.id;
   const decodedId: number = environment.decode(encodedId);
@@ -107,16 +108,18 @@ const ProjectOptions = () => {
             >
               Generate MbTiles
             </CoreModules.Button>
-            <CoreModules.Button
-              onClick={() => navigate(`/manage-project/${encodedId}`)}
-              variant="contained"
-              color="error"
-              sx={{ width: '200px', mr: '15px' }}
-              endIcon={<AssetModules.SettingsIcon />}
-              className="fmtm-truncate"
-            >
-              Manage Project
-            </CoreModules.Button>
+            {token && (
+              <CoreModules.Button
+                onClick={() => navigate(`/manage-project/${encodedId}`)}
+                variant="contained"
+                color="error"
+                sx={{ width: '200px', mr: '15px' }}
+                endIcon={<AssetModules.SettingsIcon />}
+                className="fmtm-truncate"
+              >
+                Manage Project
+              </CoreModules.Button>
+            )}
             <CoreModules.Button
               onClick={() => navigate(`/project-submissions/${encodedId}`)}
               variant="contained"

src/frontend/src/components/home/HomePageFilters.tsx

@@ -6,6 +6,7 @@ import Switch from '@/components/common/Switch';
 import { HomeActions } from '@/store/slices/HomeSlice';
 import { homeProjectPaginationTypes } from '@/models/home/homeModel';
 import { useAppSelector } from '@/types/reduxTypes';
+import { user_roles } from '@/types/enums';
 
 type homePageFiltersPropType = {
   onSearch: (data: string) => void;
@@ -21,6 +22,7 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount }:
   const defaultTheme: any = useAppSelector((state) => state.theme.hotTheme);
   const showMapStatus = useAppSelector((state) => state.home.showMapStatus);
   const homeProjectPagination = useAppSelector((state) => state.home.homeProjectPagination);
+  const token = CoreModules.useAppSelector((state) => state.login.loginToken);
 
   const { windowSize } = windowDimention();
   const searchableInnerStyle: any = {
@@ -117,16 +119,18 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount }:
       <div className="fmtm-px-4 fmtm-py-3 ">
         <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-items-center fmtm-gap-4">
           <h5 className="fmtm-text-2xl">PROJECTS</h5>
-          <CoreModules.Link
-            to={'/create-project'}
-            style={{
-              textDecoration: 'none',
-            }}
-          >
-            <button className="fmtm-bg-primaryRed fmtm-text-sm sm:fmtm-text-[1rem] fmtm-px-4 fmtm-py-2 fmtm-rounded fmtm-w-auto fmtm-text-white fmtm-uppercase">
-              + Create New Project{' '}
-            </button>
-          </CoreModules.Link>
+          {token && [user_roles.ADMIN].includes(token['role']) && (
+            <CoreModules.Link
+              to={'/create-project'}
+              style={{
+                textDecoration: 'none',
+              }}
+            >
+              <button className="fmtm-bg-primaryRed fmtm-text-sm sm:fmtm-text-[1rem] fmtm-px-4 fmtm-py-2 fmtm-rounded fmtm-w-auto fmtm-text-white fmtm-uppercase">
+                + Create New Project{' '}
+              </button>
+            </CoreModules.Link>
+          )}
         </div>
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 sm:fmtm-flex-row sm:fmtm-justify-between">
           <div className="fmtm-mt-3 fmtm-flex fmtm-items-center fmtm-gap-1">

src/frontend/src/components/organisation/OrganisationGridCard.tsx

@@ -3,8 +3,9 @@ import CoreModules from '@/shared/CoreModules';
 import CustomizedImage from '@/utilities/CustomizedImage';
 import { useNavigate } from 'react-router-dom';
 import { user_roles } from '@/types/enums';
+import AssetModules from '@/shared/AssetModules';
 
-const OrganisationGridCard = ({ filteredData, allDataLength }) => {
+const OrganisationGridCard = ({ filteredData, allDataLength, isEditable = false }) => {
   const navigate = useNavigate();
   const token = CoreModules.useAppSelector((state) => state.login.loginToken);
   const cardStyle = {
@@ -47,12 +48,20 @@ const OrganisationGridCard = ({ filteredData, allDataLength }) => {
               className="fmtm-overflow-hidden fmtm-grow fmtm-h-full fmtm-justify-between"
             >
               <div className="fmtm-flex fmtm-flex-col fmtm-gap-1">
-                <h2
-                  className="fmtm-line-clamp-1 fmtm-text-base sm:fmtm-text-lg fmtm-font-bold fmtm-capitalize"
-                  title={data.name}
-                >
-                  {data.name}
-                </h2>
+                <div className="fmtm-flex fmtm-justify-between fmtm-items-center">
+                  <h2
+                    className="fmtm-line-clamp-1 fmtm-text-base sm:fmtm-text-lg fmtm-font-bold fmtm-capitalize"
+                    title={data.name}
+                  >
+                    {data.name}
+                  </h2>
+                  {isEditable && token && [user_roles.ADMIN].includes(token['role']) && (
+                    <AssetModules.EditIcon
+                      className="fmtm-text-[#7A7676] hover:fmtm-text-[#5a5757]"
+                      onClick={() => navigate(`/edit-organization/${data.id}`)}
+                    />
+                  )}
+                </div>
                 <p
                   className="fmtm-line-clamp-3 fmtm-text-[#7A7676] fmtm-font-archivo fmtm-text-sm sm:fmtm-text-base"
                   title={data.description}

src/frontend/src/routes.jsx → src/frontend/src/routes.tsx

@@ -16,6 +16,7 @@ import ErrorBoundary from '@/views/ErrorBoundary';
 import ProjectDetailsV2 from '@/views/ProjectDetailsV2';
 import ProjectSubmissions from '@/views/ProjectSubmissions';
 import ManageProject from '@/views/ManageProject';
+import { user_roles } from '@/types/enums';
 
 const Submissions = React.lazy(() => import('./views/Submissions'));
 const Tasks = React.lazy(() => import('./views/Tasks'));
@@ -35,33 +36,41 @@ const routes = createBrowserRouter([
       {
         path: '/organisation',
         element: (
-          <ErrorBoundary>
-            <Organisation />
-          </ErrorBoundary>
+          <ProtectedRoute>
+            <ErrorBoundary>
+              <Organisation />
+            </ErrorBoundary>
+          </ProtectedRoute>
         ),
       },
       {
         path: '/create-organization',
         element: (
-          <ErrorBoundary>
-            <CreateEditOrganization />
-          </ErrorBoundary>
+          <ProtectedRoute>
+            <ErrorBoundary>
+              <CreateEditOrganization />
+            </ErrorBoundary>
+          </ProtectedRoute>
         ),
       },
       {
         path: '/edit-organization/:id',
         element: (
-          <ErrorBoundary>
-            <CreateEditOrganization />
-          </ErrorBoundary>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
+            <ErrorBoundary>
+              <CreateEditOrganization />
+            </ErrorBoundary>
+          </ProtectedRoute>
         ),
       },
       {
         path: '/approve-organization/:id',
         element: (
-          <ErrorBoundary>
-            <ApproveOrganization />
-          </ErrorBoundary>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
+            <ErrorBoundary>
+              <ApproveOrganization />
+            </ErrorBoundary>
+          </ProtectedRoute>
         ),
       },
       // {
@@ -143,7 +152,7 @@ const routes = createBrowserRouter([
       {
         path: '/create-project',
         element: (
-          <ProtectedRoute>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
                 <CreateNewProject />
@@ -155,7 +164,7 @@ const routes = createBrowserRouter([
       {
         path: '/upload-area',
         element: (
-          <ProtectedRoute>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
                 <CreateNewProject />
@@ -167,7 +176,7 @@ const routes = createBrowserRouter([
       {
         path: '/data-extract',
         element: (
-          <ProtectedRoute>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
                 <CreateNewProject />
@@ -179,7 +188,7 @@ const routes = createBrowserRouter([
       {
         path: '/split-tasks',
         element: (
-          <ProtectedRoute>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
                 <CreateNewProject />
@@ -191,7 +200,7 @@ const routes = createBrowserRouter([
       {
         path: '/select-category',
         element: (
-          <ProtectedRoute>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
                 <CreateNewProject />
@@ -233,7 +242,7 @@ const routes = createBrowserRouter([
       {
         path: '/manage-project/:id',
         element: (
-          <ProtectedRoute>
+          <ProtectedRoute permittedRoles={[user_roles.ADMIN]}>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
                 <ManageProject />