diff --git a/backend/alembic.ini b/backend/alembic.ini index e957eed..64ceafc 100644 --- a/backend/alembic.ini +++ b/backend/alembic.ini @@ -63,7 +63,7 @@ version_path_separator = os # are written from script.py.mako # output_encoding = utf-8 -# sqlalchemy.url = driver://user:pass@localhost/dbname +# sqlalchemy.url = postgresql://user:pass@localhost/dbname sqlalchemy.url = postgresql://maia:maia@db:5432/maia [post_write_hooks] diff --git a/interfaces/nativeapp/src/contexts/AuthContext.tsx b/interfaces/nativeapp/src/contexts/AuthContext.tsx index 6c4ac7e..b406599 100644 --- a/interfaces/nativeapp/src/contexts/AuthContext.tsx +++ b/interfaces/nativeapp/src/contexts/AuthContext.tsx @@ -24,6 +24,7 @@ interface AuthContextData { user: UserData | null; // Add user data to context login: (username: string, password: string) => Promise; logout: () => Promise; + register: (username: string, password: string, name: string) => Promise; // Add register function } const AuthContext = createContext({ @@ -32,6 +33,7 @@ const AuthContext = createContext({ user: null, // Initialize user as null login: async () => { throw new Error('AuthContext not initialized'); }, logout: async () => { throw new Error('AuthContext not initialized'); }, + register: async () => { throw new Error('AuthContext not initialized'); }, // Add register initializer }); interface AuthProviderProps { @@ -145,6 +147,33 @@ export const AuthProvider: React.FC = ({ children }) => { } }, [fetchUserData]); // Added fetchUserData dependency + const register = useCallback(async (username: string, password: string, name: string) => { + console.log("[AuthContext] register: Function called with:", username, name); + try { + // Call the backend register endpoint + const response = await apiClient.post('/auth/register', { + username, + password, + name, + }, { + headers: { + 'accept': 'application/json', + 'Content-Type': 'application/json', + }, + }); + + console.log('[AuthContext] register: Registration successful:', response.data); + // Optionally, you could automatically log the user in here + // For now, we'll just let the user log in manually after registering + // Or display a success message and navigate back to login + + } catch (error: any) { + console.error("[AuthContext] register: Caught Error Object:", error); + // Rethrow the error so the UI can handle it (e.g., display specific messages) + throw error; + } + }, []); // No dependencies needed for register itself + const logout = useCallback(async () => { console.log('[AuthContext] logout: Logging out.'); const refreshToken = await getRefreshToken(); @@ -171,7 +200,8 @@ export const AuthProvider: React.FC = ({ children }) => { user: userState, // Provide user state login, logout, - }), [isAuthenticatedState, isLoading, userState, login, logout]); // Added userState dependency + register, // Add register to context value + }), [isAuthenticatedState, isLoading, userState, login, logout, register]); // Added register dependency // ... (rest of the component: Provider, useAuth, AuthLoadingScreen) ... return ( diff --git a/interfaces/nativeapp/src/navigation/AuthNavigator.tsx b/interfaces/nativeapp/src/navigation/AuthNavigator.tsx index a65ea9b..a4672c5 100644 --- a/interfaces/nativeapp/src/navigation/AuthNavigator.tsx +++ b/interfaces/nativeapp/src/navigation/AuthNavigator.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import LoginScreen from '../screens/LoginScreen'; -// Import SignUpScreen, ForgotPasswordScreen etc. if you have them +import RegisterScreen from '../screens/RegisterScreen'; // Import the new screen -import { AuthStackParamList } from '../types/navigation'; +import { AuthStackParamList } from '../types/navigation'; // Import from the new types file const Stack = createNativeStackNavigator(); @@ -13,8 +13,7 @@ const AuthNavigator = () => { return ( - {/* Add other auth screens here */} - {/* */} + {/* Add Register screen */} ); }; diff --git a/interfaces/nativeapp/src/screens/LoginScreen.tsx b/interfaces/nativeapp/src/screens/LoginScreen.tsx index ffa7635..4b7efce 100644 --- a/interfaces/nativeapp/src/screens/LoginScreen.tsx +++ b/interfaces/nativeapp/src/screens/LoginScreen.tsx @@ -3,8 +3,12 @@ import React, { useState } from 'react'; import { View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'; import { TextInput, Button, Text, useTheme, HelperText, ActivityIndicator, Avatar } from 'react-native-paper'; import { useAuth } from '../contexts/AuthContext'; +import { NativeStackScreenProps } from '@react-navigation/native-stack'; +import { AuthStackParamList } from '../types/navigation'; // Import from the new types file -const LoginScreen = () => { +type LoginScreenProps = NativeStackScreenProps; + +const LoginScreen: React.FC = ({ navigation }) => { const theme = useTheme(); const { login } = useAuth(); const [username, setUsername] = useState(''); @@ -116,6 +120,7 @@ const LoginScreen = () => { {isLoading ? ( ) : ( + <> + + {/* Add Register Button */} + + )} - {/* TODO: Add Register here */} + {/* TODO: Add Register here - REMOVED */} ); }; diff --git a/interfaces/nativeapp/src/screens/RegisterScreen.tsx b/interfaces/nativeapp/src/screens/RegisterScreen.tsx new file mode 100644 index 0000000..6be8cb9 --- /dev/null +++ b/interfaces/nativeapp/src/screens/RegisterScreen.tsx @@ -0,0 +1,175 @@ +// src/screens/RegisterScreen.tsx +import React, { useState } from 'react'; +import { View, StyleSheet, KeyboardAvoidingView, Platform, Alert } from 'react-native'; +import { TextInput, Button, Text, useTheme, HelperText, ActivityIndicator, Avatar } from 'react-native-paper'; +import { useAuth } from '../contexts/AuthContext'; +import { NativeStackScreenProps } from '@react-navigation/native-stack'; +import { AuthStackParamList } from '../types/navigation'; // Import from the new types file + +type RegisterScreenProps = NativeStackScreenProps; + +const RegisterScreen: React.FC = ({ navigation }) => { + const theme = useTheme(); + const { register } = useAuth(); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [name, setName] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + + const handleRegister = async () => { + console.log("[RegisterScreen] handleRegister: Button pressed."); + if (!username || !password || !name || !confirmPassword) { + setError('Please fill in all fields.'); + return; + } + if (password !== confirmPassword) { + setError('Passwords do not match.'); + return; + } + setError(null); + setIsLoading(true); + try { + console.log("[RegisterScreen] handleRegister: Calling context register function..."); + await register(username, password, name); + console.log("[RegisterScreen] handleRegister: Registration successful (from context perspective)."); + // Show success message and navigate back to Login + Alert.alert( + 'Registration Successful', + 'Your account has been created. Please log in.', + [{ text: 'OK', onPress: () => navigation.navigate('Login') }] + ); + } catch (err: any) { + console.log("[RegisterScreen] handleRegister: Caught error from context register."); + const errorMessage = err.response?.data?.detail || + err.response?.data?.message || + err.message || + 'Registration failed. Please try again.'; + setError(errorMessage); + } finally { + setIsLoading(false); + console.log("[RegisterScreen] handleRegister: Set loading to false."); + } + }; + + const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + padding: 20, + backgroundColor: theme.colors.background, + }, + logoContainer: { + alignItems: 'center', + marginBottom: 30, // Slightly less margin than login + }, + title: { + fontSize: 24, + fontWeight: 'bold', + textAlign: 'center', + marginBottom: 20, + color: theme.colors.primary, + }, + input: { + marginBottom: 12, // Slightly less margin + }, + button: { + marginTop: 10, + paddingVertical: 8, + }, + loginButton: { + marginTop: 15, + }, + errorText: { + textAlign: 'center', + marginBottom: 10, + }, + loadingContainer: { + marginTop: 20, + } + }); + + return ( + + + + + Create Account + + + + + + + {error} + + + {isLoading ? ( + + ) : ( + + )} + + {/* Button to go back to Login */} + + + + ); +}; + +export default RegisterScreen; diff --git a/interfaces/nativeapp/src/types/navigation.ts b/interfaces/nativeapp/src/types/navigation.ts index 27fd3eb..694387b 100644 --- a/interfaces/nativeapp/src/types/navigation.ts +++ b/interfaces/nativeapp/src/types/navigation.ts @@ -21,19 +21,20 @@ export type WebContentStackParamList = { }; // Screens managed by the Root Navigator (Auth vs App) -export type RootStackParamList = { - AuthFlow: undefined; // Represents the stack for unauthenticated users - AppFlow: undefined; // Represents the stack/layout for authenticated users -}; +export type RootStackParamList = AuthStackParamList & AppStackParamList; // Screens within the Authentication Flow export type AuthStackParamList = { Login: undefined; - // Example: SignUp: undefined; ForgotPassword: undefined; + Register: undefined; }; // Screens within the main App stack (Mobile) export type AppStackParamList = { + Home: undefined; + Settings: undefined; + Calendar: undefined; + Todo: undefined; MainTabs: undefined; // Represents the MobileTabNavigator EventForm: { eventId?: number; selectedDate?: string }; };