Finish Login

.env

+#config
+REACT_APP_AWS_USER_POOL_ID = us-east-1_c1uad9xyt
+REACT_APP_AWS_CLIENT_ID = 339mutkibblh97ojfjgti8gei7
+REACT_APP_AQBITS_SERVER_URL = wss://ewcxwsv9hc.execute-api.us-east-1.amazonaws.com/development
+REACT_APP_BASE_URL_AQBITS = https://wll3ump6p9.execute-api.us-east-1.amazonaws.com/api
\ No newline at end of file

.gitignore

+/node_modules
\ No newline at end of file

.vscode/settings.json

+{
+    "git.ignoreLimitWarning": true
+}
\ No newline at end of file

package.json

@@ -48,6 +48,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "amazon-cognito-identity-js": "^5.0.3",
     "bootstrap": "4.3.1",
     "classnames": "2.2.6",
     "headroom.js": "0.11.0",

src/constans/index.js

@@ -18,3 +18,8 @@ export const validatePhoneNumber = (phoneNumber) => {
     return false;
   }
 }
+
+export const validateEmail = (email) => {
+  const string = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return string.test(String(email).toLowerCase());
+};
\ No newline at end of file

src/index.js

@@ -35,6 +35,8 @@ import DetailProfile from "./components/Profile/DetailProfile.js"
 import SearchProfile from "./components/Profile/SearchProfile.js";
 import Tracecode from "./components/Profile/Tracecode.js"
 import AddProduct from "components/Profile/AddProduct";
