test

src/pages/authenticated/index.js

@@ -0,0 +1,2 @@
+export * from './login'
+export * from './register'

src/pages/authenticated/login.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+
+import { useAuth } from "../../hooks";
+
+export const Login = () => {
+  const { login } = useAuth();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState();
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    const response = await login(username, password);
+
+    if (response && !response.success) {
+      setError(response.error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Login page</h1>
+      {error && <p className="text-red-500">{error}</p>}
+      <form onSubmit={onSubmit}>
+        <input
+          type="text"
+          value={username}
+          placeholder="username"
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          value={password}
+          placeholder="password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button type="submit">submit</button>
+      </form>
+    </div>
+  );
+};

src/pages/authenticated/register.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+
+import { useAuth } from "../../hooks";
+
+export const Register = () => {
+  const { register } = useAuth();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmation, setConfirmation] = useState("");
+  const [error, setError] = useState();
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    const response = await register(username, password, confirmation);
+
+    if (response && !response.success) {
+      setError(response.error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Register page</h1>
+      {error && <p className="text-red-500">{error}</p>}
+      <form onSubmit={onSubmit}>
+        <input
+          type="text"
+          value={username}
+          placeholder="username"
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          value={password}
+          placeholder="password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <input
+          type="password"
+          value={confirmation}
+          placeholder="confirmation"
+          onChange={(e) => setConfirmation(e.target.value)}
+        />
+        <button type="submit">submit</button>
+      </form>
+    </div>
+  );
+};

src/pages/home.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { useAuth } from "../hooks";
+
+export const Home = () => {
+  const { user } = useAuth();
+
+  return (
+    <div>
+      <h1>Home page</h1>
+      {user && <h2>Hello {user.user.username}</h2>}
+    </div>
+  );
+};

src/pages/index.js

@@ -0,0 +1,2 @@
+export * from "./authenticated";
+export * from "./home";