From e6113a3a2b4084540539cdd66ed0b4567ee3ad46 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Wed, 21 Jun 2023 12:24:33 +0000
Subject: [PATCH] #11 Add login form and style

---
 src/App.js                  |  3 +-
 src/pages/auth/LoginForm.js | 75 +++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/auth/LoginForm.js

diff --git a/src/App.js b/src/App.js
index be989b1..a77d69d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Container from 'react-bootstrap/Container';
 import { Route, Switch } from 'react-router-dom';
 import './api/axiosDefaults'
 import SignUpForm from './pages/auth/SignUpForm';
+import LoginForm from './pages/auth/LoginForm'
 
 
 function App() {
@@ -13,7 +14,7 @@ function App() {
       <Container className={styles.Main}>
         <Switch>
           <Route exact path="/" render={() => <h1>Home Page</h1>} />
-          <Route exact path="/login" render={() => <h1>Login!</h1>} />
+          <Route exact path="/login" render={() => <LoginForm />} />
           <Route exact path="/signup" render={() => <SignUpForm />} />
           <Route render={() => <p>Page not found!</p>} />
         </Switch>
diff --git a/src/pages/auth/LoginForm.js b/src/pages/auth/LoginForm.js
new file mode 100644
index 0000000..dd1c419
--- /dev/null
+++ b/src/pages/auth/LoginForm.js
@@ -0,0 +1,75 @@
+import React from "react";
+
+import Form from "react-bootstrap/Form";
+import Alert from "react-bootstrap/Alert";
+import Button from "react-bootstrap/Button";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Image from "react-bootstrap/Image";
+import Container from "react-bootstrap/Container";
+
+import { Link } from "react-router-dom";
+
+import styles from "../../styles/SignInUpForm.module.css";
+import btnStyles from "../../styles/Button.module.css";
+import appStyles from "../../App.module.css";
+
+function LogInForm() {
+  //   Add your component logic here
+
+  return (
+    <Row className={styles.Row}>
+      <Col
+        md={6}
+        className={`my-auto d-none d-md-block p-2 ${styles.SignInCol}`}
+      >
+        <Image
+          className={`${appStyles.FillerImage}`}
+          src={
+            "https://res.cloudinary.com/sandrabergstrom/image/upload/v1687344960/footstep_g2jfrl.png"
+          }
+        />
+      </Col>
+      <Col className="my-auto p-0 p-md-2" md={6}>
+        <Container className={`${appStyles.Content} p-4 `}>
+          <h1 className={styles.Header}>log in</h1>
+
+          <Form>
+            <Form.Group controlId="username" className="mb-3">
+              <Form.Label className="d-none">Username</Form.Label>
+              <Form.Control
+                className={styles.Input}
+                type="text"
+                placeholder="Enter username"
+                name="username"
+              />
+            </Form.Group>
+
+            <Form.Group controlId="password" className="mb-3">
+              <Form.Label className="d-none">Password</Form.Label>
+              <Form.Control
+                className={styles.Input}
+                type="password"
+                placeholder="Password"
+              />
+            </Form.Group>
+
+            <Button
+              className={`${btnStyles.Button} ${btnStyles.Wide} ${btnStyles.Bright}`}
+              type="submit"
+            >
+              Login
+            </Button>
+          </Form>
+        </Container>
+        <Container className={`mt-3 ${appStyles.Content}`}>
+          <Link className={styles.Link} to="/signup">
+            Don't have an account? <span>Sign up now!</span>
+          </Link>
+        </Container>
+      </Col>
+    </Row>
+  );
+}
+
+export default LogInForm;