axios

package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/user-event": "^13.5.0",
         "ajv": "^8.17.1",
         "ajv-keywords": "^5.1.0",
+        "axios": "^1.7.9",
         "chart.js": "^4.4.7",
         "react": "^19.0.0",
         "react-chartjs-2": "^5.2.0",
@@ -26,6 +27,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@babel/plugin-transform-private-property-in-object": "^7.25.9",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/react": "^16.1.0"
@@ -620,9 +622,17 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
+      "version": "7.21.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1846,6 +1856,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -5174,6 +5195,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -13321,6 +13365,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^13.5.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
+    "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.2.0",
@@ -45,6 +46,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0"

src/config/axios.js

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+const instance = axios.create({
+    baseURL: 'https://api.telkomcel.tl/stag-tpay-dash-api/',
+    headers: {
+        "Access-Control-Allow-Origin": "*",
+        "content-type":"application/json",
+    },
+})
+
+export async function fetchApi(path, method, data) {
+    let response = await instance({
+        method: method,
+        url: path,
+        data: data
+    });
+    return response
+}

src/pages/Login.js

@@ -1,24 +1,35 @@
 import React, { useState } from "react";
 import { TextField, Button, Box, Typography, Grid, Paper } from "@mui/material";
 import {Link, useNavigate } from 'react-router-dom';
+// import { fetchApi } from '../config/axios';
 
 const LoginPage = () => {
   // State for email and password
-  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const navigate = useNavigate();
 
   // Handle form submission
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
+    try {
       e.preventDefault();
-    if (email && password) {
+      if (username && password) {
-      // Handle login logic here, for example, API call
+        // GET CREDIENTIAL
-      console.log("Logged in with:", { email, password });
+        // let user = await fetchApi('/api/login', 'POST', { username, password });
-      localStorage.setItem('authToken', email)
+        // console.log(user);
+        // if (user.data && user.data.data) {
+        //   let userLogin = user.data.data;
+
+        // }
+        // document.cookie = `role=${role}`
+        // localStorage.setItem('authToken', username)
         navigate('/');
       } else {
         alert("Please fill in both fields.");
       }
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (
@@ -39,9 +50,9 @@ const LoginPage = () => {
                 label="Email"
                 variant="outlined"
                 fullWidth
-                value={email}
+                value={username}
-                onChange={(e) => setEmail(e.target.value)}
+                onChange={(e) => setUsername(e.target.value)}
-                type="email"
+                type="text"
                 required
               />
             </Box>