+import Signin from "services/Signin";
+import Signup from "services/Signup";
 // import { Routes } from "./reoutes";
 
 ReactDOM.render(
@@ -71,16 +73,19 @@ ReactDOM.render(
         exact
         render={props => <Landing {...props} />}
       />
-      <Route path="/login-page" exact render={props => <Login {...props} />} />
+      <Route
+        path="/signin"
+        exact
+        render={props => <Signin {...props} />} />
       <Route
         path="/profile-page"
         exact
         render={props => <Profile {...props} />}
       />
       <Route
-        path="/register-page"
+        path="/signup"
         exact
-        render={props => <Register {...props} />}
+        render={props => <Signup {...props} />}
       />
       <Redirect to="/" />
     </Switch>

src/reoutes.js

 export const Routes = {
-    SearchDetail: { path: "./profile"},
-    TraceCode: { path: "./trace-code"}
+    SearchDetail: { path: "./profile" },
+    TraceCode: { path: "./trace-code" },
+    Signin: { path: "./signin" },
+    Signup: { path: "./signup" },
+    Home: { path: "" }
 }
\ No newline at end of file

src/services/AuthServices.js

+import {
+  CognitoUser,
+  CognitoUserPool,
+  CognitoUserAttribute,
+  AuthenticationDetails,
+} from "amazon-cognito-identity-js";
+
+const poolData = {
+  UserPoolId: process.env.REACT_APP_AWS_USER_POOL_ID,
+  ClientId: process.env.REACT_APP_AWS_CLIENT_ID,
+};
+
+const userPool = new CognitoUserPool(poolData);
+
+export const authServices = {
+  signUp: (email, password) => {
+    return new Promise((resolve, reject) => {
+      const userName = email.split("@")[0];
+      const attributeList = [];
+      const dataEmail = {
+        Name: "email",
+        Value: email,
+      };
+      const dataPhoneNumber = {
+        Name: "phone_number",
+        Value: "+0358853172",
+      };
+
+      const dataName = {
+        Name: "name",
+        Value: userName,
+      };
+
+      const dataRole = {
+        Name: "custom:role",
+        Value: "USER",
+      };
+      const attributeEmail = new CognitoUserAttribute(dataEmail);
+      const attributePhoneNumber = new CognitoUserAttribute(dataPhoneNumber);
+      const atrributeName = new CognitoUserAttribute(dataName);
+      const atrributeRole = new CognitoUserAttribute(dataRole);
+      attributeList.push(attributeEmail);
+      attributeList.push(attributePhoneNumber);
+      attributeList.push(atrributeName);
+      attributeList.push(atrributeRole);
+
+      userPool.signUp(
+        userName,
+        password,
+        attributeList,
+        null,
+        function (err, result) {
+          if (err) {
+            return reject(err);
+          }
+          var cognitoUser = result.user;
+          localStorage.setItem("signup_user_name", cognitoUser.getUsername());
+          return resolve(cognitoUser.getUsername());
+        }
+      );
+    });
+  },
+  verifyCode: (verifyCode) => {
+    return new Promise((resolve, reject) => {
+      const signUpUserName = localStorage.getItem("signup_user_name");
+      var userData = {
+        Username: signUpUserName,
+        Pool: userPool,
+      };
+      var cognitoUser = new CognitoUser(userData);
+      cognitoUser.confirmRegistration(verifyCode, true, function (err, result) {
+        if (err) {
+          return reject(err);
+        }
+        return resolve(result);
+      });
+    });
+  },
+  login: (email, password) => {
+    return new Promise((resolve, reject) => {
+      const userName = email.split("@")[0];
+      var authenticationData = {
+        email,
+        Password: password,
+      };
+      var authenticationDetails = new AuthenticationDetails(authenticationData);
+      var userData = {
+        Username: userName,
+        Pool: userPool,
+      };
+      var cognitoUser = new CognitoUser(userData);
+      cognitoUser.authenticateUser(authenticationDetails, {
+        onSuccess: function (result) {
+          var accessToken = result.getAccessToken().getJwtToken();
+          console.log("accessToken", accessToken);
+          localStorage.setItem("access_token", accessToken);
+          var idToken = result.getIdToken().getJwtToken();
+          console.log("idToken", idToken);
+          localStorage.setItem("id_token", idToken);
+          localStorage.setItem("signin_user_name", userName);
+          resolve(result);
+        },
+        onFailure: function (err) {
+          reject(err);
+        },
+      });
+    });
+  },
+  forgotPassword: (email) => {
+    return new Promise((resolve, reject) => {
+      var userData = {
+        Username: email,
+        Pool: userPool,
+      };
+      var cognitoUser = new CognitoUser(userData);
+      cognitoUser.forgotPassword({
+        onSuccess: function(data) {
+          localStorage.setItem("forgot_password", email);
+          resolve(data);
+        },
+        onFailure: function(err) {
+          reject(err);
+        }
+      });
+    });
+  },
+  resetPassword: (code, newPassword) => {
+    return new Promise((resolve, reject) => {
+      const email = localStorage.getItem("forgot_password"); 
+      var userData = {
+        Username: email,
+        Pool: userPool,
+      };
+      var cognitoUser = new CognitoUser(userData);
+      cognitoUser.confirmPassword(code, newPassword, {
+        onSuccess() {
+          resolve(code, newPassword);
+        },
+        onFailure(err) {
+          reject(err);
+        },
+      });
+    });
+  },
+  isAuthenticated: () => {
+    return localStorage.getItem("access_token") && localStorage.getItem("id_token");
+  },
+  logout: () => {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("id_token");
+  },
+  checkUserRole: () => {
+    const cognitoUser = userPool.getCurrentUser();
+    const session = cognitoUser.getSession((err, session) => {
+      return session.idToken.payload['custom:role'];
+    });
+    return session;
+  }
+};

src/services/ForgotPassword.js

+import React, { useState } from "react";
+import {
+  Col,
+  Row,
+  Form,
+  Card,
+  Button,
+  Container,
+  InputGroup,
+  Alert,
+  Spinner
+} from "@themesberg/react-bootstrap";
+import { Link, useHistory } from "react-router-dom";
+
+import { Routes } from "../routes";
+import BgImage from "../assets/img/illustrations/signin.svg";
+import { authServices, validateEmail } from "./AuthServices";
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [validEmail, setValidEmail] = useState(false);
+  const [showMessage, setShowMessage] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const history = useHistory();
+
+  const onHandleForgotPassword = () => {
+    if (validateEmail(email)) {
+      setLoading(true);
+      setShowMessage(false);
+      setValidEmail(false);
+      authServices
+      .forgotPassword(email)
+      .then((rs) => {
+        history.push(Routes.ResetPassword.path);
+        setShowMessage(false);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setShowMessage(true);
+        setLoading(false);
+        setErrorMessage(err.message);
+      });
+    } else {
+      setShowMessage(false);
+      setValidEmail(true);
+    }
+  }
+
+  return (
+    <main>
+      <section className="vh-lg-100 mt-4 mt-lg-0 bg-soft d-flex align-items-center">
+        <Container>
+          {loading ? (
+            <div className="text-center mb-2">
+              <Spinner animation="border" variant="secondary" role="status" />
+            </div>
+          ) : (
+            false
+          )}
+          <div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
+          <Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
+            <Col
+              xs={12}
+              className="d-flex align-items-center justify-content-center"
+            >
+              <div className="signin-inner my-3 my-lg-0 bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
+                <h3>Forgot your password?</h3>
+                <Form onSubmit={onHandleForgotPassword}>
+                  <div className="mb-4">
+                    <Form.Label htmlFor="email">Your Email</Form.Label>
+                    <InputGroup id="email">
+                      <Form.Control
+                        required
+                        autoFocus
+                        type="email"
+                        placeholder="example@company.com"
+                        value={email} onChange={(e) => setEmail(e.target.value)}
+                      />
+                    </InputGroup>
+                    <Form.Control.Feedback
+                    type="invalid"
+                    className="invalid-feedback"
+                  >
+                    {validEmail ? "Please input validate email" : false}
+                  </Form.Control.Feedback>
+                  </div>
+                  <Button variant="primary" type="submit" className="w-100">
+                    Recover password
+                  </Button>
+                </Form>
+                <div className="d-flex justify-content-center align-items-center mt-4">
+                  <span className="fw-normal">
+                    No forgot password?
+                    <Card.Link as={Link} to={Routes.Signin.path} className="fw-bold">
+                      {` Back to sign in `}
+                    </Card.Link>
+                  </span>
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  );
+};

src/services/Lambda/ListNodeLambda.js

+import axiosClient from "../NodeServices/index";
+
+const END_POINT = "https://v9f109ai6i.execute-api.us-east-1.amazonaws.com/development";
+
+export const getNodes = () => axiosClient.get(END_POINT);
+

src/services/Lambda/NodeHistoryLambda.js

+import axiosClient from "../NodeServices/index";
+
+const END_POINT = "https://np23gd0j54.execute-api.us-east-1.amazonaws.com/development";
+
+export const getNodeHistory = (param) => axiosClient.get(END_POINT, { params: {node_id: param} });
+

src/services/Lock.js

+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAngleLeft,
+  faEye,
+  faUnlockAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  Col,
+  Row,
+  Form,
+  Card,
+  Image,
+  Button,
+  Container,
+  InputGroup,
+} from "@themesberg/react-bootstrap";
+import { Link } from "react-router-dom";
+
+import { Routes } from "../routes";
+import BgImage from "../assets/img/illustrations/signin.svg";
+import Profile3 from "../assets/img/team/profile-picture-3.jpg";
+
+export default () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const passwordInputType = showPassword ? "text" : "password";
+  const passwordIconColor = showPassword ? "#262B40" : "";
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <main>
+      <section className="vh-lg-100 bg-soft d-flex align-items-center my-4">
+        <Container>
+          <p className="text-center">
+            <Card.Link
+              as={Link}
+              to={Routes.Home.path}
+              className="text-gray-700"
+            >
+              <FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to
+              homepage
+            </Card.Link>
+          </p>
+          <Row
+            className="justify-content-center form-bg-image"
+            style={{ backgroundImage: `url(${BgImage})` }}
+          >
+            <Col
+              xs={12}
+              className="d-flex align-items-center justify-content-center"
+            >
+              <div className="bg-white shadow-soft border border-light rounded p-4 p-lg-5 w-100 fmxw-500">
+                <div className="text-center text-md-center mb-4 mt-md-0">
+                  <div className="user-avatar large-avatar mx-auto mb-3 border-dark p-2">
+                    <Image src={Profile3} className="rounded-circle" />
+                  </div>
+                  <h3 className="mb-3">Bonnie Green</h3>
+                  <p className="text-gray">Better to be safe than sorry.</p>
+                </div>
+                <Form className="mt-5">
+                  <Form.Group id="password" className="mb-4">
+                    <Form.Label>Your Password</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faUnlockAlt} />
+                      </InputGroup.Text>
+                      <Form.Control
+                        required
+                        type={passwordInputType}
+                        placeholder="Password"
+                      />
+                      <InputGroup.Text onClick={togglePasswordVisibility}>
+                        <FontAwesomeIcon
+                          color={passwordIconColor}
+                          icon={faEye}
+                        />
+                      </InputGroup.Text>
+                    </InputGroup>
+                  </Form.Group>
+                  <Button variant="primary" type="submit" className="w-100">
+                    Unlock
+                  </Button>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  );
+};

