fix(auth): Google Sign-In audience mismatch + remove per-user accent color

Root cause of "Google authentication failed": appsettings.Development.json had Auth:GoogleClientId set to the literal placeholder "CHANGE_ME_GOOGLE_CLIENT_ID" while the frontend's .env.development had a real (already-public, already-committed) client ID -- every Google ID token's audience check failed against the backend's placeholder. Fixed by setting the same real client ID on both sides (a client ID is a public identifier, not a secret, safe to commit -- unlike a client secret). Also enabled Auth:AllowRegistration in dev so the existing Google-first self-serve-signup path (auto-create on unmatched verified email, auto-link on matching verified email -- built during Wave 7) is actually exercisable locally. Wired the previously-missing Auth__MicrosoftClientId / NEXT_PUBLIC_MICROSOFT_CLIENT_ID into docker-compose.yml/.env.example (distinct from the existing MICROSOFT_CLIENT_ID used for Outlook mail linking) -- Microsoft sign-in was never deployable, a leftover gap from when it was built. Fixed a stale env-var name in the Microsoft setup hint copy (still said REACT_APP_*, predates the Next.js migration). Removed the per-user accent color picker entirely: it was purely client-side (localStorage + theme.ts), never touched the backend/DB. theme.ts now hardcodes a single ACCENT constant; themePrefs.ts drops get/set/clearAccentColor; App.tsx and SettingsView.tsx drop the accentColor prop threading. Dead accent-related i18n keys removed from both locales. Consolidated Settings' "Account" tab (duplicated GoogleAuthCard, which already lives on the Profile page) into Profile: moved AuthStatusCard and EmailProviderConnections there alongside the existing Google/ Microsoft auth cards, so identity/account-linking lives in one place. Settings drops from 5 tabs to 4 and its General tab uses a consistent SectionCard layout instead of ad-hoc per-card styling. Verified: dotnet build/test (177/177) and npm build/test (57/57) both green; confirmed live against a running dev server that /auth/config now reports googleEnabled with the corrected client ID, Settings has no accent controls, and Profile shows the consolidated auth section.
2026-07-12 02:43:10 +02:00
parent 86cdafb3ef
commit 33d899c243
11 changed files with 115 additions and 255 deletions
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";

 import {
  Box,
@@ -9,11 +9,9 @@ import {
  InputLabel,
  MenuItem,
  Paper,
-  Popover,
  Select,
  Tab,
  Tabs,
-  TextField,
  Typography,
 } from "@mui/material";

@@ -21,12 +19,9 @@ import { useNavigate } from "react-router-dom";

 import { JobTableColumns } from "./JobTable";
 import ImportExportJobs from "./ImportExportJobs";
-import GoogleAuthCard from "./GoogleAuthCard";
-import EmailProviderConnections from "./EmailProviderConnections";
 import RulesSettingsCard from "./RulesSettingsCard";
 import BackupCard from "./BackupCard";
 import QuickCaptureCard from "./QuickCaptureCard";
-import AuthStatusCard from "./AuthStatusCard";
 import { ThemeModePref } from "../themePrefs";
 import { useI18n } from "../i18n/I18nProvider";

@@ -37,17 +32,23 @@ interface Props {
  onColumnsChange: (next: JobTableColumns) => void;
  themeMode: ThemeModePref;
  onThemeModeChange: (v: ThemeModePref) => void;
-  accentColor: string;
-  onAccentColorChange: (v: string) => void;
-  onResetAccentColor: () => void;
 }

 function TabPanel({ value, index, children }: { value: number; index: number; children: React.ReactNode }) {
  if (value !== index) return null;
-  return <Box sx={{ mt: 2 }}>{children}</Box>;
+  return <Box sx={{ mt: 2.5 }}>{children}</Box>;
+}
+
+function SectionCard({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
+  return (
+    <Paper sx={{ p: 2.5 }}>
+      <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 800 }}>{title}</Typography>
+      {subtitle ? <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, mb: 1.5 }}>{subtitle}</Typography> : <Box sx={{ mb: 1.5 }} />}
+      {children}
+    </Paper>
+  );
 }

