feat(auth): migrate public authentication presentation
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { Alert, Box, Button, CircularProgress, Paper, Typography } from "@mui/material";
|
||||
import { Alert, Box, Button, CircularProgress, 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";
|
||||
import AuthPageFrame from "../layout/AuthPageFrame";
|
||||
|
||||
export default function MicrosoftLegacyRelinkPage() {
|
||||
const { t } = useI18n();
|
||||
@@ -45,22 +46,19 @@ export default function MicrosoftLegacyRelinkPage() {
|
||||
}
|
||||
|
||||
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>
|
||||
<AuthPageFrame title={t("microsoftLegacyRelinkTitle")} description={t("microsoftLegacyRelinkBody")}>
|
||||
{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 }}>
|
||||
{success ? <Alert severity="success" role="status" sx={{ mt: 2 }}>{t("microsoftLegacyRelinkSuccess")}</Alert> : null}
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-end", gap: 1, mt: 3, "& > button": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
|
||||
<Button onClick={() => navigate("/login")}>{t("backToLogin")}</Button>
|
||||
{!success ? (
|
||||
<Button variant="contained" disabled={missing || working} onClick={() => void confirm()}>
|
||||
{working ? <CircularProgress size={20} /> : t("continueWithMicrosoft")}
|
||||
<Button variant="contained" disabled={missing || working} aria-busy={working} startIcon={working ? <CircularProgress size={20} aria-hidden="true" /> : undefined} onClick={() => void confirm()}>
|
||||
{t("continueWithMicrosoft")}
|
||||
</Button>
|
||||
) : null}
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
{working ? <Typography role="status" aria-live="polite" variant="body2" color="text.secondary" sx={{ mt: 1.5 }}>{t("loading")}</Typography> : null}
|
||||
</AuthPageFrame>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user