fixing auth, added registration page

src/front/Nav.tsx

@@ -1,27 +1,43 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import axios from "axios";
+import React, { ReactElement } from "react";
 import "./styles/nav.scss";
 interface Props {
 	isLogged: boolean;
+	logoutState: () => void;
 }
 const NOT_LOGGED = [
 	{ name: "aplikacja", href: "/" },
 	{ name: "logowanie", href: "login.html" },
+	{ name: "rejestracja", href: "register.html" },
 ];
-const LOGGED = [
-	{ name: "aplikacja", href: "/" },
-	{ name: "wyloguj", href: "login.html" },
-];
 
-function Nav({ isLogged }: Props): ReactElement {
+const LOGGED = [{ name: "aplikacja", href: "/" }];
+
+function Nav({ isLogged, logoutState }: Props): ReactElement {
+	const logout = async () => {
+		await axios.delete(
+			"http://localhost:8080/api/v1/collections/sessions/current"
+		);
+		logoutState();
+	};
+
 	return (
 		<nav className="navbar">
 			<h2 className="navbar__title">Zgłaszańsko web</h2>
 			<div className="navbar__links">
 				{isLogged
 					? LOGGED.map((ele) => (
-							<a href={ele.href} className="button-link">
-								{ele.name}
-							</a>
+							<>
+								<a href={ele.href} className="button-link">
+									{ele.name}
+								</a>
+								<button
+									onClick={logout}
+									className="button-link"
+								>
+									Wyloguj
+								</button>
+							</>
 					  ))
 					: NOT_LOGGED.map((ele) => (
 							<a href={ele.href} className="button-link">

src/front/app.tsx

@@ -23,6 +23,12 @@ import { getAddress } from "./location";
 import { FileType } from "./file";
 const App: FC = () => {
 	const [isLogged, setIsLogged] = useState(false);
+	const [fileState, fileDispatch] = useReducer(
+		fileReducer,
+		filesInitialState
+	);
+	const [formState, formDispatch] = useReducer(formReducer, fromInitialState);
+	const [mapPin, setMapPin] = useState({ lat: 0, lon: 0 });
 
 	const checkUser = async (): Promise<void> => {
 		try {
@@ -39,22 +45,17 @@ const App: FC = () => {
 		void checkUser();
 	}, []);
 
-	//This reducer handles adding and selecting files.
-	//I'm passing in initial state "{files: []}" from fileReducer file.
-	//State can be changed by using dispatch function with object contaning right type and payload.
-	//Example: dispatch({type: "ADD_FILE", payload: {img: thisIsImgURL, selected: false})
-	//State can be accsesed by using fileState object
-	//Example: fileState.files
-	//Reducer it self is imported from fileReducer.ts in src/ dir
-	const [fileState, fileDispatch] = useReducer(
-		fileReducer,
-		filesInitialState
-	);
-
-	const [formState, formDispatch] = useReducer(formReducer, fromInitialState);
-
-	//This hook handles pining location on the map
-	const [mapPin, setMapPin] = useState({ lat: 0, lon: 0 });
+	useEffect(() => {
+		void getAddress(mapPin).then((blob) =>
+			formDispatch({
+				type: "CHANGE_FIELD",
+				payload: {
+					field: "address",
+					value: blob,
+				},
+			})
+		);
+	}, [mapPin]);
 
 	const handleSubmit = async (
 		event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>
@@ -93,18 +94,6 @@ const App: FC = () => {
 		}
 	};
 
-	useEffect(() => {
-		void getAddress(mapPin).then((blob) =>
-			formDispatch({
-				type: "CHANGE_FIELD",
-				payload: {
-					field: "address",
-					value: blob,
-				},
-			})
-		);
-	}, [mapPin]);
-
 	const MapComponent = () => {
 		useMapEvents({
 			click: async (e) => {
@@ -131,7 +120,7 @@ const App: FC = () => {
 
 	return (
 		<>
-			<Nav isLogged={isLogged} />
+			<Nav isLogged={isLogged} logoutState={() => setIsLogged(false)} />
 			<div className="container">
 				<section className="container__section">
 					<h2 className="container__section__title">Zdjęcia</h2>

src/front/login.tsx

@@ -9,6 +9,12 @@ import axios from "axios";
 
 export default function Login(): ReactElement {
 	const [isLogged, setIsLogged] = useState(false);
+	const [error, setError] = useState(null);
+
+	const [loginState, setLoginState] = useState({
+		username: "",
+		password: "",
+	});
 	const checkUser = async (): Promise<void> => {
 		try {
 			await axios.get(
@@ -22,34 +28,21 @@ export default function Login(): ReactElement {
 	useEffect(() => {
 		void checkUser();
 	}, []);
-	const [loginState, setLoginState] = useState({
-		username: "",
-		password: "",
-	});
-	const [error, setError] = useState(null);
+
 	const postLogin = async () => {
 		try {
 			await axios.post("http://localhost:8080/api/v1/sessions/", {
 				username: loginState.username,
 				password: loginState.password,
 			});
+			void checkUser();
 		} catch (e) {
 			console.log(e);
 		}
 	};
-	const logout = async () => {
-		const who = await axios.get(
-			"http://localhost:8080/api/v1/collections/users/me"
-		);
-		console.log(who);
-		const logout = await axios.delete(
-			"http://localhost:8080/api/v1/collections/sessions/current"
-		);
-		console.log(logout);
-	};
-	return (
-		<>
-			<Nav isLogged={isLogged} />
+
+	const notLoggedForm = () => {
+		return (
 			<form>
 				<label htmlFor="username">
 					Nazwa użytkownika
@@ -89,8 +82,12 @@ export default function Login(): ReactElement {
 					Zaloguj
 				</button>
 			</form>
-
-			<button onClick={logout}>Wyloguj</button>
+		);
+	};
+	return (
+		<>
+			<Nav isLogged={isLogged} logoutState={() => setIsLogged(false)} />
+			{isLogged ? <h1>Jesteś zalogowany</h1> : notLoggedForm()}
 		</>
 	);
 }

src/front/register.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link
+			href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"
+			rel="stylesheet"
+		/>
+		<title>Zgłaszańsko</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script src="./register.tsx"></script>
+	</body>
+</html>

src/front/register.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { ReactElement, useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import Nav from "./Nav";
+import "./styles/reset.css";
+import "./styles/app.scss";
+import "regenerator-runtime/runtime";
+import axios from "axios";
+
+export default function Register(): ReactElement {
+	const [isLogged, setIsLogged] = useState(false);
+	const [registerState, setRegisterState] = useState({
+		email: "",
+	});
+	const [error, setError] = useState(null);
+
+	const checkUser = async (): Promise<void> => {
+		try {
+			await axios.get(
+				"http://localhost:8080/api/v1/collections/users/me"
+			);
+			setIsLogged(true);
+		} catch (error) {
+			setIsLogged(false);
+		}
+	};
+	useEffect(() => {
+		void checkUser();
+	}, []);
+	const postRegister = async () => {
+		try {
+			await axios.post(
+				"http://localhost:8080/api/v1/collections/registration-intents",
+				{
+					email: registerState.email,
+				}
+			);
+			void checkUser();
+		} catch (e) {
+			console.log(e);
+		}
+	};
+	const notLoggedForm = () => {
+		return (
+			<form>
+				<label htmlFor="email">
+					Adres email
+					<input
+						type="email"
+						name="email"
+						value={registerState.email}
+						onChange={(e) =>
+							setRegisterState({
+								email: e.target.value,
+							})
+						}
+					/>
+				</label>
+				<button
+					type="submit"
+					onClick={(e) => {
+						e.preventDefault();
+						console.log(postRegister());
+					}}
+				>
+					Zaloguj
+				</button>
+			</form>
+		);
+	};
+	return (
+		<>
+			<Nav isLogged={isLogged} logoutState={() => setIsLogged(false)} />
+			{isLogged ? <h1>Jesteś zalogowany</h1> : notLoggedForm()}
+		</>
+	);
+}
+ReactDOM.render(<Register />, document.getElementById("root"));

src/front/styles/nav.scss

@@ -23,4 +23,5 @@
 	border: none;
 	cursor: pointer;
 	margin: 0 15px;
+	font-size: 0.9em;
 }