Final-Year-Project/MobileApp/app/auth.tsx

import { Redirect } from 'expo-router';
import React from 'react';
import {
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';

import { useApp } from '@/src/app-context';

export default function AuthScreen() {
  const { ready, state, actions } = useApp();

  if (!ready) {
    return (
      <View style={styles.loading}>
        <ActivityIndicator color="#60a5fa" size="large" />
      </View>
    );
  }

  if (state.session?.session) {
    return <Redirect href={(state.deviceToken ? '/(tabs)' : '/onboarding') as any} />;
  }

  return (
    <SafeAreaView style={styles.safe}>
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.container}>
        <View style={styles.logoWrap}>
          <View style={styles.logoBadge}>
            <Text style={styles.logoIcon}>SC</Text>
          </View>
          <Text style={styles.title}>SecureCam Mobile</Text>
          <Text style={styles.subtitle}>Sign in to manage visual security.</Text>
        </View>

        <View style={styles.card}>
          <TextInput
            style={styles.input}
            autoCapitalize="none"
            keyboardType="email-address"
            placeholder="Email address"
            placeholderTextColor="#6b7280"
            value={state.authForm.email}
            onChangeText={(value) => actions.setAuthField('email', value)}
          />

          <TextInput
            style={styles.input}
            secureTextEntry
            placeholder="Password"
            placeholderTextColor="#6b7280"
            value={state.authForm.password}
            onChangeText={(value) => actions.setAuthField('password', value)}
          />

          {state.isRegistering ? (
            <TextInput
              style={styles.input}
              placeholder="Your name"
              placeholderTextColor="#6b7280"
              value={state.authForm.name}
              onChangeText={(value) => actions.setAuthField('name', value)}
            />
          ) : null}

          <Pressable style={styles.primaryButton} onPress={() => void actions.submitAuth()}>
            <Text style={styles.primaryText}>{state.isRegistering ? 'Create Account' : 'Sign In'}</Text>
          </Pressable>

          <Pressable style={styles.secondaryButton} onPress={actions.toggleAuthMode}>
            <Text style={styles.secondaryText}>
              {state.isRegistering ? 'I already have an account' : 'Create an account'}
            </Text>
          </Pressable>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#0a0a0c',
  },
  loading: {
    flex: 1,
    backgroundColor: '#0a0a0c',
    alignItems: 'center',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 22,
  },
  logoWrap: {
    alignItems: 'center',
    marginBottom: 30,
  },
  logoBadge: {
    width: 72,
    height: 72,
    borderRadius: 24,
    backgroundColor: '#1d4ed8',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 14,
  },
  logoIcon: {
    color: '#f9fafb',
    fontSize: 22,
    fontWeight: '700',
  },
  title: {
    color: '#f9fafb',
    fontSize: 28,
    fontWeight: '700',
  },
  subtitle: {
    marginTop: 8,
    color: '#9ca3af',
    fontSize: 13,
  },
  card: {
    borderRadius: 20,
    backgroundColor: '#111218',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    padding: 18,
    gap: 12,
  },
  input: {
    height: 48,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.12)',
    backgroundColor: '#09090d',
    color: '#f3f4f6',
    paddingHorizontal: 12,
  },
  primaryButton: {
    marginTop: 6,
    height: 48,
    borderRadius: 12,
    backgroundColor: '#2563eb',
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryText: {
    color: '#f9fafb',
    fontWeight: '600',
    fontSize: 16,
  },
  secondaryButton: {
    height: 42,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  secondaryText: {
    color: '#9ca3af',
    fontSize: 13,
    fontWeight: '500',
  },
});