Feat impl settings page

.env

@@ -3,3 +3,5 @@ VITE_AUTH_TYPE=anonymous
 VITE_OIDC_CLIENT_ID=
 VITE_OIDC_ISSUER=https://localhost:8000
 VITE_IDENTITY_PROVIDER=
+VITE_ADMIN_LDAP_ROLE=
+VITE_USER_LDAP_ROLE=

src/hooks/useAuth.ts

@@ -13,7 +13,11 @@ export const useAccessToken = (): string => {
 };
 
 export const useUser = () => {
-  return useOidc({ assertUserLoggedIn: true }).oidcTokens.decodedIdToken;
+  return {
+    decodedToken: useOidc({ assertUserLoggedIn: true }).oidcTokens.decodedIdToken,
+    isAdminLdap: useHasRole(import.meta.env.VITE_ADMIN_LDAP_ROLE),
+    isUserLdap: useHasRole(import.meta.env.VITE_USER_LDAP_ROLE),
+  };
 };
 
 export const useLogout = () => {

src/pages/SettingsPage.tsx

@@ -0,0 +1,72 @@
+import { Box, Divider, Tabs } from "@mui/material";
+import { PageTab } from "../ui/PageTab";
+import { useState, SyntheticEvent } from "react";
+import { SettingsHeader } from "../ui/Settings/SettingsHeader";
+import { SettingsHabilitationsCard } from "../ui/Settings/SettingsHabilitationsCard";
+import { Breadcrumbs } from "../ui/Breadcrumbs.tsx";
+
+enum Tab {
+  Habilitations = "Habilitations",
+  Communications = "Communications",
+  NewSource = "NewSource",
+}
+
+const TabNames = {
+  [Tab.Habilitations]: "Gestion des habilitations",
+  [Tab.Communications]: "Communications",
+  [Tab.NewSource]: "Nouvelle Source",
+};
+
+export function SettingsPage() {
+  const [currentTab, setCurrentTab] = useState(Tab.Habilitations);
+  const handleChange = (_: SyntheticEvent, newValue: Tab) => {
+    setCurrentTab(newValue);
+  };
+  const breadcrumbs = [
+    { href: "/", title: "Accueil" },
+    { href: "/settings", title: "Réglages" },
+    TabNames[currentTab],
+  ];
+  return (
+    <>
+      <SettingsHeader />
+      <Divider variant="fullWidth" />
+      <Tabs
+        value={currentTab}
+        onChange={handleChange}
+        sx={{
+          px: 5,
+          backgroundColor: "white",
+        }}
+      >
+        {Object.keys(Tab).map(k => (
+          <PageTab
+            sx={{
+              paddingX: 4,
+              paddingY: 3,
+              typography: "titleSmall",
+              letterSpacing: 0.4,
+            }}
+            key={k}
+            value={k}
+            label={TabNames[k]}
+          />
+        ))}
+      </Tabs>
+
+      <Breadcrumbs items={breadcrumbs} />
+
+      <Box px={4}>
+        <SettingsTab tab={currentTab} />
+      </Box>
+    </>
+  );
+}
+
+function SettingsTab({ tab }: { tab: Tab }) {
+  if (tab === Tab.Habilitations) {
+    return <SettingsHabilitationsCard />;
+  }
+
+  return;
+}

src/pages/SurveyPage.tsx

@@ -93,13 +93,13 @@ export function SurveyPage() {
       <Breadcrumbs items={breadcrumbs} />
 
       <Box px={4}>
-        <SurveyUnitTab tab={currentTab} survey={survey} onSave={refetch} />
+        <SurveyTab tab={currentTab} survey={survey} onSave={refetch} />
       </Box>
     </>
   );
 }
 
