📱

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: Create Shortcut */}\n {currentStep === 2 && (\n

📱 Step 2: Create the iOS Shortcut

\n Create a simple iOS shortcut that will send content to your backend. This takes about 2 minutes.\n

\n\n

⚠️ Important Note

\n iOS shortcuts must be created manually in the Shortcuts app.\n Follow the steps below to create your custom shortcut.\n

\n\n

📝 Step-by-Step Instructions:

\n Open the Shortcuts app on your iOS device\n
\n Tap the \"+\" button to create a new shortcut\n
\n Add \"Share Sheet\" action:\n
- Search for \"Share Sheet\"
- Enable: Text, URLs, Images
- Turn on \"Show in Share Sheet\"
\n
\n Add \"Get URL\" action:\n
- Search for \"URL\" action
- Set to: {window.location.origin}/api/content
\n

\n Add \"POST\" action:\n

Search for \"URL\" action again
Change method to POST

Request body: JSON with these items:\n

\n{`{\n  \"type\": Shortcut Input,\n  \"content\": Shortcut Input,\n  \"title\": \"Shared from {{Shortcut Input}}\",\n  \"metadata\": {\n    \"source\": \"iOS Share Sheet\",\n    \"timestamp\": \"{{Current Date}}\"\n  }\n}`}\n

\n Add Headers:\n

\n{`Authorization: Bearer ${getSelectedTokenValue() || 'YOUR_TOKEN'}\nContent-Type: application/json`}\n

\n Add \"Show Result\" action to see success/failure\n
\n Name your shortcut (e.g., \"Share to Backend\")\n

\n\n

💡 Pro Tip:

\n Copy your API token first (from Step 3) so you can paste it directly\n into the shortcut configuration.\n

\n copyToClipboard(getSelectedTokenValue())}\n className=\"mt-3 bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600\"\n >\n 📋 Copy API Token\n \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: I've Created It →\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",[175,176,157],"frontend","components","permalink","https://www.val.town/x/jaballadares/sharesheet_thing/code/frontend/components/Setup.tsx","extension","actionData","errors"]