fix: added tsx files

frontend/src/components/shared/AuthContainer.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  Chip,
+  Stack,
+  Paper,
+  CircularProgress,
+} from "@mui/material";
+import HFLogo from "../Logo/HFLogo";
+import { useAuth } from "../../hooks/useAuth";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { useNavigate } from "react-router-dom";
+import { useTranslation, declareComponentKeys } from "i18n";
+
+function AuthContainer({ actionText = "DO_ACTION" }) {
+  const { isAuthenticated, user, login, logout, loading } = useAuth();
+  const navigate = useNavigate();
+  const {t} = useTranslation({AuthContainer});
+
+  const handleLogout = () => {
+    if (isAuthenticated && logout) {
+      logout();
+      navigate("/", { replace: true });
+      window.location.reload();
+    }
+  };
+
+  if (loading) {
+    return (
+      <Paper
+        elevation={0}
+        sx={{
+          p: 3,
+          mb: 4,
+          border: "1px solid",
+          borderColor: "grey.300",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+        }}
+      >
+        <CircularProgress size={24} />
+      </Paper>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <Paper
+        elevation={0}
+        sx={{
+          p: 3,
+          mb: 4,
+          border: "1px solid",
+          borderColor: "grey.300",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+        }}
+      >
+        <Typography variant="h6" align="center">
+          {t("login")}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" align="center">
+          {t("need")}
+        </Typography>
+        <Button
+          variant="contained"
+          onClick={login}
+          startIcon={
+            <Box
+              sx={{
+                width: 20,
+                height: 20,
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <HFLogo />
+            </Box>
+          }
+          sx={{
+            textTransform: "none",
+            fontWeight: 600,
+            py: 1,
+            px: 2,
+          }}
+        >
+          {t("button")}
+        </Button>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{ p: 2, border: "1px solid", borderColor: "grey.300", mb: 4 }}
+    >
+      <Stack
+        direction="row"
+        spacing={2}
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Typography variant="body1">
+            {t("loggedin", {user: (user !== null ? user!['username'] : "inconnu")})}
+            Connected as <strong>{user!['username']}</strong>
+          </Typography>
+          <Chip
+            label={`Ready to ${actionText}`}
+            color="success"
+            size="small"
+            variant="outlined"
+          />
+        </Stack>
+        <Button
+          variant="contained"
+          onClick={handleLogout}
+          endIcon={<LogoutIcon />}
+          color="primary"
+          sx={{
+            minWidth: 120,
+            height: 36,
+            textTransform: "none",
+            fontSize: "0.9375rem",
+          }}
+        >
+          {t("logout")}
+        </Button>
+      </Stack>
+    </Paper>
+  );
+}
+
+const { i18n } = declareComponentKeys<
+| "login"
+| "need"
+| "logout"
+| "button"
+| { K: "loggedin"; P: { user: string; }; R: JSX.Element }
+>()({ AuthContainer });
+export type I18n = typeof i18n;
+
+export default AuthContainer;

frontend/src/pages/AddModelPage/AddModelPage.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Box, CircularProgress } from "@mui/material";
+import { useAuth } from "../../hooks/useAuth";
+import PageHeader from "../../components/shared/PageHeader";
+import EvaluationQueues from "./components/EvaluationQueues/EvaluationQueues";
+import ModelSubmissionForm from "./components/ModelSubmissionForm/ModelSubmissionForm";
+import SubmissionGuide from "./components/SubmissionGuide/SubmissionGuide";
+import { useTranslation, declareComponentKeys } from "i18n";
+
+function AddModelPage() {
+  const { isAuthenticated, loading, user } = useAuth();
+  const {t} = useTranslation({AddModelPage});
+
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ width: "100%", maxWidth: 1200, margin: "0 auto", padding: 4 }}>
+      <PageHeader
+        title={t("title")}
+        subtitle={
+          <>
+            {t("subtitle")}
+          </>
+        }
+      />
+
+      <SubmissionGuide />
+
+      <ModelSubmissionForm user={user} isAuthenticated={isAuthenticated} />
+
+      <EvaluationQueues defaultExpanded={false} />
+    </Box>
+  );
+}
+
+const { i18n } = declareComponentKeys<
+| "title"
+| "subtitle"
+>()({ AddModelPage });
+export type I18n = typeof i18n;
+
+export default AddModelPage;