Wire frontend login to user_login.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/auth/LoginForm.tsx

@@ -4,7 +4,7 @@ import { errorMessage } from '../../services/apiClient.ts';
 
 const LoginForm: React.FC = () => {
   const { login } = useAuth();
-  const [userName, setUserName] = useState('');
+  const [userLogin, setUserLogin] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -14,7 +14,7 @@ const LoginForm: React.FC = () => {
     setError('');
     setIsLoading(true);
     try {
-      await login(userName, password);
+      await login(userLogin, password);
     } catch (err) {
       setError(errorMessage(err));
     } finally {
@@ -30,20 +30,20 @@ const LoginForm: React.FC = () => {
         </div>
       )}
       <div>
-        <label htmlFor="username" className="block text-sm font-medium text-gray-700">
+        <label htmlFor="user_login" className="block text-sm font-medium text-gray-700">
-          Username
+          Login
         </label>
         <div className="mt-1">
           <input
-            id="username"
+            id="user_login"
-            name="username"
+            name="user_login"
             type="text"
             autoComplete="username"
             required
-            value={userName}
+            value={userLogin}
-            onChange={(e) => setUserName(e.target.value)}
+            onChange={(e) => setUserLogin(e.target.value)}
             className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"
-            placeholder="Nama pengguna"
+            placeholder="Login pengguna"
           />
         </div>
       </div>

context/AuthContext.tsx

@@ -5,7 +5,7 @@ import type { User } from '../types/api.ts';
 type AuthContextValue = {
   user: User | null;
   loading: boolean;
-  login: (userName: string, password: string) => Promise<void>;
+  login: (userLogin: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
   refreshUser: () => Promise<User | null>;
 };
@@ -45,9 +45,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     };
   }, []);
 
-  const login = useCallback(async (userName: string, password: string) => {
+  const login = useCallback(async (userLogin: string, password: string) => {
     await api.auth.csrf();
-    const next = await api.auth.login(userName, password);
+    const next = await api.auth.login(userLogin, password);
     setUser(next);
   }, []);
 

services/apiClient.ts

@@ -159,8 +159,8 @@ const del = (path: string) => request<void>(path, { method: 'DELETE' });
 export const api = {
   auth: {
     csrf: () => get<{ csrfToken: string }>('/auth/csrf/'),
-    login: (user_name: string, password: string) =>
+    login: (user_login: string, password: string) =>
-      post<User>('/auth/login/', { user_name, password }),
+      post<User>('/auth/login/', { user_login, password }),
     logout: () => post<void>('/auth/logout/'),
     me: () => get<User>('/auth/me/'),
   },

types/api.ts

@@ -18,6 +18,7 @@ export type UserStatus =
 
 export type User = {
   id: number;
+  user_login: string;
   user_name: string;
   status: UserStatus;
   is_superuser?: boolean;
@@ -31,6 +32,7 @@ export type User = {
 };
 
 export type UserWrite = {
+  user_login: string;
   user_name: string;
   status: UserStatus;
   password?: string;