cesnimda
67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
import { Alert, Box, Button, CircularProgress, Paper, Typography } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { getMicrosoftMsalInstance } from "../components/MicrosoftAuthCard";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
export default function MicrosoftLegacyRelinkPage() {
|
|
const { t } = useI18n();
|
|
const navigate = useNavigate();
|
|
const [working, setWorking] = useState(false);
|
|
const [success, setSuccess] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const params = new URLSearchParams(window.location.search);
|
|
const userId = params.get("userId") || "";
|
|
const tenantId = params.get("tenantId") || "";
|
|
const objectId = params.get("objectId") || "";
|
|
const recoveryToken = params.get("token") || "";
|
|
const clientId = (process.env.NEXT_PUBLIC_MICROSOFT_CLIENT_ID || "").trim();
|
|
const missing = !userId || !tenantId || !objectId || !recoveryToken || !clientId;
|
|
|
|
async function confirm() {
|
|
setWorking(true);
|
|
setError(null);
|
|
try {
|
|
const msal = getMicrosoftMsalInstance(clientId);
|
|
await msal.initialize();
|
|
const result = await msal.loginPopup({ scopes: ["openid", "profile", "email"] });
|
|
if (!result.idToken) throw new Error(t("microsoftAuthFailed"));
|
|
await api.post("/auth/microsoft/legacy-relink/confirm", {
|
|
userId,
|
|
tenantId,
|
|
objectId,
|
|
recoveryToken,
|
|
microsoftToken: result.idToken,
|
|
});
|
|
setSuccess(true);
|
|
} catch (e: any) {
|
|
setError(getApiErrorMessage(e, t("microsoftLegacyRelinkFailed")));
|
|
} finally {
|
|
setWorking(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", p: 2 }}>
|
|
<Paper sx={{ width: "min(520px, 100%)", p: 4, borderRadius: 4 }}>
|
|
<Typography variant="h5" sx={{ fontWeight: 900 }}>{t("microsoftLegacyRelinkTitle")}</Typography>
|
|
<Typography sx={{ color: "text.secondary", mt: 1 }}>{t("microsoftLegacyRelinkBody")}</Typography>
|
|
{missing ? <Alert severity="error" sx={{ mt: 2 }}>{t("microsoftLegacyRelinkMissing")}</Alert> : null}
|
|
{error ? <Alert severity="error" sx={{ mt: 2 }}>{error}</Alert> : null}
|
|
{success ? <Alert severity="success" sx={{ mt: 2 }}>{t("microsoftLegacyRelinkSuccess")}</Alert> : null}
|
|
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 3 }}>
|
|
<Button onClick={() => navigate("/login")}>{t("backToLogin")}</Button>
|
|
{!success ? (
|
|
<Button variant="contained" disabled={missing || working} onClick={() => void confirm()}>
|
|
{working ? <CircularProgress size={20} /> : t("continueWithMicrosoft")}
|
|
</Button>
|
|
) : null}
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|