📱

Loading setup guide...

\n );\n }\n\n return (\n

\n {/* Header */}\n

📱 iOS Shortcut Setup

Configure your iOS device to share content

\n window.location.href = '/'}\n className=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors\"\n >\n 🏠 Dashboard\n \n

\n\n

\n {/* Progress Steps */}\n

\n {[1, 2, 3, 4].map((step) => (\n

\n = step\n ? 'bg-blue-500 text-white'\n : 'bg-gray-200 text-gray-600'\n }`}\n >\n {step}\n

\n {step < 4 && (\n step ? 'bg-blue-500' : 'bg-gray-200'\n }`}\n />\n )}\n

\n ))}\n

\n Step {currentStep} of 4: {\n currentStep === 1 ? 'Get API Token' :\n currentStep === 2 ? 'Download Shortcut' :\n currentStep === 3 ? 'Configure Token' :\n 'Test & Use'\n }\n

\n\n {/* Step 1: API Token */}\n {currentStep === 1 && (\n

🔑 Step 1: Get Your API Token

\n You need an API token to authenticate your iOS shortcuts with this backend.\n

\n\n {tokens.length === 0 ? (\n

No API tokens found. Create one to continue.

\n {\n const token = await createToken();\n if (token) {\n setCurrentStep(2);\n }\n }}\n className=\"bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors\"\n >\n ➕ Create API Token\n \n

\n ) : (\n

\n \n Select an existing token:\n \n setSelectedToken(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n >\n {tokens.map((token) => (\n \n ))}\n \n

\n\n

\n setCurrentStep(2)}\n className=\"bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors\"\n >\n Use Selected Token →\n \n {\n const token = await createToken();\n if (token) {\n setCurrentStep(2);\n }\n }}\n className=\"bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600 transition-colors\"\n >\n ➕ Create New Token\n \n

\n )}\n

\n )}\n\n {/* Step 2: Download Shortcut */}\n {currentStep === 2 && (\n

📥 Step 2: Download the iOS Shortcut

\n Download and install the pre-configured iOS shortcut that will send content to your backend.\n

\n\n

📱 Shortcut Features:

\n ✅\n Share text from any app\n
\n ✅\n Share URLs and web pages\n
\n ✅\n Share images and photos\n
\n ✅\n Automatic content type detection\n
\n ✅\n Success/error notifications\n

\n\n

\n \n 📥 Download iOS Shortcut\n \n

\n This will open the Shortcuts app on your iOS device\n

\n\n

\n setCurrentStep(1)}\n className=\"bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600 transition-colors\"\n >\n ← Back\n \n setCurrentStep(3)}\n className=\"bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors\"\n >\n Next: Configure Token →\n \n

\n )}\n\n {/* Step 3: Configure Token */}\n {currentStep === 3 && (\n

⚙️ Step 3: Configure Your API Token

\n Add your API token to the shortcut so it can authenticate with your backend.\n

\n\n

\n \n Your API Token:\n \n

\n \n copyToClipboard(getSelectedTokenValue())}\n className=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors\"\n >\n 📋 Copy\n \n

\n\n

📝 Configuration Steps:

Open the downloaded shortcut in the Shortcuts app
Tap \"Edit\" to modify the shortcut
Find the \"Text\" action that contains the API token placeholder
Replace the placeholder with your actual API token (copied above)
Verify the backend URL is correct: {window.location.origin}
Save the shortcut

\n\n

🔧 Technical Details:

Backend URL: {window.location.origin}/api/content

Method: POST

Headers: Authorization: Bearer [your-token]

Content-Type: application/json

\n\n

\n setCurrentStep(2)}\n className=\"bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600 transition-colors\"\n >\n ← Back\n \n setCurrentStep(4)}\n className=\"bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors\"\n >\n Next: Test & Use →\n \n

\n )}\n\n {/* Step 4: Test & Use */}\n {currentStep === 4 && (\n

🎉 Step 4: Test & Start Using!

\n Your iOS shortcut is now configured! Here's how to test it and start sharing content.\n

\n\n

✅ Testing Your Shortcut:

Open any app with shareable content (Safari, Photos, Notes, etc.)
Tap the Share button
Find and tap your new shortcut in the share sheet
Wait for the success notification
Check your dashboard to see the shared content

\n\n

📱 Supported Content Types:

📝

Text

Notes, messages, selected text

🔗

URLs

Web pages, links, bookmarks

🖼️

Images

Photos, screenshots, pictures

\n\n

🔧 Troubleshooting:

\n Shortcut not appearing in share sheet:\n

Make sure you've added the shortcut to your library and it's enabled for sharing.

\n Authentication errors:\n

Double-check that your API token is correctly pasted in the shortcut.

\n Content not appearing:\n

Refresh your dashboard and check that the shortcut completed successfully.

\n\n

\n window.location.href = '/'}\n className=\"bg-blue-500 text-white px-8 py-3 rounded-lg hover:bg-blue-600 transition-colors text-lg font-medium\"\n >\n 🏠 Go to Dashboard\n \n

\n Start sharing content from your iOS device!\n

\n\n

\n setCurrentStep(3)}\n className=\"bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600 transition-colors\"\n >\n ← Back\n \n

\n )}\n\n {/* Quick Actions */}\n

🚀 Quick Actions

\n window.location.href = '/'}\n className=\"p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-center\"\n >\n

📊

View Dashboard

See your shared content

\n \n copyToClipboard(getSelectedTokenValue())}\n className=\"p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-center\"\n >\n

🔑

Copy API Token

For shortcut configuration

\n \n copyToClipboard(window.location.origin + '/api/content')}\n className=\"p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-center\"\n >\n

🌐

Copy API URL

Backend endpoint

\n \n

\n \n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/jaballadares/ProtoShare/code/frontend/components/Setup.tsx","extension","actionData","errors"]