onairos
Version:
The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is seamless, simple and effective for all applications. LLM SDK capabiliti
184 lines (166 loc) • 8.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final UI Test - Enhanced Onairos Onboarding</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
margin: 0;
padding: 20px;
background-color: #f8fafc;
}
.demo-container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.feature {
padding: 15px;
border: 2px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
}
.feature.complete { border-color: #10b981; background: #f0fdf4; }
.feature h4 { margin: 0 0 8px 0; font-size: 14px; font-weight: bold; }
.feature p { margin: 0; font-size: 12px; color: #64748b; }
</style>
</head>
<body>
<div class="demo-container">
<div class="text-center mb-6">
<h1 class="text-3xl font-bold text-gray-900 mb-2">🎉 Enhanced Onairos Onboarding</h1>
<p class="text-gray-600">Compact design with robust error handling and visual feedback</p>
</div>
<!-- Features Implemented -->
<div class="features-grid mb-6">
<div class="feature complete">
<h4>✅ Compact UI</h4>
<p>2-column grid layout, smaller icons, reduced space usage</p>
</div>
<div class="feature complete">
<h4>✅ Visual Feedback</h4>
<p>Green borders for connected, red for errors, blue for connecting</p>
</div>
<div class="feature complete">
<h4>✅ Error Handling</h4>
<p>Robust error states with user-friendly messages</p>
</div>
<div class="feature complete">
<h4>✅ SDK Type Parameter</h4>
<p>Backend receives 'web' SDK type for proper redirect handling</p>
</div>
<div class="feature complete">
<h4>✅ Enhanced Popup Management</h4>
<p>Better success/failure detection with localStorage signals</p>
</div>
<div class="feature complete">
<h4>✅ OAuth Callback Page</h4>
<p>Dedicated callback page with visual feedback and auto-close</p>
</div>
</div>
<!-- Onboarding Component Demo -->
<div class="bg-gray-50 p-6 rounded-xl">
<h2 class="text-xl font-bold text-center mb-4">Live Demo</h2>
<div id="onboarding-demo" class="flex justify-center"></div>
</div>
<!-- Backend Integration Requirements -->
<div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<h3 class="font-bold text-blue-900 mb-3">📋 Backend Integration Required</h3>
<div class="text-sm text-blue-800 space-y-2">
<div><strong>1. Update OAuth authorize endpoints:</strong></div>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>Receive <code>sdkType</code> parameter ('web', 'mobile', 'desktop')</li>
<li>Receive <code>returnUrl</code> for better redirect handling</li>
<li>Receive <code>platform</code> name for error tracking</li>
</ul>
<div class="mt-3"><strong>2. Update callback routes:</strong></div>
<ul class="list-disc list-inside ml-4 space-y-1">
<li>For <strong>success</strong>: Redirect to <code>/dist/oauth-callback.html?success=true&platform={platformName}</code></li>
<li>For <strong>errors</strong>: Redirect to <code>/dist/oauth-callback.html?success=false&error={errorMessage}&platform={platformName}</code></li>
<li>Include <code>details</code> parameter for more info if needed</li>
</ul>
<div class="mt-3"><strong>3. Example callback redirect:</strong></div>
<div class="bg-blue-100 p-3 rounded font-mono text-xs">
res.redirect(`/dist/oauth-callback.html?success=true&platform=Reddit`);
<br/>
// or for errors:
<br/>
res.redirect(`/dist/oauth-callback.html?success=false&error=Token exchange failed&platform=Reddit&details=${error.message}`);
</div>
</div>
</div>
<!-- Console Messages -->
<div class="mt-6 p-4 bg-gray-100 rounded-lg">
<h3 class="font-bold mb-2">🔍 Console Output:</h3>
<div id="console-output" class="text-xs font-mono text-gray-700 max-h-40 overflow-y-auto"></div>
</div>
</div>
<!-- Load the Onairos SDK -->
<script src="./dist/onairos.bundle.js"></script>
<script>
const consoleOutput = document.getElementById('console-output');
// Capture console messages
const originalLog = console.log;
console.log = function(...args) {
originalLog.apply(console, args);
const message = args.join(' ');
const logDiv = document.createElement('div');
logDiv.className = 'mb-1';
logDiv.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
consoleOutput.appendChild(logDiv);
consoleOutput.scrollTop = consoleOutput.scrollHeight;
};
// Initialize and test the SDK
if (typeof window.Onairos !== 'undefined' && window.Onairos.OnairosButton) {
console.log('🎯 Onairos SDK loaded successfully');
const { OnairosButton, initializeApiKey } = window.Onairos;
function handleComplete(result) {
console.log('✅ Onboarding completed:', result);
alert(`Onboarding completed!\nConnections: ${result.totalConnections}\nPlatforms: ${result.connectedAccounts.join(', ')}`);
}
// Initialize the SDK
initializeApiKey({
apiKey: 'onairos_web_sdk_live_key_2024',
environment: 'development',
enableLogging: true
}).then(() => {
console.log('🔧 SDK initialized with enhanced features');
// Create and render the component
const onboardingElement = React.createElement(OnairosButton, {
requestData: ['profile', 'social', 'interests'],
webpageName: 'Enhanced Demo App',
onComplete: handleComplete,
buttonType: 'pill',
visualType: 'full',
textColor: 'black',
appIcon: 'https://onairos.sirv.com/Images/OnairosBlack.png'
});
ReactDOM.render(onboardingElement, document.getElementById('onboarding-demo'));
console.log('🚀 Enhanced onboarding component rendered');
}).catch(error => {
console.error('❌ SDK initialization failed:', error);
document.getElementById('onboarding-demo').innerHTML =
`<div class="text-red-600 text-center p-4">Failed to initialize SDK: ${error.message}</div>`;
});
} else {
console.error('❌ Onairos SDK not found');
document.getElementById('onboarding-demo').innerHTML =
'<div class="text-red-600 text-center p-4">Onairos SDK not found</div>';
}
</script>
</body>
</html>