src/services/NodeServices/Home.js

+import axiosClient from "../NodeServices/index";
+import { GET_NODE, GET_HISTORY_NODE } from "../../constans/Home";
+
+const homeAPI = {
+  getNodesServices: () => {
+    return axiosClient.get(GET_NODE);
+  },
+  getNodeHistoryServices: (param) => {
+    return axiosClient.get(GET_HISTORY_NODE, { params: { node_id: param }});
+  }
+};
+
+export default homeAPI;

src/services/NodeServices/index.js

+import axios from "axios";
+import queryString from "query-string";
+
+const axiosClient = axios.create({
+  baseURL: process.env.REACT_APP_BASE_URL_AQBITS,
+  headers: {
+    "content-text": "application/json",
+  },
+  paramsSerializer: (params) => queryString.stringify(params),
+});
+
+axiosClient.interceptors.request.use(
+  async (config) => {
+    const idToken = localStorage.getItem("id_token");
+    const accessToken = localStorage.getItem("access_token");
+    if (idToken) {
+      config.headers = {
+        Authorization: `${idToken}`,
+        AccessToken: `${accessToken}`
+      };
+    }
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
+
+export default axiosClient;

src/services/NotFound.js

+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import {
+  Col,
+  Row,
+  Card,
+  Image,
+  Button,
+  Container,
+} from "@themesberg/react-bootstrap";
+
+import { Link } from "react-router-dom";
+
+import { Routes } from "../routes";
+import NotFoundImage from "../assets/img/illustrations/404.svg";
+
+export default () => {
+  return (
+    <main>
+      <section className="vh-100 d-flex align-items-center justify-content-center">
+        <Container>
+          <Row>
+            <Col
+              xs={12}
+              className="text-center d-flex align-items-center justify-content-center"
+            >
+              <div>
+                <Card.Link as={Link} to={Routes.Home.path}>
+                  <Image src={NotFoundImage} className="img-fluid w-75" />
+                </Card.Link>
+                <h1 className="text-primary mt-5">
+                  Page not <span className="fw-bolder">found</span>
+                </h1>
+                <p className="lead my-4">
+                  Oops! Looks like you followed a bad link. If you think this is
+                  a problem with us, please tell us.
+                </p>
+                <Button
+                  as={Link}
+                  variant="primary"
+                  className="animate-hover"
+                  to={Routes.Home.path}
+                >
+                  <FontAwesomeIcon
+                    icon={faChevronLeft}
+                    className="animate-left-3 me-3 ms-2"
+                  />
+                  Go back home
+                </Button>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  );
+};

src/services/ResetPassword.js

+
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUnlockAlt, faFilter } from "@fortawesome/free-solid-svg-icons";
+import { Col, Row, Form, Card, Button, Container, InputGroup, Alert, Spinner } from '@themesberg/react-bootstrap';
+import { Link, useHistory } from 'react-router-dom';
+
+import { Routes } from "../routes";
+import BgImage from "../assets/img/illustrations/signin.svg";
+import { authServices } from "./AuthServices";
+
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  
+  const [checkPassword, setCheckPassword] = useState(false);
+  const [showMessage, setShowMessage] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const history = useHistory();
+
+  const onHandleResetPassword = (event) => {
+    event.preventDefault();
+    if(newPassword === confirmPassword){
+      setLoading(true);
+      setShowMessage(false);
+      setCheckPassword(false);
+      authServices
+      .resetPassword(code, newPassword)
+      .then((rs) => {
+        history.push(Routes.Signin.path);
+        setShowMessage(false);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setShowMessage(true);
+        setLoading(false);
+        setErrorMessage(err.message);
+      });
+    }else{
+      setShowMessage(false);
+      setCheckPassword(true);
+    }
+  };
+
+  return (
+    <main>
+      <section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
+        <Container>
+          {loading ? (
+            <div className="text-center mb-2">
+              <Spinner animation="border" variant="secondary" role="status" />
+            </div>
+          ) : (
+            false
+          )}
+          <div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
+          <Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
+            <Col xs={12} className="d-flex align-items-center justify-content-center">
+              <div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
+                <div className="text-center text-md-center mb-4 mt-md-0">
+                  <h3 className="mb-4">Reset password</h3>
+                </div>
+                <Form onSubmit={onHandleResetPassword}>
+                  <Form.Group id="number" className="mb-4">
+                    <Form.Label>Verify Code</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faFilter} />
+                      </InputGroup.Text>
+                      <Form.Control type="number" placeholder="Verify Code" min={0} value={code} onChange={(e) => setCode(e.target.value)} />
+                    </InputGroup>
+                  </Form.Group>
+                  <Form.Group id="password" className="mb-4">
+                    <Form.Label>Your Password</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faUnlockAlt} />
+                      </InputGroup.Text>
+                      <Form.Control required type="password" placeholder="Password" autoComplete="on" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+                    </InputGroup>
+                    <Form.Control.Feedback type="invalid" className="invalid-feedback" >{checkPassword ? "Please input match password" : false}</Form.Control.Feedback>
+                  </Form.Group>
+                  <Form.Group id="confirmPassword" className="mb-4">
+                    <Form.Label>Confirm Password</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faUnlockAlt} />
+                      </InputGroup.Text>
+                      <Form.Control required type="password" placeholder="Confirm Password" autoComplete="on" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+                    </InputGroup>
+                    <Form.Control.Feedback type="invalid" className="invalid-feedback" >{checkPassword ? "Please input match password" : false}</Form.Control.Feedback>
+                  </Form.Group>
+                  <Button variant="primary" type="submit" className="w-100">
+                    Reset password
+                  </Button>
+                </Form>
+                <div className="d-flex justify-content-center align-items-center mt-4">
+                  <span className="fw-normal">
+                    Not reset?
+                    <Card.Link as={Link} to={Routes.ForgotPassword.path} className="fw-bold">
+                      {` Back to forgot password `}
+                    </Card.Link>
+                  </span>
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  );
+};

