Skip to content

feat: Add authentication flow and bottom tab navigation #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
najuna-brian merged 4 commits into from
Dec 10, 2025
Merged

feat: Add authentication flow and bottom tab navigation #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4729573
feat: Add authentication flow and navigation structure
najuna-brian Dec 8, 2025
c8f01ab
chore: Sync gradlew and Dockerfile with upstream/dev
najuna-brian Dec 8, 2025
76cc74c
Merge remote-tracking branch 'upstream/dev' into feat/auth-navigation-ui
najuna-brian Dec 8, 2025
6947673
feat: Add welcome screen and clean up authentication flow
najuna-brian Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 50 additions & 127 deletions formulus/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,17 @@
import React, { useEffect, useState } from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import WelcomeScreen from './src/screens/WelcomeScreen';
import SettingsScreen from './src/screens/SettingsScreen';
import SyncScreen from './src/screens/SyncScreen';
import HomeScreen from './src/screens/HomeScreen';
import FormManagementScreen from './src/screens/FormManagementScreen';
import React, {useEffect, useState} from 'react';
import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
import {StatusBar} from 'react-native';
import 'react-native-url-polyfill/auto';
import {FormService} from './src/services/FormService';
import {SyncProvider} from './src/contexts/SyncContext';
import {appEvents} from './src/webview/FormulusMessageHandlers.ts';
import FormplayerModal, {
FormplayerModalHandle,
} from './src/components/FormplayerModal';
import QRScannerModal from './src/components/QRScannerModal';
import SignatureCaptureModal from './src/components/SignatureCaptureModal';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { StatusBar, TouchableOpacity, View } from 'react-native';
import 'react-native-url-polyfill/auto' // To support axios autogenerated API client
import { FormService } from './src/services/FormService';
import { SyncProvider } from './src/contexts/SyncContext';
import { appEvents } from './src/webview/FormulusMessageHandlers.ts';
import FormplayerModal, { FormplayerModalHandle } from './src/components/FormplayerModal';
import MainAppNavigator from './src/navigation/MainAppNavigator';

const Stack = createStackNavigator();

// Always use a light theme for the app, regardless of system dark mode
const LightNavigationTheme = {
...DefaultTheme,
dark: false,
Expand All @@ -33,39 +26,6 @@ const LightNavigationTheme = {
},
};

const NavigationButtons = ({ navigation }: { navigation: any }) => (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
onPress={() => navigation.navigate('FormManagement')}
style={{ marginRight: 16 }}
accessibilityLabel="Form Management"
>
<Icon name="clipboard-list" size={28} color="#333" />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate('Home')}
style={{ marginRight: 8 }}
accessibilityLabel="Go to Home"
>
<Icon name="home" size={28} color="#333" />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate('Settings')}
style={{ marginRight: 8 }}
accessibilityLabel="Go to Settings"
>
<Icon name="cog" size={28} color="#333" />
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate('Sync')}
style={{ marginRight: 8 }}
accessibilityLabel="Sync Data"
>
<Icon name="sync" size={28} color="#333" />
</TouchableOpacity>
</View>
);

