feat(auth): Convert login system to use email as username

- Backend login now accepts 'email' field (with backward compatibility)
- User creation (signup, invitation, customer) uses email as username
- Frontend login form updated with email input and validation
- Updated test users to use email addresses as usernames
- Updated all translation files (en, es, fr, de)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/api/auth.ts

@@ -5,7 +5,7 @@
 import apiClient from './client';
 
 export interface LoginCredentials {
-  username: string;
+  email: string;
   password: string;
 }
 

frontend/src/components/DevQuickLogin.tsx

@@ -5,7 +5,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { getBaseDomain, buildSubdomainUrl } from '../utils/domain';
 
 export interface TestUser {
-  username: string;
+  email: string;
   password: string;
   role: string;
   label: string;
@@ -14,56 +14,56 @@ export interface TestUser {
 
 const testUsers: TestUser[] = [
   {
-    username: 'superuser',
+    email: 'superuser@platform.com',
     password: 'test123',
     role: 'SUPERUSER',
     label: 'Platform Superuser',
     color: 'bg-purple-600 hover:bg-purple-700',
   },
   {
-    username: 'platform_manager',
+    email: 'manager@platform.com',
     password: 'test123',
     role: 'PLATFORM_MANAGER',
     label: 'Platform Manager',
     color: 'bg-blue-600 hover:bg-blue-700',
   },
   {
-    username: 'platform_sales',
+    email: 'sales@platform.com',
     password: 'test123',
     role: 'PLATFORM_SALES',
     label: 'Platform Sales',
     color: 'bg-green-600 hover:bg-green-700',
   },
   {
-    username: 'platform_support',
+    email: 'support@platform.com',
     password: 'test123',
     role: 'PLATFORM_SUPPORT',
     label: 'Platform Support',
     color: 'bg-yellow-600 hover:bg-yellow-700',
   },
   {
-    username: 'tenant_owner',
+    email: 'owner@demo.com',
     password: 'test123',
     role: 'TENANT_OWNER',
     label: 'Business Owner',
     color: 'bg-indigo-600 hover:bg-indigo-700',
   },
   {
-    username: 'tenant_manager',
+    email: 'manager@demo.com',
     password: 'test123',
     role: 'TENANT_MANAGER',
     label: 'Business Manager',
     color: 'bg-pink-600 hover:bg-pink-700',
   },
   {
-    username: 'tenant_staff',
+    email: 'staff@demo.com',
     password: 'test123',
     role: 'TENANT_STAFF',
     label: 'Staff Member',
     color: 'bg-teal-600 hover:bg-teal-700',
   },
   {
-    username: 'customer',
+    email: 'customer@demo.com',
     password: 'test123',
     role: 'CUSTOMER',
     label: 'Customer',
@@ -86,11 +86,11 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
   }
 
   const handleQuickLogin = async (user: TestUser) => {
-    setLoading(user.username);
+    setLoading(user.email);
     try {
-      // Call token auth API
+      // Call token auth API - username field contains email since we use email as username
       const response = await apiClient.post('/auth-token/', {
-        username: user.username,
+        username: user.email,
         password: user.password,
       });
 
@@ -176,12 +176,12 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
       <div className="grid grid-cols-2 gap-2">
         {testUsers.map((user) => (
           <button
-            key={user.username}
+            key={user.email}
             onClick={() => handleQuickLogin(user)}
             disabled={loading !== null}
             className={`${user.color} text-white px-3 py-2 rounded text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed`}
           >
-            {loading === user.username ? (
+            {loading === user.email ? (
               <span className="flex items-center justify-center">
                 <svg className="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
                   <circle

frontend/src/i18n/locales/de.json

@@ -31,12 +31,12 @@
     "signIn": "Anmelden",
     "signOut": "Abmelden",
     "signingIn": "Anmeldung läuft...",
-    "username": "Benutzername",
+    "email": "E-Mail",
     "password": "Passwort",
-    "enterUsername": "Geben Sie Ihren Benutzernamen ein",
+    "enterEmail": "Geben Sie Ihre E-Mail-Adresse ein",
     "enterPassword": "Geben Sie Ihr Passwort ein",
     "welcomeBack": "Willkommen zurück",
-    "pleaseEnterDetails": "Bitte geben Sie Ihre Daten ein, um sich anzumelden.",
+    "pleaseEnterDetails": "Bitte geben Sie Ihre E-Mail-Adresse und Ihr Passwort ein, um sich anzumelden.",
     "authError": "Authentifizierungsfehler",
     "invalidCredentials": "Ungültige Anmeldedaten",
     "orContinueWith": "Oder fortfahren mit",

frontend/src/i18n/locales/en.json

@@ -56,12 +56,12 @@
     "signIn": "Sign in",
     "signOut": "Sign Out",
     "signingIn": "Signing in...",
-    "username": "Username",
+    "email": "Email",
     "password": "Password",
-    "enterUsername": "Enter your username",
+    "enterEmail": "Enter your email",
     "enterPassword": "Enter your password",
     "welcomeBack": "Welcome back",
-    "pleaseEnterDetails": "Please enter your details to sign in.",
+    "pleaseEnterDetails": "Please enter your email and password to sign in.",
     "authError": "Authentication Error",
     "invalidCredentials": "Invalid credentials",
     "orContinueWith": "Or continue with",

frontend/src/i18n/locales/es.json

@@ -31,12 +31,12 @@
     "signIn": "Iniciar sesión",
     "signOut": "Cerrar Sesión",
     "signingIn": "Iniciando sesión...",
-    "username": "Nombre de usuario",
+    "email": "Correo electrónico",
     "password": "Contraseña",
-    "enterUsername": "Ingresa tu nombre de usuario",
+    "enterEmail": "Ingresa tu correo electrónico",
     "enterPassword": "Ingresa tu contraseña",
     "welcomeBack": "Bienvenido de nuevo",
-    "pleaseEnterDetails": "Por favor ingresa tus datos para iniciar sesión.",
+    "pleaseEnterDetails": "Por favor ingresa tu correo electrónico y contraseña para iniciar sesión.",
     "authError": "Error de Autenticación",
     "invalidCredentials": "Credenciales inválidas",
     "orContinueWith": "O continuar con",

frontend/src/i18n/locales/fr.json

@@ -31,12 +31,12 @@
     "signIn": "Se connecter",
     "signOut": "Déconnexion",
     "signingIn": "Connexion en cours...",
-    "username": "Nom d'utilisateur",
+    "email": "E-mail",
     "password": "Mot de passe",
-    "enterUsername": "Entrez votre nom d'utilisateur",
+    "enterEmail": "Entrez votre e-mail",
     "enterPassword": "Entrez votre mot de passe",
     "welcomeBack": "Bon retour",
-    "pleaseEnterDetails": "Veuillez entrer vos informations pour vous connecter.",
+    "pleaseEnterDetails": "Veuillez entrer votre e-mail et mot de passe pour vous connecter.",
     "authError": "Erreur d'Authentification",
     "invalidCredentials": "Identifiants invalides",
     "orContinueWith": "Ou continuer avec",

frontend/src/pages/LoginPage.tsx

@@ -11,11 +11,11 @@ import SmoothScheduleLogo from '../components/SmoothScheduleLogo';
 import OAuthButtons from '../components/OAuthButtons';
 import LanguageSelector from '../components/LanguageSelector';
 import { DevQuickLogin } from '../components/DevQuickLogin';
-import { AlertCircle, Loader2, User, Lock, ArrowRight } from 'lucide-react';
+import { AlertCircle, Loader2, Mail, Lock, ArrowRight } from 'lucide-react';
 
 const LoginPage: React.FC = () => {
   const { t } = useTranslation();
-  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
 
@@ -27,7 +27,7 @@ const LoginPage: React.FC = () => {
     setError('');
 
     loginMutation.mutate(
-      { username, password },
+      { email, password },
       {
         onSuccess: (data) => {
           // Check if MFA is required
@@ -202,25 +202,25 @@ const LoginPage: React.FC = () => {
 
           <form className="space-y-6" onSubmit={handleSubmit}>
             <div className="space-y-4">
-              {/* Username */}
+              {/* Email */}
               <div>
-                <label htmlFor="username" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  {t('auth.username')}
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  {t('auth.email')}
                 </label>
                 <div className="relative rounded-md shadow-sm">
                   <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <User className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    <Mail className="h-5 w-5 text-gray-400" aria-hidden="true" />
                   </div>
                   <input
-                    id="username"
-                    name="username"
-                    type="text"
-                    autoComplete="username"
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
                     required
                     className="focus:ring-brand-500 focus:border-brand-500 block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 rounded-lg py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 transition-colors"
-                    placeholder={t('auth.enterUsername')}
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
+                    placeholder={t('auth.enterEmail')}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
                   />
                 </div>
               </div>