src/services/ServerError.js

+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import {
+  Col,
+  Row,
+  Image,
+  Button,
+  Container,
+} from "@themesberg/react-bootstrap";
+import { Link } from "react-router-dom";
+
+import { Routes } from "../routes";
+import ErrorImage from "../assets/img/illustrations/500.svg";
+
+export default () => {
+  return (
+    <main>
+      <section className="vh-100 d-flex align-items-center justify-content-center">
+        <Container>
+          <Row className="align-items-center">
+            <Col
+              xs={12}
+              lg={5}
+              className="order-2 order-lg-1 text-center text-lg-left"
+            >
+              <h1 className="text-primary mt-5">
+                Something has gone <span className="fw-bolder">seriously</span>{" "}
+                wrong
+              </h1>
+              <p className="lead my-4">
+                It's always time for a coffee break. We should be back by the
+                time you finish your coffee.
+              </p>
+              <Button
+                as={Link}
+                variant="primary"
+                className="animate-hover"
+                to={Routes.Home.path}
+              >
+                <FontAwesomeIcon
+                  icon={faChevronLeft}
+                  className="animate-left-3 me-3 ms-2"
+                />
+                Go back home
+              </Button>
+            </Col>
+            <Col
+              xs={12}
+              lg={7}
+              className="order-1 order-lg-2 text-center d-flex align-items-center justify-content-center"
+            >
+              <Image src={ErrorImage} className="img-fluid w-75" />
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  );
+};

