From 03ffae47a6901bcc308b480f6adb80a7af43a8a3 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Sun, 28 Nov 2021 00:31:57 +0100
Subject: [PATCH] create register page

---
 .../{LonginForm.tsx => LoginForm.tsx}         |   0
 src/components/RegisterForm/RegisterForm.tsx  | 101 ++++++++++++++++++
 .../RegisterForm/styles.module.scss           |  44 ++++++++
 src/pages/Login/LoginPage.tsx                 |   8 +-
 src/pages/Register/RegisterPage.tsx           |  18 ++++
 src/pages/Register/index.tsx                  |  14 +++
 src/pages/Register/styles.module.scss         |   9 ++
 src/routes/index.ts                           |   5 +
 src/theme/mixins.scss                         |   4 +-
 src/theme/reset.scss                          |   8 +-
 10 files changed, 204 insertions(+), 7 deletions(-)
 rename src/components/LoginForm/{LonginForm.tsx => LoginForm.tsx} (100%)
 create mode 100644 src/components/RegisterForm/RegisterForm.tsx
 create mode 100755 src/components/RegisterForm/styles.module.scss
 create mode 100644 src/pages/Register/RegisterPage.tsx
 create mode 100755 src/pages/Register/index.tsx
 create mode 100755 src/pages/Register/styles.module.scss

diff --git a/src/components/LoginForm/LonginForm.tsx b/src/components/LoginForm/LoginForm.tsx
similarity index 100%
rename from src/components/LoginForm/LonginForm.tsx
rename to src/components/LoginForm/LoginForm.tsx
diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
new file mode 100644
index 0000000..73ce574
--- /dev/null
+++ b/src/components/RegisterForm/RegisterForm.tsx
@@ -0,0 +1,101 @@
+import React, { memo, useCallback } from "react"
+import styles from "./styles.module.scss"
+
+const RegisterForm = (): JSX.Element => {
+    const onSubmit = useCallback((event: React.SyntheticEvent): void => {
+        event.preventDefault()
+        const target = event.target as typeof event.target & {
+            firstname: { value: string }
+            lastname: { value: string }
+            email: { value: string }
+            phone: { value: string }
+        }
+        const firstname = target.firstname.value
+        const lastname = target.lastname.value
+        const email = target.email.value
+        const phone = target.phone.value
+
+        console.log("register fields checked", firstname, lastname, email, phone)
+
+        // call service with fields
+    }, [])
+
+    /*
+    prenom
+    nom
+    mail
+    tel
+    j'ai déjà été bénévole pour PEL
+    un petit mot...
+     */
+
+    return (
+        <form onSubmit={onSubmit}>
+            <dl className={styles.registerIntro} key="register-intro">
+                <dt>Qu&apos;est-ce le festival ?</dt>
+                <dd>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </dd>
+                <dt>Être bénévole à PEL c&apos;est :</dt>
+                <dd>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </dd>
+            </dl>
+            <div className={styles.formLine} key="line-firstname">
+                <label htmlFor="firstname">Prénom</label>
+                <input type="text" id="firstname" />
+            </div>
+            <div className={styles.formLine} key="line-lastname">
+                <label htmlFor="lastname">Nom</label>
+                <input type="text" id="lastname" />
+            </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-phone">
+                <label htmlFor="phone">Téléphone</label>
+                <input type="text" id="phone" />
+            </div>
+            <div className={styles.formLine} key="line-already-volunteer">
+                <div>J&apos;ai déjà été bénévole</div>
+                <input
+                    type="radio"
+                    name="alreadyVolunteer"
+                    id="alreadyVolunteer-yes"
+                    className={styles.inputRadio}
+                />
+                <label htmlFor="alreadyVolunteer-yes">Oui</label>
+                <input
+                    type="radio"
+                    name="alreadyVolunteer"
+                    id="alreadyVolunteer-no"
+                    className={styles.inputRadio}
+                />
+                <label htmlFor="alreadyVolunteer-no">Non</label>
+            </div>
+            <div className={styles.formLine} key="line-message">
+                <label htmlFor="message">
+                    Des petits mots sympas, questions, envies, des infos sur toi, des compétences
+                    dont tu aimerais te servir... dis-nous !!!
+                </label>
+                <textarea name="message" id="message" />
+            </div>
+            <div className={styles.formButtons}>
+                <button type="submit">Je deviens bénévole</button>
+            </div>
+        </form>
+    )
+}
+
+export default memo(RegisterForm)
diff --git a/src/components/RegisterForm/styles.module.scss b/src/components/RegisterForm/styles.module.scss
new file mode 100755
index 0000000..7cd0669
--- /dev/null
+++ b/src/components/RegisterForm/styles.module.scss
@@ -0,0 +1,44 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.registerIntro {
+    dt {
+        font-weight: bold;
+    }
+    dd {
+        margin-bottom: 10px;
+    }
+}
+
+.formLine {
+    padding: 5px 0;
+
+    label {
+        display: block;
+        margin-left: 5px;
+    }
+    input,
+    textarea {
+        width: 100%;
+        padding: 4px;
+        border: 1px solid #333;
+        border-radius: 4px;
+        outline: 0;
+    }
+    textarea {
+        height: 80px;
+    }
+    .inputRadio {
+        width: inherit;
+    }
+    .inputRadio + label {
+        display: inline;
+        margin: 0 20px 0 5px;
+    }
+}
+
+.formButtons {
+    margin-top: 10px;
+    padding: 5px 0;
+    text-align: center;
+}
diff --git a/src/pages/Login/LoginPage.tsx b/src/pages/Login/LoginPage.tsx
index 1147f92..e4e0765 100644
--- a/src/pages/Login/LoginPage.tsx
+++ b/src/pages/Login/LoginPage.tsx
@@ -2,17 +2,17 @@ import { RouteComponentProps } from "react-router-dom"
 import React, { memo } from "react"
 import { Helmet } from "react-helmet"
 import styles from "./styles.module.scss"
