bananas-commerce-admin 0.21.2 → 0.22.0

package/src/pages/AcceptInvitePage.tsx

@@ -0,0 +1,232 @@
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import LoadingButton from "@mui/lab/LoadingButton";
+import {
+  Alert,
+  Backdrop,
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+import { useSnackbar } from "notistack";
+
+import Brand from "../components/Brand";
+import Content from "../containers/Content";
+import { useApi } from "../contexts/ApiContext";
+import { useI18n } from "../contexts/I18nContext";
+import { LogoType } from "../types";
+
+export interface AcceptInvitePageProps {
+  title?: string;
+  logo?: LogoType;
+  logoHeight?: number | string;
+}
+
+const StyledDialog = styled(Dialog, {
+  name: "BananasAcceptInviteDialog",
+  slot: "Root",
+})(() => ({}));
+
+const StyledDialogTitle = styled(DialogTitle, {
+  name: "BananasAcceptInviteDialog",
+  slot: "Title",
+})(({ theme }) =>
+  theme.unstable_sx({
+    bgcolor: "primary.main",
+    color: "primary.contrastText",
+  }),
+);
+
+const StyledBackdrop = styled(Backdrop, {
+  name: "BananasAcceptInviteDialog",
+  slot: "Backdrop",
+})(({ theme }) =>
+  theme.unstable_sx({
+    bgcolor: "primary.dark",
+    m: 0,
+    p: 2,
+    textAlign: "center",
+    alignItems: "middle",
+    justifyContent: "center",
+    display: "flex",
+  }),
+);
+
+export const AcceptInvitePage: React.FC<AcceptInvitePageProps> = ({ title, logo, logoHeight }) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const { t } = useI18n();
+  const api = useApi();
+  const [searchParams] = useSearchParams();
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [tokenError, setTokenError] = useState("");
+
+  const token = searchParams.get("token");
+
+  useEffect(() => {
+    if (!token) {
+      setTokenError(t("No invite token provided"));
+    }
+  }, [token, t]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError("");
+
+    if (!token) {
+      setTokenError(t("No invite token provided"));
+      return;
+    }
+
+    if (password.length < 8) {
+      setError(t("Password must be at least 8 characters long"));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError(t("Passwords do not match"));
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await api?.operations["user.staff:invite-accept"].call({
+        body: {
+          token,
+          password,
+        },
+      });
+
+      if (response?.ok) {
+        const data = await response.json();
+        enqueueSnackbar(data.message || t("User created successfully!"), {
+          variant: "success",
+        });
+
+        // User is already logged in on the backend, redirect to dashboard
+        // Use full page navigation to reinitialize the UserContext
+        window.location.href = "/";
+      } else {
+        const errorData = await response?.json();
+        if (errorData?.detail && Array.isArray(errorData.detail)) {
+          const tokenErrors = errorData.detail.filter((err: { loc?: string[]; msg?: string }) =>
+            err.loc?.includes("token"),
+          );
+          if (tokenErrors.length > 0) {
+            setTokenError(tokenErrors[0].msg);
+          } else {
+            setError(errorData.detail[0]?.msg || t("Failed to accept invite"));
+          }
+        } else {
+          setError(t("Failed to accept invite. Please try again."));
+        }
+      }
+    } catch (error) {
+      console.error("[ACCEPT_INVITE]", error);
+      setError(t("An unexpected error occurred. Please try again."));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Content layout="fullWidth">
+      <StyledDialog
+        open
+        BackdropComponent={StyledBackdrop}
+        PaperProps={{ elevation: 1 }}
+        sx={{ "> * > *": { width: "100%" } }}
+      >
+        <StyledDialogTitle>
+          {logo ? (
+            <Brand
+              LogoProps={{ style: { width: "auto", height: logoHeight ?? "24px !important" } }}
+              src={logo}
+            />
+          ) : (
+            <Typography sx={{ fontWeight: "bold", color: "inherit" }}>{title}</Typography>
+          )}
+        </StyledDialogTitle>
+
+        <Box component="form" onSubmit={handleSubmit}>
+          <DialogContent>
+            <Stack spacing={2}>
+              <Typography variant="h6">{t("Accept Staff Invite")}</Typography>
+              <Typography color="text.secondary" variant="body2">
+                {t("Set your password to complete your account setup.")}
+              </Typography>
+
+              {tokenError && <Alert severity="error">{tokenError}</Alert>}
+
+              {error && !tokenError && <Alert severity="error">{error}</Alert>}
+
+              {!tokenError && (
+                <>
+                  <TextField
+                    fullWidth
+                    required
+                    color="secondary"
+                    disabled={loading}
+                    inputProps={{ "aria-label": "Password", minLength: 8 }}
+                    label={t("Password")}
+                    name="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                  <TextField
+                    fullWidth
+                    required
+                    color="secondary"
+                    disabled={loading}
+                    inputProps={{ "aria-label": "Confirm Password", minLength: 8 }}
+                    label={t("Confirm Password")}
+                    name="confirmPassword"
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                  />
+                </>
+              )}
+            </Stack>
+          </DialogContent>
+
+          <DialogActions
+            sx={{
+              pt: 0,
+              pb: 2,
+            }}
+          >
+            {!tokenError && (
+              <LoadingButton
+                aria-label="accept-invite"
+                color="primary"
+                disabled={!token}
+                loading={loading}
+                sx={{ margin: "auto" }}
+                type="submit"
+                variant="contained"
+              >
+                {t("Create Account")}
+              </LoadingButton>
+            )}
+          </DialogActions>
+        </Box>
+      </StyledDialog>
+    </Content>
+  );
+};
+
+export default AcceptInvitePage;

package/src/pages/ResetPasswordPage.tsx

@@ -0,0 +1,236 @@
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import LoadingButton from "@mui/lab/LoadingButton";
+import {
+  Alert,
+  Backdrop,
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+import { useSnackbar } from "notistack";
+
+import Brand from "../components/Brand";
+import Content from "../containers/Content";
+import { useApi } from "../contexts/ApiContext";
+import { useI18n } from "../contexts/I18nContext";
+import { LogoType } from "../types";
+
+export interface ResetPasswordPageProps {
+  title?: string;
+  logo?: LogoType;
+  logoHeight?: number | string;
+}
+
+const StyledDialog = styled(Dialog, {
+  name: "BananasResetPasswordDialog",
+  slot: "Root",
+})(() => ({}));
+
+const StyledDialogTitle = styled(DialogTitle, {
+  name: "BananasResetPasswordDialog",
+  slot: "Title",
+})(({ theme }) =>
+  theme.unstable_sx({
+    bgcolor: "primary.main",
+    color: "primary.contrastText",
+  }),
+);
+
+const StyledBackdrop = styled(Backdrop, {
+  name: "BananasResetPasswordDialog",
+  slot: "Backdrop",
+})(({ theme }) =>
+  theme.unstable_sx({
+    bgcolor: "primary.dark",
+    m: 0,
+    p: 2,
+    textAlign: "center",
+    alignItems: "middle",
+    justifyContent: "center",
+    display: "flex",
+  }),
+);
+
+export const ResetPasswordPage: React.FC<ResetPasswordPageProps> = ({
+  title,
+  logo,
+  logoHeight,
+}) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const { t } = useI18n();
+  const api = useApi();
+  const [searchParams] = useSearchParams();
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [tokenError, setTokenError] = useState("");
+
+  const token = searchParams.get("token");
+
+  useEffect(() => {
+    if (!token) {
+      setTokenError(t("No password reset token provided"));
+    }
+  }, [token, t]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError("");
+
+    if (!token) {
+      setTokenError(t("No password reset token provided"));
+      return;
+    }
+
+    if (password.length < 8) {
+      setError(t("Password must be at least 8 characters long"));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError(t("Passwords do not match"));
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await api?.operations["user.staff:password-reset-confirm"].call({
+        body: {
+          token,
+          new_password: password,
+        },
+      });
+
+      if (response?.ok) {
+        const data = await response.json();
+        enqueueSnackbar(data.message || t("Password reset successfully!"), {
+          variant: "success",
+        });
+
+        // User is logged in on the backend after password reset, redirect to dashboard
+        // Use full page navigation to reinitialize the UserContext
+        window.location.href = "/";
+      } else {
+        const errorData = await response?.json();
+        if (errorData?.detail && Array.isArray(errorData.detail)) {
+          const tokenErrors = errorData.detail.filter((err: { loc?: string[]; msg?: string }) =>
+            err.loc?.includes("token"),
+          );
+          if (tokenErrors.length > 0) {
+            setTokenError(tokenErrors[0].msg);
+          } else {
+            setError(errorData.detail[0]?.msg || t("Failed to reset password"));
+          }
+        } else {
+          setError(t("Failed to reset password. Please try again."));
+        }
+      }
+    } catch (error) {
+      console.error("[RESET_PASSWORD]", error);
+      setError(t("An unexpected error occurred. Please try again."));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Content layout="fullWidth">
+      <StyledDialog
+        open
+        BackdropComponent={StyledBackdrop}
+        PaperProps={{ elevation: 1 }}
+        sx={{ "> * > *": { width: "100%" } }}
+      >
+        <StyledDialogTitle>
+          {logo ? (
+            <Brand
+              LogoProps={{ style: { width: "auto", height: logoHeight ?? "24px !important" } }}
+              src={logo}
+            />
+          ) : (
+            <Typography sx={{ fontWeight: "bold", color: "inherit" }}>{title}</Typography>
+          )}
+        </StyledDialogTitle>
+
+        <Box component="form" onSubmit={handleSubmit}>
+          <DialogContent>
+            <Stack spacing={2}>
+              <Typography variant="h6">{t("Reset Your Password")}</Typography>
+              <Typography color="text.secondary" variant="body2">
+                {t("Enter your new password below.")}
+              </Typography>
+
+              {tokenError && <Alert severity="error">{tokenError}</Alert>}
+
+              {error && !tokenError && <Alert severity="error">{error}</Alert>}
+
+              {!tokenError && (
+                <>
+                  <TextField
+                    fullWidth
+                    required
+                    color="secondary"
+                    disabled={loading}
+                    inputProps={{ "aria-label": "New Password", minLength: 8 }}
+                    label={t("New Password")}
+                    name="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                  <TextField
+                    fullWidth
+                    required
+                    color="secondary"
+                    disabled={loading}
+                    inputProps={{ "aria-label": "Confirm New Password", minLength: 8 }}
+                    label={t("Confirm New Password")}
+                    name="confirmPassword"
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                  />
+                </>
+              )}
+            </Stack>
+          </DialogContent>
+
+          <DialogActions
+            sx={{
+              pt: 0,
+              pb: 2,
+            }}
+          >
+            {!tokenError && (
+              <LoadingButton
+                aria-label="reset-password"
+                color="primary"
+                disabled={!token}
+                loading={loading}
+                sx={{ margin: "auto" }}
+                type="submit"
+                variant="contained"
+              >
+                {t("Reset Password")}
+              </LoadingButton>
+            )}
+          </DialogActions>
+        </Box>
+      </StyledDialog>
+    </Content>
+  );
+};
+
+export default ResetPasswordPage;