@digilogiclabs/create-saas-app 1.0.1

package/src/templates/mobile/ui-auth-payments/template/app/auth/login.tsx

@@ -0,0 +1,246 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { Link, router } from 'expo-router';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+// UI Components
+import {
+  NativeButton as Button,
+  NativeInput as Input, 
+  NativeCard as Card,
+  NativeAlert as Alert,
+  NativePageTransition as PageTransition,
+  NativeMobileContainer as MobileContainer,
+  NativeMobileHero as MobileHero
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Auth Hook
+import { useAuth } from '@digilogiclabs/saas-factory-auth/native';
+
+// Validation Schema
+const loginSchema = z.object({
+  email: z.string().email('Please enter a valid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters')
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export default function LoginScreen() {
+  const { signIn, loading } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
+  const { control, handleSubmit, formState: { errors, isValid } } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+      password: ''
+    }
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      setError(null);
+      await signIn(data.email, data.password);
+      router.replace('/(tabs)');
+    } catch (err: any) {
+      setError(err.message || 'Login failed. Please try again.');
+    }
+  };
+
+  return (
+    <PageTransition type="slide" direction="horizontal">
+      <KeyboardAvoidingView 
+        style={styles.container} 
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <ScrollView 
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+        >
+          <MobileContainer style={styles.content}>
+            {/* Header */}
+            <View style={styles.header}>
+              <Text style={styles.title}>Welcome Back</Text>
+              <Text style={styles.subtitle}>Sign in to continue to {{titleCaseName}}</Text>
+            </View>
+
+            {/* Login Form */}
+            <Card style={styles.card}>
+              <View style={styles.form}>
+                {/* Email Input */}
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Email</Text>
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        placeholder="Enter your email"
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        keyboardType="email-address"
+                        autoCapitalize="none"
+                        autoComplete="email"
+                        textContentType="emailAddress"
+                        error={!!errors.email}
+                        style={styles.input}
+                      />
+                    )}
+                  />
+                  {errors.email && (
+                    <Text style={styles.errorText}>{errors.email.message}</Text>
+                  )}
+                </View>
+
+                {/* Password Input */}
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Password</Text>
+                  <Controller
+                    control={control}
+                    name="password"
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        placeholder="Enter your password"
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        secureTextEntry
+                        autoCapitalize="none"
+                        autoComplete="password"
+                        textContentType="password"
+                        error={!!errors.password}
+                        style={styles.input}
+                      />
+                    )}
+                  />
+                  {errors.password && (
+                    <Text style={styles.errorText}>{errors.password.message}</Text>
+                  )}
+                </View>
+
+                {/* Error Message */}
+                {error && (
+                  <Alert 
+                    type="error" 
+                    message={error} 
+                    style={styles.alert}
+                  />
+                )}
+
+                {/* Login Button */}
+                <Button
+                  onPress={handleSubmit(onSubmit)}
+                  disabled={!isValid || loading}
+                  loading={loading}
+                  style={styles.loginButton}
+                >
+                  Sign In
+                </Button>
+
+                {/* Forgot Password */}
+                <Link href="/auth/forgot-password" asChild>
+                  <Button variant="ghost" style={styles.forgotButton}>
+                    Forgot Password?
+                  </Button>
+                </Link>
+              </View>
+            </Card>
+
+            {/* Sign Up Link */}
+            <View style={styles.footer}>
+              <Text style={styles.footerText}>Don't have an account?</Text>
+              <Link href="/auth/signup" asChild>
+                <Button variant="link" style={styles.signupLink}>
+                  Sign Up
+                </Button>
+              </Link>
+            </View>
+          </MobileContainer>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingVertical: 40,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#1e293b',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#64748b',
+    textAlign: 'center',
+  },
+  card: {
+    padding: 24,
+    marginBottom: 24,
+  },
+  form: {
+    gap: 20,
+  },
+  inputGroup: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#374151',
+  },
+  input: {
+    fontSize: 16,
+  },
+  errorText: {
+    fontSize: 14,
+    color: '#ef4444',
+  },
+  alert: {
+    marginVertical: 8,
+  },
+  loginButton: {
+    marginTop: 8,
+  },
+  forgotButton: {
+    alignSelf: 'center',
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 8,
+  },
+  footerText: {
+    fontSize: 16,
+    color: '#64748b',
+  },
+  signupLink: {
+    padding: 0,
+  },
+});

package/src/templates/mobile/ui-auth-payments/template/app/auth/signup.tsx

