diff --git a/package-lock.json b/package-lock.json index 340f312..3f2c6c5 100644 --- a/package-lock.json +++ b/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", - "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==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "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", diff --git a/package.json b/package.json index a6b3590..a61f11a 100644 --- a/package.json +++ b/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" diff --git a/src/config/axios.js b/src/config/axios.js new file mode 100644 index 0000000..5fc9aeb --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/pages/Login.js b/src/pages/Login.js index 6157f1e..e32a07f 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -1,23 +1,34 @@ 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) => { - e.preventDefault(); - if (email && password) { - // Handle login logic here, for example, API call - console.log("Logged in with:", { email, password }); - localStorage.setItem('authToken', email) - navigate('/'); - } else { - alert("Please fill in both fields."); + const handleSubmit = async (e) => { + try { + e.preventDefault(); + if (username && password) { + // GET CREDIENTIAL + // let user = await fetchApi('/api/login', 'POST', { username, password }); + // 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); } }; @@ -39,9 +50,9 @@ const LoginPage = () => { label="Email" variant="outlined" fullWidth - value={email} - onChange={(e) => setEmail(e.target.value)} - type="email" + value={username} + onChange={(e) => setUsername(e.target.value)} + type="text" required />