Add support login via username or email

apps/web/src/features/auth/login-form.tsx

@@ -26,8 +26,8 @@ import { validateRedirectUrl } from '@/utils/utils';
 import { z } from '@/utils/zod';
 
 const formSchema = z.object({
-    email: z.string().email(),
-    password: z.string().min(6),
+    identifier: z.string().min(5),
+    password: z.string().min(8).max(256),
     rememberMe: z.boolean().default(false),
 });
 
@@ -43,7 +43,7 @@ const LoginForm = () => {
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
-            email: '',
+            identifier: '',
             password: '',
             rememberMe: false,
         },
@@ -64,11 +64,15 @@ const LoginForm = () => {
     });
 
     const handleFormSubmit = (data: z.infer<typeof formSchema>) => {
+        // Determine if identifier is email or username
+        const isEmail = data.identifier.includes('@');
+
+        const args = isEmail
+            ? { email: data.identifier, password: data.password }
+            : { username: data.identifier, password: data.password };
+
         mutationLogin.mutate({
-            args: {
-                email: data.email,
-                password: data.password,
-            },
+            args,
             captcha: {
                 captcha: String(captchaRef.current?.getResponse()),
             },
@@ -83,14 +87,14 @@ const LoginForm = () => {
             >
                 <FormField
                     control={form.control}
-                    name="email"
+                    name="identifier"
                     render={({ field }) => (
                         <FormItem>
-                            <FormLabel>Email</FormLabel>
+                            <FormLabel>Ваш юзернейм або пошта</FormLabel>
                             <FormControl>
                                 <Input
-                                    type="email"
-                                    placeholder="Введіть ваш email"
+                                    type="text"
+                                    placeholder="Введіть ваш юзернейм або пошту"
                                     {...field}
                                 />
                             </FormControl>
@@ -173,4 +177,4 @@ const LoginForm = () => {
     );
 };
 
-export default LoginForm;
+export default LoginForm;

packages/client/modules/auth.ts

@@ -7,7 +7,7 @@ import {
     CodeArgs,
     ComfirmResetArgs,
     EmailArgs,
-    LoginArgs,
+    EmailLoginArgs,
     PaginationArgs,
     ProviderUrlResponse,
     SignupArgs,
@@ -16,6 +16,7 @@ import {
     TokenRequestArgs,
     TokenRequestResponse,
     TokenResponse,
+    UsernameLoginArgs,
     UserResponse,
 } from '../types';
 import { BaseModule } from './base';
@@ -25,7 +26,7 @@ export class AuthModule extends BaseModule {
      * Create a user session with credentials
      */
     public async createUserSession(
-        args: LoginArgs,
+        args: EmailLoginArgs | UsernameLoginArgs,
         { captcha }: CaptchaArgs,
         options?: BaseRequestOptionsArgs,
     ): Promise<TokenResponse> {

packages/client/types/auth.ts

@@ -1,13 +1,21 @@
 import { ClientResponse } from './client';
 
 /**
- * Login request parameters
+ * Login request parameters for email-based
  */
-export interface LoginArgs {
+export interface EmailLoginArgs {
     email: string;
     password: string;
 }
 
+/**
+ * Login request parameters for username-based
+ */
+export interface UsernameLoginArgs {
+    username: string;
+    password: string;
+}
+
 /**
  * Signup request parameters
  */

packages/react/client/hooks/api/auth.ts

@@ -7,12 +7,13 @@ import {
     CodeArgs,
     ComfirmResetArgs,
     EmailArgs,
-    LoginArgs,
+    EmailLoginArgs,
     ProviderUrlResponse,
     SignupArgs,
     TokenArgs,
     TokenProceedArgs,
     TokenRequestArgs,
+    UsernameLoginArgs,
 } from '@hikka/client';
 
 import {
@@ -103,7 +104,7 @@ export const useCreatePasswordResetRequest = createMutation({
 export const useCreateUserSession = createMutation({
     mutationFn: (
         client,
-        { args, captcha }: { args: LoginArgs; captcha: CaptchaArgs },
+        { args, captcha }: { args: EmailLoginArgs | UsernameLoginArgs; captcha: CaptchaArgs },
     ) => client.auth.createUserSession(args, captcha),
     invalidateQueries: () => [queryKeys.auth.tokenInfo(), queryKeys.user.me()],
 });