-function SurveyUnitTab({
+function SurveyTab({
   survey,
   onSave,
   tab,

src/routes.tsx

@@ -5,7 +5,7 @@ import { Layout } from "./ui/Layout";
 import { PageError } from "./ui/PageError";
 import { SurveyPage } from "./pages/SurveyPage";
 import { ContactPage } from "./pages/ContactPage";
-import { Settings } from "./pages/Settings";
+import { SettingsPage } from "./pages/SettingsPage.tsx";
 import { SearchContacts } from "./pages/Search/SearchContacts.tsx";
 import { SearchSurveys } from "./pages/Search/SearchSurveys.tsx";
 import { SearchSurveyUnits } from "./pages/Search/SearchSurveyUnits.tsx";
@@ -33,8 +33,8 @@ export const routes: RouteObject[] = [
       },
       { path: "surveys/:id", element: <SurveyPage /> },
       { path: "contacts/:id", element: <ContactPage /> },
+      { path: "settings", element: <SettingsPage /> },
       { path: "survey-units/:id", element: <SurveyUnitPage /> },
-      { path: "reglages", element: <Settings /> },
       { path: "", element: <Home /> },
     ],
   },

src/theme.tsx

@@ -49,6 +49,7 @@
     bodyLarge: CSSProperties;
     bodyMedium: CSSProperties;
     bodySmall: CSSProperties;
+    robotoLarge: CSSProperties;
   }
 
   interface TypographyVariantsOptions {
@@ -67,6 +68,7 @@
     bodyLarge?: CSSProperties;
     bodyMedium?: CSSProperties;
     bodySmall?: CSSProperties;
+    robotoLarge?: CSSProperties;
   }
 }
 
@@ -87,6 +89,7 @@
     bodyLarge: true;
     bodyMedium: true;
     bodySmall: true;
+    robotoLarge: true;
   }
 }
 
@@ -115,6 +118,11 @@
     disabled: true;
   }
 }
