ref:#187 13 login form change to continue the line of 14 15

Author: lokeeto

hooks/13_LoginForm/src/api/login.ts

@@ -1,5 +1,10 @@
-import {LoginEntity} from '../model/login';
+import { LoginEntity } from "../model/login";
 
 // Just a fake loginAPI
-export const isValidLogin = (loginInfo : LoginEntity) : boolean =>
-  (loginInfo.login === 'admin' && loginInfo.password === 'test');
+export const isValidLogin = (loginInfo: LoginEntity): Promise<boolean> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      // mock call
+      resolve(loginInfo.login === "admin" && loginInfo.password === "test");
+    }, 500);
+  });

hooks/13_LoginForm/src/app.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { HashRouter, Switch, Route } from "react-router-dom";
-import { LoginPage } from "./pages/loginPage";
+import { LoginContainer } from "./pages/login.container";
 import { PageB } from "./pages/pageB";
 
 export const App = () => {
   return (
     <>
       <HashRouter>
         <Switch>
-          <Route exact={true} path="/" component={LoginPage} />
+          <Route exact={true} path="/" component={LoginContainer} />
           <Route path="/pageB" component={PageB} />
         </Switch>
       </HashRouter>

hooks/13_LoginForm/src/common/notification.tsx

@@ -26,8 +26,8 @@ export const NotificationComponent: React.FC<Props> = (props) => {
   return (
     <Snackbar
       anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "left",
+        vertical: "top",
+        horizontal: "right",
       }}
       open={show}
       autoHideDuration={3000}

hooks/13_LoginForm/src/pages/login.component.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import makeStyles from "@material-ui/styles/makeStyles";
+import createStyles from "@material-ui/styles/createStyles";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import { LoginEntity, createEmptyLogin } from "../model/login";
+
+interface PropsForm {
+  onLogin: (login: LoginEntity) => void;
+}
+
+// https://material-ui.com/styles/api/#makestyles-styles-options-hook
+const useFormStyles = makeStyles((theme) =>
+  createStyles({
+    formContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+    },
+    card: {
+      maxWidth: 400,
+      margin: "0 auto",
+    },
+  })
+);
+
+export const LoginComponent: React.FC<PropsForm> = (props) => {
+  const { onLogin } = props;
+  const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
+    createEmptyLogin()
+  );
+  const classes = useFormStyles();
+  const onTexFieldChange = (fieldId) => (e) => {
+    setLoginInfo({
+      ...loginInfo,
+      [fieldId]: e.target.value,
+    });
+  };
+
+  return (
+    <Card className={classes.card}>
+      <CardHeader title="Login" />
+      <CardContent>
+        <div className={classes.formContainer}>
+          <TextField
+            label="Name"
+            margin="normal"
+            value={loginInfo.login}
+            onChange={onTexFieldChange("login")}
+          />
+          <TextField
+            label="Password"
+            type="password"
+            margin="normal"
+            value={loginInfo.password}
+            onChange={onTexFieldChange("password")}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => onLogin(loginInfo)}
+          >
+            Login
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

hooks/13_LoginForm/src/pages/login.container.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { useHistory } from "react-router-dom";
+import { LoginEntity } from "../model/login";
+import { isValidLogin } from "../api/login";
+import { LoginComponent } from "./login.component";
+import { NotificationComponent } from "../common";
+
+interface Props {}
+
+export const LoginContainer: React.FC<Props> = (props) => {
+  const history = useHistory();
+  const [isShowAlert, setShowAlert] = React.useState(false);
+
+  const loginSucceeded = (isValid: boolean) => {
+    if (isValid) {
+      history.push("/pageB");
+    } else {
+      setShowAlert(true);
+    }
+  };
+
+  const handleLogin = (login: LoginEntity) => {
+    isValidLogin(login).then(loginSucceeded);
+  };
+
+  return (
+    <>
+      <LoginComponent onLogin={handleLogin} />
+      <NotificationComponent
+        show={isShowAlert}
+        message="Invalid Form"
+        onClose={() => setShowAlert(false)}
+      />
+    </>
+  );
+};