Can send form request to pb backend

frontend/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "pocketbase": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

frontend/src/App.js

@@ -1,23 +1,9 @@
-import logo from './logo.svg';
-import './App.css';
-
+import "./App.css";
+import Auth from "./auth/pocketbase";
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Auth />
     </div>
   );
 }

frontend/src/auth/pocketbase.js

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import PocketBase from "pocketbase";
+
+// const client = new PocketBase("http://localhost:8090");
+
+// const userData = client.Users.authViaEmail("[email protected]", "12345678");
+// console.log(userData);
+
+export default function Auth() {
+  const [username, setUserName] = useState();
+  const [password, setPassword] = useState();
+
+  const handleSubmit = async (e) => {
+    const client = new PocketBase("http://localhost:8090");
+    e.preventDefault();
+    const userData = await client.Users.authViaEmail(username, password);
+    console.log(userData);
+  };
+  return (
+    <div className="login-wrapper">
+      <h1>Please Log In</h1>
+      <form onSubmit={handleSubmit}>
+        <label>
+          <p>Username</p>
+          <input type="text" onChange={(e) => setUserName(e.target.value)} />
+        </label>
+        <label>
+          <p>Password</p>
+          <input
+            type="password"
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        <div>
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+    </div>
+  );
+}