create-stackr 0.2.0

package/templates/features/mobile/auth/components/auth/RegisterForm.tsx.ejs

@@ -0,0 +1,407 @@
+<% const hasOAuth = features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github; %>
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Alert,
+<% if (hasOAuth) { %>
+  TouchableOpacity,
+<% } %>
+} from 'react-native';
+import { Button, Input } from '../ui';
+import { useAuth } from '../../hooks';
+import { isValidEmail } from '../../utils/formatters';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+
+interface RegisterFormProps {
+  onSuccess?: () => void;
+  onSwitchToLogin?: () => void;
+}
+
+interface FormData {
+  name: string;
+  email: string;
+  password: string;
+  passwordConfirmation: string;
+}
+
+interface FormErrors {
+  name?: string;
+  email?: string;
+  password?: string;
+  passwordConfirmation?: string;
+}
+
+export const RegisterForm: React.FC<RegisterFormProps> = ({
+  onSuccess,
+  onSwitchToLogin,
+}) => {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    email: '',
+    password: '',
+    passwordConfirmation: '',
+  });
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  const {
+    signUp,
+    isLoading,
+    clearError,
+<% if (features.authentication.providers.google) { %>
+    signInWithGoogle,
+<% } %>
+<% if (features.authentication.providers.apple) { %>
+    signInWithApple,
+<% } %>
+<% if (features.authentication.providers.github) { %>
+    signInWithGitHub,
+<% } %>
+  } = useAuth();
+
+  // Clear auth error on unmount
+  useEffect(() => {
+    return () => clearError();
+  }, [clearError]);
+
+  const updateField = (field: keyof FormData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    // Name validation
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    } else if (formData.name.trim().length < 2) {
+      newErrors.name = 'Name must be at least 2 characters';
+    }
+
+    // Email validation
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required';
+    } else if (!isValidEmail(formData.email.trim())) {
+      newErrors.email = 'Please enter a valid email';
+    }
+
+    // Password validation
+    if (!formData.password) {
+      newErrors.password = 'Password is required';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    // Password confirmation validation
+    if (!formData.passwordConfirmation) {
+      newErrors.passwordConfirmation = 'Password confirmation is required';
+    } else if (formData.password !== formData.passwordConfirmation) {
+      newErrors.passwordConfirmation = 'Passwords do not match';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validateForm()) return;
+
+    const result = await signUp({
+      name: formData.name.trim(),
+      email: formData.email.trim().toLowerCase(),
+      password: formData.password,
+    });
+
+    if (result.success) {
+      onSuccess?.();
+    } else {
+      // Show server error via Alert
+      Alert.alert('Registration Failed', result.error || 'Please try again.');
+    }
+  };
+<% if (features.authentication.providers.google) { %>
+
+  const handleGoogleSignIn = async () => {
+    const result = await signInWithGoogle();
+    // Don't call onSuccess here - browser OAuth completes asynchronously
+    // via deep link callback. The parent screen watches isAuthenticated
+    // state and will navigate when the session is established.
+    if (result.error && result.error !== 'Sign in cancelled') {
+      Alert.alert('Sign In Failed', result.error);
+    }
+  };
+<% } %>
+<% if (features.authentication.providers.apple) { %>
+
+  const handleAppleSignIn = async () => {
+    const result = await signInWithApple();
+    // Don't call onSuccess here - browser OAuth completes asynchronously
+    if (result.error && result.error !== 'Sign in cancelled') {
+      Alert.alert('Sign In Failed', result.error);
+    }
+  };
+<% } %>
+<% if (features.authentication.providers.github) { %>
+
+  const handleGitHubSignIn = async () => {
+    const result = await signInWithGitHub();
+    // Don't call onSuccess here - browser OAuth completes asynchronously
+    if (result.error && result.error !== 'Sign in cancelled') {
+      Alert.alert('Sign In Failed', result.error);
+    }
+  };
+<% } %>
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.form}>
+          <Text style={styles.title}>Create Account</Text>
+          <Text style={styles.subtitle}>Sign up to get started</Text>
+
+          <Input
+            label="Full Name"
+            value={formData.name}
+            onChangeText={(text) => updateField('name', text)}
+            placeholder="Enter your full name"
+            autoCapitalize="words"
+            autoComplete="name"
+            error={errors.name}
+            containerStyle={styles.inputContainer}
+          />
+
+          <Input
+            label="Email"
+            value={formData.email}
+            onChangeText={(text) => updateField('email', text)}
+            placeholder="Enter your email"
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoComplete="email"
+            error={errors.email}
+            containerStyle={styles.inputContainer}
+          />
+
+          <Input
+            label="Password"
+            value={formData.password}
+            onChangeText={(text) => updateField('password', text)}
+            placeholder="Create a password"
+            secureTextEntry
+            showPasswordToggle
+            autoComplete="password-new"
+            error={errors.password}
+            hint="Password must be at least 6 characters"
+            containerStyle={styles.inputContainer}
+          />
+
+          <Input
+            label="Confirm Password"
+            value={formData.passwordConfirmation}
+            onChangeText={(text) => updateField('passwordConfirmation', text)}
+            placeholder="Confirm your password"
+            secureTextEntry
+            showPasswordToggle
+            autoComplete="password-new"
+            error={errors.passwordConfirmation}
+            containerStyle={styles.inputContainer}
+          />
+
+          <Button
+            title="Create Account"
+            onPress={handleSubmit}
+            loading={isLoading}
+            disabled={isLoading}
+            style={styles.submitButton}
+          />
+<% if (hasOAuth) { %>
+
+          {/* OAuth Divider */}
+          <View style={styles.dividerContainer}>
+            <View style={styles.dividerLine} />
+            <Text style={styles.dividerText}>or continue with</Text>
+            <View style={styles.dividerLine} />
+          </View>
+
+          {/* OAuth Buttons */}
+          <View style={styles.oauthContainer}>
+<% if (features.authentication.providers.google) { %>
+            <TouchableOpacity
+              style={styles.oauthButton}
+              onPress={handleGoogleSignIn}
+              disabled={isLoading}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.oauthButtonText}>
+                <Text style={styles.googleIcon}>G</Text>{'  '}Google
+              </Text>
+            </TouchableOpacity>
+<% } %>
+<% if (features.authentication.providers.apple) { %>
+            <TouchableOpacity
+              style={styles.oauthButton}
+              onPress={handleAppleSignIn}
+              disabled={isLoading}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.oauthButtonText}>Apple</Text>
+            </TouchableOpacity>
+<% } %>
+<% if (features.authentication.providers.github) { %>
+            <TouchableOpacity
+              style={styles.oauthButton}
+              onPress={handleGitHubSignIn}
+              disabled={isLoading}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.oauthButtonText}>GitHub</Text>
+            </TouchableOpacity>
+<% } %>
+          </View>
+<% } %>
+
+          {onSwitchToLogin && (
+            <View style={styles.switchContainer}>
+              <Text style={styles.switchText}>
+                Already have an account?{' '}
+              </Text>
+              <Button
+                title="Sign In"
+                variant="ghost"
+                onPress={onSwitchToLogin}
+                style={styles.switchButton}
+                textStyle={styles.switchButtonText}
+              />
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: theme.spacing[5],
+  },
+
+  form: {
+    width: '100%',
+    maxWidth: 400,
+    alignSelf: 'center',
+  },
+
+  title: {
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: 'bold',
+    color: theme.colors.text,
+    textAlign: 'center',
+    marginBottom: theme.spacing[2],
+  },
+
+  subtitle: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    textAlign: 'center',
+    marginBottom: theme.spacing[8],
+  },
+
+  inputContainer: {
+    marginBottom: theme.spacing[5],
+  },
+
+  submitButton: {
+    marginTop: theme.spacing[2],
+    marginBottom: theme.spacing[6],
+  },
+<% if (hasOAuth) { %>
+
+  // Divider
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: theme.spacing[6],
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: theme.colors.border,
+  },
+  dividerText: {
+    marginHorizontal: theme.spacing[4],
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textSecondary,
+  },
+
+  // OAuth buttons - theme-aware (matches web app pattern)
+  oauthContainer: {
+    gap: theme.spacing[3],
+    marginBottom: theme.spacing[6],
+  },
+  oauthButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.border,
+  },
+  oauthButtonText: {
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: '600',
+    color: theme.colors.text,
+  },
+  googleIcon: {
+    color: theme.colors.primary,
+    fontWeight: '700',
+    fontSize: 18,
+  },
+<% } %>
+
+  switchContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  switchText: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+  },
+
+  switchButton: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    minHeight: 'auto' as unknown as number,
+  },
+
+  switchButtonText: {
+    fontSize: theme.typography.fontSize.base,
+  },
+});

package/templates/features/mobile/auth/components/auth/index.ts

@@ -0,0 +1,2 @@
+export * from './LoginForm';
+export * from './RegisterForm';

package/templates/features/mobile/auth/hooks/index.ts.ejs

@@ -0,0 +1 @@
+export * from './useAuth';