refactor: temporarily remove withI18n from GoogleLoginButton for debugging and enhance error handling in LoginComponent

src/components/GoogleLoginButton.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Button from '@mui/material/Button';
 import GoogleIcon from '@mui/icons-material/Google';
 import GoogleAuthContext from '../contexts/GoogleAuthContext.js';
-import { withI18n } from '../i18n/index.js';
+// import { withI18n } from '../i18n/withTranslation.js'; // Temporarily commented out for debugging
 
 class GoogleLoginButton extends Component {
   static contextType = GoogleAuthContext;
@@ -191,13 +191,16 @@ class GoogleLoginButton extends Component {
     const { isInitializing, isPrompting } = this.state;
     const isLoading = isInitializing || isPrompting || (this.context && !this.context.isLoaded);
 
+
+
     return (
       <Button
         variant="contained"
         startIcon={<GoogleIcon />}
         onClick={this.handleClick}
         disabled={disabled || isLoading}
-        style={{ backgroundColor: '#4285F4', color: 'white', ...style }}
+        fullWidth
+        style={{backgroundColor: '#4285F4', color: 'white', ...style }}
         className={className}
       >
         {isLoading ? 'Loading...' : text}
@@ -206,4 +209,4 @@ class GoogleLoginButton extends Component {
   }
 }
 
-export default withI18n(GoogleLoginButton); 
+export default GoogleLoginButton; // Temporarily removed withI18n for debugging 

src/components/LoginComponent.js

@@ -277,9 +277,17 @@ export class LoginComponent extends Component {
           tabValue: 0 // Switch to login tab
         });
       } else {
+        let errorMessage = 'Registrierung fehlgeschlagen';
+        
+        if (response.cause === 'emailExists') {
+          errorMessage = 'Ein Benutzer mit dieser E-Mail-Adresse existiert bereits. Bitte verwenden Sie eine andere E-Mail-Adresse oder melden Sie sich an.';
+        } else if (response.message) {
+          errorMessage = response.message;
+        }
+        
         this.setState({
           loading: false,
-          error: response.message || 'Registrierung fehlgeschlagen'
+          error: errorMessage
         });
       }
     });
@@ -606,25 +614,27 @@ export class LoginComponent extends Component {
               )}
               
               {showGoogleAuth && (
-                <Suspense fallback={
-                  <Button
-                    variant="contained"
-                    startIcon={<PersonIcon />}
-                    sx={{ width: '100%', backgroundColor: '#4285F4', color: 'white' }}
-                  >
-                    Mit Google anmelden
-                  </Button>
-                }>
-                  <GoogleAuthProvider clientId={config.googleClientId}>
-                    <GoogleLoginButton
-                      onSuccess={this.handleGoogleLoginSuccess}
-                      onError={this.handleGoogleLoginError}
-                      text="Mit Google anmelden"
-                      style={{ width: '100%', backgroundColor: '#4285F4' }}
-                      autoInitiate={true}
-                    />
-                  </GoogleAuthProvider>
-                </Suspense>
+                <div>
+                  <Suspense fallback={
+                    <Button
+                      variant="contained"
+                      startIcon={<PersonIcon />}
+                      sx={{ width: '100%', backgroundColor: '#4285F4', color: 'white' }}
+                    >
+                      Mit Google anmelden
+                    </Button>
+                  }>
+                    <GoogleAuthProvider clientId={config.googleClientId}>
+                      <GoogleLoginButton
+                        onSuccess={this.handleGoogleLoginSuccess}
+                        onError={this.handleGoogleLoginError}
+                        text="Mit Google anmelden"
+                        style={{ width: '100%', backgroundColor: '#4285F4' }}
+                        autoInitiate={true}
+                      />
+                    </GoogleAuthProvider>
+                  </Suspense>
+                </div>
               )}
             </Box>