src/services/Signin.js

+import React, { useState } from "react";
+import { Link, useHistory } from 'react-router-dom';
+
+import { Routes } from "../reoutes";
+import { authServices } from "./AuthServices";
+import { validateEmail } from "../constans/index";
+
+import {
+  Alert,
+  Button,
+  Card,
+  CardBody,
+  FormGroup,
+  Form,
+  FormFeedback,
+  Input,
+  InputGroupAddon,
+  InputGroupText,
+  InputGroup,
+  Container,
+  Row,
+  Col,
+  Spinner
+} from "reactstrap";
+
+// core components
+import DemoNavbar from "components/Navbars/DemoNavbar.js";
+import SimpleFooter from "components/Footers/SimpleFooter.js";
+
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [checkUser, setCheckUser] = useState(false);
+  const [validEmail, setValidEmail] = useState(false);
+
+  const history = useHistory();
+
+  const onHandleLogin = (event) => {
+    event.preventDefault();
+    let checkEmail = email.includes("@");
+    if (checkEmail) {
+      if (validateEmail(email)) {
+        setLoading(true);
+        setCheckUser(false);
+        setValidEmail(false);
+        authServices
+          .login(email, password)
+          .then((rs) => {
+            history.push(Routes.Home.path);
+            setCheckUser(false);
+            setLoading(false);
+          })
+          .catch((err) => {
+            setCheckUser(true);
+            setLoading(false);
+            setErrorMessage(err.message);
+          });
+      } else {
+        setCheckUser(false);
+        setValidEmail(true);
+      }
+    } else {
+      setLoading(true);
+      setCheckUser(false);
+      setValidEmail(false);
+      authServices
+        .login(email, password)
+        .then((rs) => {
+          history.push(Routes.Home.path);
+          setCheckUser(false);
+          setLoading(false);
+        })
+        .catch((err) => {
+          setCheckUser(true);
+          setLoading(false);
+          setErrorMessage(err.message);
+        });
+    }
+  };
+
+  return (
+    <>
+      <DemoNavbar />
+      <main>
+        <section className="section section-shaped section-lg">
+          <div className="shape shape-style-1 bg-gradient-default">
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+          </div>
+          <Container className="pt-lg-7">
+            {checkUser ? (
+              <div className="text-center"><Alert color="danger">{errorMessage}</Alert></div>
+            ) : (
+              false
+            )}
+            <Row className="justify-content-center">
+              <Col lg="5">
+                <Card className="bg-secondary shadow border-0">
+                  <CardBody className="px-lg-5 py-lg-5">
+                    <Form role="form" onSubmit={onHandleLogin}>
+
+                      <FormGroup id="email" className="mb-3">
+                        <InputGroup className="input-group-alternative">
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="ni ni-email-83" />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input placeholder="Email" type="email"
+                            value={email} onChange={(e) => setEmail(e.target.value)} {...validEmail ? "invalid" : ""} />
+                          <FormFeedback valid>{validEmail}</FormFeedback>
+                        </InputGroup>
+                        {/* <Form.Control.Feedback
+                          type="invalid"
+                          className="invalid-feedback"
+                        >
+                          {validEmail ? "Please input validate email" : false}
+                        </Form.Control.Feedback> */}
+                      </FormGroup>
+
+                      <FormGroup id="password">
+                        <InputGroup className="input-group-alternative">
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="ni ni-lock-circle-open" />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input
+                            placeholder="Password"
+                            type="password"
+                            autoComplete="off"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                          />
+                        </InputGroup>
+                      </FormGroup>
+                      <div className="text-center">
+                        <Button
+                          className="my-4"
+                          color="primary"
+                          type="submit"
+                        >
+                          Sign in
+                        </Button>
+                      </div>
+                      {loading ? (
+                        <div className="text-center">
+                          <Spinner color="primary" />
+                        </div>
+                      ) : (
+                        false
+                      )}
+                    </Form>
+                  </CardBody>
+                </Card>
+                <Row className="mt-3">
+                  <Col xs="6">
+                    <Link
+                      to={Routes.Signup.path}
+                      className="text-light">
+                      <small>Forgot password?</small>
+                    </Link>
+                  </Col>
+                  <Col className="text-right" xs="6">
+                    <Link
+                      to={Routes.Signup.path}
+                      className="text-light">
+                      <small>Create new account</small>
+                    </Link>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+          </Container>
+        </section>
+      </main>
+      <SimpleFooter />
+    </>
+  );
+};

