update code

src/View/Home/HomeContainer.js

+import React, { useState, useEffect } from "react";
 import HomeView from "./HomeView";
+import { useLocation } from "react-router-dom";
 
 const HomeContainer = (props) => {
-  return <HomeView />;
+  const location = useLocation();
+
+  const [state, setState] = useState({
+    latitude: null,
+    longitude: null,
+  });
+
+  useEffect(() => {
+    getPosition();
+  }, []);
+
+  const [user, setUser] = useState({
+    name: location.state.fullName,
+    code: location.state.code,
+  });
+
+  const getPosition = async () => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      if (position.coords.longitude)
+        setState({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+    });
+  };
+
+  const onCheckIn = () => {
+    console.log(state);
+  };
+
+  return <HomeView user={user} onCheckIn={onCheckIn} />;
 };
 
 export default HomeContainer;

src/View/Home/HomeView.js

@@ -12,38 +12,25 @@ import {
 import ButtonCheckIn from "./ButtonCheckIn";
 
 const HomeView = (props) => {
-  const [state, setState] = useState({
-    latitude: null,
-    longitude: null,
-  });
+  const { user, onCheckIn } = props;
+
   const [status, setStatus] = useState(0);
-  const getPosition = () => {
-    navigator.geolocation.getCurrentPosition((position) => {
-      console.log(position.coords.longitude);
-      console.log(position.coords.latitude);
-    });
-    if (status == 0) {
-      setStatus(1);
-    } else {
-      setStatus(0);
-    }
-  };
-  useEffect(() => {
-    getPosition();
-  }, []);
+
   return (
     <Container fixed style={{ height: "100vh" }}>
       <div style={{ marginTop: 50 }} />
       <div style={{ textAlign: "center", fontSize: "35px" }}>
-        Tên: Lê Trọng Trí
+        <Typography variant={"h4"} style={{ color: " #3399ff" }}>
+          Chào mừng {user ? user.name : ""}
+        </Typography>
       </div>
       <br />
       <Grid container style={{ height: "100vh", justifyContent: "center" }}>
         <Fab
           color="secondary"
           aria-label="edit"
-          style={{ width: "20vw", height: "20vw" }}
-          onClick={getPosition}
+          style={{ width: "30vw", height: "30vw" }}
+          onClick={onCheckIn}
         >
           <span style={{ fontSize: "3vw" }}>
             {status == 0 ? "Checkin" : "Checkout"}

src/View/Login/LoginScreen.js

-import React from "react";
+import React, { useState } from "react";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import TextField from "@material-ui/core/TextField";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-import Link from "@material-ui/core/Link";
-import Grid from "@material-ui/core/Grid";
-import Box from "@material-ui/core/Box";
+import { FormHelperText, Link, Grid, Box, Typography } from "@material-ui/core";
+import { useHistory } from "react-router-dom";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
-import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
+import { loginApi } from "../../api/user";
 
 function Copyright() {
   return (
@@ -46,27 +43,63 @@ const useStyles = makeStyles((theme) => ({
 
 const LoginScreen = () => {
   const classes = useStyles();
+  let history = useHistory();
+  const [state, setState] = useState({
+    appcode: "Dcv",
+    username: "",
+    password: "",
+  });
+
+  const [helperText, sethelperText] = useState("");
+  const onLogin = async () => {
+    console.log("Abc");
+    if (state.username === "" || state.password === "") {
+      sethelperText("");
+      sethelperText("Cần phải điền đầy đủ email và password");
+    } else {
+      sethelperText("");
+      console.log(state);
+      const res = await loginApi(state);
+      console.log(res.data);
+
+      if (res.data && res.data.errorCode === 0) {
+        localStorage.setItem("TOKEN_KEY", res.data.data.accessToken);
+        history.push({
+          pathname: "/home",
+          state: { code: res.data.data.code, fullName: res.data.data.fullName },
+        });
+      } else if (res.data && res.data.errorCode === 1) {
+        sethelperText("");
+        sethelperText("Sai email hoặc mật khẩu");
+      }
+    }
+  };
+
   return (
     <div style={{ height: "100vh" }}>
       <Container component="main" maxWidth="xs">
         <CssBaseline />
         <div className={classes.paper}>
-          <Avatar className={classes.avatar}>
-            <LockOutlinedIcon />
-          </Avatar>
-          <Typography component="h1" variant="h5">
-            Sign in
+          <img
+            style={{ width: 200, height: 100, marginTop: 10, marginBottom: 10 }}
+            src="/logo-DCV.png"
+          />
+          <Typography color={"primary"} component="h1" variant="h5">
+            ĐĂNG NHẬP
           </Typography>
-          <form className={classes.form} noValidate>
           <TextField
             variant="outlined"
             margin="normal"
             required
             fullWidth
-              id="email"
-              label="Email Address"
-              name="email"
+            label="email"
             autoComplete="email"
+            onChange={(e) => {
+              setState({
+                ...state,
+                username: e.target.value,
+              });
+            }}
             autoFocus
           />
           <TextField
@@ -74,38 +107,41 @@ const LoginScreen = () => {
             margin="normal"
             required
             fullWidth
-              name="password"
-              label="Password"
+            label="Mật khẩu"
             type="password"
-              id="password"
+            onChange={(e) => {
+              setState({
+                ...state,
+                password: e.target.value,
+              });
+            }}
             autoComplete="current-password"
           />
-            <FormControlLabel
-              control={<Checkbox value="remember" color="primary" />}
-              label="Remember me"
-            />
+          <div style={{ width: "100%" }}>
+            <FormHelperText
+              style={{ marginLeft: "16px", color: "red", fontSize: "13px" }}
+            >
+              {helperText}
+            </FormHelperText>
+          </div>
+
           <Button
             type="submit"
             fullWidth
             variant="contained"
             color="primary"
             className={classes.submit}
+            onClick={onLogin}
           >
-              Sign In
+            Đăng nhập
           </Button>
           <Grid container>
             <Grid item xs>
               <Link href="#" variant="body2">
-                  Forgot password?
-                </Link>
-              </Grid>
-              <Grid item>
-                <Link href="#" variant="body2">
-                  {"Don't have an account? Sign Up"}
+                Quên mật khẩu?
               </Link>
             </Grid>
           </Grid>
-          </form>
         </div>
         <Box mt={8}>
           <Copyright />

src/api/api.js

+import axios from "axios";
+axios.defaults.timeout = 10000;
+
+export async function GetData(url, data) {
+  const token = localStorage.getItem("TOKEN_KEY");
+  let myRequest = {
+    method: "get",
+    url,
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    },
+    params: {
+      ...data,
+    },
+    timeout: 60 * 1000,
+    // withCredentials: true,
+  };
+  console.log("My request", myRequest);
+  return await axios(myRequest)
+    .then((response) => response)
+    .then((response) => response)
+    .catch((error) => {
+      console.log(error.request);
+      const err = {
+        message: "error",
+        status: error.request.status,
+      };
+      return err;
+    });
+}
+export async function PostLogin(url, json, isAuth = true) {
+  let myRequest = {
+    method: "post",
+    url,
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    timeout: 60 * 1000,
+    data: JSON.stringify(json),
+  };
+  console.log("post data mobile", myRequest);
+  return await axios(myRequest)
+    .then((response) => response)
+    .then((response) => response)
+    .catch((error) => {
+      console.log(error.request);
+      const err = {
+        message: "error",
+        status: error.request.status,
+      };
+      return err;
+    });
+}
+
+export async function PostData(url, json, isAuth = true) {
+  const token = localStorage.getItem("TOKEN_KEY");
+  let myRequest = {
+    method: "post",
+    url,
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    },
+    timeout: 60 * 1000,
+    data: JSON.stringify(json),
+  };
+  console.log("post data mobile", myRequest);
+  return await axios(myRequest)
+    .then((response) => response)
+    .then((response) => response)
+    .catch((error) => {
+      console.log(error.request);
+      const err = {
+        message: "error",
+        status: error.request.status,
+      };
+      return err;
+    });
+}

src/api/user.js

+import { GetData, PostLogin, PostData } from "./api";
+
+export const loginApi = async (body) =>
+  PostLogin("http://hrm.auth.dcv.vn/api/v1/auth/login", body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const getDataApi = async (body) =>
+  GetData("http://hrm.auth.dcv.vn/api/v1/auth/login", body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const checkInApi = async (body) =>
+  PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkin", body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const checkOutApi = async (body) =>
+  PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkout", body)
+    .then((res) => res)
+    .catch((err) => err);