decap-cms-ui-auth

import React from 'react'; import ReactDOM from 'react-dom/client'; import { AuthPage } from 'decap-cms-ui-auth'; // In a real application, you would initialize 'authenticator' from 'decap-cms-lib-auth'. // For this quickstart, we'll use a mock object. // Mock authenticator - in production, replace with a properly initialized instance from 'decap-cms-lib-auth' const mockAuthenticator = { authenticate: async (credentials) => { console.log('Attempting authentication with:', credentials); return { token: 'mock-token', user: { name: 'Mock User' } }; }, clear: () => console.log('Authenticator cleared'), retrieve: async () => ({ token: 'mock-token', user: { name: 'Mock User' } }), // Add other methods expected by AuthPage (e.g., 'authProviders') authProviders: [], // No providers for this mock }; function MyAuthApp() { const handleLoginSuccess = (user) => { console.log('Login successful!', user); alert(`Welcome, ${user.name}!`); // Typically, you'd redirect to the CMS dashboard here }; const handleLoginError = (error) => { console.error('Login error:', error.message); alert(`Login failed: ${error.message}`); }; return ( <div style={{ fontFamily: 'sans-serif', textAlign: 'center', marginTop: '50px' }}> <h1>Welcome to Decap CMS</h1> <p>Please log in to manage your content.</p> <div style={{ maxWidth: '400px', margin: '20px auto', padding: '20px', border: '1px solid #eee', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }}> <AuthPage authenticator={mockAuthenticator} onLogin={handleLoginSuccess} onError={handleLoginError} inProgress={false} // Set to true during an active login attempt config={{ backend: { name: 'git-gateway' } }} // Minimal config prop, AuthPage might inspect it logoURL="https://decapcms.org/img/decap-logo.svg" // Optional: path to your CMS logo /> </div> </div> ); } // To run this example: // Ensure you have a 'root' div in your HTML file (e.g., <div id="root"></div>) const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyAuthApp />);