From f41a5eff525fea795bc5b7267be6534db22813ed Mon Sep 17 00:00:00 2001 From: nefelitav Date: Fri, 16 Feb 2024 00:17:55 +0100 Subject: [PATCH] add registration page --- src/__tests__/Register.test.tsx | 46 ++++++++ src/components/Register.tsx | 189 ++++++++++++++++++++++++++++++++ src/components/index.tsx | 3 +- src/main.tsx | 5 +- 4 files changed, 240 insertions(+), 3 deletions(-) create mode 100644 src/__tests__/Register.test.tsx create mode 100644 src/components/Register.tsx diff --git a/src/__tests__/Register.test.tsx b/src/__tests__/Register.test.tsx new file mode 100644 index 0000000..8213e2a --- /dev/null +++ b/src/__tests__/Register.test.tsx @@ -0,0 +1,46 @@ +import { render, fireEvent } from '@testing-library/react'; +import '@testing-library/jest-dom' + +import Register from '../components/Register'; + +describe('Register component', () => { + test('renders username, password, confirm fields', () => { + const { getByLabelText } = render(); + const usernameInput = getByLabelText('Username'); + const passwordInput = getByLabelText('Password'); + const confirmInput = getByLabelText('Confirm Password'); + + expect(usernameInput).toBeInTheDocument(); + expect(passwordInput).toBeInTheDocument(); + expect(confirmInput).toBeInTheDocument(); + }); + + test('allows user to enter username, password, confirm', () => { + const { getByLabelText } = render(); + const usernameInput = getByLabelText('Username'); + const passwordInput = getByLabelText('Password'); + const confirmInput = getByLabelText('Confirm Password'); + + fireEvent.change(usernameInput, { target: { value: 'testuser' } }); + fireEvent.change(passwordInput, { target: { value: 'testpassword' } }); + fireEvent.change(confirmInput, { target: { value: 'testpassword2' } }); + + expect(usernameInput).toHaveValue('testuser'); + expect(passwordInput).toHaveValue('testpassword'); + expect(confirmInput).toHaveValue('testpassword2'); + }); + + test('submits form with username, password, confirm when Sign up button is clicked', async () => { + const { getByLabelText, getByText } = render(); + const usernameInput = getByLabelText('Username'); + const passwordInput = getByLabelText('Password'); + const confirmInput = getByLabelText('Confirm Password'); + const signUpButton = getByText('Sign up'); + + fireEvent.change(usernameInput, { target: { value: 'testuser' } }); + fireEvent.change(passwordInput, { target: { value: 'testpassword' } }); + fireEvent.change(confirmInput, { target: { value: 'testpassword2' } }); + fireEvent.click(signUpButton); + }); + +}); diff --git a/src/components/Register.tsx b/src/components/Register.tsx new file mode 100644 index 0000000..b56f24a --- /dev/null +++ b/src/components/Register.tsx @@ -0,0 +1,189 @@ +import '../index.css' + +import { useState } from "react"; + +const Register: React.FC = () => { + // const { setUser } = useContext(UserContext); + + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [confirm, setConfirm] = useState(""); + // const [errorMessage, setErrorMessage] = useState(""); + + const usernameChangeHandler = (event: React.ChangeEvent) => { + setUsername(event.target.value); + }; + + const passwordChangeHandler = (event: React.ChangeEvent) => { + setPassword(event.target.value); + }; + + const confirmChangeHandler = (event: React.ChangeEvent) => { + setConfirm(event.target.value); + }; + + const submitHandler = async (event: React.MouseEvent) => { + event.preventDefault(); + + // const body = { + // username, + // password, + // confirm, + // }; + + // if (confirm != password) { + // setErrorMessage("Passwords don't match!"); + // } else { + // setErrorMessage(""); + // } + // console.log(body); + // fetch("https://localhost:5000/auth/register", { + // method: "POST", + // headers: { "Content-Type": "application/json" }, + // body: JSON.stringify(body), + // }) + // .then((response) => { + // if (!response.ok) { + // throw new Error("Failed to register"); + // } + // // Handle success + // }) + // .catch((err) => { + // console.error(err.message); + // }); + }; + + function togglePassword() { + const passwordField = document.getElementById("password") as HTMLInputElement | null; + const confirmField = document.getElementById("confirm") as HTMLInputElement | null; + const checkBox = document.getElementById("hs-toggle-password-checkbox") as HTMLInputElement | null; + + if (passwordField && checkBox) { + if (checkBox.checked) { + passwordField.type = "text"; + } else { + passwordField.type = "password"; + } + } + if (confirmField && checkBox) { + if (checkBox.checked) { + confirmField.type = "text"; + } else { + confirmField.type = "password"; + } + } + } + return ( + <> +
+
+ Your Company +

+ Create an account +

+
+ +
+ {/* {errorMessage !== "" && ( + + {errorMessage} + + )} */} +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ + +
+ +
+
+ +
+ +
+
+ +

+ Already have an account?{' '} + + Login + +

+
+
+ + ) +} + +export default Register; diff --git a/src/components/index.tsx b/src/components/index.tsx index e9b0c8c..54c9f2c 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1 +1,2 @@ -export { default as Login } from "./Login"; \ No newline at end of file +export { default as Login } from "./Login"; +export { default as Register } from "./Register"; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 4851725..f85f06d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,7 +6,8 @@ import { RouterProvider, } from "react-router-dom"; import { - Login + Login, + Register } from "./components"; const router = createBrowserRouter([ { @@ -16,7 +17,7 @@ const router = createBrowserRouter([ }, { path: "/register", - element:

register

, + element: , }, { path: "/profile",