feat(yubico): refactor Yubico credential management and enhance settings UI

webapp/src/components/SettingsPage.tsx

@@ -144,6 +144,7 @@ export default function SettingsPage(props: SettingsPageProps) {
   const [yubiKeyStoredKeys, setYubiKeyStoredKeys] = useState<[string, string, string, string, string]>(EMPTY_YUBIKEY_KEYS);
   const [yubiKeyNfc, setYubiKeyNfc] = useState(false);
   const [yubiKeyYubicoConfigured, setYubiKeyYubicoConfigured] = useState(false);
+  const [yubiKeyYubicoCanManage, setYubiKeyYubicoCanManage] = useState(false);
   const [yubiKeyYubicoClientId, setYubiKeyYubicoClientId] = useState('');
   const [yubiKeyYubicoSecretKey, setYubiKeyYubicoSecretKey] = useState('');
   const [yubiKeyBootstrapOtp, setYubiKeyBootstrapOtp] = useState('');
@@ -340,6 +341,7 @@ export default function SettingsPage(props: SettingsPageProps) {
     setYubiKeyStoredKeys(settings.keys);
     setYubiKeyNfc(settings.nfc);
     setYubiKeyYubicoConfigured(settings.yubicoConfigured);
+    setYubiKeyYubicoCanManage(settings.yubicoCanManage);
     setYubiKeyYubicoClientId(settings.yubicoClientId);
     setYubiKeyYubicoSecretKey(settings.yubicoSecretKey);
   }
@@ -352,6 +354,7 @@ export default function SettingsPage(props: SettingsPageProps) {
     setYubiKeyStoredKeys(EMPTY_YUBIKEY_KEYS);
     setYubiKeyNfc(false);
     setYubiKeyYubicoConfigured(false);
+    setYubiKeyYubicoCanManage(false);
     setYubiKeyYubicoClientId('');
     setYubiKeyYubicoSecretKey('');
     setYubiKeyBootstrapOtp('');
@@ -1010,8 +1013,7 @@ export default function SettingsPage(props: SettingsPageProps) {
             </section>
           )}
 
-          {yubiKeyYubicoConfigured && (
-            <>
+          {yubiKeyYubicoConfigured && yubiKeyYubicoCanManage && (
               <section className="settings-submodule yubikey-config-panel">
                 <div className="settings-module-head">
                   <h3>{t('txt_yubikey_validation_credentials')}</h3>
@@ -1055,7 +1057,10 @@ export default function SettingsPage(props: SettingsPageProps) {
                   </div>
                 )}
               </section>
+          )}
 
+          {yubiKeyYubicoConfigured && (
+            <>
               <ol className="settings-plain-steps">
                 <li>{t('txt_yubikey_plug_in')}</li>
                 <li>{t('txt_yubikey_select_empty_field')}</li>

webapp/src/lib/api/auth.ts

@@ -687,6 +687,7 @@ function normalizeYubiKeySettings(raw: any): YubiKeyOtpSettings {
     ],
     nfc: !!(raw?.nfc ?? raw?.Nfc),
     yubicoConfigured: !!(raw?.yubicoConfigured ?? raw?.YubicoConfigured),
+    yubicoCanManage: !!(raw?.yubicoCanManage ?? raw?.YubicoCanManage),
     yubicoClientId: String(raw?.yubicoClientId ?? raw?.YubicoClientId ?? ''),
     yubicoSecretKey: String(raw?.yubicoSecretKey ?? raw?.YubicoSecretKey ?? ''),
   };

webapp/src/lib/types.ts

@@ -423,6 +423,7 @@ export interface YubiKeyOtpSettings {
   keys: [string, string, string, string, string];
   nfc: boolean;
   yubicoConfigured: boolean;
+  yubicoCanManage: boolean;
   yubicoClientId: string;
   yubicoSecretKey: string;
 }