[skip ci] add field verify code (MFA) for login

src/auth/pages/jwt/Login.tsx

@@ -17,12 +17,16 @@ const loginSchema = Yup.object().shape({
     .min(3, 'Minimum 3 symbols')
     .max(50, 'Maximum 50 symbols')
     .required('Password is required'),
+  token: Yup.string(),
+  // .max(3, 'Maximum 6 code'),
+  // .required('Token is required'),
   remember: Yup.boolean()
 });
 
 const initialValues = {
   username: '',
   password: '',
+  token: '',
   remember: false
 };
 
@@ -43,7 +47,7 @@ const Login = () => {
 
       try {
         if (!login) throw new Error('JWTProvider is required for this form.');
-        await login(values.username, values.password);
+        await login(values.username, values.password, values.token);
 
         if (values.remember) {
           localStorage.setItem('username', values.username);
@@ -141,6 +145,29 @@ const Login = () => {
             )}
           </div>
 
+          <div className="flex flex-col gap-1">
+            <label className="form-label text-gray-900 ps-2.5">Code Verify</label>
+            <label className="input">
+              <input
+                placeholder="Enter code verify"
+                type="text"
+                inputMode='numeric'
+                autoComplete="off"
+                maxLength={6}
+                {...formik.getFieldProps('token')}
+                className={clsx('form-control', {
+                  'is-invalid': formik.touched.token && formik.errors.token
+                })}
+                onKeyPress={handleKeyPress}
+              />
+            </label>
+            {formik.touched.token && formik.errors.token && (
+              <span role="alert" className="text-danger text-xs mt-1">
+                {formik.errors.token}
+              </span>
+            )}
+          </div>
+
           <div className="flex items-center justify-between gap-1">
             <label className="checkbox-group">
               <input

src/auth/providers/JWTProvider.tsx

@@ -28,7 +28,7 @@ interface AuthContextProps {
   saveAuth: (auth: AuthModel | undefined) => void;
   currentUser: UserModel | undefined;
   setCurrentUser: Dispatch<SetStateAction<UserModel | undefined>>;
-  login: (email: string, password: string) => Promise<void>;
+  login: (email: string, password: string, token?: string) => Promise<void>;
   requestPasswordResetLink: (email: string) => Promise<void>;
   changePassword: (token: string, password: string, password_confirmation: string) => Promise<void>;
   getUser: () => Promise<AxiosResponse<any> | {}>;
@@ -52,10 +52,10 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
     }
   };
 
-  const login = async (username: string, password: string) => {
+  const login = async (username: string, password: string, token?: string) => {
     try {
       const { data: auth } = await axios
-        .post(LOGIN_URL, { username, password })
+        .post(LOGIN_URL, { username, password, token })
         .then((response) => response.data);
 
       const enhancedAuth: AuthModel = {
@@ -63,7 +63,7 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
         id: auth.user.id,
         role_name: auth.role_name,
         user: auth.user,
-        statusbalance: auth.role?.status_balance ?? null  // SAFE ACCESS
+        statusbalance: auth.role?.status_balance ?? null // SAFE ACCESS
       };
 
       saveAuth(enhancedAuth);
@@ -161,4 +161,4 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-export { AuthContext, AuthProvider };
+export { AuthContext, AuthProvider };