cesnimda
355 lines
18 KiB
TypeScript
355 lines
18 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
import { Alert, Box, Button, Checkbox, Divider, FormControlLabel, Stack, TextField, Typography } from "@mui/material";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import { useToast } from "../toast";
|
|
import type { GmailStatus, ImapStatus, MicrosoftGraphStatus } from "../types";
|
|
import { emailOAuthCallbackOrigin, emailOAuthMessage, type EmailOAuthAttempt, type EmailOAuthProvider } from "../emailOAuth";
|
|
import { PageSection } from "../layout/PageLayout";
|
|
|
|
type Provider = EmailOAuthProvider | "imap";
|
|
type ConnectionStatus = GmailStatus & MicrosoftGraphStatus & ImapStatus;
|
|
type ProviderState = {
|
|
status: ConnectionStatus | null;
|
|
loading: boolean;
|
|
readFailed: boolean;
|
|
refreshRequired: boolean;
|
|
busy: "connect" | "disconnect" | null;
|
|
error: { kind: "disconnect" | "imap"; cause: unknown } | null;
|
|
};
|
|
const providerPaths = { gmail: "/gmail", microsoft: "/microsoft-graph", imap: "/imap" };
|
|
const initialProvider = (): ProviderState => ({ status: null, loading: true, readFailed: false, refreshRequired: false, busy: null, error: null });
|
|
const providerWork = () => ({ reading: false, writing: false, refreshRequired: false, sequence: 0, controller: null as AbortController | null, status: null as ConnectionStatus | null });
|
|
|
|
// Settings > Account: connect/disconnect each linked-mailbox provider. Gmail and Microsoft use
|
|
// the same OAuth-popup + postMessage handshake (mirrored server-side in GmailController /
|
|
// MicrosoftGraphController's BuildPopupHtml); IMAP has no OAuth step, so it's a plain credential
|
|
// form submitted to POST /api/imap/connect, which verifies the connection before storing it.
|
|
export default function EmailProviderConnections() {
|
|
const { toast } = useToast();
|
|
const { t } = useI18n();
|
|
|
|
const [providers, setProviders] = useState({ gmail: initialProvider(), microsoft: initialProvider(), imap: initialProvider() });
|
|
const work = useRef({ gmail: providerWork(), microsoft: providerWork(), imap: providerWork() });
|
|
const headings = useRef<Partial<Record<Provider, HTMLHeadingElement | null>>>({});
|
|
const panels = useRef<Partial<Record<Provider, HTMLElement | null>>>({});
|
|
const pendingFocus = useRef<{ provider: Provider; element: HTMLElement } | null>(null);
|
|
const [imapForm, setImapForm] = useState({ host: "", port: "993", useSsl: true, username: "", password: "" });
|
|
const [invalidPort, setInvalidPort] = useState(false);
|
|
const oauth = useRef({ mounted: true, generation: 0, starting: new Set<EmailOAuthProvider>(), attempts: new Map<EmailOAuthProvider, EmailOAuthAttempt>() });
|
|
const startupTranslation = useRef(t);
|
|
|
|
useEffect(() => { startupTranslation.current = t; }, [t]);
|
|
|
|
const updateProvider = useCallback((provider: Provider, patch: Partial<ProviderState>) => {
|
|
setProviders(current => ({ ...current, [provider]: { ...current[provider], ...patch } }));
|
|
}, []);
|
|
|
|
const rememberFocus = (provider: Provider) => {
|
|
const element = document.activeElement;
|
|
if (element instanceof HTMLElement && panels.current[provider]?.contains(element)) pendingFocus.current = { provider, element };
|
|
};
|
|
|
|
useEffect(() => {
|
|
const pending = pendingFocus.current;
|
|
if (!pending) return;
|
|
pendingFocus.current = null;
|
|
const active = document.activeElement;
|
|
if (active === document.body || active === pending.element && (pending.element.matches(":disabled") || !pending.element.isConnected)) headings.current[pending.provider]?.focus();
|
|
}, [providers]);
|
|
|
|
useEffect(() => {
|
|
const session = oauth.current;
|
|
const providerSessions = work.current;
|
|
session.mounted = true;
|
|
return () => {
|
|
session.mounted = false; session.generation += 1; session.starting.clear(); session.attempts.clear();
|
|
for (const provider of Object.values(providerSessions)) { provider.sequence += 1; provider.controller?.abort(); provider.reading = false; }
|
|
};
|
|
}, []);
|
|
|
|
const loadStatus = useCallback(async (provider: Provider, afterWrite = false): Promise<ConnectionStatus | null> => {
|
|
const session = oauth.current;
|
|
const current = work.current[provider];
|
|
if (!session.mounted || current.reading || current.writing && !afterWrite) return null;
|
|
current.reading = true;
|
|
const sequence = ++current.sequence;
|
|
const generation = session.generation;
|
|
const controller = new AbortController();
|
|
current.controller = controller;
|
|
updateProvider(provider, { loading: true, readFailed: false });
|
|
const active = () => session.mounted && generation === session.generation && sequence === current.sequence;
|
|
try {
|
|
const { data } = await api.get<ConnectionStatus>(`${providerPaths[provider]}/status`, { signal: controller.signal });
|
|
if (!active()) return null;
|
|
if (typeof data?.connected !== "boolean") throw new Error("Invalid connection status");
|
|
current.status = data;
|
|
current.refreshRequired = false;
|
|
updateProvider(provider, { status: data, readFailed: false, refreshRequired: false });
|
|
return data;
|
|
} catch {
|
|
if (active()) updateProvider(provider, { readFailed: true });
|
|
return null;
|
|
} finally {
|
|
if (active()) { current.reading = false; current.controller = null; updateProvider(provider, { loading: false }); }
|
|
}
|
|
}, [updateProvider]);
|
|
const loadGmailStatus = useCallback(async () => { await loadStatus("gmail"); }, [loadStatus]);
|
|
const loadMicrosoftStatus = useCallback(async () => { await loadStatus("microsoft"); }, [loadStatus]);
|
|
const loadImapStatus = useCallback(async () => { await loadStatus("imap"); }, [loadStatus]);
|
|
|
|
useEffect(() => {
|
|
void loadGmailStatus();
|
|
void loadMicrosoftStatus();
|
|
void loadImapStatus();
|
|
}, [loadGmailStatus, loadMicrosoftStatus, loadImapStatus]);
|
|
|
|
useEffect(() => {
|
|
const onMessage = (event: MessageEvent) => {
|
|
if (!oauth.current.mounted) return;
|
|
for (const [provider, attempt] of oauth.current.attempts) {
|
|
const data = emailOAuthMessage(event, attempt);
|
|
if (!data) continue;
|
|
oauth.current.attempts.delete(provider);
|
|
if (data.status === "connected") {
|
|
toast(data.message || t(provider === "gmail" ? "emailConnectionsGmailConnected" : "emailConnectionsOutlookConnected"), "success");
|
|
void (provider === "gmail" ? loadGmailStatus() : loadMicrosoftStatus());
|
|
} else {
|
|
toast(data.message || t(provider === "gmail" ? "emailConnectionsGmailFailed" : "emailConnectionsOutlookFailed"), "error");
|
|
}
|
|
return;
|
|
}
|
|
};
|
|
|
|
window.addEventListener("message", onMessage);
|
|
return () => window.removeEventListener("message", onMessage);
|
|
}, [loadGmailStatus, loadMicrosoftStatus, t, toast]);
|
|
|
|
const connectViaPopup = async (provider: EmailOAuthProvider, connectUrlPath: string, popupName: string, providerLabel: string) => {
|
|
const session = oauth.current;
|
|
const current = work.current[provider];
|
|
if (!session.mounted || session.starting.has(provider) || current.reading || current.writing || current.refreshRequired || !current.status || current.status.connected) return;
|
|
const previous = session.attempts.get(provider);
|
|
if (previous && !previous.popup.closed) { previous.popup.focus(); return; }
|
|
session.attempts.delete(provider);
|
|
session.starting.add(provider);
|
|
rememberFocus(provider);
|
|
updateProvider(provider, { busy: "connect", error: null });
|
|
const generation = session.generation;
|
|
try {
|
|
const res = await api.get<{ url: string }>(connectUrlPath);
|
|
if (!session.mounted || generation !== session.generation) return;
|
|
const origin = emailOAuthCallbackOrigin(res.data.url, provider);
|
|
if (!origin) { toast(startupTranslation.current("emailConnectionsStartFailed", { provider: providerLabel }), "error"); return; }
|
|
const popup = window.open(res.data.url, popupName, "width=620,height=760,resizable=yes,scrollbars=yes");
|
|
if (!popup) toast(startupTranslation.current("emailConnectionsPopupBlocked"), "error");
|
|
else session.attempts.set(provider, { provider, origin, popup });
|
|
} catch (error) {
|
|
if (session.mounted && generation === session.generation) toast(getApiErrorMessage(error, startupTranslation.current("emailConnectionsStartFailed", { provider: providerLabel })), "error");
|
|
} finally {
|
|
if (session.mounted && generation === session.generation) { session.starting.delete(provider); updateProvider(provider, { busy: null }); }
|
|
}
|
|
};
|
|
|
|
const disconnect = async (provider: Provider, providerLabel: string) => {
|
|
const session = oauth.current;
|
|
const current = work.current[provider];
|
|
if (!session.mounted || current.reading || current.writing || current.refreshRequired || !current.status?.connected || provider !== "imap" && session.starting.has(provider)) return;
|
|
current.writing = true;
|
|
const generation = session.generation;
|
|
rememberFocus(provider);
|
|
updateProvider(provider, { busy: "disconnect", error: null });
|
|
try {
|
|
await api.delete(`${providerPaths[provider]}/connection`);
|
|
if (!session.mounted || generation !== session.generation) return;
|
|
current.status = null;
|
|
current.refreshRequired = true;
|
|
updateProvider(provider, { status: null, refreshRequired: true });
|
|
const status = await loadStatus(provider, true);
|
|
if (session.mounted && generation === session.generation && status && !status.connected) toast(startupTranslation.current("emailConnectionsDisconnected", { provider: providerLabel }), "success");
|
|
} catch (error) {
|
|
if (session.mounted && generation === session.generation) updateProvider(provider, { error: { kind: "disconnect", cause: error } });
|
|
} finally {
|
|
if (session.mounted && generation === session.generation) { current.writing = false; updateProvider(provider, { busy: null }); }
|
|
}
|
|
};
|
|
|
|
const connectImap = async () => {
|
|
const session = oauth.current;
|
|
const current = work.current.imap;
|
|
if (!session.mounted || current.reading || current.writing || current.refreshRequired || !current.status || current.status.connected) return;
|
|
if (!imapForm.host.trim() || !imapForm.username.trim() || !imapForm.password) {
|
|
toast(t("emailConnectionsRequired"), "error");
|
|
return;
|
|
}
|
|
const port = Number(imapForm.port);
|
|
if (!imapForm.port.trim() || !Number.isInteger(port) || port < 1 || port > 65535) { setInvalidPort(true); return; }
|
|
const submitted = { ...imapForm };
|
|
current.writing = true;
|
|
const generation = session.generation;
|
|
rememberFocus("imap");
|
|
updateProvider("imap", { busy: "connect", error: null });
|
|
try {
|
|
await api.post("/imap/connect", { ...submitted, port });
|
|
if (!session.mounted || generation !== session.generation) return;
|
|
rememberFocus("imap");
|
|
// A completed submission must not clear credentials edited for another attempt.
|
|
setImapForm(previous => Object.keys(submitted).every(key => previous[key as keyof typeof previous] === submitted[key as keyof typeof submitted]) ? { ...previous, password: "" } : previous);
|
|
current.status = null;
|
|
current.refreshRequired = true;
|
|
updateProvider("imap", { status: null, refreshRequired: true });
|
|
const status = await loadStatus("imap", true);
|
|
if (session.mounted && generation === session.generation && status?.connected) toast(startupTranslation.current("emailConnectionsImapConnected"), "success");
|
|
} catch (error) {
|
|
if (session.mounted && generation === session.generation) updateProvider("imap", { error: { kind: "imap", cause: error } });
|
|
} finally {
|
|
if (session.mounted && generation === session.generation) { current.writing = false; updateProvider("imap", { busy: null }); }
|
|
}
|
|
};
|
|
|
|
const providerFeedback = (provider: Provider, providerLabel: string) => {
|
|
const state = providers[provider];
|
|
return <>
|
|
{state.loading ? <Typography role="status" variant="body2" color="text.secondary">{t("emailConnectionsLoading")}</Typography> : null}
|
|
{state.readFailed ? <Alert severity="error" action={<Button color="inherit" onClick={() => { rememberFocus(provider); void loadStatus(provider); }}>{t("retry")}</Button>}>
|
|
{t(state.refreshRequired ? "emailConnectionsRefreshRequired" : "emailConnectionsStatusFailed")}
|
|
</Alert> : null}
|
|
{state.error ? <Alert severity="error">{getApiErrorMessage(state.error.cause, t(state.error.kind === "imap" ? "emailConnectionsImapFailed" : "emailConnectionsDisconnectFailed", { provider: providerLabel }))}</Alert> : null}
|
|
</>;
|
|
};
|
|
|
|
return (
|
|
<PageSection surface title={t("emailConnectionsTitle")} description={t("emailConnectionsBody")}>
|
|
<Stack spacing={2}>
|
|
<ProviderRow
|
|
label="Gmail"
|
|
state={providers.gmail}
|
|
address={providers.gmail.status?.gmailAddress ?? null}
|
|
panelRef={node => { panels.current.gmail = node; }}
|
|
headingRef={node => { headings.current.gmail = node; }}
|
|
onConnect={() => void connectViaPopup("gmail", "/gmail/connect-url", "jobtracker-gmail-connect", "Gmail")}
|
|
onDisconnect={() => void disconnect("gmail", "Gmail")}
|
|
>{providerFeedback("gmail", "Gmail")}</ProviderRow>
|
|
|
|
<Divider />
|
|
|
|
<ProviderRow
|
|
label="Outlook / Microsoft 365"
|
|
state={providers.microsoft}
|
|
address={providers.microsoft.status?.mailAddress ?? null}
|
|
panelRef={node => { panels.current.microsoft = node; }}
|
|
headingRef={node => { headings.current.microsoft = node; }}
|
|
onConnect={() => void connectViaPopup("microsoft", "/microsoft-graph/connect-url", "jobtracker-microsoft-connect", "Outlook")}
|
|
onDisconnect={() => void disconnect("microsoft", "Outlook")}
|
|
>{providerFeedback("microsoft", "Outlook")}</ProviderRow>
|
|
|
|
<Divider />
|
|
|
|
<ProviderRow
|
|
label={t("emailConnectionsOtherImap")}
|
|
state={providers.imap}
|
|
address={providers.imap.status?.username ?? null}
|
|
panelRef={node => { panels.current.imap = node; }}
|
|
headingRef={node => { headings.current.imap = node; }}
|
|
onDisconnect={() => void disconnect("imap", "IMAP")}
|
|
>
|
|
{providerFeedback("imap", "IMAP")}
|
|
{providers.imap.status && !providers.imap.status.connected && !providers.imap.readFailed && !providers.imap.refreshRequired && (
|
|
<Box sx={{ display: "grid", gap: 1.5, gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "minmax(0, 2fr) minmax(0, 1fr)" }, maxWidth: 640 }}>
|
|
<TextField
|
|
size="small"
|
|
label={t("emailConnectionsImapHost")}
|
|
placeholder="imap.example.com"
|
|
value={imapForm.host}
|
|
onChange={(e) => setImapForm((prev) => ({ ...prev, host: e.target.value }))}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
label={t("emailConnectionsPort")}
|
|
type="number"
|
|
value={imapForm.port}
|
|
error={invalidPort}
|
|
helperText={invalidPort ? t("emailConnectionsPortInvalid") : undefined}
|
|
slotProps={{ htmlInput: { min: 1, max: 65535, step: 1 } }}
|
|
onChange={(e) => { setImapForm((prev) => ({ ...prev, port: e.target.value })); setInvalidPort(false); }}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
label={t("emailConnectionsUsername")}
|
|
value={imapForm.username}
|
|
onChange={(e) => setImapForm((prev) => ({ ...prev, username: e.target.value }))}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
label={t("emailConnectionsPassword")}
|
|
type="password"
|
|
value={imapForm.password}
|
|
onChange={(e) => setImapForm((prev) => ({ ...prev, password: e.target.value }))}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
<FormControlLabel
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
control={<Checkbox checked={imapForm.useSsl} onChange={(e) => setImapForm((prev) => ({ ...prev, useSsl: e.target.checked }))} />}
|
|
label={t("emailConnectionsUseSsl")}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
onClick={connectImap}
|
|
disabled={providers.imap.loading || providers.imap.busy !== null}
|
|
sx={{ gridColumn: "1 / -1", justifySelf: "start", maxWidth: "100%", whiteSpace: "normal", minHeight: 40 }}
|
|
>
|
|
{providers.imap.busy === "connect" ? t("emailConnectionsConnecting") : t("emailConnectionsConnectImap")}
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</ProviderRow>
|
|
</Stack>
|
|
</PageSection>
|
|
);
|
|
}
|
|
|
|
function ProviderRow({
|
|
label,
|
|
state,
|
|
address,
|
|
panelRef,
|
|
headingRef,
|
|
onConnect,
|
|
onDisconnect,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
state: ProviderState;
|
|
address: string | null;
|
|
panelRef: (node: HTMLElement | null) => void;
|
|
headingRef: (node: HTMLHeadingElement | null) => void;
|
|
onConnect?: () => void;
|
|
onDisconnect: () => void;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { t } = useI18n();
|
|
return (
|
|
<Box component="section" aria-label={label} ref={panelRef} aria-busy={state.loading || state.busy !== null} sx={{ display: "grid", gap: 1.5, minWidth: 0 }}>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap" gap={1} sx={{ minWidth: 0 }}>
|
|
<Box sx={{ flex: "1 1 12rem", minWidth: 0 }}>
|
|
<Typography component="h3" variant="subtitle1" ref={headingRef} tabIndex={-1} sx={{ fontWeight: 700, overflowWrap: "anywhere" }}>{label}</Typography>
|
|
{state.status && !state.loading && !state.readFailed && !state.refreshRequired ? <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, overflowWrap: "anywhere" }}>
|
|
{state.status.connected ? address || t("emailConnectionsConnected") : t("emailConnectionsNotConnected")}
|
|
</Typography> : null}
|
|
</Box>
|
|
{state.status && !state.readFailed && !state.refreshRequired ? state.status.connected ? (
|
|
<Button variant="outlined" color="error" disabled={state.loading || state.busy !== null} onClick={onDisconnect} sx={{ minHeight: 40, maxWidth: "100%", whiteSpace: "normal" }}>
|
|
{state.busy === "disconnect" ? t("emailConnectionsDisconnecting") : t("emailConnectionsDisconnect")}
|
|
</Button>
|
|
) : onConnect ? <Button variant="outlined" disabled={state.loading || state.busy !== null} onClick={onConnect} sx={{ minHeight: 40, maxWidth: "100%", whiteSpace: "normal" }}>
|
|
{state.busy === "connect" ? t("emailConnectionsConnecting") : t("emailConnectionsConnect")}
|
|
</Button> : null : null}
|
|
</Stack>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|