fix: lighter input styles in Settings, show required redirect URI for Azure

server.ts

@@ -149,7 +149,12 @@ async function startServer() {
     const clientId = getSetting('azure_client_id');
     const tenantId = getSetting('azure_tenant_id');
     const secret = getSetting('azure_client_secret');
-    res.json({ azureEnabled: enabled && Boolean(clientId) && Boolean(tenantId) && Boolean(secret) });
+    const appUrl = process.env.APP_URL || `http://localhost:${PORT}`;
+    const effectiveRedirectUri = getSetting('azure_redirect_uri') || `${appUrl}/api/auth/azure/callback`;
+    res.json({
+      azureEnabled: enabled && Boolean(clientId) && Boolean(tenantId) && Boolean(secret),
+      effectiveRedirectUri,
+    });
   });
 
   // Start Azure OAuth flow

src/components/Settings.tsx

@@ -77,7 +77,7 @@ function Input({ value, onChange, placeholder, monospace, icon }: {
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={placeholder}
-        className={`w-full bg-slate-950 border border-slate-800 rounded-lg py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-cyan-500/40 focus:border-cyan-500/40 transition-all ${icon ? 'pl-9 pr-3' : 'px-3'} ${monospace ? 'font-mono text-xs' : ''}`}
+        className={`w-full bg-slate-900 border border-slate-700 rounded-lg py-2.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all ${icon ? 'pl-9 pr-3' : 'px-3'} ${monospace ? 'font-mono text-xs' : ''}`}
       />
     </div>
   );
@@ -100,7 +100,7 @@ function SecretInput({ value, onChange, alreadySet, show, onToggleShow }: {
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={alreadySet ? '••••••••  (leave blank to keep)' : 'Paste secret value'}
-        className="w-full bg-slate-950 border border-slate-800 rounded-lg pl-9 pr-10 py-2.5 text-xs font-mono text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-cyan-500/40 focus:border-cyan-500/40 transition-all"
+        className="w-full bg-slate-900 border border-slate-700 rounded-lg pl-9 pr-10 py-2.5 text-xs font-mono text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 transition-all"
       />
       <button
         type="button"
@@ -134,6 +134,8 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
   const [error, setError] = useState('');
   const [successMsg, setSuccessMsg] = useState('');
 
+  const [effectiveRedirectUri, setEffectiveRedirectUri] = useState('');
+
   const [azureEnabled, setAzureEnabled] = useState(false);
   const [azureClientId, setAzureClientId] = useState('');
   const [azureTenantId, setAzureTenantId] = useState('');
@@ -148,7 +150,13 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
   const [checkmkSyncInterval, setCheckmkSyncInterval] = useState('60000');
   const [showCheckmkSecret, setShowCheckmkSecret] = useState(false);
 
-  useEffect(() => { loadSettings(); }, []);
+  useEffect(() => {
+    loadSettings();
+    fetch('/api/auth/config')
+      .then(r => r.json())
+      .then(d => { if (d.effectiveRedirectUri) setEffectiveRedirectUri(d.effectiveRedirectUri); })
+      .catch(() => {});
+  }, []);
 
   async function loadSettings() {
     setLoading(true);
@@ -317,6 +325,16 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
               monospace
               icon={<ExternalLink className="w-3.5 h-3.5" />}
             />
+            {effectiveRedirectUri && (
+              <div className="mt-2 flex items-start gap-2 bg-amber-950/30 border border-amber-900/40 rounded-lg px-3 py-2">
+                <span className="text-amber-400 mt-0.5 shrink-0">⚠</span>
+                <div className="min-w-0">
+                  <p className="text-[10px] text-amber-300 font-semibold mb-0.5">Register this URI in Azure Portal</p>
+                  <p className="text-[10px] font-mono text-amber-200 break-all">{effectiveRedirectUri}</p>
+                  <p className="text-[10px] text-amber-400/70 mt-0.5">App registrations → Authentication → Redirect URIs</p>
+                </div>
+              </div>
+            )}
           </FieldRow>
         </div>
       </SectionCard>