-const ACCENTS = ["#6366f1", "#22d3ee", "#2563eb", "#8b5cf6", "#15803d", "#16a34a", "#0f766e", "#f97316"];
 const NOTIFICATION_PREFS_KEY = "settings.notificationPrefs";

 type NotificationPrefs = {
@@ -88,43 +89,19 @@ export default function SettingsView({
  onColumnsChange,
  themeMode,
  onThemeModeChange,
-  accentColor,
-  onAccentColorChange,
-  onResetAccentColor,
 }: Props) {
  const navigate = useNavigate();
  const [tab, setTab] = useState(0);
  const { language, setLanguage, t } = useI18n();
-  const [accentAnchor, setAccentAnchor] = useState<HTMLElement | null>(null);
-  const [accentDraft, setAccentDraft] = useState(accentColor);
  const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs>(() => loadNotificationPrefs());

-  const accentOk = useMemo(() => /^#[0-9a-fA-F]{6}$/.test(accentColor), [accentColor]);
-  const accentDraftOk = useMemo(() => /^#[0-9a-fA-F]{6}$/.test(accentDraft), [accentDraft]);
-
-  useEffect(() => {
-    setAccentDraft(accentOk ? accentColor : "#15803d");
-  }, [accentColor, accentOk]);
-
  useEffect(() => {
    window.localStorage.setItem(NOTIFICATION_PREFS_KEY, JSON.stringify(notificationPrefs));
  }, [notificationPrefs]);

-  const applyAccent = () => {
-    if (!accentDraftOk) return;
-    onAccentColorChange(accentDraft);
-    setAccentAnchor(null);
-  };
-
-  const resetAccent = () => {
-    onResetAccentColor();
-    setAccentDraft("#15803d");
-    setAccentAnchor(null);
-  };
-
  return (
-    <Paper sx={{ mt: 0, p: 2 }}>
-      <Typography variant="h5" sx={{ mb: 1, fontWeight: 900 }}>
+    <Paper sx={{ mt: 0, p: 2.5 }}>
+      <Typography variant="h5" sx={{ mb: 0.5, fontWeight: 900 }}>
        {t("settingsTitle")}
      </Typography>
      <Typography sx={{ color: "text.secondary", mb: 2 }}>
@@ -135,130 +112,48 @@ export default function SettingsView({
        <Tab label={t("settingsTabGeneral")} />
        <Tab label={t("settingsTabFollowUps")} />
        <Tab label={t("settingsTabNotifications")} />
-        <Tab label={t("settingsTabAccount")} />
        <Tab label={t("settingsTabBackup")} />
      </Tabs>

      <TabPanel value={tab} index={0}>
-        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
-          <Paper sx={{ p: 2 }}>
-            <Typography sx={{ fontWeight: 950, mb: 1 }}>{t("settingsAppearance")}</Typography>
-
-            <FormControl fullWidth sx={{ mb: 2 }}>
-              <InputLabel id="theme-mode-label">{t("settingsTheme")}</InputLabel>
-              <Select
-                labelId="theme-mode-label"
-                value={themeMode}
-                label={t("settingsTheme")}
-                onChange={(e) => onThemeModeChange(e.target.value as ThemeModePref)}
-              >
-                <MenuItem value="system">{t("settingsThemeSystem")}</MenuItem>
-                <MenuItem value="dark">{t("settingsThemeDark")}</MenuItem>
-                <MenuItem value="light">{t("settingsThemeLight")}</MenuItem>
-              </Select>
-            </FormControl>
-
-            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
-              <Box>
-                <Typography variant="caption" sx={{ mb: 0.75, display: "block" }}>{t("settingsAccent")}</Typography>
-                <Button
-                  variant="outlined"
-                  onClick={(e) => setAccentAnchor(e.currentTarget)}
-                  sx={{ gap: 1.25, justifyContent: "flex-start", minWidth: 180 }}
+        <Box sx={{ display: "grid", gap: 2.5 }}>
+          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2.5 }}>
+            <SectionCard title={t("settingsAppearance")}>
+              <FormControl fullWidth>
+                <InputLabel id="theme-mode-label">{t("settingsTheme")}</InputLabel>
+                <Select
+                  labelId="theme-mode-label"
+                  value={themeMode}
+                  label={t("settingsTheme")}
+                  onChange={(e) => onThemeModeChange(e.target.value as ThemeModePref)}
                >
-                  <Box sx={{ width: 20, height: 20, borderRadius: 999, bgcolor: accentOk ? accentColor : "#15803d", border: "1px solid", borderColor: "divider" }} />
-                  {accentOk ? accentColor.toUpperCase() : "#15803D"}
-                </Button>
-              </Box>
-              <Button variant="outlined" onClick={resetAccent}>
-                {t("settingsReset")}
-              </Button>
-            </Box>
+                  <MenuItem value="system">{t("settingsThemeSystem")}</MenuItem>
+                  <MenuItem value="dark">{t("settingsThemeDark")}</MenuItem>
+                  <MenuItem value="light">{t("settingsThemeLight")}</MenuItem>
+                </Select>
+              </FormControl>
+            </SectionCard>

-            <Popover
-              open={Boolean(accentAnchor)}
-              anchorEl={accentAnchor}
-              onClose={() => setAccentAnchor(null)}
-              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-            >
-              <Box sx={{ p: 2, width: 280, display: "grid", gap: 1.5 }}>
-                <Typography sx={{ fontWeight: 900 }}>{t("settingsAccent")}</Typography>
-                <input
-                  aria-label={t("settingsAccent")}
-                  type="color"
-                  value={accentDraftOk ? accentDraft : "#15803d"}
-                  onChange={(e) => setAccentDraft(e.target.value)}
-                  style={{ width: "100%", height: 52, border: "none", background: "transparent", padding: 0, cursor: "pointer" }}
-                />
-                <TextField
-                  label={t("settingsAccent")}
-                  value={accentDraft}
-                  onChange={(e) => setAccentDraft(e.target.value)}
-                  error={!accentDraftOk}
-                  helperText={accentDraftOk ? t("settingsAccentHelp") : t("settingsAccentInvalid")}
-                  fullWidth
-                />
-                <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
-                  {ACCENTS.map((c) => (
-                    <button
-                      key={c}
-                      type="button"
-                      onClick={() => setAccentDraft(c)}
-                      title={c}
-                      aria-label={`${t("settingsAccent")} ${c}`}
-                      style={{
-                        width: 28,
-                        height: 28,
-                        borderRadius: 999,
-                        border: c.toLowerCase() === accentDraft.toLowerCase() ? "2px solid rgba(15,23,42,0.9)" : "1px solid rgba(148,163,184,0.35)",
-                        background: c,
-                        cursor: "pointer",
-                      }}
-                    />
-                  ))}
-                </Box>
-                <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1 }}>
-                  <Button variant="text" onClick={() => setAccentAnchor(null)}>{t("cancel")}</Button>
-                  <Button variant="contained" onClick={applyAccent} disabled={!accentDraftOk}>{t("save")}</Button>
-                </Box>
-              </Box>
-            </Popover>
+            <SectionCard title={t("settingsLanguageTitle")} subtitle={t("settingsLanguageBody")}>
+              <FormControl fullWidth>
+                <InputLabel id="language-label">{t("settingsPreferredLanguage")}</InputLabel>
+                <Select
+                  labelId="language-label"
+                  value={language}
+                  label={t("settingsPreferredLanguage")}
+                  onChange={(e) => setLanguage(e.target.value as "en" | "no")}
+                >
+                  <MenuItem value="en">{t("settingsEnglish")}</MenuItem>
+                  <MenuItem value="no">{t("settingsNorwegian")}</MenuItem>
+                </Select>
+              </FormControl>
+            </SectionCard>
+          </Box>

-            <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1 }}>
-              {t("settingsSavedPerUser")}
-            </Typography>
-          </Paper>
-
-          <Paper sx={{ p: 2 }}>
-            <Typography sx={{ fontWeight: 950, mb: 1 }}>{t("settingsLanguageTitle")}</Typography>
-            <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
-              {t("settingsLanguageBody")}
-            </Typography>
-
-            <FormControl fullWidth sx={{ mb: 2 }}>
-              <InputLabel id="language-label">{t("settingsPreferredLanguage")}</InputLabel>
-              <Select
-                labelId="language-label"
-                value={language}
-                label={t("settingsPreferredLanguage")}
-                onChange={(e) => setLanguage(e.target.value as "en" | "no")}
-              >
-                <MenuItem value="en">{t("settingsEnglish")}</MenuItem>
-                <MenuItem value="no">{t("settingsNorwegian")}</MenuItem>
-              </Select>
-            </FormControl>
-
-            <Typography variant="caption" sx={{ color: "text.secondary" }}>
-              {t("settingsMorePagesSoon")}
-            </Typography>
-          </Paper>
-
-          <Paper sx={{ p: 2, gridColumn: { xs: "1 / -1", md: "1 / -1" } }}>
-            <Typography sx={{ fontWeight: 950, mb: 1 }}>{t("settingsJobs")}</Typography>
-
-            <Box sx={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
+          <SectionCard title={t("settingsJobs")}>
+            <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
              <Box sx={{ minWidth: 240 }}>
-                <Typography variant="h6" sx={{ mb: 1 }}>
+                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
                  {t("settingsPagination")}
                </Typography>
                <FormControl fullWidth>
@@ -277,7 +172,7 @@ export default function SettingsView({
              </Box>

              <Box sx={{ minWidth: 240 }}>
-                <Typography variant="h6" sx={{ mb: 1 }}>
+                <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 700 }}>
                  {t("settingsColumns")}
                </Typography>
                {(
@@ -297,8 +192,10 @@ export default function SettingsView({
              </Box>
            </Box>

-            <ImportExportJobs />
-          </Paper>
+            <Box sx={{ mt: 2 }}>
+              <ImportExportJobs />
+            </Box>
+          </SectionCard>

          <QuickCaptureCard />
        </Box>
@@ -309,9 +206,7 @@ export default function SettingsView({
      </TabPanel>

      <TabPanel value={tab} index={2}>
-        <Paper sx={{ p: 2 }}>
-          <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsTitle")}</Typography>
-          <Typography sx={{ color: "text.secondary", mb: 2 }}>{t("settingsNotificationsBody")}</Typography>
+        <SectionCard title={t("settingsNotificationsTitle")} subtitle={t("settingsNotificationsBody")}>
          <Box sx={{ display: "grid", gap: 1 }}>
            <FormControlLabel
              control={<Checkbox checked={notificationPrefs.emailFollowUpReminders} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailFollowUpReminders: e.target.checked }))} />}
@@ -333,18 +228,10 @@ export default function SettingsView({
            <Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
            <Button variant="text" onClick={() => navigate("/admin/system")}>{t("settingsCheckSystemStatus")}</Button>
          </Box>
-        </Paper>
+        </SectionCard>
      </TabPanel>

      <TabPanel value={tab} index={3}>
-        <AuthStatusCard />
-        <GoogleAuthCard />
-        <Box sx={{ mt: 2 }}>
-          <EmailProviderConnections />
-        </Box>
-      </TabPanel>
-
-      <TabPanel value={tab} index={4}>
        <BackupCard />
      </TabPanel>
    </Paper>