143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link, Stack } from 'expo-router'
|
|
import { Appearance, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
|
|
import { supabase } from '@/libs/supabase'
|
|
import { useAppTheme } from '@/src/theme/AppThemeProvider'
|
|
|
|
export default function LoginScreen() {
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const { colorScheme, palette } = useAppTheme()
|
|
|
|
const onLogin = async () => {
|
|
if (!email.trim() || !password) {
|
|
setErrorMessage('Log in with email and password')
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
setErrorMessage(null)
|
|
|
|
const { error } = await supabase.auth.signInWithPassword({
|
|
email: email.trim(),
|
|
password,
|
|
})
|
|
|
|
if (error) {
|
|
setErrorMessage(error.message)
|
|
}
|
|
|
|
setIsSubmitting(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Stack.Screen options={{ title: 'Login' }} />
|
|
<View style={[styles.container, { backgroundColor: palette.background }]}>
|
|
<Text style={[styles.title, { color: palette.text }]}>Login</Text>
|
|
|
|
<Text style={[styles.label, { color: palette.text }]}>E-mail</Text>
|
|
<TextInput
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
keyboardType="email-address"
|
|
onChangeText={setEmail}
|
|
placeholder="name@email.com"
|
|
placeholderTextColor={palette.mutedText}
|
|
style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
|
|
value={email}
|
|
/>
|
|
|
|
<Text style={[styles.label, { color: palette.text }]}>Password</Text>
|
|
<TextInput
|
|
autoCapitalize="none"
|
|
autoComplete="password"
|
|
onChangeText={setPassword}
|
|
placeholder="Password"
|
|
placeholderTextColor={palette.mutedText}
|
|
secureTextEntry
|
|
style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
|
|
value={password}
|
|
/>
|
|
|
|
{errorMessage ? (
|
|
<Text style={styles.errorText}>{errorMessage}</Text>
|
|
) : null}
|
|
|
|
<Pressable
|
|
disabled={isSubmitting}
|
|
onPress={onLogin}
|
|
style={({ pressed }) => [
|
|
styles.loginButton,
|
|
pressed && !isSubmitting ? styles.loginButtonPressed : null,
|
|
isSubmitting ? styles.loginButtonDisabled : null,
|
|
]}
|
|
>
|
|
<Text style={styles.loginButtonText}>
|
|
{isSubmitting ? 'Logging in...' : 'Log in'}
|
|
</Text>
|
|
</Pressable>
|
|
|
|
<Link href="/signup" style={styles.link}>
|
|
<Text style={[styles.linkText, { color: colorScheme === "dark" ? "#8ab4ff" : "#0b57d0" }]}>Create a new account</Text>
|
|
</Link>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
gap: 12,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: '700',
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderRadius: 8,
|
|
padding: 12,
|
|
fontSize: 16,
|
|
},
|
|
errorText: {
|
|
color: '#c62828',
|
|
fontSize: 14,
|
|
},
|
|
loginButton: {
|
|
borderRadius: 12,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
backgroundColor: Appearance.getColorScheme() === "light" ? '#000000':'#696969',
|
|
marginTop: 8,
|
|
},
|
|
loginButtonPressed: {
|
|
opacity: 0.85,
|
|
},
|
|
loginButtonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
loginButtonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
},
|
|
link: {
|
|
alignSelf: 'center',
|
|
marginTop: 8,
|
|
},
|
|
linkText: {
|
|
color: '#0b57d0',
|
|
fontSize: 16,
|
|
},
|
|
})
|