Collapse photobooth credentials

resources/js/admin/i18n/locales/de/management.json

@@ -1182,6 +1182,9 @@
       "description": "Teile die Zugangsdaten mit der Fotospiel-Uploader-App.",
       "uploaderTitle": "Uploader-App (HTTP)",
       "uploaderDescription": "Trage URL, Benutzername und Passwort in die Fotospiel-Uploader-App ein. Antworten sind JSON (optional XML).",
+      "show": "Zugangsdaten anzeigen",
+      "hide": "Zugangsdaten verbergen",
+      "hidden": "Zugangsdaten verborgen. Tippe zum Anzeigen.",
       "host": "Host",
       "port": "Port",
       "username": "Benutzername",

resources/js/admin/i18n/locales/en/management.json

@@ -895,6 +895,9 @@
       "description": "Share these credentials with the Fotospiel uploader app.",
       "uploaderTitle": "Uploader App (HTTP)",
       "uploaderDescription": "Enter URL, username and password in the Fotospiel uploader app. Responses default to JSON (XML optional).",
+      "show": "Show credentials",
+      "hide": "Hide credentials",
+      "hidden": "Credentials are hidden. Tap to show them.",
       "host": "Host",
       "port": "Port",
       "username": "Username",

resources/js/admin/mobile/EventPhotoboothPage.tsx

@@ -41,6 +41,7 @@ export default function MobileEventPhotoboothPage() {
   const [connectCode, setConnectCode] = React.useState<string | null>(null);
   const [connectExpiresAt, setConnectExpiresAt] = React.useState<string | null>(null);
   const [connectLoading, setConnectLoading] = React.useState(false);
+  const [showCredentials, setShowCredentials] = React.useState(false);
   const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
 
   const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
@@ -291,14 +292,23 @@ export default function MobileEventPhotoboothPage() {
                 {t('photobooth.credentials.uploaderTitle', 'Uploader App (HTTP)')}
               </Text>
             </XStack>
-            <YStack space="$1">
+            <YStack space="$2">
-              <CredentialRow label={t('photobooth.credentials.postUrl', 'Upload URL')} value={uploadUrl ?? '—'} border={border} />
+              <CTAButton
-              <CredentialRow label={t('photobooth.credentials.username', 'Username')} value={username ?? '—'} border={border} />
+                label={updating ? t('common.processing', '...') : t('photobooth.actions.rotate', 'Regenerate access')}
-              <CredentialRow label={t('photobooth.credentials.password', 'Password')} value={password ?? '—'} border={border} masked />
+                onPress={() => handleRotate()}
-              <Text fontSize="$xs" color={muted}>
+                iconLeft={<RefreshCw size={14} color={surface} />}
-                {t('photobooth.uploader.hint', 'POST with media file or base64 "media" field; app uses these credentials.')}
+                disabled={updating}
-              </Text>
+                style={{ width: '100%', paddingHorizontal: 10, paddingVertical: 10 }}
-              <YStack space="$2" marginTop="$2">
+              />
+              <CTAButton
+                label={isActive ? t('photobooth.actions.disable', 'Disable uploads') : t('photobooth.actions.enable', 'Enable uploads')}
+                onPress={() => (isActive ? handleDisable() : handleEnable())}
+                tone={isActive ? 'ghost' : 'primary'}
+                iconLeft={isActive ? <Power size={14} color={text} /> : <PlugZap size={14} color={surface} />}
+                disabled={updating}
+                style={{ width: '100%', paddingHorizontal: 10, paddingVertical: 10 }}
+              />
+              <YStack space="$2">
                 <Text fontSize="$xs" color={muted}>
                   {t('photobooth.connectCode.description', 'Create a 6-digit code for the uploader app.')}
                 </Text>
@@ -324,28 +334,30 @@ export default function MobileEventPhotoboothPage() {
                   </Text>
                 ) : null}
               </YStack>
+              <CTAButton
+                label={
+                  showCredentials
+                    ? t('photobooth.credentials.hide', 'Hide credentials')
+                    : t('photobooth.credentials.show', 'Show credentials')
+                }
+                tone="ghost"
+                onPress={() => setShowCredentials((current) => !current)}
+              />
+              {showCredentials ? (
+                <YStack space="$1">
+                  <CredentialRow label={t('photobooth.credentials.postUrl', 'Upload URL')} value={uploadUrl ?? '—'} border={border} />
+                  <CredentialRow label={t('photobooth.credentials.username', 'Username')} value={username ?? '—'} border={border} />
+                  <CredentialRow label={t('photobooth.credentials.password', 'Password')} value={password ?? '—'} border={border} masked />
+                </YStack>
+              ) : (
+                <Text fontSize="$xs" color={muted}>
+                  {t('photobooth.credentials.hidden', 'Credentials are hidden. Tap to show them.')}
+                </Text>
+              )}
+              <Text fontSize="$xs" color={muted}>
+                {t('photobooth.uploader.hint', 'POST with media file or base64 "media" field; app uses these credentials.')}
+              </Text>
             </YStack>
-            <XStack space="$2" marginTop="$2" flexWrap="wrap">
-              <XStack flex={1} minWidth={0}>
-                <CTAButton
-                  label={updating ? t('common.processing', '...') : t('photobooth.actions.rotate', 'Regenerate access')}
-                  onPress={() => handleRotate()}
-                  iconLeft={<RefreshCw size={14} color={surface} />}
-                  disabled={updating}
-                  style={{ width: '100%', paddingHorizontal: 10, paddingVertical: 10 }}
-                />
-              </XStack>
-              <XStack flex={1} minWidth={0}>
-                <CTAButton
-                  label={isActive ? t('photobooth.actions.disable', 'Disable uploads') : t('photobooth.actions.enable', 'Enable uploads')}
-                  onPress={() => (isActive ? handleDisable() : handleEnable())}
-                  tone={isActive ? 'ghost' : 'primary'}
-                  iconLeft={isActive ? <Power size={14} color={text} /> : <PlugZap size={14} color={surface} />}
-                  disabled={updating}
-                  style={{ width: '100%', paddingHorizontal: 10, paddingVertical: 10 }}
-                />
-              </XStack>
-            </XStack>
           </MobileCard>
 
           <MobileCard space="$2">