diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 089d032..ab79741 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,6 +5,7 @@ import NavigationBar from './components/NavigationBar'; import useToken from "./UseToken"; import React from "react"; import Login from "./pages/Login"; +import Register from "./pages/Register"; const App: React.FC = () => { @@ -29,6 +30,11 @@ const App: React.FC = () => { } + {!token && + + + + } ) diff --git a/frontend/src/api/register.tsx b/frontend/src/api/register.tsx new file mode 100644 index 0000000..21caab5 --- /dev/null +++ b/frontend/src/api/register.tsx @@ -0,0 +1,30 @@ +import axios from "axios"; + +export function register(username: string | undefined, password: string | undefined) { + + const address = `${process.env.REACT_APP_BACKEND_URL}/api/register`; + console.log(address); + let credentials = { + username, + password + }; + + return axios.create({ + timeout: 45000, + method: "POST", + headers: { + "Content-Type": "application/json", + }, + responseType: "json" + }).post(address, credentials).then( + ({ data, status }) => { + if (status !== 201) { + throw new Error("Server exception"); + } + return data; + }, + err => { + throw err; + } + ); +} \ No newline at end of file diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx index f51285d..d925547 100644 --- a/frontend/src/components/NavigationBar.tsx +++ b/frontend/src/components/NavigationBar.tsx @@ -107,6 +107,13 @@ const NavigationBar: React.FC = (props: any) => { } + {!token && + + + + + + } diff --git a/frontend/src/pages/Register.css b/frontend/src/pages/Register.css new file mode 100644 index 0000000..4b084fa --- /dev/null +++ b/frontend/src/pages/Register.css @@ -0,0 +1,5 @@ +.register-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx new file mode 100644 index 0000000..fbf0e09 --- /dev/null +++ b/frontend/src/pages/Register.tsx @@ -0,0 +1,41 @@ +import React, {useState} from 'react'; +import './Register.css'; +import PropTypes from 'prop-types'; +import {register} from "../api/register"; + +export default function Register({setToken}: { setToken: any }) { + + const [username, setUserName] = useState(); + const [password, setPassword] = useState(); + + const handleSubmit = async (e: { preventDefault: () => void; }) => { + e.preventDefault(); + const token = await register(username, password); + setToken(token); + window.location.href = "/dashboard"; + } + + return ( +
+

Please Register

+
+ + +
+
+ +
+
+
+ ) +} + +Register.propTypes = { + setToken: PropTypes.func.isRequired +}; \ No newline at end of file