create-100x-mobile 0.4.11 → 0.5.0

package/dist/templates/instant/magic/settingsScreen.js

@@ -0,0 +1,282 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.magicSettingsScreenTemplate = magicSettingsScreenTemplate;
+function magicSettingsScreenTemplate(stackLabel) {
+    return `import React from "react";
+import {
+  Alert,
+  ActivityIndicator,
+  Image,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { LogOut, Mail, User } from "lucide-react-native";
+import { instantDb } from "@/lib/instant";
+
+function SetupRequired() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.loadingContainer}>
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Setup Required</Text>
+          <Text style={styles.sectionText}>
+            Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file.
+          </Text>
+          <Text style={styles.sectionText}>
+            Create one with: npx instant-cli init-without-files --title my-app
+          </Text>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function MagicSettingsContent({
+  db,
+}: {
+  db: NonNullable<typeof instantDb>;
+}) {
+  const { isLoading, error } = db.useAuth();
+  const user = db.useUser();
+  const [isSigningOut, setIsSigningOut] = React.useState(false);
+  const [imageLoadError, setImageLoadError] = React.useState(false);
+  const instantAppId = process.env.EXPO_PUBLIC_INSTANT_APP_ID;
+
+  React.useEffect(() => {
+    setImageLoadError(false);
+  }, [user?.imageUrl]);
+
+  const performSignOut = async () => {
+    setIsSigningOut(true);
+    try {
+      await db.auth.signOut();
+    } catch (signOutError) {
+      console.warn("Instant signOut warning:", signOutError);
+    } finally {
+      setIsSigningOut(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    if (Platform.OS === "web") {
+      const confirmed = window.confirm("Are you sure you want to sign out?");
+      if (confirmed) await performSignOut();
+      return;
+    }
+
+    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Sign Out", style: "destructive", onPress: performSignOut },
+    ]);
+  };
+
+  if (isLoading) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#4B5563" />
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  if (error) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.content}>
+          <View style={styles.card}>
+            <Text style={styles.sectionTitle}>Authentication Error</Text>
+            <Text style={styles.sectionText}>{error.message}</Text>
+          </View>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+      <View style={styles.header}>
+        <Text style={styles.title}>Settings</Text>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Profile</Text>
+          <View style={styles.profileRow}>
+            <View style={styles.avatarWrap}>
+              {user?.imageUrl && !imageLoadError ? (
+                <Image
+                  source={{ uri: user.imageUrl }}
+                  style={styles.avatar}
+                  onError={() => setImageLoadError(true)}
+                />
+              ) : (
+                <User size={28} color="#6B7280" />
+              )}
+            </View>
+            <View style={styles.profileTextWrap}>
+              <Text style={styles.profileName}>
+                {user?.email || "User"}
+              </Text>
+              <View style={styles.emailRow}>
+                <Mail size={14} color="#9CA3AF" />
+                <Text style={styles.profileEmail}>{user?.email || "No email"}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Backend</Text>
+          <Text style={styles.sectionText}>${stackLabel}</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Instant App ID</Text>
+          <Text style={styles.sectionText}>
+            {instantAppId || "Not configured (set EXPO_PUBLIC_INSTANT_APP_ID)"}
+          </Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>About</Text>
+          <Text style={styles.sectionText}>Version 1.0.0</Text>
+          <Text style={styles.sectionText}>Built with Expo + ${stackLabel}</Text>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.signOutButton, isSigningOut && styles.signOutButtonDisabled]}
+          onPress={() => {
+            if (!isSigningOut) handleSignOut();
+          }}
+          activeOpacity={0.75}
+        >
+          {isSigningOut ? (
+            <ActivityIndicator size={18} color="#EF4444" />
+          ) : (
+            <LogOut size={18} color="#EF4444" />
+          )}
+          <Text style={styles.signOutText}>
+            {isSigningOut ? "Signing Out..." : "Sign Out"}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+export default function SettingsScreen() {
+  if (!instantDb) {
+    return <SetupRequired />;
+  }
+
+  return <MagicSettingsContent db={instantDb} />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#1F2937",
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 12,
+  },
+  card: {
+    backgroundColor: "#F8F9FA",
+    borderRadius: 14,
+    padding: 16,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#374151",
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+  },
+  sectionText: {
+    fontSize: 15,
+    color: "#1F2937",
+    marginBottom: 4,
+    lineHeight: 22,
+  },
+  profileRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  avatarWrap: {
+    width: 54,
+    height: 54,
+    borderRadius: 27,
+    backgroundColor: "#E5E7EB",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  avatar: {
+    width: 54,
+    height: 54,
+    borderRadius: 27,
+  },
+  profileTextWrap: {
+    flex: 1,
+  },
+  profileName: {
+    fontSize: 17,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 4,
+  },
+  emailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  profileEmail: {
+    fontSize: 14,
+    color: "#6B7280",
+  },
+  signOutButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: "#F3F4F6",
+    borderRadius: 14,
+    paddingVertical: 14,
+    marginTop: 8,
+  },
+  signOutButtonDisabled: {
+    opacity: 0.7,
+  },
+  signOutText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#EF4444",
+  },
+});
+`;
+}