function App(): React.JSX.Element {
const [qrScannerVisible, setQrScannerVisible] = useState(false);
const [qrScannerData, setQrScannerData] = useState<{
Expand All @@ -79,7 +39,6 @@ function App(): React.JSX.Element {
onResult: (result: any) => void;
} | null>(null);

// Global Formplayer modal state so it works from any screen
const [formplayerVisible, setFormplayerVisible] = useState(false);
const formplayerModalRef = React.useRef<FormplayerModalHandle>(null);
const formplayerVisibleRef = React.useRef(false);
Expand All @@ -89,54 +48,45 @@ function App(): React.JSX.Element {
}, [formplayerVisible]);

useEffect(() => {
// pre-load form service
FormService.getInstance().then(() => {
console.log('FormService pre-loaded');
});

// Listen for QR scanner requests
const handleOpenQRScanner = (data: { fieldId: string; onResult: (result: any) => void }) => {
console.log('Opening QR scanner for field:', data.fieldId);
FormService.getInstance();

const handleOpenQRScanner = (data: {
fieldId: string;
onResult: (result: any) => void;
}) => {
setQrScannerData(data);
setQrScannerVisible(true);
};

// Listen for signature capture requests
const handleOpenSignatureCapture = (data: { fieldId: string; onResult: (result: any) => void }) => {
console.log('Opening signature capture for field:', data.fieldId);
const handleOpenSignatureCapture = (data: {
fieldId: string;
onResult: (result: any) => void;
}) => {
setSignatureCaptureData(data);
setSignatureCaptureVisible(true);
};

appEvents.addListener('openQRScanner', handleOpenQRScanner);
appEvents.addListener('openSignatureCapture', handleOpenSignatureCapture);

// Global Formplayer open/close handlers so any screen can trigger it
const handleOpenFormplayer = async (config: any) => {
console.log('App: openFormplayerRequested event received', config);

if (formplayerVisibleRef.current) {
console.log('App: FormplayerModal already visible, ignoring open request');
return;
}

const { formType, observationId, params, savedData, operationId } = config;

console.log('App: Opening FormplayerModal');
const {formType, observationId, params, savedData, operationId} = config;
formplayerVisibleRef.current = true;
setFormplayerVisible(true);

const formService = await FormService.getInstance();
const forms = formService.getFormSpecs();

if (forms.length === 0) {
console.warn('App: No forms available when trying to open Formplayer');
return;
}

const formSpec = forms.find((form) => form.id === formType);
const formSpec = forms.find(form => form.id === formType);
if (!formSpec) {
console.warn(`App: Form ${formType} not found when trying to open Formplayer`);
return;
}

Expand All @@ -149,8 +99,7 @@ function App(): React.JSX.Element {
);
};

const handleCloseFormplayer = (data: any) => {
console.log('App: closeFormplayer event received', data);
const handleCloseFormplayer = () => {
formplayerVisibleRef.current = false;
setFormplayerVisible(false);
};
Expand All @@ -160,79 +109,53 @@ function App(): React.JSX.Element {

return () => {
appEvents.removeListener('openQRScanner', handleOpenQRScanner);
appEvents.removeListener('openSignatureCapture', handleOpenSignatureCapture);
appEvents.removeListener(
'openSignatureCapture',
handleOpenSignatureCapture,
);
appEvents.removeListener('openFormplayerRequested', handleOpenFormplayer);
appEvents.removeListener('closeFormplayer', handleCloseFormplayer);
};
}, []);

const handleQRScannerClose = () => {
setQrScannerVisible(false);
setQrScannerData(null);
};

const handleSignatureCaptureClose = () => {
setSignatureCaptureVisible(false);
setSignatureCaptureData(null);
};

const handleSignatureCaptureResult = (result: any) => {
if (signatureCaptureData?.onResult) {
signatureCaptureData.onResult(result);
}
};
return (
<SyncProvider>
<StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
<NavigationContainer theme={LightNavigationTheme}>
<>
<Stack.Navigator
initialRouteName="Welcome"
screenOptions={({ navigation }) => ({
headerRight: () => <NavigationButtons navigation={navigation} />,
headerStyle: { backgroundColor: '#ffffff' },
headerTintColor: '#000000',
headerTitleStyle: { color: '#000000' },
})}
>
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
<Stack.Screen name="Welcome" component={WelcomeScreen} options={{ title: 'Welcome' }} />
<Stack.Screen name="Settings" component={SettingsScreen} options={{ title: 'Settings' }} />
<Stack.Screen name="Sync" component={SyncScreen} options={{ title: 'Sync Data' }} />
<Stack.Screen name="FormManagement" component={FormManagementScreen} options={{ title: 'Form Management' }} />
</Stack.Navigator>

{/* Global Formplayer Modal so it can be opened from any screen */}
<FormplayerModal
key="formplayer-modal"
ref={formplayerModalRef}
visible={formplayerVisible}
onClose={() => {
console.log('App: FormplayerModal onClose called');
formplayerVisibleRef.current = false;
setFormplayerVisible(false);
}}
/>
</>
<MainAppNavigator />
<FormplayerModal
ref={formplayerModalRef}
visible={formplayerVisible}
onClose={() => {
formplayerVisibleRef.current = false;
setFormplayerVisible(false);
}}
/>
</NavigationContainer>

{/* QR Scanner Modal */}
<QRScannerModal
visible={qrScannerVisible}
onClose={handleQRScannerClose}
onClose={() => {
setQrScannerVisible(false);
setQrScannerData(null);
}}
fieldId={qrScannerData?.fieldId}
onResult={qrScannerData?.onResult}
/>

{/* Signature Capture Modal */}

<SignatureCaptureModal
visible={signatureCaptureVisible}
onClose={handleSignatureCaptureClose}
onClose={() => {
setSignatureCaptureVisible(false);
setSignatureCaptureData(null);
}}
fieldId={signatureCaptureData?.fieldId || ''}
onSignatureCapture={handleSignatureCaptureResult}
onSignatureCapture={(result: any) => {
signatureCaptureData?.onResult?.(result);
}}
/>
</SyncProvider>
);
}

export default App;
export default App;
Binary file added formulus/assets/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 26 additions & 18 deletions formulus/assets/webview/placeholder_app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,35 @@
</head>
<body>
<h1>Your Custom App</h1>
<p>This is an placeholder. Your app will appear here after sync.</p>
<p>This is a placeholder. Your app will appear here after sync.</p>
<script>
console.log('Custom placeholder loaded');
function waitForFormulus(cb, tries = 49) {
console.log('Waiting for Formulus...');
if (globalThis.formulus && typeof globalThis.formulus.getVersion === 'function') {
cb();
} else if (tries > 0) {
setTimeout(() => waitForFormulus(cb, tries - 1), 100);
} else {
document.body.insertAdjacentHTML('beforeend', '<p>Formulus version: unavailable</p>');
(function() {
function waitForFormulus(cb, tries = 50) {
const api = window.formulus || globalThis.formulus;
if (api && typeof api.getVersion === 'function') {
try {
const version = api.getVersion();
console.log('Formulus version:', version);
document.body.insertAdjacentHTML('beforeend', '<p>Formulus version: ' + version + '</p>');
cb();
} catch (err) {
console.error('Error getting Formulus version:', err);
document.body.insertAdjacentHTML('beforeend', '<p style="color: #999;">Formulus API: Error</p>');
}
} else if (tries > 0) {
setTimeout(() => waitForFormulus(cb, tries - 1), 100);
} else {
console.warn('Formulus API not available after waiting');
document.body.insertAdjacentHTML('beforeend', '<p style="color: #999;">Formulus API: Not available</p>');
}
}
}

document.addEventListener('DOMContentLoaded', function() {
waitForFormulus(function() {
const version = globalThis.formulus?.getVersion?.();
console.log('Formulus version:', version);
document.body.insertAdjacentHTML('beforeend', '<p>Formulus version: ' + version + '</p>');

document.addEventListener('DOMContentLoaded', function() {
waitForFormulus(function() {
// API loaded successfully
});
});
});
})();
</script>
</body>
</html>
Loading
Loading