-import LoginForm from "../../components/LoginForm/LonginForm"
+import LoginForm from "../../components/LoginForm/LoginForm"
 
 export type Props = RouteComponentProps
 
-const LoginPage: React.FC<Props> = (): JSX.Element => (
+const RegisterPage: React.FC<Props> = (): JSX.Element => (
     <div className={styles.loginPage}>
         <div className={styles.loginContent}>
-            <Helmet title="LoginPage" />
+            <Helmet title="RegisterPage" />
             <LoginForm />
         </div>
     </div>
 )
 
-export default memo(LoginPage)
+export default memo(RegisterPage)
diff --git a/src/pages/Register/RegisterPage.tsx b/src/pages/Register/RegisterPage.tsx
new file mode 100644
index 0000000..b6651b3
--- /dev/null
+++ b/src/pages/Register/RegisterPage.tsx
@@ -0,0 +1,18 @@
+import { RouteComponentProps } from "react-router-dom"
+import React, { memo } from "react"
+import { Helmet } from "react-helmet"
+import styles from "./styles.module.scss"
+import RegisterForm from "../../components/RegisterForm/RegisterForm"
+
+export type Props = RouteComponentProps
+
+const RegisterPage: React.FC<Props> = (): JSX.Element => (
+    <div className={styles.registerPage}>
+        <div className={styles.registerContent}>
+            <Helmet title="RegisterPage" />
+            <RegisterForm />
+        </div>
+    </div>
+)
+
+export default memo(RegisterPage)
diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
new file mode 100755
index 0000000..a8f3dc2
--- /dev/null
+++ b/src/pages/Register/index.tsx
@@ -0,0 +1,14 @@
+import loadable from "@loadable/component"
+
+import { Loading, ErrorBoundary } from "../../components"
+import { Props } from "./RegisterPage"
+
+const RegisterPage = loadable(() => import("./RegisterPage"), {
+    fallback: <Loading />,
+})
+
+export default (props: Props): JSX.Element => (
+    <ErrorBoundary>
+        <RegisterPage {...props} />
+    </ErrorBoundary>
+)
diff --git a/src/pages/Register/styles.module.scss b/src/pages/Register/styles.module.scss
new file mode 100755
index 0000000..c7f3efb
--- /dev/null
+++ b/src/pages/Register/styles.module.scss
@@ -0,0 +1,9 @@
+@import "../../theme/mixins";
+
+.registerPage {
+    @include page-wrapper-center;
+}
+
+.registerContent {
+    @include page-content-wrapper(600px);
+}
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 687a571..3bd20da 100755
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -4,6 +4,7 @@ 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 Register from "../pages/Register"
 import NotFound from "../pages/NotFound"
 
 export default [
@@ -25,6 +26,10 @@ export default [
                 path: "/login",
                 component: Login,
             },
+            {
+                path: "/register",
+                component: Register,
+            },
             {
                 component: NotFound,
             },
diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss
index 098eb7f..1bbd843 100644
--- a/src/theme/mixins.scss
+++ b/src/theme/mixins.scss
@@ -16,7 +16,7 @@
     @include flex-center;
 }
 
-@mixin page-content-wrapper {
+@mixin page-content-wrapper($desktopWidth: 400px) {
     margin: 10px;
     padding: 10px;
     background-color: $color-white;
@@ -25,6 +25,6 @@
 
     @include desktop {
         padding: 20px;
-        width: 400px;
+        width: $desktopWidth;
     }
 }
diff --git a/src/theme/reset.scss b/src/theme/reset.scss
index 6aa717e..a550e5c 100644
--- a/src/theme/reset.scss
+++ b/src/theme/reset.scss
@@ -2,6 +2,12 @@ body,
 h1,
 div,
 input,
-button {
+textarea,
+button,
+dl,
+dt,
+dd {
     box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }