From 7ecb2e70a1e38e0678c8ab17d52011292e7ef528 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Tue, 23 Nov 2021 23:24:08 +0100
Subject: [PATCH] add login route and login form

---
 .eslintrc.js                       |  1 +
 src/pages/Login/Login.tsx          | 46 ++++++++++++++++++++++++++++++
 src/pages/Login/index.tsx          | 14 +++++++++
 src/pages/Login/styles.module.scss | 36 +++++++++++++++++++++++
 src/routes/index.ts                |  5 ++++
 src/theme/mixins.scss              | 15 ++++++++++
 6 files changed, 117 insertions(+)
 create mode 100644 src/pages/Login/Login.tsx
 create mode 100755 src/pages/Login/index.tsx
 create mode 100755 src/pages/Login/styles.module.scss

diff --git a/.eslintrc.js b/.eslintrc.js
index d15c42c..b96f2e4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -49,6 +49,7 @@ module.exports = {
         "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
         "testing-library/no-node-access": "off",
         "testing-library/render-result-naming-convention": "off",
+        "jsx-a11y/label-has-associated-control": "off",
     },
     globals: {
         __CLIENT__: true,
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
new file mode 100644
index 0000000..c87a09b
--- /dev/null
+++ b/src/pages/Login/Login.tsx
@@ -0,0 +1,46 @@
+import { RouteComponentProps } from "react-router-dom"
+import React, { memo, useCallback } from "react"
+import { Helmet } from "react-helmet"
+import styles from "./styles.module.scss"
+
+export type Props = RouteComponentProps
+
+const Login: React.FC<Props> = (): JSX.Element => {
+    const onSubmit = useCallback((event: React.SyntheticEvent): void => {
+        event.preventDefault()
+        const target = event.target as typeof event.target & {
+            email: { value: string }
+            password: { value: string }
+        }
+        const email = target.email.value
+        const password = target.password.value
+
+        console.log("email and password checked", email, password)
+
+        // call service with email & password
+    }, [])
+
+    return (
+        <div className={styles.Login}>
+            <Helmet title="Login" />
+            <form onSubmit={onSubmit} className={styles.form}>
+                <div className={styles.LoginIntro} key="login-intro">
+                    Connectez-vous pour accéder à votre espace.
+                </div>
+                <div className={styles.formLine} key="line-email">
+                    <label htmlFor="email">Email</label>
+                    <input type="email" id="email" />
+                </div>
+                <div className={styles.formLine} key="line-password">
+                    <label htmlFor="password">Mot de passe</label>
+                    <input type="password" id="password" />
+                </div>
+                <div className={styles.formButtons}>
+                    <button type="submit">Connexion</button>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default memo(Login)
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
new file mode 100755
index 0000000..7992e71
--- /dev/null
+++ b/src/pages/Login/index.tsx
@@ -0,0 +1,14 @@
+import loadable from "@loadable/component"
+
+import { Loading, ErrorBoundary } from "../../components"
+import { Props } from "./Login"
+
+const Login = loadable(() => import("./Login"), {
+    fallback: <Loading />,
+})
+
+export default (props: Props): JSX.Element => (
+    <ErrorBoundary>
+        <Login {...props} />
+    </ErrorBoundary>
+)
diff --git a/src/pages/Login/styles.module.scss b/src/pages/Login/styles.module.scss
new file mode 100755
index 0000000..78bc95b
--- /dev/null
+++ b/src/pages/Login/styles.module.scss
@@ -0,0 +1,36 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.Login {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+
+.form {
+    @include page-content-wrapper;
+}
+
+.LoginIntro {
+    margin-bottom: 10px;
+}
+
+.formLine {
+    padding: 5px 0;
+
+    label {
+        display: block;
+        margin-left: 5px;
+    }
+    input {
+        width: 100%;
+        border: 1px solid #333;
+        border-radius: 4px;
+    }
+}
+
+.formButtons {
+    margin-top: 10px;
+    padding: 5px 0;
+    text-align: center;
+}
diff --git a/src/routes/index.ts b/src/routes/index.ts
index c2fdd6c..687a571 100755
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -3,6 +3,7 @@ import { RouteConfig } from "react-router-config"
 import App from "../app"
 import AsyncHome, { loadData as loadHomeData } from "../pages/Home"
 import AsyncMembrePage, { loadData as loadMembrePageData } from "../pages/MembrePage"
+import Login from "../pages/Login"
 import NotFound from "../pages/NotFound"
 
 export default [
@@ -20,6 +21,10 @@ export default [
                 component: AsyncMembrePage,
                 loadData: loadMembrePageData,
             },
+            {
+                path: "/login",
+                component: Login,
+            },
             {
                 component: NotFound,
             },
diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss
index e0f6664..6af9f45 100644
--- a/src/theme/mixins.scss
+++ b/src/theme/mixins.scss
@@ -1,5 +1,20 @@
+@import "./variables";
+
 @mixin desktop {
     @media (min-width: 800px) {
         @content;
     }
 }
+
+@mixin page-content-wrapper {
+    margin: 10px;
+    padding: 10px;
+    background-color: $color-white;
+    border-radius: 15px;
+    border: $border-large;
+
+    @include desktop {
+        padding: 20px;
+        width: 400px;
+    }
+}