Add Google sign-in functionality to Login and Register pages, including error handling and UI updates for better user experience.

app/register/page.tsx

@@ -12,44 +12,44 @@ export default function RegisterPage() {
   const [isLoading, setIsLoading] = useState(false);
   const { signUp, signInWithGoogle } = useAuth();
 
-  // 处理注册表单提交
+  // Handle registration form submission
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     
-    // 验证密码
+    // Validate passwords
     if (password !== confirmPassword) {
-      setError('两次输入的密码不一致');
+      setError('Passwords do not match');
       return;
     }
     
-    // 密码强度验证
+    // Password strength validation
     if (password.length < 6) {
-      setError('密码长度至少为6个字符');
+      setError('Password must be at least 6 characters');
       return;
     }
     
     setIsLoading(true);
     try {
       await signUp(email, password);
-      // 注册成功后会跳转到登录页面，提示用户验证邮箱
+      // After successful registration, redirect to login page with email verification prompt
     } catch (error) {
       console.error('Registration error:', error);
-      setError('注册失败，请稍后再试或使用其他邮箱');
+      setError('Registration failed. Please try again later or use a different email');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // 处理Google注册/登录
+  // Handle Google registration/login
   const handleGoogleSignIn = async () => {
     setError(null);
     try {
       await signInWithGoogle();
-      // 登录流程会重定向到Google，然后回到应用
+      // Login flow will redirect to Google and then back to the application
     } catch (error) {
       console.error('Google sign in error:', error);
-      setError('Google登录失败，请稍后再试');
+      setError('Google login failed. Please try again later');
     }
   };
 
@@ -57,13 +57,13 @@ export default function RegisterPage() {
     <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
       <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-gray-800 rounded-lg shadow-md">
         <div className="text-center">
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">注册</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Register</h1>
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-            创建您的帐户以访问分析仪表板
+            Create your account to access the analytics dashboard
           </p>
         </div>
 
-        {/* 错误提示 */}
+        {/* Error message */}
         {error && (
           <div className="p-4 mb-4 text-sm text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-200 rounded-lg">
             {error}
@@ -74,7 +74,7 @@ export default function RegisterPage() {
           <div className="space-y-4">
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                邮箱地址
+                Email Address
               </label>
               <input
                 id="email"
@@ -90,7 +90,7 @@ export default function RegisterPage() {
             </div>
             <div>
               <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                密码
+                Password
               </label>
               <input
                 id="password"
@@ -106,7 +106,7 @@ export default function RegisterPage() {
             </div>
             <div>
               <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                确认密码
+                Confirm Password
               </label>
               <input
                 id="confirmPassword"
@@ -128,7 +128,7 @@ export default function RegisterPage() {
               disabled={isLoading}
               className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {isLoading ? '注册中...' : '注册'}
+              {isLoading ? 'Registering...' : 'Register'}
             </button>
           </div>
 
@@ -137,7 +137,7 @@ export default function RegisterPage() {
               <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
             </div>
             <div className="relative flex justify-center text-sm">
-              <span className="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">或</span>
+              <span className="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">or</span>
             </div>
           </div>
 
@@ -173,19 +173,19 @@ export default function RegisterPage() {
                   />
                 </g>
               </svg>
-              使用Google账号注册
+              Sign up with Google
             </button>
           </div>
         </form>
 
         <div className="mt-6 text-center">
           <p className="text-sm text-gray-600 dark:text-gray-400">
-            已有账号？{' '}
+            Already have an account?{' '}
             <Link
               href="/login"
               className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
             >
-              登录
+              Log in
             </Link>
           </p>
         </div>