create-stackr 0.2.0 → 0.3.0

package/templates/features/mobile/auth/app/(tabs)/settings/security/two-factor-setup.tsx.ejs

@@ -0,0 +1,317 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { View, Text, StyleSheet, Alert, ScrollView, TouchableOpacity } from 'react-native';
+import { useRouter } from 'expo-router';
+import QRCode from 'react-native-qrcode-svg';
+import * as Clipboard from 'expo-clipboard';
+import * as FileSystem from 'expo-file-system';
+import * as Sharing from 'expo-sharing';
+import { useAuth } from '../../../../src/hooks/auth';
+import { Button } from '../../../../src/components/ui/button';
+import { Input } from '../../../../src/components/ui/input';
+import { IconSymbol } from '../../../../src/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+
+type SetupStep = 'password' | 'qr-code' | 'verify' | 'backup-codes';
+
+export default function TwoFactorSetupScreen() {
+  const router = useRouter();
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const { enableTwoFactor, verifyTotpSetup, isLoading } = useAuth();
+
+  const [step, setStep] = useState<SetupStep>('password');
+  const [password, setPassword] = useState('');
+  const [totpURI, setTotpURI] = useState<string | null>(null);
+  const [backupCodes, setBackupCodes] = useState<string[]>([]);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  // Extract secret from TOTP URI for manual entry
+  const getSecretFromURI = useCallback((uri: string): string => {
+    const match = uri.match(/secret=([^&]+)/);
+    return match ? match[1] : '';
+  }, []);
+
+  const handlePasswordSubmit = async () => {
+    setError(null);
+    const result = await enableTwoFactor(password);
+
+    if (!result.success) {
+      setError(result.error || 'Failed to enable 2FA');
+      return;
+    }
+
+    setTotpURI(result.totpURI || null);
+    setBackupCodes(result.backupCodes || []);
+    setStep('qr-code');
+  };
+
+  const handleVerifyCode = async () => {
+    setError(null);
+
+    if (verificationCode.length !== 6) {
+      setError('Please enter a 6-digit code');
+      return;
+    }
+
+    const result = await verifyTotpSetup(verificationCode);
+
+    if (!result.success) {
+      setError(result.error || 'Verification failed');
+      return;
+    }
+
+    setStep('backup-codes');
+  };
+
+  const handleCopySecret = async () => {
+    if (!totpURI) return;
+    const secret = getSecretFromURI(totpURI);
+    await Clipboard.setStringAsync(secret);
+    Alert.alert('Copied', 'Secret key copied to clipboard');
+  };
+
+  const handleDownloadBackupCodes = async () => {
+    const content = [
+      'Two-Factor Authentication Backup Codes',
+      '========================================',
+      '',
+      'Keep these codes safe. Each code can only be used once.',
+      '',
+      ...backupCodes,
+    ].join('\n');
+
+    const fileUri = FileSystem.documentDirectory + '2fa-backup-codes.txt';
+    await FileSystem.writeAsStringAsync(fileUri, content);
+    await Sharing.shareAsync(fileUri);
+  };
+
+  const handleComplete = () => {
+    router.back();
+  };
+
+  // Step 1: Password confirmation
+  if (step === 'password') {
+    return (
+      <ScrollView style={styles.container} contentContainerStyle={styles.scrollContent}>
+        <View style={styles.iconContainer}>
+          <IconSymbol name="lock.shield.fill" size={48} color={theme.colors.primary} />
+        </View>
+        <Text style={styles.title}>Enable Two-Factor Authentication</Text>
+        <Text style={styles.description}>
+          Enter your password to begin setting up two-factor authentication.
+        </Text>
+
+        <Input
+          label="Password"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          autoCapitalize="none"
+          error={error || undefined}
+          containerStyle={styles.inputContainer}
+        />
+
+        <Button
+          onPress={handlePasswordSubmit}
+          title="Continue"
+          loading={isLoading}
+          disabled={!password}
+        />
+      </ScrollView>
+    );
+  }
+
+  // Step 2: QR Code scanning
+  if (step === 'qr-code') {
+    const secret = totpURI ? getSecretFromURI(totpURI) : '';
+
+    return (
+      <ScrollView style={styles.container} contentContainerStyle={styles.scrollContent}>
+        <Text style={styles.title}>Scan QR Code</Text>
+        <Text style={styles.description}>
+          Open your authenticator app and scan this QR code to add your account.
+        </Text>
+
+        {totpURI && (
+          <View style={styles.qrContainer}>
+            <QRCode value={totpURI} size={200} backgroundColor="#FFFFFF" />
+          </View>
+        )}
+
+        <Text style={styles.subtitle}>Or enter manually:</Text>
+        <View style={styles.secretContainer}>
+          <Text style={styles.secret} selectable>
+            {secret}
+          </Text>
+          <TouchableOpacity onPress={handleCopySecret} style={styles.copyButton}>
+            <IconSymbol name="doc.on.doc" size={20} color={theme.colors.primary} />
+          </TouchableOpacity>
+        </View>
+
+        <Button
+          onPress={() => setStep('verify')}
+          title="I've Added the Account"
+          style={styles.continueButton}
+        />
+      </ScrollView>
+    );
+  }
+
+  // Step 3: Verification
+  if (step === 'verify') {
+    return (
+      <ScrollView style={styles.container} contentContainerStyle={styles.scrollContent}>
+        <Text style={styles.title}>Verify Setup</Text>
+        <Text style={styles.description}>
+          Enter the 6-digit code from your authenticator app to verify the setup.
+        </Text>
+
+        <Input
+          label="Verification Code"
+          value={verificationCode}
+          onChangeText={(text) => setVerificationCode(text.replace(/\D/g, ''))}
+          placeholder="000000"
+          keyboardType="number-pad"
+          maxLength={6}
+          error={error || undefined}
+          containerStyle={styles.codeInputContainer}
+        />
+
+        <Button
+          onPress={handleVerifyCode}
+          title="Verify"
+          loading={isLoading}
+          disabled={verificationCode.length !== 6}
+        />
+      </ScrollView>
+    );
+  }
+
+  // Step 4: Backup codes
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.scrollContent}>
+      <View style={styles.iconContainer}>
+        <IconSymbol name="checkmark.circle.fill" size={48} color={theme.colors.success ?? theme.colors.primary} />
+      </View>
+      <Text style={styles.title}>Save Backup Codes</Text>
+      <Text style={styles.description}>
+        Save these backup codes in a secure location. Each code can only be used once
+        if you lose access to your authenticator app.
+      </Text>
+
+      <View style={styles.codesContainer}>
+        {backupCodes.map((code, index) => (
+          <Text key={index} style={styles.code}>
+            {code}
+          </Text>
+        ))}
+      </View>
+
+      <Button
+        onPress={handleDownloadBackupCodes}
+        title="Download Codes"
+        style={styles.downloadButton}
+      />
+
+      <Button
+        onPress={handleComplete}
+        title="Done"
+        variant="outline"
+      />
+    </ScrollView>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  scrollContent: {
+    padding: theme.spacing[6],
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: theme.colors.primary + '15',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    marginBottom: theme.spacing[6],
+  },
+  title: {
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: 'bold',
+    color: theme.colors.text,
+    textAlign: 'center',
+    marginBottom: theme.spacing[2],
+  },
+  subtitle: {
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: '500',
+    color: theme.colors.text,
+    marginTop: theme.spacing[6],
+    marginBottom: theme.spacing[2],
+  },
+  description: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    textAlign: 'center',
+    marginBottom: theme.spacing[6],
+    lineHeight: 24,
+  },
+  inputContainer: {
+    marginBottom: theme.spacing[4],
+  },
+  codeInputContainer: {
+    marginBottom: theme.spacing[4],
+  },
+  qrContainer: {
+    alignItems: 'center',
+    padding: theme.spacing[6],
+    backgroundColor: '#FFFFFF', // White for QR scanability
+    borderRadius: 16,
+    alignSelf: 'center',
+    marginBottom: theme.spacing[6],
+  },
+  secretContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: theme.spacing[6],
+    flexWrap: 'wrap',
+  },
+  secret: {
+    fontFamily: 'monospace',
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text,
+  },
+  copyButton: {
+    marginLeft: theme.spacing[2],
+    padding: theme.spacing[2],
+  },
+  continueButton: {
+    marginTop: theme.spacing[4],
+  },
+  codesContainer: {
+    padding: theme.spacing[4],
+    borderRadius: 12,
+    backgroundColor: theme.colors.backgroundSecondary,
+    marginBottom: theme.spacing[6],
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text,
+    width: '48%',
+    marginBottom: theme.spacing[2],
+  },
+  downloadButton: {
+    marginBottom: theme.spacing[4],
+  },
+});

