added login form

client/src/App.js

@@ -8,6 +8,7 @@ import Logo from "./components/Logo";
 import { CreateEvent } from "./pages/CreateEvent";
 import { Event } from "./pages/Event";
 import { EVENT_CONTEXT } from "./constants";
+import { LoginPage } from "./pages/Login";
 
 export const App = (props) => {
     const [context, setContext] = useState({
@@ -32,6 +33,7 @@ export const App = (props) => {
                         <Home />
                     </Route>
                     <Route exact path="/create" component={CreateEvent} />
+                    <Route exact path="/login" component={LoginPage} />
                     {Array.isArray(props.events) &&
                         props.events.map((e) => {
                             return (

client/src/pages/Login/index.js

@@ -0,0 +1,32 @@
+import { useTitle } from "../../utils/useTitle";
+import styles from "./index.module.scss";
+import { Stack } from "react-bootstrap";
+import { useEffect, useRef } from "react";
+
+export const LoginPage = () => {
+    const form = useRef(null);
+    useTitle("Logowanie");
+    useEffect(() => {
+        form.current.addEventListener("submit", (e) => {
+            e.preventDefault();
+            console.log(e);
+        });
+    }, []);
+
+    return (
+        <>
+            <div className={styles.container}>
+                <p className={styles.title}>Zaloguj się</p>
+                <form ref={form}>
+                    <Stack gap={2}>
+                        <input type="text" autoComplete={"username"} placeholder="Nazwa użytkownika"></input>
+                        <input type="password" autoComplete={"current-password"} placeholder="Hasło"></input>
+                        <button type="submit" className={"greenButton"}>
+                            Zaloguj się
+                        </button>
+                    </Stack>
+                </form>
+            </div>
+        </>
+    );
+};

client/src/pages/Login/index.module.scss

@@ -0,0 +1,13 @@
+@import "../../index.scss";
+
+.container {
+    width: $defaultWidth;
+    max-width: $maxWidth;
+    margin: auto;
+}
+.title {
+    color: $accent;
+    text-align: center;
+    font-size: 2.1em;
+    font-weight: bold;
+}