@@ -0,0 +1,362 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { Link, router } from 'expo-router';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+// UI Components
+import {
+  NativeButton as Button,
+  NativeInput as Input,
+  NativeCard as Card,
+  NativeAlert as Alert,
+  NativePageTransition as PageTransition,
+  NativeMobileContainer as MobileContainer,
+  NativeCheckbox as Checkbox
+} from '@digilogiclabs/saas-factory-ui/native';
+
+// Auth Hook
+import { useAuth } from '@digilogiclabs/saas-factory-auth/native';
+
+// Validation Schema
+const signupSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Please enter a valid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  confirmPassword: z.string(),
+  agreeToTerms: z.boolean().refine(val => val === true, {
+    message: 'You must agree to the terms and conditions'
+  })
+}).refine(data => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"]
+});
+
+type SignupFormData = z.infer<typeof signupSchema>;
+
+export default function SignupScreen() {
+  const { signUp, loading } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const { control, handleSubmit, formState: { errors, isValid } } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      agreeToTerms: false
+    }
+  });
+
+  const onSubmit = async (data: SignupFormData) => {
+    try {
+      setError(null);
+      setSuccess(null);
+      
+      await signUp(data.email, data.password, {
+        name: data.name
+      });
+      
+      setSuccess('Account created successfully! Please check your email to verify your account.');
+      
+      // Navigate to login after a short delay
+      setTimeout(() => {
+        router.replace('/auth/login');
+      }, 3000);
+      
+    } catch (err: any) {
+      setError(err.message || 'Signup failed. Please try again.');
+    }
+  };
+
+  return (
+    <PageTransition type="slide" direction="horizontal">
+      <KeyboardAvoidingView 
+        style={styles.container} 
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <ScrollView 
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View style={styles.content}>
+            {/* Header */}
+            <View style={styles.header}>
+              <Text style={styles.title}>Create Account</Text>
+              <Text style={styles.subtitle}>Join {{titleCaseName}} today</Text>
+            </View>
+
+            {/* Signup Form */}
+            <Card style={styles.card}>
+              <View style={styles.form}>
+                {/* Name Input */}
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Full Name</Text>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        placeholder="Enter your full name"
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        autoCapitalize="words"
+                        autoComplete="name"
+                        textContentType="name"
+                        error={!!errors.name}
+                        style={styles.input}
+                      />
+                    )}
+                  />
+                  {errors.name && (
+                    <Text style={styles.errorText}>{errors.name.message}</Text>
+                  )}
+                </View>
+
+                {/* Email Input */}
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Email</Text>
+                  <Controller
+                    control={control}
+                    name="email"
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        placeholder="Enter your email"
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        keyboardType="email-address"
+                        autoCapitalize="none"
+                        autoComplete="email"
+                        textContentType="emailAddress"
+                        error={!!errors.email}
+                        style={styles.input}
+                      />
+                    )}
+                  />
+                  {errors.email && (
+                    <Text style={styles.errorText}>{errors.email.message}</Text>
+                  )}
+                </View>
+
+                {/* Password Input */}
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Password</Text>
+                  <Controller
+                    control={control}
+                    name="password"
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        placeholder="Create a password"
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        secureTextEntry
+                        autoCapitalize="none"
+                        autoComplete="password-new"
+                        textContentType="newPassword"
+                        error={!!errors.password}
+                        style={styles.input}
+                      />
+                    )}
+                  />
+                  {errors.password && (
+                    <Text style={styles.errorText}>{errors.password.message}</Text>
+                  )}
+                </View>
+
+                {/* Confirm Password Input */}
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Confirm Password</Text>
+                  <Controller
+                    control={control}
+                    name="confirmPassword"
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        placeholder="Confirm your password"
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        secureTextEntry
+                        autoCapitalize="none"
+                        autoComplete="password-new"
+                        textContentType="newPassword"
+                        error={!!errors.confirmPassword}
+                        style={styles.input}
+                      />
+                    )}
+                  />
+                  {errors.confirmPassword && (
+                    <Text style={styles.errorText}>{errors.confirmPassword.message}</Text>
+                  )}
+                </View>
+
+                {/* Terms Agreement */}
+                <View style={styles.checkboxContainer}>
+                  <Controller
+                    control={control}
+                    name="agreeToTerms"
+                    render={({ field: { onChange, value } }) => (
+                      <Checkbox
+                        value={value}
+                        onValueChange={onChange}
+                        error={!!errors.agreeToTerms}
+                      />
+                    )}
+                  />
+                  <View style={styles.checkboxTextContainer}>
+                    <Text style={styles.checkboxText}>
+                      I agree to the{' '}
+                      <Text style={styles.linkText}>Terms of Service</Text>
+                      {' '}and{' '}
+                      <Text style={styles.linkText}>Privacy Policy</Text>
+                    </Text>
+                    {errors.agreeToTerms && (
+                      <Text style={styles.errorText}>{errors.agreeToTerms.message}</Text>
+                    )}
+                  </View>
+                </View>
+
+                {/* Error/Success Messages */}
+                {error && (
+                  <Alert 
+                    type="error" 
+                    message={error} 
+                    style={styles.alert}
+                  />
+                )}
+
+                {success && (
+                  <Alert 
+                    type="success" 
+                    message={success} 
+                    style={styles.alert}
+                  />
+                )}
+
+                {/* Signup Button */}
+                <Button
+                  onPress={handleSubmit(onSubmit)}
+                  disabled={!isValid || loading}
+                  loading={loading}
+                  style={styles.signupButton}
+                >
+                  Create Account
+                </Button>
+              </View>
+            </Card>
+
+            {/* Login Link */}
+            <View style={styles.footer}>
+              <Text style={styles.footerText}>Already have an account?</Text>
+              <Link href="/auth/login" asChild>
+                <Button variant="link" style={styles.loginLink}>
+                  Sign In
+                </Button>
+              </Link>
+            </View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </PageTransition>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingVertical: 40,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#1e293b',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#64748b',
+    textAlign: 'center',
+  },
+  card: {
+    padding: 24,
+    marginBottom: 24,
+  },
+  form: {
+    gap: 20,
+  },
+  inputGroup: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#374151',
+  },
+  input: {
+    fontSize: 16,
+  },
+  errorText: {
+    fontSize: 14,
+    color: '#ef4444',
+  },
+  checkboxContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+  },
+  checkboxTextContainer: {
+    flex: 1,
+    gap: 4,
+  },
+  checkboxText: {
+    fontSize: 14,
+    color: '#64748b',
+    lineHeight: 20,
+  },
+  linkText: {
+    color: '#3b82f6',
+    textDecorationLine: 'underline',
+  },
+  alert: {
+    marginVertical: 8,
+  },
+  signupButton: {
+    marginTop: 8,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 8,
+  },
+  footerText: {
+    fontSize: 16,
+    color: '#64748b',
+  },
+  loginLink: {
+    padding: 0,
+  },
+});