Merge pull request #13 from forceoranj/login

login page refactoring

src/components/LoginForm/LonginForm.tsx

@@ -0,0 +1,39 @@
+import React, { memo, useCallback } from "react"
+import styles from "./styles.module.scss"
+
+const LoginForm = (): 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 (
+        <form onSubmit={onSubmit}>
+            <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>
+    )
+}
+
+export default memo(LoginForm)

src/components/LoginForm/styles.module.scss

@@ -0,0 +1,26 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.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;
+}

src/pages/Login/Login.tsx

@@ -1,46 +0,0 @@
-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)

src/pages/Login/LoginPage.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 LoginForm from "../../components/LoginForm/LonginForm"
+
+export type Props = RouteComponentProps
+
+const LoginPage: React.FC<Props> = (): JSX.Element => (
+    <div className={styles.loginPage}>
+        <div className={styles.loginContent}>
+            <Helmet title="LoginPage" />
+            <LoginForm />
+        </div>
+    </div>
+)
+
+export default memo(LoginPage)

src/pages/Login/index.tsx

@@ -1,14 +1,14 @@
 import loadable from "@loadable/component"
 
 import { Loading, ErrorBoundary } from "../../components"
-import { Props } from "./Login"
+import { Props } from "./LoginPage"
 
-const Login = loadable(() => import("./Login"), {
+const LoginPage = loadable(() => import("./LoginPage"), {
     fallback: <Loading />,
 })
 
 export default (props: Props): JSX.Element => (
     <ErrorBoundary>
-        <Login {...props} />
+        <LoginPage {...props} />
     </ErrorBoundary>
 )

src/pages/Login/styles.module.scss

@@ -1,36 +1,9 @@
-@import "../../theme/variables";
 @import "../../theme/mixins";
 
-.Login {
+.loginPage {
-    display: flex;
+    @include page-wrapper-center;
-    justify-content: center;
-    align-content: center;
 }
 
-.form {
+.loginContent {
     @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;
-}

src/theme/mixins.scss

@@ -6,6 +6,16 @@
     }
 }
 
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+
+@mixin page-wrapper-center {
+    @include flex-center;
+}
+
 @mixin page-content-wrapper {
     margin: 10px;
     padding: 10px;