Mapper frontend login + remove temp auth from React frontend

src/frontend/src/components/LoginPopup.tsx

@@ -1,12 +1,10 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import CoreModules from '@/shared/CoreModules';
 import { Modal } from '@/components/common/Modal';
 import { useDispatch } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { LoginActions } from '@/store/slices/LoginSlice';
 import { osmLoginRedirect } from '@/utilfunctions/login';
-import { TemporaryLoginService } from '@/api/Login';
-import AssetModules from '@/shared/AssetModules';
 import OSMImg from '@/assets/images/osm-logo.png';
 
 type loginOptionsType = {
@@ -24,17 +22,10 @@ const loginOptions: loginOptionsType[] = [
     image: OSMImg,
     description: 'Edits made in FMTM will be credited to your OSM account.',
   },
-  {
-    id: 'temp_account',
-    name: 'Temporary Account',
-    icon: <AssetModules.PersonIcon color="" sx={{ fontSize: '40px' }} className="fmtm-w-10 fmtm-h-10" />,
-    description: "If you're not an OSM user or prefer not to create an OSM account.",
-  },
 ];
 
 const LoginPopup = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const location = useLocation();
   const from = location.state?.from || '/';
 
@@ -44,18 +35,13 @@ const LoginPopup = () => {
     if (selectedOption === 'osm_account') {
       localStorage.setItem('requestedPath', from);
       osmLoginRedirect();
-    } else {
-      await dispatch(TemporaryLoginService(`${import.meta.env.VITE_API_URL}/auth/temp-login`, from));
-      dispatch(LoginActions.setLoginModalOpen(false));
-      navigate(from);
     }
   };
 
   const LoginDescription = () => {
     return (
       <div className="fmtm-flex fmtm-items-start fmtm-flex-col">
-        <div className="fmtm-text-2xl fmtm-font-bold fmtm-mb-1">Sign In</div>
-        <div className="fmtm-text-base fmtm-mb-5 fmtm-text-gray-700">Select an account type to sign in</div>
+        <div className="fmtm-text-2xl fmtm-font-bold fmtm-mb-4">Sign In</div>
         <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-gap-4 fmtm-justify-items-center">
           {loginOptions?.map((option) => (
             <div

src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu.tsx

@@ -126,7 +126,7 @@ const LayerSwitchMenu = ({ map, pmTileLayerData = null }: { map: any; pmTileLaye
                 backgroundImage: activeLayer === 'None' ? 'none' : `url(${layerIcons[activeLayer] || satelliteImg})`,
                 backgroundColor: 'white',
               }}
-              className={`fmtm-relative fmtm-group fmtm-order-4 fmtm-w-10 fmtm-h-10 fmtm-border-[1px] fmtm-border-primaryRed hover:fmtm-border-[2px] fmtm-duration-75 fmtm-cursor-pointer fmtm-bg-contain fmtm-rounded-full ${
+              className={`fmtm-relative fmtm-group fmtm-order-4 fmtm-w-9 fmtm-h-9 fmtm-border-[1px] fmtm-border-primaryRed hover:fmtm-border-[2px] fmtm-duration-75 fmtm-cursor-pointer fmtm-bg-contain fmtm-rounded-full ${
                 activeLayer === 'None' ? '!fmtm-border-primaryRed' : ''
               }`}
             ></div>

src/frontend/src/components/MapLegends.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
 import AssetModules from '@/shared/AssetModules';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from '@/components/common/Dropdown';
+import { Tooltip } from '@mui/material';
 
 type mapDetialsType = {
   value: string;
@@ -66,13 +73,34 @@ const MapLegends = ({ defaultTheme }: { defaultTheme: any }) => {
   };
 
   return (
-    <div className="fmtm-py-3">
-      <div className="fmtm-flex fmtm-flex-col fmtm-gap-2">
-        {MapDetails.map((data, index) => {
-          return <LegendListItem data={data} key={index} />;
-        })}
-      </div>
-    </div>
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger className="fmtm-outline-none">
+        <Tooltip title="Legend Toggle" placement="left">
+          <div
+            className={`fmtm-bg-white fmtm-rounded-full hover:fmtm-bg-gray-100 fmtm-cursor-pointer fmtm-duration-300 fmtm-w-9 fmtm-h-9 fmtm-min-h-9 fmtm-min-w-9 fmtm-max-w-9 fmtm-max-h-9 fmtm-flex fmtm-justify-center fmtm-items-center `}
+          >
+            <AssetModules.LegendToggleIcon />
+          </div>
+        </Tooltip>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          className="fmtm-px-2 fmtm-border-none fmtm-z-[60px] fmtm-bg-white"
+          align="end"
+          alignOffset={100}
+          sideOffset={-42}
+        >
+          <div className="fmtm-py-3">
+            <p className="fmtm-mb-3">Legend</p>
+            <div className="fmtm-flex fmtm-flex-col fmtm-gap-2">
+              {MapDetails.map((data, index) => {
+                return <LegendListItem data={data} key={index} />;
+              })}
+            </div>
+          </div>{' '}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
   );
 };
 

src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx

@@ -10,6 +10,7 @@ import ProjectOptions from '@/components/ProjectDetailsV2/ProjectOptions';
 import useOutsideClick from '@/hooks/useOutsideClick';
 import LayerSwitchMenu from '../MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu';
 import { Tooltip } from '@mui/material';
+import MapLegends from '@/components/MapLegends';
 
 type mapControlComponentType = {
   map: any;
@@ -45,6 +46,7 @@ const MapControlComponent = ({ map, projectName, pmTileLayerData }: mapControlCo
   const dispatch = CoreModules.useAppDispatch();
   const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false);
   const geolocationStatus = useAppSelector((state) => state.project.geolocationStatus);
+  const defaultTheme = useAppSelector((state) => state.theme.hotTheme);
   const [divRef, toggle, handleToggle] = useOutsideClick();
 
   const handleOnClick = (btnId) => {
@@ -88,13 +90,14 @@ const MapControlComponent = ({ map, projectName, pmTileLayerData }: mapControlCo
         </Tooltip>
       ))}
       <LayerSwitchMenu map={map} pmTileLayerData={pmTileLayerData} />
+      {/* download options */}
       <div
         className={`fmtm-relative ${!pathname.includes('project/') ? 'fmtm-hidden' : 'sm:fmtm-hidden'}`}
         ref={divRef}
       >
         <div
           onClick={() => handleToggle()}
-          className="fmtm-bg-white fmtm-rounded-full fmtm-p-2 hover:fmtm-bg-gray-100 fmtm-cursor-pointer fmtm-duration-300 "
+          className="fmtm-bg-white fmtm-rounded-full hover:fmtm-bg-gray-100 fmtm-cursor-pointer fmtm-duration-300 fmtm-w-9 fmtm-h-9 fmtm-min-h-9 fmtm-min-w-9 fmtm-max-w-9 fmtm-max-h-9 fmtm-flex fmtm-justify-center fmtm-items-center"
         >
           <AssetModules.FileDownloadIcon />
         </div>
@@ -108,6 +111,7 @@ const MapControlComponent = ({ map, projectName, pmTileLayerData }: mapControlCo
           <ProjectOptions projectName={projectName} />
         </div>
       </div>
+      <MapLegends defaultTheme={defaultTheme} />
     </div>
   );
 };

src/frontend/src/views/OsmAuth.tsx

@@ -43,8 +43,13 @@ function OsmAuth() {
       dispatch(LoginActions.setLoginModalOpen(false));
 
       if (requestedPath) {
-        navigate(`${requestedPath}`);
-        localStorage.removeItem('requestedPath');
+        if (requestedPath.includes('mapnow')) {
+          // redirect to mapper frontend (navigate doesn't work as it's on svelte)
+          window.location.href = `${window.location.origin}${requestedPath}`;
+        } else {
+          navigate(`${requestedPath}`);
+          localStorage.removeItem('requestedPath');
+        }
       }
     };
     loginRedirect();

src/frontend/src/views/ProjectDetailsV2.tsx

@@ -25,8 +25,6 @@ import MapControlComponent from '@/components/ProjectDetailsV2/MapControlCompone
 import { VectorLayer } from '@/components/MapComponent/OpenLayersComponent/Layers';
 import { geojsonObjectModel } from '@/constants/geojsonObjectModal';
 import getTaskStatusStyle, { getFeatureStatusStyle } from '@/utilfunctions/getTaskStatusStyle';
-import MapLegends from '@/components/MapLegends';
-import Accordion from '@/components/common/Accordion';
 import AsyncPopup from '@/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup';
 import Button from '@/components/common/Button';
 import ProjectInfo from '@/components/ProjectDetailsV2/ProjectInfo';
@@ -41,7 +39,6 @@ import DebugConsole from '@/utilities/DebugConsole';
 import { CustomCheckbox } from '@/components/common/Checkbox';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
 import QrcodeComponent from '@/components/QrcodeComponent';
-import { createDropdownMenuScope } from '@radix-ui/react-dropdown-menu';
 
 const ProjectDetailsV2 = () => {
   useDocumentTitle('Project Details');
@@ -50,9 +47,7 @@ const ProjectDetailsV2 = () => {
   const navigate = useNavigate();
   const { windowSize } = WindowDimension();
   const [divRef, toggle, handleToggle] = useOutsideClick();
-  const [legendRef, legendToggle, handleLegendToggle] = useOutsideClick();
 
-  const [mainView, setView] = useState<any>();
   const [selectedTaskArea, setSelectedTaskArea] = useState<Record<string, any> | null>(null);
   const [selectedTaskFeature, setSelectedTaskFeature] = useState();
   const [dataExtractUrl, setDataExtractUrl] = useState<string | undefined>();
@@ -511,30 +506,25 @@ const ProjectDetailsV2 = () => {
                 className="fmtm-w-[235px]"
               />
               <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-3 fmtm-left-3 fmtm-z-50 fmtm-rounded-lg">
-                <Accordion
-                  ref={legendRef}
-                  body={<MapLegends defaultTheme={defaultTheme} />}
-                  header={
-                    <div className="fmtm-flex fmtm-items-center fmtm-gap-1 sm:fmtm-gap-2">
-                      <p className="fmtm-text-base fmtm-font-normal">LEGEND</p>
-                    </div>
-                  }
-                  onToggle={() => {
-                    handleLegendToggle();
+                <Button
+                  btnText="BASEMAPS"
+                  icon={<AssetModules.BoltIcon className="!fmtm-text-xl" />}
+                  onClick={() => {
+                    dispatch(ProjectActions.ToggleGenerateMbTilesModalStatus(true));
                   }}
-                  className="fmtm-py-0 !fmtm-pb-0 fmtm-rounded-lg hover:fmtm-bg-gray-50"
-                  collapsed={!legendToggle}
+                  btnType="other"
+                  className="!fmtm-text-sm !fmtm-pr-2 fmtm-bg-white"
                 />
               </div>
               <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-5 fmtm-right-3 fmtm-z-50 fmtm-h-fit">
                 <Button
-                  btnText="Basemaps"
-                  icon={<AssetModules.BoltIcon />}
+                  btnText="START MAPPING"
+                  icon={<AssetModules.LocationOnIcon className="!fmtm-text-xl" />}
                   onClick={() => {
-                    dispatch(ProjectActions.ToggleGenerateMbTilesModalStatus(true));
+                    window.location.href = `${window.location.origin}/mapnow/${projectId}`;
                   }}
                   btnType="primary"
-                  className="!fmtm-text-base !fmtm-pr-2"
+                  className="!fmtm-text-sm !fmtm-pr-2"
                 />
               </div>
               <div className="fmtm-absolute fmtm-right-0 fmtm-top-0 fmtm-z-50 fmtm-hidden sm:fmtm-block">

src/mapper/src/constants/drawerItems.ts

@@ -0,0 +1,27 @@
+type drawerItemsType = {
+	name: string;
+	path: string;
+};
+
+export const drawerItems: drawerItemsType[] = [
+	{
+		name: 'Explore Projects',
+		path: `${window.location.origin}`,
+	},
+	{
+		name: 'Learn',
+		path: 'https://hotosm.github.io/fmtm',
+	},
+	{
+		name: 'About',
+		path: 'https://docs.fmtm.dev/About/',
+	},
+	{
+		name: 'Support',
+		path: 'https://github.com/hotosm/fmtm/issues/',
+	},
+	{
+		name: 'Download Custom ODK Collect',
+		path: 'https://github.com/hotosm/odkcollect/releases/download/v2024.2.4-entity-select/ODK-Collect-v2024.2.4-FMTM.apk',
+	},
+];