added registration page

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]

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<void>;
   logout: () => Promise<void>;
+  register: (username: string, password: string, name: string) => Promise<void>; // Add register function
 }
 
 const AuthContext = createContext<AuthContextData>({
@@ -32,6 +33,7 @@ const AuthContext = createContext<AuthContextData>({
   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<AuthProviderProps> = ({ 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<AuthProviderProps> = ({ 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 (

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<AuthStackParamList>();
 
@@ -13,8 +13,7 @@ const AuthNavigator = () => {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="Login" component={LoginScreen} />
-      {/* Add other auth screens here */}
+      <Stack.Screen name="Register" component={RegisterScreen} /> {/* Add Register screen */}
-      {/* <Stack.Screen name="SignUp" component={SignUpScreen} /> */}
     </Stack.Navigator>
   );
 };

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<AuthStackParamList, 'Login'>;
+
+const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
   const theme = useTheme();
   const { login } = useAuth();
   const [username, setUsername] = useState('');
@@ -116,6 +120,7 @@ const LoginScreen = () => {
       {isLoading ? (
           <ActivityIndicator animating={true} color={theme.colors.primary} style={styles.loadingContainer}/>
       ) : (
+        <>
           <Button
             mode="contained"
             onPress={handleLogin}
@@ -125,9 +130,21 @@ const LoginScreen = () => {
          >
             Login
           </Button>
+
+          {/* Add Register Button */} 
+          <Button
+            mode="outlined" // Use outlined for secondary action
+            onPress={() => navigation.navigate('Register')} // Navigate to Register screen
+            style={styles.button} // Reuse button style or create a new one
+            disabled={isLoading}
+            icon="account-plus-outline"
+          >
+            Register
+          </Button>
+        </>
       )}
 
-      {/* TODO: Add Register here */}
+      {/* TODO: Add Register here - REMOVED */} 
     </KeyboardAvoidingView>
   );
 };

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<AuthStackParamList, 'Register'>;
+
+const RegisterScreen: React.FC<RegisterScreenProps> = ({ 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<string | null>(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 (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={styles.container}
+    >
+        <View style={styles.logoContainer}>
+            <Avatar.Image
+                size={90} // Slightly smaller logo
+                source={require('../assets/MAIA_ICON.png')}
+            />
+        </View>
+      <Text style={styles.title}>Create Account</Text>
+      <TextInput
+        label="Name"
+        value={name}
+        onChangeText={setName}
+        mode="outlined"
+        style={styles.input}
+        autoCapitalize="words"
+        disabled={isLoading}
+      />
+      <TextInput
+        label="Username"
+        value={username}
+        onChangeText={setUsername}
+        mode="outlined"
+        style={styles.input}
+        autoCapitalize="none"
+        disabled={isLoading}
+      />
+      <TextInput
+        label="Password"
+        value={password}
+        onChangeText={setPassword}
+        mode="outlined"
+        style={styles.input}
+        secureTextEntry
+        disabled={isLoading}
+      />
+      <TextInput
+        label="Confirm Password"
+        value={confirmPassword}
+        onChangeText={setConfirmPassword}
+        mode="outlined"
+        style={styles.input}
+        secureTextEntry
+        disabled={isLoading}
+      />
+
+       <HelperText type="error" visible={!!error} style={styles.errorText}>
+         {error}
+       </HelperText>
+
+      {isLoading ? (
+          <ActivityIndicator animating={true} color={theme.colors.primary} style={styles.loadingContainer}/>
+      ) : (
+          <Button
+            mode="contained"
+            onPress={handleRegister}
+            style={styles.button}
+            disabled={isLoading}
+            icon="account-plus"
+         >
+            Register
+          </Button>
+      )}
+
+      {/* Button to go back to Login */} 
+      <Button
+        mode="text" // Use text button for secondary action
+        onPress={() => navigation.navigate('Login')}
+        style={styles.loginButton}
+        disabled={isLoading}
+        icon="arrow-left"
+      >
+        Back to Login
+      </Button>
+
+    </KeyboardAvoidingView>
+  );
+};
+
+export default RegisterScreen;

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 = {
+export type RootStackParamList = AuthStackParamList & AppStackParamList;
-    AuthFlow: undefined; // Represents the stack for unauthenticated users
-    AppFlow: undefined;  // Represents the stack/layout for authenticated users
-};
 
 // 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 };
 };