+declare module "@mui/material/Chip" {
+  interface ChipPropsVariantOverrides {
+    role: true;
+  }
+}
 
 declare module "@mui/material/Tab" {
   interface TabPropsClassesOverrides {
@@ -206,6 +214,13 @@
     lineHeight: "16px",
     letterSpacing: 0.4,
   },
+  robotoLarge: {
+    lineHeight: "24px",
+    fontSize: "16px",
+    letterSpacing: "0.15px",
+    fontWeight: 400,
+    fontFamily: "Roboto",
+  },
 };
 const palette = {
   background: {
@@ -389,11 +404,27 @@
     },
     MuiInputLabel: {
       styleOverrides: {
-        sizeSmall: {
-          ...typography.bodyMedium,
+        root: {
+          ...typography.bodyLarge,
         },
       },
     },
+    MuiChip: {
+      variants: [
+        {
+          props: { variant: "role" },
+          style: {
+            fontWeight: 600,
+            lineHeight: "18px",
+            letterSpacing: "0.1px",
+            fontSize: "14px",
+            textTransform: "capitalize",
+            backgroundColor: "#EBEBEB",
+            height: "34px",
+          },
+        },
+      ],
+    },
     MuiInputBase: {
       styleOverrides: {
         root: {
@@ -436,7 +467,7 @@
         },
       },
     },
     MuiChip: {
       styleOverrides: {
         colorError: {
           backgroundColor: "#FDDBC3",

src/types/api.ts

@@ -7,7 +7,17 @@ export type APISchemas = {
     /* Format: date-time */
     timestamp?: string
   }
-  UserDto: { identifier: string; role?: string }
+  UserDto: {
+    identifier: string
+    role?: string
+    name?: string
+    firstName?: string
+    organization?: string
+    accreditedSources?: Array<string>
+    /* Format: date-time */
+    creationDate?: string
+    creationAuthor?: string
+  }
   SurveyDto: {
     id: string
     sourceId: string
@@ -340,17 +350,17 @@ export type APISchemas = {
   }
   OnGoingDto: { ongoing?: boolean }
   PageableObject: {
-    /* Format: int64 */
-    offset?: number
-    sort?: APISchemas["SortObject"]
     /* Format: int32 */
     pageNumber?: number
     /* Format: int32 */
     pageSize?: number
-    unpaged?: boolean
+    /* Format: int64 */
+    offset?: number
+    sort?: APISchemas["SortObject"]
     paged?: boolean
+    unpaged?: boolean
   }
-  SortObject: { empty?: boolean; sorted?: boolean; unsorted?: boolean }
+  SortObject: { sorted?: boolean; empty?: boolean; unsorted?: boolean }
   UserPage: {
     content?: Array<APISchemas["UserDto"]>
     pageable?: APISchemas["PageableObject"]
@@ -608,7 +618,7 @@ export type APISchemas = {
     empty?: boolean
   }
   PeriodDto: { value?: string; label?: string; period?: string }
-  PeriodicityDto: { value: string; label: string }
+  PeriodicityDto: { value?: string; label?: string }
   EligibleDto: { eligible?: string }
   OwnerPage: {
     content?: Array<APISchemas["OwnerDto"]>
@@ -748,6 +758,7 @@ export type APISchemas = {
     totalPages?: number
     first?: boolean
     last?: boolean
+    pageable?: APISchemas["PageableObject"]
     /* Format: int32 */
     size?: number
     content?: Array<APISchemas["MoogSearchDto"]>
@@ -756,7 +767,6 @@ export type APISchemas = {
     sort?: APISchemas["SortObject"]
     /* Format: int32 */
     numberOfElements?: number
-    pageable?: APISchemas["PageableObject"]
     empty?: boolean
   }
   HealthcheckDto: { status?: string }
@@ -779,7 +789,7 @@ export type APISchemas = {
     empty?: boolean
   }
   ContactFirstLoginDto: {
-    identifier: string
+    identifier?: string
     externalId?: string
     civility?: "Female" | "Male" | "Undefined"
     lastName?: string
@@ -1107,7 +1117,7 @@ export type APIEndpoints = {
         }
   }
   "/api/contacts/{id}": {
-    responses: { get: APISchemas["ContactFirstLoginDto"]; put: APISchemas["ContactDto"]; delete: null }
+    responses: { get: null; put: APISchemas["ContactDto"]; delete: null }
     requests:
       | { method?: "get"; urlParams: { id: string } }
       | {
@@ -1240,6 +1250,10 @@ export type APIEndpoints = {
     responses: { get: null }
     requests: { method?: "get"; urlParams: { id: string } }
   }
+  "/api/users/v2": {
+    responses: { get: Array<APISchemas["UserDto"]> }
+    requests: { method?: "get" }
+  }
   "/api/temp/moog/campaigns/{idCampaign}/monitoring/progress": {
     responses: { get: APISchemas["JSONCollectionWrapperMoogProgressDto"] }
     requests: { method?: "get"; urlParams: { idCampaign: string } }

src/ui/Header.tsx

@@ -8,7 +8,7 @@ import { useUser, useLogout } from "../hooks/useAuth.ts";
 import packageInfo from "../../package.json";
 
 export function Header() {
-  const { preferred_username } = useUser();
+  const { decodedToken, isAdminLdap, isUserLdap } = useUser();
   const logout = useLogout();
 
   return (
@@ -20,16 +20,28 @@ export function Header() {
             <Box component="span" color="black.main" fontWeight={600}>
               Platine
             </Box>
-            Collecte
+            Gestion
           </Row>
           <Typography variant="bodySmall" color="black.main">
             v{packageInfo.version}
           </Typography>
         </Stack>
       </Row>
-      <Box>
-        {preferred_username}
-        <IconButton component={RouterLink} to="/reglages">
+
+      <Row spacing={4}>
+        <Stack>
+          <Typography variant={"bodyMedium"}>
+            Bienvenue, {decodedToken.preferred_username.toUpperCase()}
+          </Typography>
+          <Typography variant={"bodyMedium"}>
+            {isAdminLdap
+              ? "Vous avez le profil Administrateur"
+              : isUserLdap
+              ? "Vous avez le profil Utilisateur"
+              : "Vous n'avez aucune habilitation annuaire"}
+          </Typography>
+        </Stack>
+        <IconButton component={RouterLink} to="/settings">
           <SettingsOutlinedIcon />
         </IconButton>
         <IconButton
@@ -42,7 +54,7 @@ export function Header() {
         >
           <ExitToAppIcon />
         </IconButton>
-      </Box>
+      </Row>
     </Row>
   );
 }

src/ui/Settings/RoleChip.tsx

@@ -0,0 +1,27 @@
+import { Chip } from "@mui/material";
+
+type Props = {
+  role: string;
+};
+
+export const roleColorsWidth = [
+  { role: "administrateur", color: "#442F99", width: "145px" },
+  { role: "responsable", color: "#0C8C87", width: "127px" },
+  { role: "gestionnaire", color: "#3C75A2", width: "129px" },
+  { role: "assistance", color: "#5A1741", width: "113px" },
+];
+
+export const RoleChip = ({ role }: Props) => {
+  const color = role ? roleColorsWidth.find(r => r.role === role.toLowerCase())?.color : "black";
+  const width = role ? roleColorsWidth.find(r => r.role === role.toLowerCase())?.width : undefined;
+  return (
+    <Chip
+      label={role}
+      variant={"role"}
+      style={{
+        color: color,
+        width: width,
+      }}
+    />
+  );
+};