package/dist/templates/instant/magic/signIn.js

@@ -0,0 +1,346 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.magicSignInTemplate = magicSignInTemplate;
+function magicSignInTemplate() {
+    return `import React from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { CheckSquare, Mail, ShieldCheck } from "lucide-react-native";
+import { instantDb } from "@/lib/instant";
+
+function SetupRequired() {
+  return null;
+}
+
+function MagicCodeSignIn() {
+  const db = instantDb!;
+  const [email, setEmail] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [sentEmail, setSentEmail] = React.useState("");
+  const [isSending, setIsSending] = React.useState(false);
+  const [isVerifying, setIsVerifying] = React.useState(false);
+
+  const handleSendCode = async () => {
+    const trimmedEmail = email.trim().toLowerCase();
+    if (!trimmedEmail) {
+      Alert.alert("Enter your email", "We need an email address to send a code.");
+      return;
+    }
+
+    setIsSending(true);
+    try {
+      await db.auth.sendMagicCode({ email: trimmedEmail });
+      setSentEmail(trimmedEmail);
+      setCode("");
+    } catch (error) {
+      console.error("Magic code send error:", error);
+      Alert.alert(
+        "Could not send code",
+        error instanceof Error ? error.message : "Please try again."
+      );
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const handleVerifyCode = async () => {
+    const trimmedEmail = sentEmail.trim().toLowerCase();
+    const trimmedCode = code.trim();
+    if (!trimmedEmail || !trimmedCode) {
+      Alert.alert("Enter your code", "Paste the code from your email to continue.");
+      return;
+    }
+
+    setIsVerifying(true);
+    try {
+      await db.auth.signInWithMagicCode({ email: trimmedEmail, code: trimmedCode });
+    } catch (error) {
+      console.error("Magic code sign-in error:", error);
+      Alert.alert(
+        "Could not verify code",
+        error instanceof Error ? error.message : "Please try again."
+      );
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <KeyboardAvoidingView
+        style={styles.content}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+      >
+        <View style={styles.branding}>
+          <View style={styles.logoContainer}>
+            <CheckSquare size={40} color="#1F2937" strokeWidth={2} />
+          </View>
+          <Text style={styles.title}>TaskSync</Text>
+          <Text style={styles.subtitle}>
+            Sign in with a one-time code from InstantDB
+          </Text>
+        </View>
+
+        <View style={styles.card}>
+          {!sentEmail ? (
+            <>
+              <Text style={styles.sectionTitle}>Enter your email</Text>
+              <View style={styles.inputRow}>
+                <Mail size={18} color="#6B7280" />
+                <TextInput
+                  style={styles.input}
+                  placeholder="you@example.com"
+                  placeholderTextColor="#9CA3AF"
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  value={email}
+                  onChangeText={setEmail}
+                  editable={!isSending}
+                  returnKeyType="send"
+                  onSubmitEditing={handleSendCode}
+                />
+              </View>
+
+              <TouchableOpacity
+                style={[styles.button, isSending && styles.buttonDisabled]}
+                onPress={handleSendCode}
+                activeOpacity={0.8}
+                disabled={isSending}
+              >
+                {isSending ? (
+                  <ActivityIndicator color="#FFFFFF" />
+                ) : (
+                  <Text style={styles.buttonText}>Send code</Text>
+                )}
+              </TouchableOpacity>
+            </>
+          ) : (
+            <>
+              <View style={styles.successRow}>
+                <ShieldCheck size={20} color="#059669" />
+                <Text style={styles.sectionTitle}>Code sent</Text>
+              </View>
+              <Text style={styles.helperText}>
+                We sent a login code to <Text style={styles.boldText}>{sentEmail}</Text>.
+              </Text>
+
+              <TextInput
+                style={styles.codeInput}
+                placeholder="123456"
+                placeholderTextColor="#9CA3AF"
+                keyboardType="number-pad"
+                value={code}
+                onChangeText={setCode}
+                autoCapitalize="none"
+                autoCorrect={false}
+                returnKeyType="done"
+                onSubmitEditing={handleVerifyCode}
+              />
+
+              <TouchableOpacity
+                style={[styles.button, isVerifying && styles.buttonDisabled]}
+                onPress={handleVerifyCode}
+                activeOpacity={0.8}
+                disabled={isVerifying}
+              >
+                {isVerifying ? (
+                  <ActivityIndicator color="#FFFFFF" />
+                ) : (
+                  <Text style={styles.buttonText}>Verify code</Text>
+                )}
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.secondaryButton}
+                onPress={() => {
+                  setSentEmail("");
+                  setCode("");
+                }}
+                activeOpacity={0.75}
+                disabled={isVerifying}
+              >
+                <Text style={styles.secondaryButtonText}>Use a different email</Text>
+              </TouchableOpacity>
+            </>
+          )}
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+export default function SignInScreen() {
+  if (!instantDb) {
+    return <SetupRequired />;
+  }
+
+  return <MagicCodeSignIn />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  content: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  branding: {
+    alignItems: "center",
+    marginBottom: 48,
+  },
+  logoContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 20,
+    backgroundColor: "#F3F4F6",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "700",
+    color: "#1F2937",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#6B7280",
+    textAlign: "center",
+    lineHeight: 24,
+  },
+  card: {
+    backgroundColor: "#F9FAFB",
+    borderRadius: 16,
+    padding: 20,
+    gap: 14,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#111827",
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    backgroundColor: "#FFFFFF",
+    borderColor: "#E5E7EB",
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    height: 52,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: "#111827",
+  },
+  codeInput: {
+    backgroundColor: "#FFFFFF",
+    borderColor: "#E5E7EB",
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    height: 52,
+    fontSize: 16,
+    color: "#111827",
+  },
+  button: {
+    height: 52,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#111827",
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  helperText: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: "#4B5563",
+  },
+  boldText: {
+    fontWeight: "600",
+    color: "#111827",
+  },
+  secondaryButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 4,
+  },
+  secondaryButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#6B7280",
+  },
+  successRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  setupContainer: {
+    flex: 1,
+    backgroundColor: "#f5f5f5",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  setupCard: {
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 24,
+    maxWidth: 420,
+    width: "100%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  setupTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#333",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  setupText: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 12,
+    lineHeight: 22,
+    textAlign: "center",
+  },
+  setupStep: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: 16,
+    padding: 16,
+    backgroundColor: "#f8f9fa",
+    borderRadius: 8,
+    lineHeight: 20,
+  },
+});
+`;
+}