vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/app/(root)/(public)/(auth)/otp-verification.tsx

@@ -0,0 +1,369 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  Button,
+  FocusAwareStatusBar,
+  InputOTP,
+  Text,
+  View,
+} from '@/components/ui';
+import { defaultCacheService } from '@/core/cache';
+import { error as logError, info } from '@/core/logging';
+import { useConvexAuth } from '@/features/authentication/services';
+import { translate } from '@/lib';
+
+type SignupData = {
+  password: string;
+  name?: string;
+  expiresAt: number;
+};
+
+export default function OtpVerification() {
+  const router = useRouter();
+  const { email, password, name, tempKey } = useLocalSearchParams<{
+    email: string;
+    password?: string;
+    name?: string;
+    tempKey?: string;
+  }>();
+  const { verifyOtp, resendOtp, isAuthenticated } = useConvexAuth();
+  const [signupData, setSignupData] = useState<SignupData | null>(null);
+
+  const [otp, setOtp] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isResending, setIsResending] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [resendCooldown, setResendCooldown] = useState(60);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const autoSubmitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  const translations = useMemo(
+    () => ({
+      title: translate('auth.otp_verification.title'),
+      emailSentTo: translate('auth.otp_verification.email_sent_to'),
+      verifyCode: translate('auth.otp_verification.verify_code'),
+      resendCode: translate('auth.otp_verification.resend_code'),
+      resendCodeTimer: (seconds: number) =>
+        translate('auth.otp_verification.resend_code_timer', { seconds }),
+      backToLogin: translate('auth.otp_verification.back_to_login'),
+      goBack: translate('auth.otp_verification.go_back'),
+      emailMissing: translate('auth.otp_verification.email_missing'),
+      codeRequired: translate('auth.otp_verification.code_required'),
+      codeLengthError: translate('auth.otp_verification.code_length_error'),
+      codeNumericError: translate('auth.otp_verification.code_numeric_error'),
+      invalidCode: translate('auth.otp_verification.invalid_code'),
+      verifyFailed: translate('auth.otp_verification.verify_failed'),
+      resendFailed: translate('auth.otp_verification.resend_failed'),
+    }),
+    [],
+  );
+
+  // Load signup data from secure storage if tempKey is provided
+  useEffect(() => {
+    const loadSignupData = async () => {
+      if (tempKey) {
+        try {
+          const data = await defaultCacheService.getItem<SignupData>(tempKey);
+          if (data && data.expiresAt > Date.now()) {
+            setSignupData(data);
+            // Clean up immediately after reading to minimize exposure
+            await defaultCacheService.removeItem(tempKey);
+          } else if (data) {
+            // Expired, clean up
+            await defaultCacheService.removeItem(tempKey);
+          }
+        } catch (error) {
+          logError('Failed to load signup data', {
+            feature: 'auth.otp_verification',
+            error: error instanceof Error ? error.message : 'Unknown error',
+          });
+        }
+      }
+    };
+    loadSignupData();
+  }, [tempKey]);
+
+  // Redirect to home if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace('/(protected)/(tabs)');
+    }
+  }, [isAuthenticated, router]);
+
+  // Resend cooldown timer with improved cleanup
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      timerRef.current = setTimeout(() => {
+        setResendCooldown((prev) => prev - 1);
+      }, 1000);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [resendCooldown]);
+
+  // Cleanup all timers on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (autoSubmitTimeoutRef.current)
+        clearTimeout(autoSubmitTimeoutRef.current);
+    };
+  }, []);
+
+  const handleVerifyOtp = useCallback(async () => {
+    info('handleVerifyOtp called', {
+      feature: 'auth.otp_verification',
+      email,
+      otpLength: otp?.length,
+    });
+    if (!email) {
+      setErrorMessage(translations.emailMissing);
+      return;
+    }
+
+    if (!otp.trim()) {
+      setErrorMessage(translations.codeRequired);
+      return;
+    }
+
+    if (otp.length !== 6) {
+      setErrorMessage(translations.codeLengthError);
+      return;
+    }
+
+    // Add numeric validation
+    if (!/^\d+$/.test(otp)) {
+      setErrorMessage(translations.codeNumericError);
+      return;
+    }
+
+    setIsLoading(true);
+    setErrorMessage(null);
+
+    // Use password from secure storage if available, otherwise fallback to URL param (backward compatibility)
+    const passwordToUse = signupData?.password || password;
+    const nameToUse = signupData?.name || name;
+
+    if (!passwordToUse) {
+      setErrorMessage(translations.verifyFailed);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const result = await verifyOtp({
+        email,
+        otp: otp.trim(),
+        password: passwordToUse,
+        name: nameToUse,
+      });
+
+      if (result.success) {
+        // Navigate to the main app
+        router.replace('/(protected)/(tabs)');
+      } else {
+        setErrorMessage(result.error || translations.invalidCode);
+      }
+    } catch (err) {
+      logError('OTP verification failed', {
+        feature: 'auth.otp_verification',
+        error: err instanceof Error ? err.message : 'Unknown error',
+        email,
+      });
+      setErrorMessage(translations.verifyFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [email, otp, signupData, password, name, verifyOtp, translations, router]);
+
+  const handleResendOtp = useCallback(async () => {
+    if (!email) {
+      setErrorMessage(translations.emailMissing);
+      return;
+    }
+
+    setIsResending(true);
+    setErrorMessage(null);
+
+    try {
+      const result = await resendOtp(email);
+
+      if (result.success) {
+        setResendCooldown(60); // 60 second cooldown
+        setErrorMessage(null);
+      } else {
+        setErrorMessage(result.error || translations.resendFailed);
+      }
+    } catch (err) {
+      logError('OTP resend failed', {
+        feature: 'auth.otp_verification',
+        error: err instanceof Error ? err.message : 'Unknown error',
+        email,
+      });
+      setErrorMessage(translations.resendFailed);
+    } finally {
+      setIsResending(false);
+    }
+  }, [email, resendOtp, translations]);
+
+  const handleOtpChange = useCallback((value: string) => {
+    // Clear existing debounce timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Debounce the input changes
+    debounceTimerRef.current = setTimeout(() => {
+      setOtp(value);
+      setErrorMessage(null);
+    }, 150);
+  }, []);
+
+  const handleOtpComplete = useCallback(
+    (value: string) => {
+      // Clear any pending auto-submit timeout
+      if (autoSubmitTimeoutRef.current) {
+        clearTimeout(autoSubmitTimeoutRef.current);
+      }
+
+      setOtp(value);
+      setErrorMessage(null);
+
+      // Auto-verify when OTP is complete with a small delay for better UX
+      if (value.length === 6) {
+        autoSubmitTimeoutRef.current = setTimeout(() => {
+          handleVerifyOtp();
+        }, 300);
+      }
+    },
+    [handleVerifyOtp],
+  );
+
+  if (!email) {
+    return (
+      <>
+        <FocusAwareStatusBar />
+        <View className="flex-1 justify-center p-4">
+          <View className="items-center justify-center">
+            <Text
+              className="text-center text-lg text-red-500"
+              accessibilityRole="alert"
+              accessibilityLiveRegion="polite"
+            >
+              {translations.emailMissing}
+            </Text>
+            <Button
+              className="mt-4"
+              onPress={() => router.replace('/login')}
+              label={translations.goBack}
+              variant="outline"
+              accessible={true}
+              accessibilityLabel="Go back to login"
+            />
+          </View>
+        </View>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <View className="flex-1 justify-center p-4">
+        <View className="items-center justify-center">
+          <Text
+            testID="otp-title"
+            className="pb-6 text-center text-4xl font-bold"
+            accessible={true}
+            accessibilityRole="header"
+          >
+            {translations.title}
+          </Text>
+
+          <Text className="mb-2 text-center text-neutral-600">
+            {translations.emailSentTo}
+          </Text>
+          <Text
+            className="mb-6 text-center font-semibold text-blue-600"
+            accessible={true}
+            accessibilityLabel={`Email address: ${email}`}
+          >
+            {email}
+          </Text>
+
+          <View className="w-full max-w-sm">
+            <InputOTP
+              testID="otp-input"
+              length={6}
+              value={otp}
+              onChangeText={handleOtpChange}
+              onComplete={handleOtpComplete}
+              error={errorMessage}
+              autoFocus
+              containerStyle={{ marginBottom: 16 }}
+              accessible={true}
+              accessibilityLabel="Enter 6-digit verification code"
+              accessibilityHint="Input the 6-digit code sent to your email address"
+            />
+
+            <Button
+              testID="verify-otp-button"
+              onPress={handleVerifyOtp}
+              loading={isLoading}
+              disabled={isLoading || otp.length !== 6 || isResending}
+              label={translations.verifyCode}
+              className="mb-4"
+              accessible={true}
+              accessibilityLabel="Verify the entered OTP code"
+              accessibilityHint="Submits the 6-digit verification code"
+            />
+
+            <Button
+              testID="resend-otp-button"
+              onPress={handleResendOtp}
+              loading={isResending}
+              disabled={isResending || resendCooldown > 0}
+              variant="outline"
+              label={
+                resendCooldown > 0
+                  ? translations.resendCodeTimer(resendCooldown)
+                  : translations.resendCode
+              }
+              className="mb-4"
+              accessible={true}
+              accessibilityLabel={
+                resendCooldown > 0
+                  ? `Resend code in ${resendCooldown} seconds`
+                  : 'Resend verification code'
+              }
+            />
+
+            <Button
+              testID="back-to-login"
+              onPress={() => router.replace('/login')}
+              variant="ghost"
+              label={translations.backToLogin}
+              accessible={true}
+              accessibilityLabel="Return to login screen"
+            />
+          </View>
+        </View>
+      </View>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(public)/(auth)/reset-password.tsx

@@ -0,0 +1,247 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { api } from '@vibefast/backend/_generated/api';
+import { useQuery } from 'convex/react';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { type Control, useForm } from 'react-hook-form';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+import * as z from 'zod';
+
+import {
+  ActivityIndicator,
+  Button,
+  ControlledInput,
+  FocusAwareStatusBar,
+  handleError,
+  Text,
+  View,
+} from '@/components/ui';
+import { useToast } from '@/components/ui/utils';
+import { useConvexAuth } from '@/features/authentication/services';
+import { translate } from '@/lib';
+
+const resetPasswordSchema = z
+  .object({
+    password: z
+      .string({
+        required_error: translate('auth.validation.new_password_required'),
+      })
+      .min(8, translate('auth.validation.password_min_length')),
+    confirmPassword: z.string({
+      required_error: translate('auth.validation.confirm_password_required'),
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: translate('auth.validation.passwords_no_match'),
+    path: ['confirmPassword'],
+  });
+
+type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+
+const ResetPasswordHeader = () => (
+  <View className="mb-8 items-center justify-center">
+    <Text
+      testID="reset-password-title"
+      className="pb-6 text-center text-4xl font-bold"
+    >
+      {translate('auth.reset_password.title')}
+    </Text>
+    <Text className="mb-6 max-w-xs text-center text-neutral-500">
+      Enter your new password below.
+    </Text>
+  </View>
+);
+
+const ResetPasswordForm = ({
+  control,
+  onSubmit,
+  isLoading,
+}: {
+  control: Control<ResetPasswordFormData>;
+  onSubmit: () => void;
+  isLoading: boolean;
+}) => (
+  <>
+    <ControlledInput
+      testID="new-password-input"
+      control={control}
+      name="password"
+      label={translate('auth.reset_password.new_password')}
+      placeholder={translate('auth.reset_password.new_password_placeholder')}
+      secureTextEntry={true}
+    />
+
+    <ControlledInput
+      testID="confirm-password-input"
+      control={control}
+      name="confirmPassword"
+      label={translate('auth.reset_password.confirm_new_password')}
+      placeholder={translate(
+        'auth.reset_password.confirm_password_placeholder',
+      )}
+      secureTextEntry={true}
+    />
+
+    <Button
+      testID="reset-password-button"
+      label={translate('auth.reset_password.reset_password_button')}
+      onPress={onSubmit}
+      loading={isLoading}
+      disabled={isLoading}
+    />
+  </>
+);
+
+const TokenVerificationError = ({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) => (
+  <View className="flex-1 justify-center p-4">
+    <View className="items-center justify-center">
+      <Text
+        testID="error-title"
+        className="pb-6 text-center text-4xl font-bold text-red-600"
+      >
+        {translate('auth.reset_password.invalid_token')}
+      </Text>
+      <Text className="mb-6 max-w-xs text-center text-neutral-500">
+        {message}
+      </Text>
+      <Text className="mb-8 max-w-xs text-center text-neutral-500">
+        Please request a new password reset link.
+      </Text>
+
+      <View className="w-full gap-y-4">
+        <Button
+          testID="go-to-forgot-password"
+          label={translate('auth.reset_password.request_new_link')}
+          onPress={onRetry}
+        />
+      </View>
+    </View>
+  </View>
+);
+
+export default function ResetPassword() {
+  const router = useRouter();
+  const { resetPassword } = useConvexAuth();
+  const { token } = useLocalSearchParams<{ token: string }>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [tokenError, setTokenError] = useState<string | null>(null);
+  const toast = useToast();
+
+  // Verify the token on load
+  const tokenVerification = useQuery(
+    api.authPasswordReset.verifyPasswordResetToken,
+    token ? { token } : 'skip',
+  );
+
+  const { handleSubmit, control } = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(resetPasswordSchema),
+  });
+
+  useEffect(() => {
+    if (tokenVerification !== undefined) {
+      if (!tokenVerification.valid) {
+        setTokenError(
+          tokenVerification.error ||
+            translate('auth.reset_password.invalid_token'),
+        );
+      } else {
+        setTokenError(null);
+      }
+    }
+  }, [tokenVerification]);
+
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    if (!token) {
+      toast.error('No reset token found. Please use the link from your email.');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const result = await resetPassword({
+        token,
+        newPassword: data.password,
+      });
+
+      if (result.success) {
+        toast.success(translate('auth.reset_password.password_reset_success'), {
+          duration: 6000,
+        });
+        router.replace('/login');
+      } else {
+        handleError(result.error, {
+          feature: 'auth.reset_password',
+          fallbackMessage: translate(
+            'auth.reset_password.password_reset_failed',
+          ),
+        });
+      }
+    } catch (error) {
+      handleError(error, {
+        feature: 'auth.reset_password',
+        fallbackMessage: translate('auth.reset_password.password_reset_failed'),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRetry = () => {
+    router.replace('/forgot-password');
+  };
+
+  // Show loading state while verifying token
+  if (tokenVerification === undefined) {
+    return (
+      <>
+        <FocusAwareStatusBar />
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" />
+          <Text className="mt-4 text-center text-neutral-600">
+            {translate('common.loading')}...
+          </Text>
+        </View>
+      </>
+    );
+  }
+
+  // Show error if token is invalid
+  if (tokenError) {
+    return (
+      <>
+        <FocusAwareStatusBar />
+        <TokenVerificationError message={tokenError} onRetry={handleRetry} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <KeyboardAwareScrollView
+        style={{ flex: 1 }}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{
+          flexGrow: 1,
+          justifyContent: 'center',
+          padding: 16,
+        }}
+      >
+        <View className="flex-1 justify-center p-4">
+          <ResetPasswordHeader />
+          <ResetPasswordForm
+            control={control}
+            onSubmit={handleSubmit(onSubmit)}
+            isLoading={isLoading}
+          />
+        </View>
+      </KeyboardAwareScrollView>
+    </>
+  );
+}