src/services/Signup.js

+
+import React, { useState } from "react";
+import { Link, useHistory } from 'react-router-dom';
+
+import { Routes } from "../reoutes";
+import { authServices } from "./AuthServices";
+import { validateEmail } from "../constans/index";
+
+import {
+  Button,
+  Card,
+  CardBody,
+  FormGroup,
+  Form,
+  FormFeedback,
+  Input,
+  InputGroupAddon,
+  InputGroupText,
+  InputGroup,
+  Container,
+  Row,
+  Col
+} from "reactstrap";
+
+// core components
+import DemoNavbar from "components/Navbars/DemoNavbar.js";
+import SimpleFooter from "components/Footers/SimpleFooter.js";
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [validEmail, setValidEmail] = useState(false);
+  const [checkPassword, setCheckPassword] = useState(false);
+  const [showMessage, setShowMessage] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const history = useHistory();
+
+  const onHandleSignUp = (event) => {
+    event.preventDefault();
+    if (validateEmail(email)) {
+      setValidEmail(false);
+    } else {
+      setShowMessage(false);
+      setValidEmail(true);
+    }
+    if (password === confirmPassword) {
+      setCheckPassword(false);
+    } else {
+      setShowMessage(false);
+      setCheckPassword(true);
+    }
+
+    if (validateEmail(email) && password === confirmPassword) {
+      setLoading(true);
+      setShowMessage(false);
+      authServices
+        .signUp(email, password)
+        .then((rs) => {
+          history.push(Routes.VerifyCode.path);
+          setShowMessage(false);
+          setLoading(false);
+        })
+        .catch((err) => {
+          setShowMessage(true);
+          setLoading(false);
+          setErrorMessage(err.message);
+        });
+    }
+  };
+
+  return (
+    <>
+      <DemoNavbar />
+      <main>
+        <section className="section section-shaped section-lg">
+          <div className="shape shape-style-1 bg-gradient-default">
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+          </div>
+          <Container className="pt-lg-7">
+            <Row className="justify-content-center">
+              <Col lg="5">
+                <Card className="bg-secondary shadow border-0">
+                  <CardBody className="px-lg-5 py-lg-5">
+                    <Form role="form" onSubmit={onHandleSignUp}>
+
+                      <FormGroup id="email">
+                        <InputGroup className="input-group-alternative mb-3">
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="ni ni-email-83" />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input placeholder="Email" type="text" {...validEmail ? "invalid" : ""} />
+                          <FormFeedback>Invalid email</FormFeedback>
+                        </InputGroup>
+                      </FormGroup>
+
+                      <FormGroup id="password">
+                        <InputGroup className="input-group-alternative mb-3">
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="ni ni-lock-circle-open" />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input placeholder="Password" type="password" autoComplete="off" />
+                        </InputGroup>
+                      </FormGroup>
+
+                      <FormGroup id="confirmPassword">
+                        <InputGroup className="input-group-alternative">
+                          <InputGroupAddon addonType="prepend">
+                            <InputGroupText>
+                              <i className="ni ni-lock-circle-open" />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input
+                            placeholder="Confirm Password"
+                            type="password"
+                            autoComplete="off"
+                          />
+                        </InputGroup>
+                      </FormGroup>
+                      <div className="text-center">
+                        <Button
+                          className="mt-4"
+                          color="primary"
+                          type="submit"
+                        >
+                          Create account
+                        </Button>
+                      </div>
+                    </Form>
+                  </CardBody>
+                </Card>
+                <Row className="mt-3">
+                  <Col className="d-flex justify-content-start align-items-center">
+                    <small className="text-light mr-2">
+                      Already have an account?
+                    </small>
+                    <Link
+                      to={Routes.Signin.path}>
+                      <small className="text-primary">
+                        Login
+                      </small>
+                    </Link>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+          </Container>
+        </section>
+      </main>
+      <SimpleFooter />
+    </>
+  );
+};

