Merge pull request #14 from forceoranj/register

create register page

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)

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;
+}

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)

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)

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>
+)

src/pages/Register/styles.module.scss

@@ -0,0 +1,9 @@
+@import "../../theme/mixins";
+
+.registerPage {
+    @include page-wrapper-center;
+}
+
+.registerContent {
+    @include page-content-wrapper(600px);
+}

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,
             },

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;
     }
 }

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;
 }