Add files via upload

app/auth.tsx

@@ -0,0 +1,163 @@
+import { useState, useCallback, useEffect } from 'react';
+import {
+  View, Text, StyleSheet, Pressable, ActivityIndicator, Dimensions,
+} from 'react-native';
+import Animated, {
+  useSharedValue, useAnimatedStyle, withSpring, withTiming,
+  FadeIn, SlideInDown,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import * as WebBrowser from 'expo-web-browser';
+import * as Linking from 'expo-linking';
+import { router } from 'expo-router';
+import Svg, { Path, Circle, Polyline, Line } from 'react-native-svg';
+import { Colors, Font, Radius, Spacing } from '../constants/theme';
+import { buildOAuthUrl, exchangeCode, saveTokens } from '../services/api';
+import { useAuth } from '../store';
+
+WebBrowser.maybeCompleteAuthSession();
+
+const { width, height } = Dimensions.get('window');
+
+export default function AuthScreen() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError]     = useState('');
+  const { setUser } = useAuth();
+  const btnScale = useSharedValue(1);
+
+  const btnStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: btnScale.value }],
+  }));
+
+  const handleLogin = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const state  = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+      const url    = buildOAuthUrl(state);
+      const result = await WebBrowser.openAuthSessionAsync(url, 'burmalda://auth/callback');
+
+      if (result.type !== 'success') {
+        setError('Авторизация отменена');
+        return;
+      }
+      const parsed = Linking.parse(result.url);
+      const code   = parsed.queryParams?.code as string | undefined;
+      if (!code) {
+        setError((parsed.queryParams?.error as string) || 'Ошибка авторизации');
+        return;
+      }
+      const data = await exchangeCode(code);
+      await saveTokens(data.access_token, data.refresh_token);
+      setUser(data.user);
+      router.replace('/(tabs)');
+    } catch (e: any) {
+      setError(e.message || 'Что-то пошло не так');
+    } finally {
+      setLoading(false);
+    }
+  }, [setUser]);
+
+  return (
+    <View style={styles.container}>
+      <Blob color="#1db954" size={420} left={-80}  top={-100}  delay={0} />
+      <Blob color="#6c63ff" size={320} left={width - 200} top={height * 0.55} delay={2000} />
+      <Blob color="#1db954" size={240} left={width * 0.3} top={height - 100} delay={4000} />
+
+      <Animated.View style={styles.card} entering={FadeIn.duration(600)}>
+        <Animated.View entering={SlideInDown.delay(100).springify()} style={styles.logoWrap}>
+          <LinearGradient colors={['#1db954', '#168f3f']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.logoIcon}>
+            <Svg width={38} height={38} viewBox="0 0 24 24" fill="none">
+              <Path d="M9 18V5l12-2v13" stroke="#fff" strokeWidth={2} strokeLinecap="round" />
+              <Circle cx={6} cy={18} r={3} fill="#fff" />
+              <Circle cx={18} cy={16} r={3} fill="#fff" />
+            </Svg>
+          </LinearGradient>
+          <Text style={styles.logoTitle}>Burmalda Music</Text>
+          <Text style={styles.logoSub}>by NodeShift</Text>
+        </Animated.View>
+
+        <Animated.View entering={SlideInDown.delay(200).springify()} style={{ width: '100%' }}>
+          <Animated.View style={btnStyle}>
+            <Pressable
+              style={styles.btnWrap}
+              disabled={loading}
+              onPressIn={() => { btnScale.value = withSpring(0.96, { damping: 14 }); }}
+              onPressOut={() => { btnScale.value = withSpring(1,    { damping: 14 }); }}
+              onPress={handleLogin}
+            >
+              <LinearGradient colors={['#1db954', '#17a349']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.btn}>
+                {loading
+                  ? <ActivityIndicator color="#000" size="small" />
+                  : (
+                    <Svg width={18} height={18} viewBox="0 0 24 24" fill="none">
+                      <Path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25" stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                      <Polyline points="8 17 12 13 16 17" stroke="#000" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                      <Line x1="12" y1="13" x2="12" y2="21" stroke="#000" strokeWidth={2} strokeLinecap="round" />
+                    </Svg>
+                  )}
+                <Text style={styles.btnText}>
+                  {loading ? 'Ожидаем авторизацию…' : 'Войти через NodeShift'}
+                </Text>
+              </LinearGradient>
+            </Pressable>
+          </Animated.View>
+
+          {!!error && (
+            <Animated.Text entering={FadeIn} style={styles.error}>{error}</Animated.Text>
+          )}
+        </Animated.View>
+
+        <Animated.Text entering={FadeIn.delay(300)} style={styles.footer}>
+          Нажимая «Войти», вы соглашаетесь с{'\n'}условиями использования NodeShift
+        </Animated.Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+function Blob({ color, size, left, top, delay }: {
+  color: string; size: number; left: number; top: number; delay: number;
+}) {
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+
+  useEffect(() => {
+    const animate = () => {
+      tx.value = withTiming(25,  { duration: 8000 }, () =>
+        tx.value = withTiming(-20, { duration: 8000 }, () =>
+          tx.value = withTiming(0, { duration: 8000 }, animate)));
+      ty.value = withTiming(-35, { duration: 8000 }, () =>
+        ty.value = withTiming(18, { duration: 8000 }, () =>
+          ty.value = withTiming(0, { duration: 8000 })));
+    };
+    const t = setTimeout(animate, delay);
+    return () => clearTimeout(t);
+  }, []);
+
+  const style = useAnimatedStyle(() => ({
+    transform: [{ translateX: tx.value }, { translateY: ty.value }],
+  }));
+
+  return (
+    <Animated.View style={[styles.blob, style, {
+      width: size, height: size, borderRadius: size / 2,
+      backgroundColor: color, left, top,
+    }]} />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.bg, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+  blob:      { position: 'absolute', opacity: 0.15 },
+  card:      { width: '100%', maxWidth: 360, alignItems: 'center', paddingHorizontal: Spacing.xl, zIndex: 10 },
+  logoWrap:  { alignItems: 'center', marginBottom: 40 },
+  logoIcon:  { width: 84, height: 84, borderRadius: 22, alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.md, shadowColor: '#1db954', shadowOffset: { width: 0, height: 14 }, shadowOpacity: 0.45, shadowRadius: 22 },
+  logoTitle: { color: Colors.text, fontSize: Font.xxl, fontWeight: '800', letterSpacing: -0.5, marginBottom: 4 },
+  logoSub:   { color: Colors.text3, fontSize: Font.sm, fontWeight: '500' },
+  btnWrap:   { width: '100%', borderRadius: Radius.md, overflow: 'hidden', shadowColor: '#1db954', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.35, shadowRadius: 18 },
+  btn:       { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, paddingVertical: 16, paddingHorizontal: 20 },
+  btnText:   { color: '#000', fontSize: Font.md, fontWeight: '700' },
+  error:     { color: Colors.red, fontSize: Font.sm, textAlign: 'center', marginTop: Spacing.sm },
+  footer:    { marginTop: Spacing.xl, color: Colors.text3, fontSize: Font.xs, textAlign: 'center', lineHeight: 18 },
+});