src/services/VerifyCode.js

+
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFilter, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
+import { Col, Row, Form, Button, Container, InputGroup, Card, Alert, Spinner } from '@themesberg/react-bootstrap';
+import { Link, useHistory } from 'react-router-dom';
+
+import { Routes } from "../routes";
+import BgImage from "../assets/img/illustrations/signin.svg";
+import { authServices } from "./AuthServices";
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const [code, setCode] = useState("");
+  const [showMessage, setShowMessage] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const history = useHistory();
+
+  const onHandleVerifyCode = (event) => {
+    event.preventDefault();
+    setLoading(true);
+    setShowMessage(false);
+    authServices
+      .verifyCode(code)
+      .then((rs) => {
+        history.push(Routes.Signin.path);
+        setShowMessage(false);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setShowMessage(true);
+        setLoading(false);
+        setErrorMessage(err.message);
+      });
+  };
+
+  return (
+    <main>
+      <section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
+        <Container>
+          {loading ? (
+            <div className="text-center mb-2">
+              <Spinner animation="border" variant="secondary" role="status" />
+            </div>
+          ) : (
+            false
+          )}
+          <div className="text-center"><Alert show={showMessage} variant="danger">{errorMessage}</Alert></div>
+          <Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
+            <p className="text-center">
+              <Card.Link as={Link} to={Routes.Signup.path} className="text-gray-700">
+                <FontAwesomeIcon icon={faAngleLeft} className="me-2" /> Back to sign up
+              </Card.Link>
+            </p>
+            <Col xs={12} className="d-flex align-items-center justify-content-center">
+              <div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
+                <div className="text-center text-md-center mb-4 mt-md-0">
+                  <h3 className="mb-0">Verify Code</h3>
+                </div>
+                <Form className="mt-4" onSubmit={onHandleVerifyCode}>
+                  <Form.Group id="code" className="mb-4">
+                    <Form.Label>Verify Code</Form.Label>
+                    <InputGroup>
+                      <InputGroup.Text>
+                        <FontAwesomeIcon icon={faFilter} />
+                      </InputGroup.Text>
+                      <Form.Control autoFocus required type="number" placeholder="Verify Code" min={0} value={code} onChange={(e) => setCode(e.target.value)} />
+                    </InputGroup>
+                  </Form.Group>
+                  <Button variant="primary" type="submit" className="w-100">
+                    Verify
+                  </Button>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+    </main>
+  );
+};