package/templates/features/mobile/auth/app/account.tsx.ejs

@@ -0,0 +1,331 @@
+import React, { useState, useMemo } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    ScrollView,
+    Modal,
+    Pressable,
+    Alert,
+    KeyboardAvoidingView,
+    Platform,
+    TouchableOpacity,
+    SafeAreaView,
+} from 'react-native';
+import { useRouter } from 'expo-router';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useAuth } from '@/hooks/auth';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { formatDisplayName } from '@/utils/formatters';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+
+export default function AccountScreen() {
+    const router = useRouter();
+    const theme = useAppTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+
+    const { user, signOut, deleteAccount } = useAuth();
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [deleteConfirmText, setDeleteConfirmText] = useState('');
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const gradientColors = theme.mode === 'dark'
+        ? [theme.colors.card, 'transparent'] as const
+        : ['#ffffff', '#f8fafc'] as const;
+
+    const handleDeleteAccount = async () => {
+        if (deleteConfirmText !== 'DELETE') {
+            return;
+        }
+
+        setIsDeleting(true);
+        const result = await deleteAccount();
+        setIsDeleting(false);
+
+        if (result.success) {
+            await signOut();
+            setShowDeleteModal(false);
+            setDeleteConfirmText('');
+            router.replace('/');
+        } else {
+            Alert.alert('Error', result.error || 'Failed to delete account. Please try again.');
+        }
+    };
+
+    const isDeleteButtonEnabled = deleteConfirmText === 'DELETE' && !isDeleting;
+
+    return (
+        <SafeAreaView style={styles.safeArea}>
+            {/* Custom Header */}
+            <View style={styles.header}>
+                <TouchableOpacity
+                    onPress={() => router.dismiss()}
+                    style={styles.backButton}
+                >
+                    <IconSymbol name="chevron.left" size={24} color={theme.colors.text} />
+                </TouchableOpacity>
+                <Text style={styles.headerTitle}>Account</Text>
+                <View style={styles.headerSpacer} />
+            </View>
+
+            <ScrollView style={styles.container}>
+                <View style={styles.content}>
+
+                    {/* User Info Section */}
+                    {user && (
+                        <LinearGradient
+                            colors={gradientColors}
+                            style={styles.userInfo}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 0, y: 1 }}
+                        >
+                            <Text style={styles.greeting}>
+                                {formatDisplayName(user.name)}
+                            </Text>
+                            <Text style={styles.email}>{user.email}</Text>
+                            <Text style={styles.userId}>User ID: {user.id}</Text>
+                        </LinearGradient>
+                    )}
+
+                    <View style={styles.dangerZone}>
+                        <Text style={styles.dangerTitle}>Danger Zone</Text>
+                        <Text style={styles.dangerDescription}>
+                            Deleting your account is permanent and cannot be undone.
+                        </Text>
+                        <Button
+                            title="Delete Account"
+                            variant="destructive"
+                            onPress={() => setShowDeleteModal(true)}
+                        />
+                    </View>
+
+                </View>
+
+                {/* Delete Account Confirmation Modal */}
+                <Modal
+                    visible={showDeleteModal}
+                    transparent
+                    animationType="fade"
+                    onRequestClose={() => setShowDeleteModal(false)}
+                    statusBarTranslucent
+                >
+                    <KeyboardAvoidingView
+                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                        style={styles.keyboardAvoidingModal}
+                    >
+                        <Pressable
+                            style={styles.modalOverlay}
+                            onPress={() => setShowDeleteModal(false)}
+                        >
+                            <Pressable
+                                style={styles.modalContent}
+                                onPress={(e) => e.stopPropagation()}
+                            >
+                                <Text style={styles.modalTitle}>Delete Account</Text>
+
+                                <View style={styles.warningContainer}>
+                                    <Text style={styles.warningTitle}>Warning</Text>
+                                    <Text style={styles.warningText}>
+                                        This action is permanent and cannot be undone. All your account data will be deleted immediately.
+                                    </Text>
+                                </View>
+
+                                <View style={styles.gdprNotice}>
+                                    <Text style={styles.gdprTitle}>Third-Party Data Notice</Text>
+                                    <Text style={styles.gdprText}>
+                                        Please note that data stored by third-party services (RevenueCat, Adjust, Scate) may persist on their servers.
+                                    </Text>
+                                </View>
+
+                                <Input
+                                    label="Type DELETE to confirm"
+                                    value={deleteConfirmText}
+                                    onChangeText={setDeleteConfirmText}
+                                    placeholder="DELETE"
+                                    autoCapitalize="characters"
+                                    containerStyle={styles.confirmInput}
+                                />
+
+                                <View style={styles.modalActions}>
+                                    <Button
+                                        title="Cancel"
+                                        variant="ghost"
+                                        onPress={() => {
+                                            setShowDeleteModal(false);
+                                            setDeleteConfirmText('');
+                                        }}
+                                        style={styles.modalButton}
+                                    />
+
+                                    <Button
+                                        title={isDeleting ? "Deleting..." : "Delete"}
+                                        variant="destructive"
+                                        onPress={handleDeleteAccount}
+                                        disabled={!isDeleteButtonEnabled}
+                                        loading={isDeleting}
+                                        style={styles.modalButton}
+                                    />
+                                </View>
+                            </Pressable>
+                        </Pressable>
+                    </KeyboardAvoidingView>
+                </Modal>
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+    safeArea: {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme.spacing[4],
+        paddingVertical: theme.spacing[3],
+        backgroundColor: theme.colors.background,
+    },
+    backButton: {
+        padding: theme.spacing[2],
+        marginLeft: -theme.spacing[2],
+    },
+    headerTitle: {
+        fontSize: theme.typography.fontSize.lg,
+        fontWeight: '600',
+        color: theme.colors.text,
+    },
+    headerSpacer: {
+        width: 40,
+    },
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+    },
+    content: {
+        padding: theme.spacing[5],
+    },
+    userInfo: {
+        borderRadius: theme.borderRadius.xl,
+        padding: theme.spacing[5],
+        marginBottom: theme.spacing[8],
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: theme.colors.borderLight,
+    },
+    greeting: {
+        fontSize: theme.typography.fontSize['xl'],
+        fontWeight: '700',
+        color: theme.colors.text,
+        marginBottom: theme.spacing[2],
+    },
+    email: {
+        fontSize: theme.typography.fontSize.base,
+        color: theme.colors.textSecondary,
+        marginBottom: theme.spacing[1],
+    },
+    userId: {
+        fontSize: theme.typography.fontSize.sm,
+        color: theme.colors.textMuted,
+    },
+    dangerZone: {
+        marginTop: theme.spacing[4],
+        padding: theme.spacing[4],
+        borderRadius: theme.borderRadius.lg,
+        backgroundColor: 'rgba(239, 68, 68, 0.05)',
+        borderWidth: 1,
+        borderColor: 'rgba(239, 68, 68, 0.2)',
+    },
+    dangerTitle: {
+        fontSize: theme.typography.fontSize.lg,
+        fontWeight: '600',
+        color: theme.colors.error,
+        marginBottom: theme.spacing[2],
+    },
+    dangerDescription: {
+        fontSize: theme.typography.fontSize.base,
+        color: theme.colors.textSecondary,
+        marginBottom: theme.spacing[4],
+    },
+    keyboardAvoidingModal: {
+        flex: 1,
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: theme.spacing[5],
+    },
+    modalContent: {
+        backgroundColor: theme.colors.background,
+        borderRadius: 24,
+        padding: theme.spacing[6],
+        paddingBottom: theme.spacing[12],
+        width: '100%',
+        maxWidth: 400,
+        borderWidth: 1,
+        borderColor: theme.colors.borderLight,
+        ...theme.shadows.large,
+    },
+    modalTitle: {
+        fontSize: theme.typography.fontSize['xl'],
+        fontWeight: 'bold',
+        color: theme.colors.text,
+        marginBottom: theme.spacing[6],
+        textAlign: 'center',
+    },
+    warningContainer: {
+        backgroundColor: 'transparent',
+        borderRadius: theme.borderRadius.lg,
+        padding: theme.spacing[4],
+        marginBottom: theme.spacing[5],
+        borderWidth: 1,
+        borderColor: theme.colors.warning,
+        borderStyle: 'dashed',
+    },
+    warningTitle: {
+        fontSize: theme.typography.fontSize.base,
+        fontWeight: '700',
+        color: theme.colors.warning,
+        marginBottom: theme.spacing[2],
+    },
+    warningText: {
+        fontSize: theme.typography.fontSize.sm,
+        color: theme.colors.textSecondary,
+        lineHeight: 20,
+    },
+    gdprNotice: {
+        backgroundColor: 'transparent',
+        borderRadius: theme.borderRadius.lg,
+        padding: theme.spacing[4],
+        marginBottom: theme.spacing[5],
+        borderWidth: 1,
+        borderColor: theme.colors.info,
+    },
+    gdprTitle: {
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: '600',
+        color: theme.colors.info,
+        marginBottom: theme.spacing[2],
+    },
+    gdprText: {
+        fontSize: theme.typography.fontSize.xs,
+        color: theme.colors.textMuted,
+        lineHeight: 18,
+    },
+    confirmInput: {
+        marginBottom: theme.spacing[6],
+    },
+    modalActions: {
+        flexDirection: 'row',
+        gap: theme.spacing[3],
+    },
+    modalButton: {
+        flex: 1,
+    },
+});