55eb62189a
DS 컴포넌트 9개 (ScreenPanel, WaveBars, AppStatusBar, Header, FilterChip 신규), 5개 탭 + 로그인 화면 D3RO 인스트루먼트 미학 적용, i18n 연결 (I18nProvider + 모바일 전용 키 80+개), 모노레포 workspaces에 apps/mobile 추가.
315 lines
9.7 KiB
TypeScript
315 lines
9.7 KiB
TypeScript
// apps/mobile/app/login.tsx
|
|
// Login screen — D3RO styled
|
|
// Design ref: docs/v3/designs/login.html
|
|
|
|
import { useState } from 'react'
|
|
import { View, TextInput, StyleSheet, Alert, ScrollView, Pressable, Platform } from 'react-native'
|
|
import * as WebBrowser from 'expo-web-browser'
|
|
import * as Linking from 'expo-linking'
|
|
import {
|
|
d3roNativePalette,
|
|
d3roNativeFonts,
|
|
Led,
|
|
PhosphorText
|
|
} from '@d3ro/ui-native'
|
|
import { useI18n } from '@d3ro/i18n'
|
|
import { supabase, isSupabaseConfigured } from '../lib/supabase'
|
|
import { useAuth } from '../lib/auth-context'
|
|
import { useRouter } from 'expo-router'
|
|
|
|
WebBrowser.maybeCompleteAuthSession()
|
|
|
|
export default function LoginScreen(): React.ReactElement {
|
|
const { t } = useI18n()
|
|
const [busy, setBusy] = useState(false)
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const configured = isSupabaseConfigured()
|
|
const { devBypass } = useAuth()
|
|
const router = useRouter()
|
|
|
|
function handleDevSkip(): void {
|
|
devBypass()
|
|
router.replace('/(tabs)/dash')
|
|
}
|
|
|
|
async function signInWithProvider(provider: 'google' | 'github' | 'apple'): Promise<void> {
|
|
if (!configured) {
|
|
Alert.alert('Not Configured', t('mobile.login.notConfigured'))
|
|
return
|
|
}
|
|
setBusy(true)
|
|
try {
|
|
const redirectTo = Linking.createURL('auth-callback')
|
|
const { data, error } = await supabase.auth.signInWithOAuth({
|
|
provider,
|
|
options: { redirectTo, skipBrowserRedirect: true }
|
|
})
|
|
|
|
if (error || !data.url) {
|
|
Alert.alert('Login Failed', error?.message ?? 'Could not get OAuth URL')
|
|
return
|
|
}
|
|
|
|
const result = await WebBrowser.openAuthSessionAsync(data.url, redirectTo)
|
|
if (result.type === 'success' && result.url) {
|
|
const url = new URL(result.url)
|
|
const code = url.searchParams.get('code')
|
|
if (code) {
|
|
const { error: exchangeErr } = await supabase.auth.exchangeCodeForSession(code)
|
|
if (exchangeErr) {
|
|
Alert.alert('Session Error', exchangeErr.message)
|
|
}
|
|
}
|
|
}
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
async function signInWithEmail(): Promise<void> {
|
|
if (!configured) {
|
|
Alert.alert('Not Configured', t('mobile.login.notConfigured'))
|
|
return
|
|
}
|
|
if (!email.trim() || !password.trim()) return
|
|
setBusy(true)
|
|
try {
|
|
const { error } = await supabase.auth.signInWithPassword({ email, password })
|
|
if (error) {
|
|
Alert.alert('Login Failed', error.message)
|
|
}
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ScrollView
|
|
style={styles.container}
|
|
contentContainerStyle={styles.content}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
{/* Logo & Branding */}
|
|
<View style={styles.branding}>
|
|
<View style={styles.leds}>
|
|
<Led color="amber" size={10} />
|
|
<Led color="green" size={10} />
|
|
</View>
|
|
<PhosphorText variant="title" color="primary" style={styles.titleText}>
|
|
{t('mobile.login.title')}
|
|
</PhosphorText>
|
|
<PhosphorText variant="label" color="muted" style={styles.subtitleText}>
|
|
{t('mobile.login.subtitle')}
|
|
</PhosphorText>
|
|
</View>
|
|
|
|
{/* OAuth Buttons */}
|
|
<View style={styles.oauthSection}>
|
|
<Pressable
|
|
style={({ pressed }) => [styles.oauthBtn, pressed && styles.oauthBtnPressed]}
|
|
onPress={() => void signInWithProvider('google')}
|
|
disabled={busy}
|
|
>
|
|
<PhosphorText variant="body" color="primary">G</PhosphorText>
|
|
<PhosphorText variant="body" color="primary" style={styles.oauthLabel}>
|
|
{t('mobile.login.google')}
|
|
</PhosphorText>
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
style={({ pressed }) => [styles.oauthBtn, pressed && styles.oauthBtnPressed]}
|
|
onPress={() => void signInWithProvider('apple')}
|
|
disabled={busy}
|
|
>
|
|
<PhosphorText variant="body" color="primary" style={styles.appleIcon}>
|
|
{'\uF8FF'}
|
|
</PhosphorText>
|
|
<PhosphorText variant="body" color="primary" style={styles.oauthLabel}>
|
|
{t('mobile.login.apple')}
|
|
</PhosphorText>
|
|
</Pressable>
|
|
|
|
<Pressable
|
|
style={({ pressed }) => [styles.oauthBtn, pressed && styles.oauthBtnPressed]}
|
|
onPress={() => void signInWithProvider('github')}
|
|
disabled={busy}
|
|
>
|
|
<PhosphorText variant="body" color="primary">{'\u2318'}</PhosphorText>
|
|
<PhosphorText variant="body" color="primary" style={styles.oauthLabel}>
|
|
{t('mobile.login.github')}
|
|
</PhosphorText>
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* Divider */}
|
|
<View style={styles.divider}>
|
|
<View style={styles.dividerLine} />
|
|
<PhosphorText variant="label" color="muted" style={styles.dividerText}>
|
|
{t('mobile.login.or')}
|
|
</PhosphorText>
|
|
<View style={styles.dividerLine} />
|
|
</View>
|
|
|
|
{/* Email/Password Fields */}
|
|
<View style={styles.formSection}>
|
|
<View>
|
|
<PhosphorText variant="label" color="muted" style={styles.fieldLabel}>
|
|
{t('mobile.login.email')}
|
|
</PhosphorText>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="user@studio.com"
|
|
placeholderTextColor="rgba(113, 113, 122, 0.3)"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
</View>
|
|
<View>
|
|
<PhosphorText variant="label" color="muted" style={styles.fieldLabel}>
|
|
{t('mobile.login.password')}
|
|
</PhosphorText>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder={'\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}
|
|
placeholderTextColor="rgba(113, 113, 122, 0.3)"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Login Button */}
|
|
<Pressable
|
|
style={({ pressed }) => [styles.loginBtn, pressed && { opacity: 0.9 }]}
|
|
onPress={() => void signInWithEmail()}
|
|
disabled={busy}
|
|
>
|
|
<PhosphorText variant="heading" style={styles.loginBtnText}>
|
|
{t('mobile.login.signIn')}
|
|
</PhosphorText>
|
|
</Pressable>
|
|
|
|
{/* Sign Up Link */}
|
|
<View style={styles.signupRow}>
|
|
<PhosphorText variant="small" color="muted">
|
|
{t('mobile.login.noAccount')}
|
|
</PhosphorText>
|
|
<Pressable>
|
|
<PhosphorText variant="small" color="amber">
|
|
{t('mobile.login.signUp')}
|
|
</PhosphorText>
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* DEV Skip */}
|
|
{__DEV__ && (
|
|
<Pressable style={styles.devSkipBtn} onPress={handleDevSkip}>
|
|
<PhosphorText variant="label" style={styles.devSkipText}>
|
|
{'\u26A1'} DEV SKIP LOGIN
|
|
</PhosphorText>
|
|
</Pressable>
|
|
)}
|
|
|
|
{/* Supabase Warning */}
|
|
{!configured && (
|
|
<View style={styles.warningBox}>
|
|
<PhosphorText variant="label" color="amber" style={styles.warningText}>
|
|
{'\u26A0'} {t('mobile.login.notConfigured')}
|
|
</PhosphorText>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
const P = d3roNativePalette
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: P.bg.app },
|
|
content: {
|
|
flexGrow: 1,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 24,
|
|
paddingBottom: 40,
|
|
paddingTop: 60
|
|
},
|
|
branding: { alignItems: 'center', marginBottom: 40 },
|
|
leds: { flexDirection: 'row', gap: 10, marginBottom: 20 },
|
|
titleText: { letterSpacing: 5 },
|
|
subtitleText: { marginTop: 8, letterSpacing: 2 },
|
|
oauthSection: { gap: 12, marginBottom: 24 },
|
|
oauthBtn: {
|
|
backgroundColor: P.bg.card,
|
|
borderWidth: 1,
|
|
borderColor: P.border.default,
|
|
borderRadius: 12,
|
|
paddingVertical: 14,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 12
|
|
},
|
|
oauthBtnPressed: { backgroundColor: P.bg.cardHover, borderColor: 'rgba(113,113,122,0.4)' },
|
|
oauthLabel: { fontFamily: d3roNativeFonts.sans },
|
|
appleIcon: { fontSize: 18 },
|
|
divider: { flexDirection: 'row', alignItems: 'center', gap: 16, marginBottom: 24 },
|
|
dividerLine: { flex: 1, height: 1, backgroundColor: P.border.default },
|
|
dividerText: { letterSpacing: 2 },
|
|
formSection: { gap: 16, marginBottom: 24 },
|
|
fieldLabel: { letterSpacing: 4, marginBottom: 6, marginLeft: 4 },
|
|
input: {
|
|
backgroundColor: P.bg.inset,
|
|
borderWidth: 1,
|
|
borderColor: P.border.default,
|
|
borderRadius: 12,
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 16,
|
|
fontSize: 14,
|
|
color: P.text.primary,
|
|
fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
|
|
},
|
|
loginBtn: {
|
|
backgroundColor: P.accent.amber,
|
|
borderRadius: 12,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
shadowColor: P.accent.amber,
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 10,
|
|
elevation: 6,
|
|
marginBottom: 24
|
|
},
|
|
loginBtnText: { color: P.bg.app, letterSpacing: 1 },
|
|
signupRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
marginBottom: 16
|
|
},
|
|
warningBox: {
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255,92,53,0.3)',
|
|
backgroundColor: P.accent.amberDim,
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
marginTop: 8
|
|
},
|
|
warningText: { textAlign: 'center' },
|
|
devSkipBtn: {
|
|
borderWidth: 1,
|
|
borderColor: P.accent.green,
|
|
borderRadius: 8,
|
|
paddingVertical: 10,
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
backgroundColor: 'rgba(74, 222, 128, 0.08)'
|
|
},
|
|
devSkipText: { color: P.accent.green, letterSpacing: 2 }
|
|
})
|