src/views/examples/Login.js

@@ -64,45 +64,7 @@ class Login extends React.Component {
               <Row className="justify-content-center">
                 <Col lg="5">
                   <Card className="bg-secondary shadow border-0">
-                    <CardHeader className="bg-white pb-5">
-                      <div className="text-muted text-center mb-3">
-                        <small>Sign in with</small>
-                      </div>
-                      <div className="btn-wrapper text-center">
-                        <Button
-                          className="btn-neutral btn-icon"
-                          color="default"
-                          href="#pablo"
-                          onClick={e => e.preventDefault()}
-                        >
-                          <span className="btn-inner--icon mr-1">
-                            <img
-                              alt="..."
-                              src={require("assets/img/icons/common/github.svg")}
-                            />
-                          </span>
-                          <span className="btn-inner--text">Github</span>
-                        </Button>
-                        <Button
-                          className="btn-neutral btn-icon ml-1"
-                          color="default"
-                          href="#pablo"
-                          onClick={e => e.preventDefault()}
-                        >
-                          <span className="btn-inner--icon mr-1">
-                            <img
-                              alt="..."
-                              src={require("assets/img/icons/common/google.svg")}
-                            />
-                          </span>
-                          <span className="btn-inner--text">Google</span>
-                        </Button>
-                      </div>
-                    </CardHeader>
                     <CardBody className="px-lg-5 py-lg-5">
-                      <div className="text-center text-muted mb-4">
-                        <small>Or sign in with credentials</small>
-                      </div>
                       <Form role="form">
                         <FormGroup className="mb-3">
                           <InputGroup className="input-group-alternative">
@@ -128,19 +90,6 @@ class Login extends React.Component {
                             />
                           </InputGroup>
                         </FormGroup>
-                        <div className="custom-control custom-control-alternative custom-checkbox">
-                          <input
-                            className="custom-control-input"
-                            id=" customCheckLogin"
-                            type="checkbox"
-                          />
-                          <label
-                            className="custom-control-label"
-                            htmlFor=" customCheckLogin"
-                          >
-                            <span>Remember me</span>
-                          </label>
-                        </div>
                         <div className="text-center">
                           <Button
                             className="my-4"