diff --git a/client/package.json b/client/package.json
index c9f6fa5..748e19a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,6 +7,7 @@
"@emotion/styled": "^11.9.3",
"@fontsource/roboto": "^4.5.7",
"@mui/icons-material": "^5.8.4",
+ "@mui/lab": "^5.0.0-alpha.89",
"@mui/material": "^5.8.7",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
@@ -17,6 +18,7 @@
"@types/react-dom": "^18.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-hook-form": "^7.33.1",
"react-scripts": "5.0.1",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
diff --git a/client/src/App.tsx b/client/src/App.tsx
index af33dba..deb4e0d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -9,6 +9,8 @@ import { AuthProvider } from "./providers/AuthProvider";
import "./index.css";
import { LoginDialog } from "./components/LoginDialog";
+import { UnautorizedBlock } from "./components/UnautorizedBlock";
+import { NewAccount } from "./pages/NewAccount/NewAccount";
function App() {
return (
@@ -16,6 +18,10 @@ function App() {
+ }
+ unauthenticatedContent={}
+ />
diff --git a/client/src/components/LoginDialog.tsx b/client/src/components/LoginDialog.tsx
index edc08d9..491de2d 100644
--- a/client/src/components/LoginDialog.tsx
+++ b/client/src/components/LoginDialog.tsx
@@ -7,11 +7,11 @@ import {
TextField,
} from "@mui/material";
import { useState } from "react";
-import { useAuth } from "../providers/AuthProvider";
+import { useAuth } from "../hooks/useAuth";
export const LoginDialog = () => {
const { isLoginDialogOpen, setIsLoginDialogOpen, login } = useAuth();
- console.log(isLoginDialogOpen);
+
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
diff --git a/client/src/components/Topbar.tsx b/client/src/components/Topbar.tsx
index 29aea0c..197d91c 100644
--- a/client/src/components/Topbar.tsx
+++ b/client/src/components/Topbar.tsx
@@ -1,5 +1,5 @@
import { AppBar, Button, Toolbar, Typography } from "@mui/material";
-import { useAuth } from "../providers/AuthProvider";
+import { useAuth } from "../hooks/useAuth";
export const Topbar = () => {
const { authenticated, logout, setIsLoginDialogOpen } = useAuth();
diff --git a/client/src/components/UnautorizedBlock.tsx b/client/src/components/UnautorizedBlock.tsx
new file mode 100644
index 0000000..d7762df
--- /dev/null
+++ b/client/src/components/UnautorizedBlock.tsx
@@ -0,0 +1,14 @@
+import { useAuth } from "../hooks/useAuth";
+
+export type UnautorizedBlockProps = {
+ protectedContent: React.ReactNode;
+ unauthenticatedContent: React.ReactNode;
+};
+
+export const UnautorizedBlock = (props: UnautorizedBlockProps) => {
+ const { authenticated } = useAuth();
+
+ return (
+ <>{authenticated ? props.protectedContent : props.unauthenticatedContent}
+ );
+};
diff --git a/client/src/hooks/useAuth.ts b/client/src/hooks/useAuth.ts
new file mode 100644
index 0000000..a16fb5e
--- /dev/null
+++ b/client/src/hooks/useAuth.ts
@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { AuthContext } from "../providers/AuthProvider";
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+
+ if (context === null) {
+ throw new Error("You probably forgot to put .");
+ }
+
+ return context;
+};
diff --git a/client/src/pages/NewAccount/NewAccount.tsx b/client/src/pages/NewAccount/NewAccount.tsx
new file mode 100644
index 0000000..203a124
--- /dev/null
+++ b/client/src/pages/NewAccount/NewAccount.tsx
@@ -0,0 +1,84 @@
+import { LoadingButton } from "@mui/lab";
+import { Alert, Stack, TextField } from "@mui/material";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { useAuth } from "../../hooks/useAuth";
+import { createApiClient } from "../../utils/apiFetch";
+
+type NewAccountForm = {
+ email: string;
+ password: string;
+};
+
+export const NewAccount = () => {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const apiClient = createApiClient();
+
+ const { login } = useAuth();
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm();
+
+ const onSubmit: SubmitHandler = (data) => {
+ setLoading(true);
+
+ apiClient("users", {
+ method: "POST",
+ body: JSON.stringify(data),
+ })
+ .then(async (res) => {
+ const result = await res.json();
+ if (result.error) {
+ setError(result.error);
+ } else {
+ login(data.email, data.password);
+ }
+ })
+ .finally(() => setLoading(false));
+ };
+ return (
+
+
New Account Page
+ {error &&
{error}}
+
+