vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,369 +0,0 @@
-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

@@ -1,247 +0,0 @@
-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>
-    </>
-  );
-}